css-mqpacker-webpack-plugin
Advanced tools
+8
-4
| { | ||
| "name": "css-mqpacker-webpack-plugin", | ||
| "version": "0.9.0", | ||
| "version": "0.10.0-rc.0", | ||
| "description": "The Webpack plugin for pack same CSS media query rules into one using PostCSS", | ||
@@ -9,5 +9,2 @@ "main": "src/index.js", | ||
| }, | ||
| "dependencies": { | ||
| "last-call-webpack-plugin": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
@@ -33,2 +30,9 @@ "@hail2u/css-mqpacker": "github:hail2u/node-css-mqpacker#ee5119f", | ||
| ], | ||
| "files": [ | ||
| "LICENSE", | ||
| "css-mqpacker", | ||
| "src", | ||
| "package.json", | ||
| "README.md" | ||
| ], | ||
| "repository": { | ||
@@ -35,0 +39,0 @@ "type": "git", |
+3
-3
@@ -37,5 +37,5 @@ # css-mqpacker-webpack-plugin | ||
| ### `regExp` | ||
| ### `test` | ||
| Type: `RegExp` Default: `/\.css$/i` | ||
| Type: `test` Default: `/\.css(\?.*)?$/i` | ||
@@ -60,3 +60,3 @@ A regular expression to match the asset name that the processor handles. | ||
| new CSSMQPackerPlugin({ | ||
| regExp: /\.css$/i, | ||
| test: /\.css(\?.*)?$/i, | ||
| sort: false, | ||
@@ -63,0 +63,0 @@ }), |
+66
-25
| const postcss = require('postcss'); | ||
| const LastCallWebpackPlugin = require('last-call-webpack-plugin'); | ||
| const mqpacker = require('../css-mqpacker/index.js'); | ||
| class CSSMQPackerPlugin extends LastCallWebpackPlugin { | ||
| constructor({ | ||
| regExp = /\.css$/i, | ||
| canPrint = true, | ||
| sort = false, | ||
| } = {}) { | ||
| super({ | ||
| assetProcessors: [ | ||
| { | ||
| regExp, | ||
| canPrint, | ||
| phase: LastCallWebpackPlugin.PHASES.OPTIMIZE_CHUNK_ASSETS, | ||
| class CssMqpackerPlugin { | ||
| constructor(options = {}) { | ||
| const { | ||
| test = /\.css(\?.*)?$/i, | ||
| include, | ||
| exclude, | ||
| sort = false, | ||
| } = options; | ||
| async processor(_, asset) { | ||
| const { css } = await postcss([ | ||
| mqpacker({ sort }), | ||
| ]).process(asset.source()); | ||
| this.options = { | ||
| test, | ||
| include, | ||
| exclude, | ||
| sort, | ||
| }; | ||
| } | ||
| return css; | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
| async optimize(compiler, compilation, assets) { | ||
| const { RawSource } = compiler.webpack.sources; | ||
| const matchObject = compiler.webpack.ModuleFilenameHelpers.matchObject.bind( | ||
| undefined, | ||
| this.options, | ||
| ); | ||
| const assetsForMinify = Object | ||
| .keys(typeof assets === 'undefined' ? compilation.assets : assets) | ||
| .filter((name) => matchObject(name)) | ||
| .map((name) => { | ||
| const { source } = compilation.getAsset(name); | ||
| return { name, inputSource: source }; | ||
| }); | ||
| const scheduledTasks = []; | ||
| const mqp = postcss([ | ||
| mqpacker({ | ||
| sort: this.options.sort, | ||
| }), | ||
| ]); | ||
| for (const asset of assetsForMinify) { | ||
| const task = async () => { | ||
| const { name, inputSource } = asset; | ||
| const { css } = await mqp.process(inputSource.source()); | ||
| compilation.updateAsset(name, new RawSource(css)); | ||
| }; | ||
| scheduledTasks.push(task()); | ||
| } | ||
| Promise.all(scheduledTasks); | ||
| } | ||
| buildPluginDescriptor() { | ||
| return { name: 'css-mqpacker-webpack-plugin' }; | ||
| apply(compiler) { | ||
| const pluginName = this.constructor.name; | ||
| const processOptions = { | ||
| name: pluginName, | ||
| stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE, | ||
| additionalAssets: true, | ||
| }; | ||
| compiler.hooks.compilation.tap(pluginName, (compilation) => { | ||
| compilation.hooks.processAssets.tapPromise(processOptions, (assets) => { | ||
| return this.optimize(compiler, compilation, assets); | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| module.exports = CSSMQPackerPlugin; | ||
| module.exports = CssMqpackerPlugin; |
9485
12.64%2
-33.33%212
17.13%- Removed
- Removed
- Removed
- Removed
- Removed