Lazy CSS: Must be red, but turn green when pressing this button.

But turn orange, when pressing this button. Additional clicks have no effect.

diff --git a/test/manual/src/index.js b/test/manual/src/index.js index 82b530f9..92761702 100644 --- a/test/manual/src/index.js +++ b/test/manual/src/index.js @@ -3,6 +3,25 @@ /* eslint-disable no-console, camelcase, no-global-assign */ import './initial.css'; +import './simple.css'; +import classes from './simple.module.css'; + +console.log('___CLASSES__'); +console.log(classes); + +function replaceClass(originalClass, newClass) { + const nodes = document.querySelectorAll(`.${originalClass}`); + + nodes.forEach((node) => { + const { classList } = node; + classList.remove(originalClass); + classList.add(newClass); + }); +} + +Object.keys(classes).forEach((localClass) => { + replaceClass(localClass, classes[localClass]); +}); const handleError = (err) => { document.querySelector('.errors').textContent += `\n${err.toString()}`; diff --git a/test/manual/src/simple.css b/test/manual/src/simple.css new file mode 100644 index 00000000..af62930f --- /dev/null +++ b/test/manual/src/simple.css @@ -0,0 +1,11 @@ +.r { + color: red; +} + +.g { + color: green; +} + +.b { + color: blue; +} diff --git a/test/manual/src/simple.module.css b/test/manual/src/simple.module.css new file mode 100644 index 00000000..c3ebbd0e --- /dev/null +++ b/test/manual/src/simple.module.css @@ -0,0 +1,11 @@ +.rr { + color: red; +} + +.gg { + color: green; +} + +.bb { + color: blue; +} diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js index 4e992ce6..0b0a2e29 100644 --- a/test/manual/webpack.config.js +++ b/test/manual/webpack.config.js @@ -1,7 +1,18 @@ const Self = require('../../'); +const ENABLE_HMR = + typeof process.env.ENABLE_HMR !== 'undefined' + ? Boolean(process.env.ENABLE_HMR) + : false; + +const ENABLE_ES_MODULE = + typeof process.env.ES_MODULE !== 'undefined' + ? Boolean(process.env.ES_MODULE) + : false; + module.exports = { mode: 'development', + devtool: 'cheap-source-map', output: { chunkFilename: '[contenthash].js', publicPath: '/dist/', @@ -11,7 +22,42 @@ module.exports = { rules: [ { test: /\.css$/, - use: ['style-loader', Self.loader, 'css-loader'], + exclude: [/\.module\.css$/i], + use: [ + { + loader : 'style-loader', + }, + { + loader: Self.loader, + options: { + hmr: ENABLE_HMR, + }, + }, + { + loader: 'css-loader', + options: { + esModule: ENABLE_ES_MODULE, + }, + }, + ], + }, + { + test: /\.module\.css$/i, + use: [ + { + loader: Self.loader, + options: { + hmr: ENABLE_HMR, + }, + }, + { + loader: 'css-loader', + options: { + modules: true, + esModule: ENABLE_ES_MODULE, + }, + }, + ], }, ], }, @@ -19,7 +65,7 @@ module.exports = { new Self({ filename: '[name].css', chunkFilename: '[contenthash].css', - disableAsync({ module }) { + disableExtract({ module }) { let ret = false; if (module.content.indexOf('async-disabled') > -1) { ret = true; diff --git a/test/validate-loader-options.test.js b/test/validate-loader-options.test.js new file mode 100644 index 00000000..016e0e83 --- /dev/null +++ b/test/validate-loader-options.test.js @@ -0,0 +1,73 @@ +import { getCompiler, compile } from './helpers'; + +describe('validate options', () => { + const tests = { + publicPath: { + success: ['/public/path/to/'], + failure: [true], + }, + esModule: { + success: [true, false], + failure: [1], + }, + hmr: { + success: [true, false], + failure: [1], + }, + reloadAll: { + success: [true, false], + failure: [1], + }, + unknown: { + success: [], + // TODO failed in next release + // failure: [1, true, false, 'test', /test/, [], {}, { foo: 'bar' }], + }, + }; + + function stringifyValue(value) { + if ( + Array.isArray(value) || + (value && typeof value === 'object' && value.constructor === Object) + ) { + return JSON.stringify(value); + } + + return value; + } + + async function createTestCase(key, value, type) { + it(`should ${ + type === 'success' ? 'successfully validate' : 'throw an error on' + } the "${key}" option with "${stringifyValue(value)}" value`, async () => { + const compiler = getCompiler('simple.js', { [key]: value }); + + let stats; + + try { + stats = await compile(compiler); + } finally { + if (type === 'success') { + expect(stats.hasErrors()).toBe(false); + } else if (type === 'failure') { + const { + compilation: { errors }, + } = stats; + + expect(errors).toHaveLength(1); + expect(() => { + throw new Error(errors[0].error.message); + }).toThrowErrorMatchingSnapshot(); + } + } + }); + } + + for (const [key, values] of Object.entries(tests)) { + for (const type of Object.keys(values)) { + for (const value of values[type]) { + createTestCase(key, value, type); + } + } + } +}); diff --git a/test/validate-plugin-options.test.js b/test/validate-plugin-options.test.js new file mode 100644 index 00000000..dbd51106 --- /dev/null +++ b/test/validate-plugin-options.test.js @@ -0,0 +1,73 @@ +import MiniCssExtractPlugin from '../src'; + +describe('validate options', () => { + const tests = { + filename: { + success: ['[name].css'], + failure: [true], + }, + chunkFilename: { + success: ['[id].css'], + failure: [true], + }, + moduleFilename: { + success: [({ name }) => `${name.replace('/js/', '/css/')}.css`], + failure: [true], + }, + ignoreOrder: { + success: [true, false], + failure: [1], + }, + unknown: { + success: [], + // TODO failed in next release + // failure: [1, true, false, 'test', /test/, [], {}, { foo: 'bar' }], + }, + }; + + function stringifyValue(value) { + if ( + Array.isArray(value) || + (value && typeof value === 'object' && value.constructor === Object) + ) { + return JSON.stringify(value); + } + + return value; + } + + async function createTestCase(key, value, type) { + it(`should ${ + type === 'success' ? 'successfully validate' : 'throw an error on' + } the "${key}" option with "${stringifyValue(value)}" value`, async () => { + let error; + + try { + // eslint-disable-next-line no-new + new MiniCssExtractPlugin({ [key]: value }); + } catch (errorFromPlugin) { + if (errorFromPlugin.name !== 'ValidationError') { + throw errorFromPlugin; + } + + error = errorFromPlugin; + } finally { + if (type === 'success') { + expect(error).toBeUndefined(); + } else if (type === 'failure') { + expect(() => { + throw error; + }).toThrowErrorMatchingSnapshot(); + } + } + }); + } + + for (const [key, values] of Object.entries(tests)) { + for (const type of Object.keys(values)) { + for (const value of values[type]) { + createTestCase(key, value, type); + } + } + } +}); From f0358d07b7cd36127c17c638b117a7caa0c047bb Mon Sep 17 00:00:00 2001 From: Light Leung Date: Tue, 4 Feb 2020 17:02:25 +0800 Subject: [PATCH 22/23] fix wrong modules after disable extraction --- src/index.js | 11 +- test/cases/disable-extract-func/expected/1.js | 116 ++++++++++++++++++ test/cases/disable-extract-func/expected/3.js | 100 +++++++++++++++ 3 files changed, 226 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index ebb7abe9..27f276cd 100644 --- a/src/index.js +++ b/src/index.js @@ -144,7 +144,7 @@ class MiniCssExtractPlugin { apply(compiler) { compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { - const moduleToBeRebuild = new Set(); + let moduleToBeRebuild = new Set(); // eslint-disable-next-line no-param-reassign compilation[MODULE_TYPE] = { moduleToBeRebuild, @@ -456,6 +456,15 @@ class MiniCssExtractPlugin { Promise.all(promises).then(() => callback()); } ); + + // Trigger seal again if there are modules to be rebuilt + compilation.hooks.needAdditionalSeal.tap(pluginName, () => { + if (moduleToBeRebuild.size > 0) { + moduleToBeRebuild = new Set(); + return true; + } + return false; + }); }); } diff --git a/test/cases/disable-extract-func/expected/1.js b/test/cases/disable-extract-func/expected/1.js index 2ef7a859..87620fb6 100644 --- a/test/cases/disable-extract-func/expected/1.js +++ b/test/cases/disable-extract-func/expected/1.js @@ -79,5 +79,121 @@ module.exports = exports; // extracted by mini-css-extract-plugin +/***/ }), +/* 11 */, +/* 12 */, +/* 13 */, +/* 14 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +/* + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra +*/ +// css base code, injected by the css-loader +// eslint-disable-next-line func-names +module.exports = function (useSourceMap) { + var list = []; // return the list of modules as css string + + list.toString = function toString() { + return this.map(function (item) { + var content = cssWithMappingToString(item, useSourceMap); + + if (item[2]) { + return "@media ".concat(item[2], " {").concat(content, "}"); + } + + return content; + }).join(''); + }; // import a list of modules into the list + // eslint-disable-next-line func-names + + + list.i = function (modules, mediaQuery, dedupe) { + if (typeof modules === 'string') { + // eslint-disable-next-line no-param-reassign + modules = [[null, modules, '']]; + } + + var alreadyImportedModules = {}; + + if (dedupe) { + for (var i = 0; i < this.length; i++) { + // eslint-disable-next-line prefer-destructuring + var id = this[i][0]; + + if (id != null) { + alreadyImportedModules[id] = true; + } + } + } + + for (var _i = 0; _i < modules.length; _i++) { + var item = [].concat(modules[_i]); + + if (dedupe && alreadyImportedModules[item[0]]) { + // eslint-disable-next-line no-continue + continue; + } + + if (mediaQuery) { + if (!item[2]) { + item[2] = mediaQuery; + } else { + item[2] = "".concat(mediaQuery, " and ").concat(item[2]); + } + } + + list.push(item); + } + }; + + return list; +}; + +function cssWithMappingToString(item, useSourceMap) { + var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring + + var cssMapping = item[3]; + + if (!cssMapping) { + return content; + } + + if (useSourceMap && typeof btoa === 'function') { + var sourceMapping = toComment(cssMapping); + var sourceURLs = cssMapping.sources.map(function (source) { + return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */"); + }); + return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); + } + + return [content].join('\n'); +} // Adapted from convert-source-map (MIT) + + +function toComment(sourceMap) { + // eslint-disable-next-line no-undef + var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); + var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64); + return "/*# ".concat(data, " */"); +} + +/***/ }), +/* 15 */ +/***/ (function(module, exports, __webpack_require__) { + +// Imports +var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(14); +exports = ___CSS_LOADER_API_IMPORT___(false); +// Module +exports.push([module.i, ".async-import {\n background: black;\n}\n", ""]); +// Exports +module.exports = exports; + + /***/ }) ]]); \ No newline at end of file diff --git a/test/cases/disable-extract-func/expected/3.js b/test/cases/disable-extract-func/expected/3.js index a5acd4f5..ffcd0cd4 100644 --- a/test/cases/disable-extract-func/expected/3.js +++ b/test/cases/disable-extract-func/expected/3.js @@ -59,5 +59,105 @@ exports.push([module.i, ".is-async-1 {\n background: magenta;\n}\n", ""]); module.exports = exports; +/***/ }), +/* 14 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +/* + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra +*/ +// css base code, injected by the css-loader +// eslint-disable-next-line func-names +module.exports = function (useSourceMap) { + var list = []; // return the list of modules as css string + + list.toString = function toString() { + return this.map(function (item) { + var content = cssWithMappingToString(item, useSourceMap); + + if (item[2]) { + return "@media ".concat(item[2], " {").concat(content, "}"); + } + + return content; + }).join(''); + }; // import a list of modules into the list + // eslint-disable-next-line func-names + + + list.i = function (modules, mediaQuery, dedupe) { + if (typeof modules === 'string') { + // eslint-disable-next-line no-param-reassign + modules = [[null, modules, '']]; + } + + var alreadyImportedModules = {}; + + if (dedupe) { + for (var i = 0; i < this.length; i++) { + // eslint-disable-next-line prefer-destructuring + var id = this[i][0]; + + if (id != null) { + alreadyImportedModules[id] = true; + } + } + } + + for (var _i = 0; _i < modules.length; _i++) { + var item = [].concat(modules[_i]); + + if (dedupe && alreadyImportedModules[item[0]]) { + // eslint-disable-next-line no-continue + continue; + } + + if (mediaQuery) { + if (!item[2]) { + item[2] = mediaQuery; + } else { + item[2] = "".concat(mediaQuery, " and ").concat(item[2]); + } + } + + list.push(item); + } + }; + + return list; +}; + +function cssWithMappingToString(item, useSourceMap) { + var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring + + var cssMapping = item[3]; + + if (!cssMapping) { + return content; + } + + if (useSourceMap && typeof btoa === 'function') { + var sourceMapping = toComment(cssMapping); + var sourceURLs = cssMapping.sources.map(function (source) { + return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */"); + }); + return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); + } + + return [content].join('\n'); +} // Adapted from convert-source-map (MIT) + + +function toComment(sourceMap) { + // eslint-disable-next-line no-undef + var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); + var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64); + return "/*# ".concat(data, " */"); +} + /***/ }) ]]); \ No newline at end of file From 40af212c05b7bca0594f5af3d761b0bb9846712a Mon Sep 17 00:00:00 2001 From: Light Leung Date: Thu, 6 Aug 2020 23:55:45 +0800 Subject: [PATCH 23/23] fix wrong modification and update package-lock.json --- package-lock.json | 10 ++++++++++ src/loader.js | 4 +++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 8af4e953..d21d2d09 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13234,6 +13234,16 @@ "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true }, + "style-loader": { + "version": "0.23.1", + "resolved": "https://registry.npm.taobao.org/style-loader/download/style-loader-0.23.1.tgz?cache=0&sync_timestamp=1589720795120&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstyle-loader%2Fdownload%2Fstyle-loader-0.23.1.tgz", + "integrity": "sha1-y5FUYG8+dxq2xKtjcCahBJF02SU=", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "schema-utils": "^1.0.0" + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/src/loader.js b/src/loader.js index 48abf46e..ac356ce4 100644 --- a/src/loader.js +++ b/src/loader.js @@ -228,4 +228,6 @@ export function pitch(request) { }); } -export default function() {} +export default function(source) { + return source; +}