Add PostCSS and Tailwind presets

- Sync dependency versions
- Bump WP scripts to make building possible with PostCSS

config/webpack/webpack.config.base.js

@@ -89,7 +89,7 @@ module.exports = function( { entry, output, combinedOutputFile, cssExtractFileNa
 					}
 				},
 			} ),
-			new MiniCSSExtractPlugin( { esModule: false, filename: cssExtractFileName } ),
+			new MiniCSSExtractPlugin( { filename: cssExtractFileName } ),
 			process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin( {
 				analyzerPort: analyzerPort++,
 			} ),

package.json

@@ -36,17 +36,20 @@
   "dependencies": {},
   "devDependencies": {
     "@lodder/grunt-postcss": "^3.1.1",
+    "@babel/core": "^7.18.5",
     "@slack/webhook": "^5.0.2",
-    "@tailwindcss/forms": "^0.5.0",
+    "@tailwindcss/forms": "^0.5.2",
     "@typescript-eslint/eslint-plugin": "^4.24.0",
     "@typescript-eslint/parser": "^4.24.0",
     "@wordpress/dependency-extraction-webpack-plugin": "^3.1.0",
-    "@wordpress/scripts": "^14.1.1",
+    "@wordpress/scripts": "^17.1.0",
     "@wordproof/uikit": "1.0.41",
-    "@yoast/babel-preset": "^1.0.0",
+    "@yoast/babel-preset": "^1.0.1",
     "@yoast/browserslist-config": "^1.2.2",
+    "@yoast/postcss-preset": "^1.0.1",
     "@yoast/grunt-plugin-tasks": "^2.3",
-    "autoprefixer": "^10.0.0",
+    "@yoast/tailwindcss-preset": "^2.0.0",
+    "autoprefixer": "^10.4.7",
     "babel-plugin-dynamic-import-webpack": "^1.1.0",
     "colors": "1.4.0",
     "core-js": "^2.6.12",
@@ -68,13 +71,12 @@
     "jest-styled-components": "^7.0.3",
     "lerna": "^4.0.0",
     "node-fetch": "^2.6.1",
-    "postcss": "^8.4.12",
-    "postcss-import": "^14.0.2",
     "postcss-loader": "^4.0.0",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^9.1.0",
     "react-test-renderer": "^16.14.0",
     "readline-sync": "^1.4.9",
     "shusher": "^0.1.1",
-    "tailwindcss": "^3.0.11",
     "tmp": "^0.1.0",
     "typescript": "^4.2.4"
   },

packages/babel-preset/package.json

@@ -12,10 +12,10 @@
   "license": "GPL-3.0",
   "private": false,
   "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@wordpress/babel-preset-default": "^6.5.1"
+    "@babel/plugin-transform-runtime": "^7.17.12",
+    "@wordpress/babel-preset-default": "^6.13.0"
   },
   "peerDependencies": {
-    "@babel/core": "^7.17.2"
+    "@babel/core": "^7.18.5"
   }
 }

packages/postcss-preset/package.json

@@ -7,12 +7,12 @@
   "license": "GPL-3.0",
   "private": false,
   "dependencies": {
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.7",
     "cssnano": "^5.0.17",
     "postcss-import": "^14.0.2",
-    "tailwindcss": "^3.0.22"
+    "tailwindcss": "^3.0.24"
   },
   "peerDependencies": {
-    "postcss": "^8.4.6"
+    "postcss": "^8.4.14"
   }
 }

packages/tailwindcss-preset/package.json

@@ -7,7 +7,7 @@
   "license": "GPL-3.0",
   "private": false,
   "peerDependencies": {
-    "@tailwindcss/forms": "^0.4.0",
-    "tailwindcss": "^3.0.22"
+    "@tailwindcss/forms": "^0.5.2",
+    "tailwindcss": "^3.0.24"
   }
 }

packages/ui-library/package.json

@@ -28,11 +28,11 @@
     "lint": "eslint src --max-warnings=0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.3",
-    "@babel/core": "^7.15.5",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/eslint-plugin": "^7.16.5",
-    "@babel/parser": "^7.16.8",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.5",
+    "@babel/eslint-parser": "^7.18.2",
+    "@babel/eslint-plugin": "^7.17.7",
+    "@babel/parser": "^7.18.5",
     "@storybook/addon-a11y": "^6.4.14",
     "@storybook/addon-essentials": "^6.3.8",
     "@storybook/addon-links": "^6.3.8",
@@ -45,18 +45,18 @@
     "@tailwindcss/forms": "^0.4.0",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "@wordpress/jest-preset-default": "^8.0.1",
-    "@yoast/babel-preset": "^1.0.0",
-    "@yoast/jest-preset": "^1.0.0",
-    "@yoast/postcss-preset": "^1.0.0",
+    "@yoast/babel-preset": "^1.0.1",
+    "@yoast/jest-preset": "^1.0.1",
+    "@yoast/postcss-preset": "^1.0.1",
     "@yoast/tailwindcss-preset": "^2.0.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.5",
     "eslint": "^7.32.0",
     "eslint-config-yoast": "^5.0.17",
     "eslint-plugin-react": "^7.26.0",
     "jest": "^27.5.1",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.14",
     "puppeteer": "^13.4.0",
-    "tailwindcss": "^3.0.23"
+    "tailwindcss": "^3.0.24"
   },
   "dependencies": {
     "@headlessui/react": "^1.5.0",

postcss.config.js

@@ -0,0 +1,3 @@
+const preset = require( "@yoast/postcss-preset" );
+
+module.exports = preset;