diff --git a/package-lock.json b/package-lock.json index fe0fc8a..19edb1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,9 +33,7 @@ "postcss-nesting": "^13.0.0", "postcss-url": "^10.1.3", "prettier": "^3.3.3", - "resolve-url-loader": "^5.0.0", - "turbo": "^2.1.2", - "webpack-remove-empty-scripts": "^1.0.4" + "turbo": "^2.1.2" }, "engines": { "node": "20", @@ -6109,20 +6107,6 @@ "node": ">=0.4.0" } }, - "node_modules/adjust-sourcemap-loader": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz", - "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==", - "dev": true, - "license": "MIT", - "dependencies": { - "loader-utils": "^2.0.0", - "regex-parser": "^2.2.11" - }, - "engines": { - "node": ">=8.9" - } - }, "node_modules/adm-zip": { "version": "0.5.16", "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.16.tgz", @@ -6300,20 +6284,6 @@ "node": ">=4" } }, - "node_modules/ansis": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/ansis/-/ansis-1.5.2.tgz", - "integrity": "sha512-T3vUABrcgSj/HXv27P+A/JxGk5b/ydx0JjN3lgjBTC2iZUFxQGjh43zCzLSbU4C1QTgmx9oaPeWNJFM+auI8qw==", - "dev": true, - "license": "ISC", - "engines": { - "node": ">=12.13" - }, - "funding": { - "type": "patreon", - "url": "https://patreon.com/biodiscus" - } - }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -20812,13 +20782,6 @@ "@babel/runtime": "^7.8.4" } }, - "node_modules/regex-parser": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.3.0.tgz", - "integrity": "sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==", - "dev": true, - "license": "MIT" - }, "node_modules/regexp.prototype.flags": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", @@ -20980,40 +20943,6 @@ "node": ">=8" } }, - "node_modules/resolve-url-loader": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz", - "integrity": "sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==", - "dev": true, - "license": "MIT", - "dependencies": { - "adjust-sourcemap-loader": "^4.0.0", - "convert-source-map": "^1.7.0", - "loader-utils": "^2.0.0", - "postcss": "^8.2.14", - "source-map": "0.6.1" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/resolve-url-loader/node_modules/convert-source-map": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", - "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", - "dev": true, - "license": "MIT" - }, - "node_modules/resolve-url-loader/node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/resolve.exports": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz", @@ -25022,26 +24951,6 @@ "node": ">=8" } }, - "node_modules/webpack-remove-empty-scripts": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/webpack-remove-empty-scripts/-/webpack-remove-empty-scripts-1.0.4.tgz", - "integrity": "sha512-W/Vd94oNXMsQam+W9G+aAzGgFlX1aItcJpkG3byuHGDaxyK3H17oD/b5RcqS/ZHzStIKepksdLDznejDhDUs+Q==", - "dev": true, - "license": "ISC", - "dependencies": { - "ansis": "1.5.2" - }, - "engines": { - "node": ">=12.14" - }, - "funding": { - "type": "patreon", - "url": "https://patreon.com/biodiscus" - }, - "peerDependencies": { - "webpack": ">=5.32.0" - } - }, "node_modules/webpack-sources": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", @@ -25542,7 +25451,8 @@ "name": "@dekode/block-theme", "version": "1.0.0", "devDependencies": { - "@wordpress/scripts": "^30.0.2" + "@wordpress/scripts": "^30.0.2", + "fast-glob": "^3.3.2" } } } diff --git a/package.json b/package.json index e3004be..f5742ef 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,7 @@ "postcss-nesting": "^13.0.0", "postcss-url": "^10.1.3", "prettier": "^3.3.3", - "resolve-url-loader": "^5.0.0", - "turbo": "^2.1.2", - "webpack-remove-empty-scripts": "^1.0.4" + "turbo": "^2.1.2" }, "scripts": { "create-block": "cd packages/plugins && npx dekodeinteraktiv/create-project-base-block", diff --git a/packages/themes/block-theme/package.json b/packages/themes/block-theme/package.json index 50dbeb3..b123c8b 100644 --- a/packages/themes/block-theme/package.json +++ b/packages/themes/block-theme/package.json @@ -3,7 +3,8 @@ "private": true, "version": "1.0.0", "devDependencies": { - "@wordpress/scripts": "^30.0.2" + "@wordpress/scripts": "^30.0.2", + "fast-glob": "^3.3.2" }, "scripts": { "build": "wp-scripts build --webpack-copy-php", diff --git a/packages/themes/block-theme/webpack.config.js b/packages/themes/block-theme/webpack.config.js index 37b9e87..31a017f 100644 --- a/packages/themes/block-theme/webpack.config.js +++ b/packages/themes/block-theme/webpack.config.js @@ -1,5 +1,3 @@ -/* eslint-disable import/no-extraneous-dependencies */ - /** * External dependencies */ @@ -9,10 +7,13 @@ const path = require('path'); /** * WordPress dependencies */ -const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin'); -const scriptConfig = require('@wordpress/scripts/config/webpack.config'); const { getWebpackEntryPoints } = require('@wordpress/scripts/utils/config'); +/** + * Internal dependencies + */ +const rootConfig = require('../../../webpack.config'); + function getPackageEntryPoints() { // Use default entry points from wp-scripts. const entries = getWebpackEntryPoints('script')(); @@ -28,29 +29,6 @@ function getPackageEntryPoints() { } module.exports = { - ...scriptConfig, + ...rootConfig, entry: getPackageEntryPoints(), - plugins: [ - ...scriptConfig.plugins.filter( - (plugin) => - plugin.constructor.name !== 'DependencyExtractionWebpackPlugin', - ), - new DependencyExtractionWebpackPlugin({ - injectPolyfill: true, - requestToHandle(request) { - if (request.startsWith('@t2/')) { - return `t2-${request.substring(4)}`; - } - - return undefined; - }, - requestToExternal(request) { - if (request.startsWith('@t2/')) { - return ['t2', request.substring(4)]; - } - - return undefined; - }, - }), - ], }; diff --git a/webpack.config.js b/webpack.config.js index 306807a..60f5fd2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,137 +1,52 @@ -/* eslint-disable import/no-extraneous-dependencies, @wordpress/dependency-group */ - /** * External dependencies */ -const MiniCSSExtractPlugin = require('mini-css-extract-plugin'); -const path = require('path'); const BrowserSyncPlugin = require('browser-sync-v3-webpack-plugin'); -const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); -const webpack = require('webpack'); require('dotenv').config(); /** * WordPress dependencies */ const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin'); -const defaultConfig = require('./node_modules/@wordpress/scripts/config/webpack.config'); -const { getWebpackEntryPoints } = require('@wordpress/scripts/utils/config'); +const scriptConfig = require('@wordpress/scripts/config/webpack.config'); -/** - * Patches config to use resolve-url-loader for relative paths in SCSS files - * It will be possible to use './images/png.png' inside the SCSS, - * - * All paths will be treated as relative to file, not project root. - */ -for (const rule of defaultConfig.module.rules) { - if ('any-filename-to-test.scss'.match(rule.test)) { - const sassLoaderConfig = rule.use.pop(); +module.exports = { + ...scriptConfig, + plugins: [ + ...scriptConfig.plugins.filter( + (plugin) => + ![ + 'DependencyExtractionWebpackPlugin', + 'BrowserSyncPlugin', + ].includes(plugin.constructor.name), + ), + new DependencyExtractionWebpackPlugin({ + injectPolyfill: true, + requestToHandle(request) { + if (request.startsWith('@t2/')) { + return `t2-${request.substring(4)}`; + } + + return undefined; + }, + requestToExternal(request) { + if (request.startsWith('@t2/')) { + return ['t2', request.substring(4)]; + } - // We mutate default config to change behaviour. - rule.use = [ - ...rule.use, - // resolve-url-loader should be executed right after sass-loader. - { - loader: require.resolve('resolve-url-loader'), - options: { - sourceMap: sassLoaderConfig.options.sourceMap, - removeCR: true, - }, + return undefined; }, + }), + new BrowserSyncPlugin( { - ...sassLoaderConfig, - options: { - ...sassLoaderConfig.options, - sourceMap: true, // It's required to have sourceMap for resolve-url-loader, resolve-url-loader will keep or drop maps on it's step. - }, + files: ['packages/**/*.css', 'packages/**/*.js'], + proxy: process.env.BROWSER_SYNC_PROXY ?? process.env.WP_HOME, + port: process.env.BROWSER_SYNC_PORT ?? 3002, + https: 'true' === process.env.BROWSER_SYNC_HTTPS, }, - ]; - } -} - -const config = { - ...defaultConfig, - entry: getWebpackEntryPoints(), - optimization: { - ...defaultConfig.optimization, - removeEmptyChunks: true, - - splitChunks: { - cacheGroups: { - internalStyle: { - type: 'css/mini-extract', - test: /[\\/]+?\.(sc|sa|c)ss$/, - chunks: 'all', - enforce: true, - }, - default: false, + { + reload: false, }, - }, - }, - resolve: { - ...defaultConfig.resolve, - alias: { - ...defaultConfig.resolve.alias, - components: path.resolve(__dirname, 'packages', 'components'), - }, - }, - - // Hides rarely used information for more compact appearance of console. - stats: { - children: false, - all: false, - entrypoints: true, - warnings: true, - errors: true, - hash: false, - timings: true, - errorDetails: true, - builtAt: true, - }, - - plugins: [ - new MiniCSSExtractPlugin({ filename: '[name].css' }), - - /** - * It removes empty JS files, when we use CSS/SCSS as main entrypoint of asset. - * - * It's possible to remove also `.asset.php` by writing custom version - */ - new RemoveEmptyScriptsPlugin(), - - new DependencyExtractionWebpackPlugin({ injectPolyfill: true }), - - (process.argv || []).includes('--progress') && - new webpack.ProgressPlugin(), - ].filter(Boolean), + ), + ], }; - -if ('true' === process.env.BROWSER_SYNC_ENABLE) { - const browserSyncConfig = { - ...defaultConfig, - name: 'BrowserSync', - plugins: [ - new BrowserSyncPlugin( - { - files: ['packages/**/*.css', 'packages/**/*.js'], - proxy: - process.env.BROWSER_SYNC_PROXY ?? process.env.WP_HOME, - port: process.env.BROWSER_SYNC_PORT ?? 3002, - https: 'true' === process.env.BROWSER_SYNC_HTTPS, - }, - { - reload: false, - }, - ), - ].filter(Boolean), - }; - - config.push(browserSyncConfig); -} - -/** - * We can use Multi-Config mode to build packages in 'sandboxed' mode and parallel. - * - * https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations - */ -module.exports = config;