From dcbfadb4245e7f0ce888aafc138cbac27d053915 Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Tue, 17 Dec 2019 15:36:58 +0300 Subject: [PATCH] fix: support ES module syntax (#435) --- package-lock.json | 5 ++-- package.json | 2 +- src/index.js | 20 +++++++++---- src/runtime/injectStylesIntoLinkTag.js | 2 +- test/loader.test.js | 40 ++++++++++++++++++++++++++ test/manual/src/index.js | 8 +++++- test/manual/webpack.config.js | 11 +++++++ 7 files changed, 77 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2e5b2fc8..6032d034 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3901,9 +3901,8 @@ } }, "css-loader": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.3.2.tgz", - "integrity": "sha512-4XSiURS+YEK2fQhmSaM1onnUm0VKWNf6WWBYjkp9YbSDGCBTVZ5XOM6Gkxo8tLgQlzkZOBJvk9trHlDk4gjEYg==", + "version": "github:webpack-contrib/css-loader#63a74b2ccbec74c8e019e66465018c74378b95ad", + "from": "github:webpack-contrib/css-loader#master", "dev": true, "requires": { "camelcase": "^5.3.1", diff --git a/package.json b/package.json index bc7e538f..10ec7902 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "babel-jest": "^24.9.0", "commitlint-azure-pipelines-cli": "^1.0.2", "cross-env": "^6.0.3", - "css-loader": "^3.3.2", + "css-loader": "webpack-contrib/css-loader#master", "del": "^5.1.0", "del-cli": "^3.0.0", "es-check": "^5.1.0", diff --git a/src/index.js b/src/index.js index 89bef2c3..fcf80e01 100644 --- a/src/index.js +++ b/src/index.js @@ -32,7 +32,13 @@ if (module.hot) { module.hot.accept( ${loaderUtils.stringifyRequest(this, `!!${request}`)}, function() { - update(require(${loaderUtils.stringifyRequest(this, `!!${request}`)})); + var newContent = require(${loaderUtils.stringifyRequest( + this, + `!!${request}` + )}); + newContent = newContent.__esModule ? newContent.default : newContent; + + update(newContent); } ); @@ -46,13 +52,13 @@ if (module.hot) { options.insert = ${insert}; +var content = require(${loaderUtils.stringifyRequest(this, `!!${request}`)}); +content = content.__esModule ? content.default : content; + var update = require(${loaderUtils.stringifyRequest( this, `!${path.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}` - )})(require(${loaderUtils.stringifyRequest( - this, - `!!${request}` - )}), options); + )})(content, options); ${hmrCode}`; } @@ -90,6 +96,8 @@ if (module.hot) { return `var refs = 0; var dispose; var content = require(${loaderUtils.stringifyRequest(this, `!!${request}`)}); +content = content.__esModule ? content.default : content; + var options = ${JSON.stringify(options)}; options.insert = ${insert}; @@ -140,6 +148,7 @@ if (module.hot) { this, `!!${request}` )}); + newContent = newContent.__esModule ? newContent.default : newContent; if (typeof newContent === 'string') { newContent = [[module.id, newContent, '']]; @@ -160,6 +169,7 @@ if (module.hot) { this, `!!${request}` )}); +content = content.__esModule ? content.default : content; if (typeof content === 'string') { content = [[module.id, content, '']]; diff --git a/src/runtime/injectStylesIntoLinkTag.js b/src/runtime/injectStylesIntoLinkTag.js index c149b3c3..ea7c557d 100644 --- a/src/runtime/injectStylesIntoLinkTag.js +++ b/src/runtime/injectStylesIntoLinkTag.js @@ -44,7 +44,7 @@ module.exports = (url, options) => { const link = document.createElement('link'); link.rel = 'stylesheet'; - link.href = url.__esModule ? url.default : url; + link.href = url; Object.keys(options.attributes).forEach((key) => { link.setAttribute(key, options.attributes[key]); diff --git a/test/loader.test.js b/test/loader.test.js index e11abd02..1ebcd394 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -170,6 +170,46 @@ describe('loader', () => { expect(stats.compilation.errors).toMatchSnapshot('errors'); }); + // Uncomment after `css-loader` release the `esModule` option + // if ( + // [ + // 'styleTag', + // 'singletonStyleTag', + // 'lazyStyleTag', + // 'lazySingletonStyleTag', + // ].includes(injectType) + // ) { + // it(`should work when the "injectType" option is "${injectType}" and "css-loader" uses ES module syntax`, async () => { + // const testId = getTestId('simple.js', injectType); + // const stats = await compile(testId, { + // loader: { options: { injectType } }, + // cssLoader: { options: { esModule: true } }, + // }); + // + // runTestInJsdom(stats, (dom) => { + // expect(dom.serialize()).toMatchSnapshot('DOM'); + // }); + // + // expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + // expect(stats.compilation.errors).toMatchSnapshot('errors'); + // }); + // + // it(`should work when the "injectType" option is "${injectType}" and "css-loader" uses CommonJS module syntax`, async () => { + // const testId = getTestId('simple.js', injectType); + // const stats = await compile(testId, { + // loader: { options: { injectType } }, + // cssLoader: { options: { esModule: true } }, + // }); + // + // runTestInJsdom(stats, (dom) => { + // expect(dom.serialize()).toMatchSnapshot('DOM'); + // }); + // + // expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + // expect(stats.compilation.errors).toMatchSnapshot('errors'); + // }); + // } + if (['lazyStyleTag', 'lazySingletonStyleTag'].includes(injectType)) { it(`should work when ref is negative when the "injectType" option is "${injectType}"`, async () => { expect.assertions(3); diff --git a/test/manual/src/index.js b/test/manual/src/index.js index 2a16a532..7c3b030b 100644 --- a/test/manual/src/index.js +++ b/test/manual/src/index.js @@ -1,5 +1,5 @@ /* eslint-env browser */ - +/* eslint-disable no-console */ import './style.css'; import './other-style.scss'; import component from './component.module.css'; @@ -9,6 +9,12 @@ import componentLazy from './component.lazy.module.css'; import './style.link.css'; import './custom-square'; +console.log('___LOCALS___'); +console.log(component); + +console.log('___LOCALS_LAZY___'); +console.log(componentLazy); + styleLazy.use(); otherStyleLazy.use(); diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js index ff431f46..cdd5271b 100644 --- a/test/manual/webpack.config.js +++ b/test/manual/webpack.config.js @@ -5,6 +5,11 @@ const ENABLE_SOURCE_MAP = ? Boolean(process.env.SOURCE_MAP) : false; +const ENABLE_ES_MODULE = + typeof process.env.ES_MODULE !== 'undefined' + ? Boolean(process.env.ES_MODULE) + : false; + module.exports = { devtool: ENABLE_SOURCE_MAP ? 'source-map' : false, mode: 'development', @@ -29,6 +34,7 @@ module.exports = { loader: 'css-loader', options: { sourceMap: ENABLE_SOURCE_MAP, + esModule: ENABLE_ES_MODULE, }, }, ], @@ -44,6 +50,7 @@ module.exports = { loader: 'css-loader', options: { sourceMap: ENABLE_SOURCE_MAP, + esModule: ENABLE_ES_MODULE, modules: true, }, }, @@ -60,6 +67,7 @@ module.exports = { loader: 'css-loader', options: { sourceMap: ENABLE_SOURCE_MAP, + esModule: ENABLE_ES_MODULE, }, }, ], @@ -75,6 +83,7 @@ module.exports = { loader: 'css-loader', options: { sourceMap: ENABLE_SOURCE_MAP, + esModule: ENABLE_ES_MODULE, modules: true, }, }, @@ -104,6 +113,7 @@ module.exports = { loader: 'css-loader', options: { sourceMap: ENABLE_SOURCE_MAP, + esModule: ENABLE_ES_MODULE, }, }, { @@ -127,6 +137,7 @@ module.exports = { loader: 'css-loader', options: { sourceMap: ENABLE_SOURCE_MAP, + esModule: ENABLE_ES_MODULE, }, }, {