Skip to content

Commit dcbfadb

Browse files
evilebottnawievilebottnawi
authored
fix: support ES module syntax (#435)
1 parent d515edc commit dcbfadb

File tree

7 files changed

+77
-11
lines changed

7 files changed

+77
-11
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"babel-jest": "^24.9.0",
5959
"commitlint-azure-pipelines-cli": "^1.0.2",
6060
"cross-env": "^6.0.3",
61-
"css-loader": "^3.3.2",
61+
"css-loader": "webpack-contrib/css-loader#master",
6262
"del": "^5.1.0",
6363
"del-cli": "^3.0.0",
6464
"es-check": "^5.1.0",

‎src/index.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,13 @@ if (module.hot) {
3232
module.hot.accept(
3333
${loaderUtils.stringifyRequest(this, `!!${request}`)},
3434
function() {
35-
update(require(${loaderUtils.stringifyRequest(this, `!!${request}`)}));
35+
var newContent = require(${loaderUtils.stringifyRequest(
36+
this,
37+
`!!${request}`
38+
)});
39+
newContent = newContent.__esModule ? newContent.default : newContent;
40+
41+
update(newContent);
3642
}
3743
);
3844
@@ -46,13 +52,13 @@ if (module.hot) {
4652
4753
options.insert = ${insert};
4854
55+
var content = require(${loaderUtils.stringifyRequest(this, `!!${request}`)});
56+
content = content.__esModule ? content.default : content;
57+
4958
var update = require(${loaderUtils.stringifyRequest(
5059
this,
5160
`!${path.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}`
52-
)})(require(${loaderUtils.stringifyRequest(
53-
this,
54-
`!!${request}`
55-
)}), options);
61+
)})(content, options);
5662
${hmrCode}`;
5763
}
5864

@@ -90,6 +96,8 @@ if (module.hot) {
9096
return `var refs = 0;
9197
var dispose;
9298
var content = require(${loaderUtils.stringifyRequest(this, `!!${request}`)});
99+
content = content.__esModule ? content.default : content;
100+
93101
var options = ${JSON.stringify(options)};
94102
95103
options.insert = ${insert};
@@ -140,6 +148,7 @@ if (module.hot) {
140148
this,
141149
`!!${request}`
142150
)});
151+
newContent = newContent.__esModule ? newContent.default : newContent;
143152
144153
if (typeof newContent === 'string') {
145154
newContent = [[module.id, newContent, '']];
@@ -160,6 +169,7 @@ if (module.hot) {
160169
this,
161170
`!!${request}`
162171
)});
172+
content = content.__esModule ? content.default : content;
163173
164174
if (typeof content === 'string') {
165175
content = [[module.id, content, '']];

‎src/runtime/injectStylesIntoLinkTag.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ module.exports = (url, options) => {
4444
const link = document.createElement('link');
4545

4646
link.rel = 'stylesheet';
47-
link.href = url.__esModule ? url.default : url;
47+
link.href = url;
4848

4949
Object.keys(options.attributes).forEach((key) => {
5050
link.setAttribute(key, options.attributes[key]);

‎test/loader.test.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,46 @@ describe('loader', () => {
170170
expect(stats.compilation.errors).toMatchSnapshot('errors');
171171
});
172172

173+
// Uncomment after `css-loader` release the `esModule` option
174+
// if (
175+
// [
176+
// 'styleTag',
177+
// 'singletonStyleTag',
178+
// 'lazyStyleTag',
179+
// 'lazySingletonStyleTag',
180+
// ].includes(injectType)
181+
// ) {
182+
// it(`should work when the "injectType" option is "${injectType}" and "css-loader" uses ES module syntax`, async () => {
183+
// const testId = getTestId('simple.js', injectType);
184+
// const stats = await compile(testId, {
185+
// loader: { options: { injectType } },
186+
// cssLoader: { options: { esModule: true } },
187+
// });
188+
//
189+
// runTestInJsdom(stats, (dom) => {
190+
// expect(dom.serialize()).toMatchSnapshot('DOM');
191+
// });
192+
//
193+
// expect(stats.compilation.warnings).toMatchSnapshot('warnings');
194+
// expect(stats.compilation.errors).toMatchSnapshot('errors');
195+
// });
196+
//
197+
// it(`should work when the "injectType" option is "${injectType}" and "css-loader" uses CommonJS module syntax`, async () => {
198+
// const testId = getTestId('simple.js', injectType);
199+
// const stats = await compile(testId, {
200+
// loader: { options: { injectType } },
201+
// cssLoader: { options: { esModule: true } },
202+
// });
203+
//
204+
// runTestInJsdom(stats, (dom) => {
205+
// expect(dom.serialize()).toMatchSnapshot('DOM');
206+
// });
207+
//
208+
// expect(stats.compilation.warnings).toMatchSnapshot('warnings');
209+
// expect(stats.compilation.errors).toMatchSnapshot('errors');
210+
// });
211+
// }
212+
173213
if (['lazyStyleTag', 'lazySingletonStyleTag'].includes(injectType)) {
174214
it(`should work when ref is negative when the "injectType" option is "${injectType}"`, async () => {
175215
expect.assertions(3);

‎test/manual/src/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-env browser */
2-
2+
/* eslint-disable no-console */
33
import './style.css';
44
import './other-style.scss';
55
import component from './component.module.css';
@@ -9,6 +9,12 @@ import componentLazy from './component.lazy.module.css';
99
import './style.link.css';
1010
import './custom-square';
1111

12+
console.log('___LOCALS___');
13+
console.log(component);
14+
15+
console.log('___LOCALS_LAZY___');
16+
console.log(componentLazy);
17+
1218
styleLazy.use();
1319
otherStyleLazy.use();
1420

‎test/manual/webpack.config.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ const ENABLE_SOURCE_MAP =
55
? Boolean(process.env.SOURCE_MAP)
66
: false;
77

8+
const ENABLE_ES_MODULE =
9+
typeof process.env.ES_MODULE !== 'undefined'
10+
? Boolean(process.env.ES_MODULE)
11+
: false;
12+
813
module.exports = {
914
devtool: ENABLE_SOURCE_MAP ? 'source-map' : false,
1015
mode: 'development',
@@ -29,6 +34,7 @@ module.exports = {
2934
loader: 'css-loader',
3035
options: {
3136
sourceMap: ENABLE_SOURCE_MAP,
37+
esModule: ENABLE_ES_MODULE,
3238
},
3339
},
3440
],
@@ -44,6 +50,7 @@ module.exports = {
4450
loader: 'css-loader',
4551
options: {
4652
sourceMap: ENABLE_SOURCE_MAP,
53+
esModule: ENABLE_ES_MODULE,
4754
modules: true,
4855
},
4956
},
@@ -60,6 +67,7 @@ module.exports = {
6067
loader: 'css-loader',
6168
options: {
6269
sourceMap: ENABLE_SOURCE_MAP,
70+
esModule: ENABLE_ES_MODULE,
6371
},
6472
},
6573
],
@@ -75,6 +83,7 @@ module.exports = {
7583
loader: 'css-loader',
7684
options: {
7785
sourceMap: ENABLE_SOURCE_MAP,
86+
esModule: ENABLE_ES_MODULE,
7887
modules: true,
7988
},
8089
},
@@ -104,6 +113,7 @@ module.exports = {
104113
loader: 'css-loader',
105114
options: {
106115
sourceMap: ENABLE_SOURCE_MAP,
116+
esModule: ENABLE_ES_MODULE,
107117
},
108118
},
109119
{
@@ -127,6 +137,7 @@ module.exports = {
127137
loader: 'css-loader',
128138
options: {
129139
sourceMap: ENABLE_SOURCE_MAP,
140+
esModule: ENABLE_ES_MODULE,
130141
},
131142
},
132143
{

0 commit comments

Comments
 (0)