diff --git a/.eslintrc.js b/.eslintrc.js index 6178fff..c1557a4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,7 +1,7 @@ module.exports = { extends: [ - 'plugin:@wordpress/eslint-plugin/recommended', - 'plugin:eslint-comments/recommended', + 'plugin:@wordpress/eslint-plugin/recommended-with-formatting', + 'plugin:prettier/recommended', ], parserOptions: { ecmaVersion: 2021, diff --git a/package-lock.json b/package-lock.json index 31ed0a0..5e76955 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,12 +13,15 @@ "@babel/plugin-transform-class-static-block": "7.24.6", "@evilmartians/lefthook": "1.6.12", "@wordpress/env": "9.10.0", + "@wordpress/eslint-plugin": "^18.1.0", "@wordpress/prettier-config": "3.15.0", "@wordpress/scripts": "^27.9.0", + "autoprefixer": "^10.4.19", "clean-webpack-plugin": "^4.0.0", "copy-webpack-plugin": "^12.0.2", "cross-env": "^7.0.3", "eslint-plugin-eslint-comments": "3.2.0", + "eslint-plugin-prettier": "^5.1.3", "eslint-webpack-plugin": "^4.2.0", "glob": "^10.4.1", "html_codesniffer": "2.5.1", @@ -29,6 +32,8 @@ "postcss-loader": "^8.1.1", "postcss-move-props-to-bg-image-query": "^4.0.0", "postcss-preset-env": "^9.5.5", + "postcss-rtl": "^2.0.0", + "prettier": "3.2.5", "puppeteer-core": "22.10.0", "sass-loader": "^14.2.1", "stylelint-webpack-plugin": "^5.0.1", @@ -9558,6 +9563,61 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/css-select/node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dev": true, + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/css-select/node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/css-select/node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dev": true, + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/css-select/node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dev": true, + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/css-tree": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", @@ -10304,20 +10364,16 @@ } }, "node_modules/dom-serializer": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", - "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", + "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==", "dev": true, "dependencies": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.2", - "entities": "^4.2.0" - }, - "funding": { - "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + "domelementtype": "^2.0.1", + "entities": "^2.0.0" } }, - "node_modules/domelementtype": { + "node_modules/dom-serializer/node_modules/domelementtype": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", @@ -10329,6 +10385,21 @@ } ] }, + "node_modules/dom-serializer/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "dev": true, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", + "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", + "dev": true + }, "node_modules/domexception": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz", @@ -10343,32 +10414,22 @@ } }, "node_modules/domhandler": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", - "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", + "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", "dev": true, "dependencies": { - "domelementtype": "^2.3.0" - }, - "engines": { - "node": ">= 4" - }, - "funding": { - "url": "https://github.com/fb55/domhandler?sponsor=1" + "domelementtype": "1" } }, "node_modules/domutils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", - "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", "dev": true, "dependencies": { - "dom-serializer": "^2.0.0", - "domelementtype": "^2.3.0", - "domhandler": "^5.0.3" - }, - "funding": { - "url": "https://github.com/fb55/domutils?sponsor=1" + "dom-serializer": "0", + "domelementtype": "1" } }, "node_modules/dot-case": { @@ -13552,62 +13613,6 @@ "readable-stream": "^3.1.1" } }, - "node_modules/htmlparser2/node_modules/dom-serializer": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", - "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==", - "dev": true, - "dependencies": { - "domelementtype": "^2.0.1", - "entities": "^2.0.0" - } - }, - "node_modules/htmlparser2/node_modules/dom-serializer/node_modules/domelementtype": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", - "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ] - }, - "node_modules/htmlparser2/node_modules/dom-serializer/node_modules/entities": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", - "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", - "dev": true, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, - "node_modules/htmlparser2/node_modules/domelementtype": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", - "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", - "dev": true - }, - "node_modules/htmlparser2/node_modules/domhandler": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", - "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", - "dev": true, - "dependencies": { - "domelementtype": "1" - } - }, - "node_modules/htmlparser2/node_modules/domutils": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", - "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", - "dev": true, - "dependencies": { - "dom-serializer": "0", - "domelementtype": "1" - } - }, "node_modules/htmlparser2/node_modules/entities": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", @@ -21719,6 +21724,21 @@ "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==", "dev": true }, + "node_modules/postcss-rtl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-rtl/-/postcss-rtl-2.0.0.tgz", + "integrity": "sha512-vFu78CvaGY9BafWRHNgDm6OjUxzRCWWCrp+KtnyXdgwibLwb/j5ls8Z/ubvOsk9B/Q2NLwSPrXRARKMaa9RBmA==", + "dev": true, + "dependencies": { + "rtlcss": "4.0.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, "node_modules/postcss-safe-parser": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", @@ -21969,7 +21989,6 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", "dev": true, - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -23015,18 +23034,21 @@ } }, "node_modules/rtlcss": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz", - "integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.0.0.tgz", + "integrity": "sha512-j6oypPP+mgFwDXL1JkLCtm6U/DQntMUqlv5SOhpgHhdIE+PmBcjrtAHIpXfbIup47kD5Sgja9JDsDF1NNOsBwQ==", "dev": true, "dependencies": { - "find-up": "^5.0.0", + "escalade": "^3.1.1", "picocolors": "^1.0.0", - "postcss": "^8.3.11", + "postcss": "^8.4.6", "strip-json-comments": "^3.1.1" }, "bin": { "rtlcss": "bin/rtlcss.js" + }, + "engines": { + "node": ">=12.0.0" } }, "node_modules/rtlcss-webpack-plugin": { @@ -23039,7 +23061,7 @@ "rtlcss": "^3.5.0" } }, - "node_modules/rtlcss/node_modules/find-up": { + "node_modules/rtlcss-webpack-plugin/node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", @@ -23055,7 +23077,7 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/rtlcss/node_modules/locate-path": { + "node_modules/rtlcss-webpack-plugin/node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", @@ -23070,7 +23092,7 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/rtlcss/node_modules/p-locate": { + "node_modules/rtlcss-webpack-plugin/node_modules/p-locate": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", @@ -23085,6 +23107,21 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/rtlcss-webpack-plugin/node_modules/rtlcss": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz", + "integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==", + "dev": true, + "dependencies": { + "find-up": "^5.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.3.11", + "strip-json-comments": "^3.1.1" + }, + "bin": { + "rtlcss": "bin/rtlcss.js" + } + }, "node_modules/run-async": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/run-async/-/run-async-3.0.0.tgz", diff --git a/package.json b/package.json index e683b33..1242363 100644 --- a/package.json +++ b/package.json @@ -21,18 +21,19 @@ "node": ">=20", "npm": ">=10" }, - "dependencies": { - }, "devDependencies": { "@babel/plugin-transform-class-static-block": "7.24.6", "@evilmartians/lefthook": "1.6.12", "@wordpress/env": "9.10.0", + "@wordpress/eslint-plugin": "^18.1.0", "@wordpress/prettier-config": "3.15.0", "@wordpress/scripts": "^27.9.0", + "autoprefixer": "^10.4.19", "clean-webpack-plugin": "^4.0.0", "copy-webpack-plugin": "^12.0.2", "cross-env": "^7.0.3", "eslint-plugin-eslint-comments": "3.2.0", + "eslint-plugin-prettier": "^5.1.3", "eslint-webpack-plugin": "^4.2.0", "glob": "^10.4.1", "html_codesniffer": "2.5.1", @@ -43,8 +44,9 @@ "postcss-loader": "^8.1.1", "postcss-move-props-to-bg-image-query": "^4.0.0", "postcss-preset-env": "^9.5.5", + "postcss-rtl": "^2.0.0", + "prettier": "3.2.5", "puppeteer-core": "22.10.0", - "rtlcss-webpack-plugin": "4.0.7", "sass-loader": "^14.2.1", "stylelint-webpack-plugin": "^5.0.1", "svg-transform-loader": "^2.0.13", diff --git a/webpack.config.js b/webpack.config.js index 1779013..6da648b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,7 +6,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); const StylelintPlugin = require('stylelint-webpack-plugin'); const { glob } = require('glob'); -const RtlCssPlugin = require('rtlcss-webpack-plugin'); +// eslint-disable-next-line import/no-extraneous-dependencies +const PostCssRtl = require('postcss-rtl'); // Dynamically generate entry points for each file inside 'assets/scss/blocks' const coreBlockEntryPaths = glob @@ -17,7 +18,7 @@ const coreBlockEntryPaths = glob .reduce((acc, filePath) => { const entryKey = filePath.split(/[\\/]/).pop().replace('.scss', ''); const blockPath = filePath.split(/[\\/]/).slice(-2, -1)[0]; - acc[`blocks/${blockPath}/${entryKey}`] = filePath; + acc[`css/blocks/${blockPath}/${entryKey}`] = filePath; return acc; }, {}); @@ -48,7 +49,18 @@ module.exports = { use: [ MiniCssExtractPlugin.loader, 'css-loader', - 'postcss-loader', + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + // eslint-disable-next-line import/no-extraneous-dependencies + require('autoprefixer'), + PostCssRtl(), + ], + }, + }, + }, 'sass-loader', ], }, @@ -80,10 +92,6 @@ module.exports = { }, }), - new RtlCssPlugin({ - filename: '[name]-rtl.css', - }), - new CopyPlugin({ patterns: [ {