woocommerce/plugins/woocommerce-blocks/bin/webpack-rtl-plugin.js

95 lines
3.2 KiB
JavaScript
Raw Normal View History

Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013) * Upgrade terser-webpack-plugin to version 4.2.3 * Upgrade webpack-bundle-analyzer to 4.7.0 * Upgrade to Webpack version 5 * Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0 * Upgrade dependency copy-webpack-plugin to version 11.0.0 * Upgrade dependency terser-webpack-plugin to version 5.3.6 * Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin * Replace module.issuer with the new ModuleGraph API There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one. * Upgrade babel and babel plugins to latest version * Replace jsonpFunction with the new uniqueName property Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''. * Replace cacheDirectory inline configuration with options.cacheDirectory * Upgrade @wordpress/e2e-tests dependency to version 5.6.0 * Remove babel-plugin-transform-react-jsx dependency Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default * Remove unnecessary Babel dependencies Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package. * Upgrade puppeteer dependency to version 16.2.0 * Remove caret from package.json dependencies * Fix Storybook build error This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5. * Fix package-lock.json after merging with trunk * Add own webpack-rtl-plugin implementation to the project Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that. This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support) * Change conditional clause to be multiline * Fix package-lock.json after merge with trunk * Fix package-lock.json after merge with trunk * Rename files to fix ESLint errors This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code. * Fix package-lock.json file * Add is-plain-obj module to the transformIgnorePatterns of jest config * Update package-lock.json * Fix package-lock.json * Upgrade @wordpress/i18n dependency to version 4.31.0 * Update package-lock.json * Update composer lock file * Fix Webpack config for Webpack 5 * Add the package-lock.json * Remove unsupported config from webpack * Fix error with Webpack build * Add wait for network idle to the tests * Attempt to fix e2e test * Restore promise.all * Upgrade puppeteer to v17.1.3 * Upgrade expect-puppeteer * Update expect-puppeteer * Downgrade expect-puppeteer * Revert "Upgrade puppeteer to v17.1.3" This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3. * Upgrade Puppeteer to version 17.1.3 * Fix executionContext.frame is not a function error * Fix e2e tests * Remove isExperimentalBuild from Product Gallery inner blocks * Upgrade Webpack and Webpack-cli to latest version * Upgrade postcss and mini-css plugins * Fix error with mini-cart block * Fix styling error with filter blocks * Fix issue when running unit tests * Fix storybook script not loading * Fix a11y issue in Storybook * Fix error when multiple isExperimentalBuild was being used * Prevent error when layout is not present in the attributes object * Update `chunkIds` to `named` in Webpack * Add cache groups to the Webpack configs
2023-09-20 20:31:52 +00:00
/*
Adapted from @automattic/webpack-rtl-plugin, that was originally adapted and released by Romain Berger under the MIT License (MIT):
MIT License
Copyright (c) 2016 Romain Berger
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
const rtlcss = require( 'rtlcss' );
const { ConcatSource } = require( 'webpack' ).sources;
const pluginName = 'WebpackRTLPlugin';
class WebpackRTLPlugin {
constructor( options ) {
this.options = {
options: {},
plugins: [],
filenameSuffix: null,
...options,
};
this.cache = new WeakMap();
}
apply( compiler ) {
compiler.hooks.thisCompilation.tap( pluginName, ( compilation ) => {
compilation.hooks.processAssets.tapPromise(
{
name: pluginName,
stage: compilation.PROCESS_ASSETS_STAGE_DERIVED,
},
async ( assets ) => {
const cssRe = /\.css(?:$|\?)/;
return Promise.all(
Array.from( compilation.chunks )
.flatMap( ( chunk ) =>
// Collect all files form all chunks, and generate an array of {chunk, file} objects
Array.from( chunk.files ).map( ( asset ) => ( {
chunk,
asset,
} ) )
)
.filter( ( { asset } ) => cssRe.test( asset ) )
.map( async ( { chunk, asset } ) => {
if ( this.options.test ) {
const re = new RegExp( this.options.test );
if ( ! re.test( asset ) ) {
return;
}
}
// Compute the filename
const filename = asset.replace(
cssRe,
this.options.filenameSuffix || `.rtl$&`
);
const assetInstance = assets[ asset ];
chunk.files.add( filename );
if ( this.cache.has( assetInstance ) ) {
const cachedRTL =
this.cache.get( assetInstance );
assets[ filename ] = cachedRTL;
} else {
const baseSource = assetInstance.source();
const rtlSource = rtlcss.process(
baseSource,
this.options.options,
this.options.plugins
);
// Save the asset
assets[ filename ] = new ConcatSource(
rtlSource
);
this.cache.set(
assetInstance,
assets[ filename ]
);
}
} )
);
}
);
} );
}
}
module.exports = WebpackRTLPlugin;