Skip to content

Commit 889dc7f

Browse files
evilebottnawievilebottnawi
authoredDec 3, 2018
feat: allow to disable css modules and disable their by default (#842)
BREAKING CHANGE: by default css modules are disabled (now `modules: false` disable all css modules features), you can return old behaviour change this on `modules: 'global'`
·
v7.1.2v2.0.0
1 parent ee2d253 commit 889dc7f

12 files changed

+2905
-438
lines changed
 

‎README.md

+25-9
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ It's useful when you, for instance, need to post process the CSS as a string.
9797
|:--:|:--:|:-----:|:----------|
9898
|**[`url`](#url)**|`{Boolean}`|`true`| Enable/Disable `url()` handling|
9999
|**[`import`](#import)** |`{Boolean}`|`true`| Enable/Disable @import handling|
100-
|**[`modules`](#modules)**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
100+
|**[`modules`](#modules)**|`{Boolean\|String}`|`false`|Enable/Disable CSS Modules and setup mode|
101101
|**[`localIdentName`](#localidentname)**|`{String}`|`[hash:base64]`|Configure the generated ident|
102102
|**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
103103
|**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
@@ -129,17 +129,33 @@ To import styles from a node module path, prefix it with a `~`:
129129

130130
### [`modules`](https://github.com/css-modules/css-modules)
131131

132-
The query parameter `modules` enables the **CSS Modules** spec.
132+
The `modules` option enables/disables the **CSS Modules** spec and setup basic behaviour.
133133

134-
This enables local scoped CSS by default. (You can switch it off with `:global(...)` or `:global` for selectors and/or rules.).
134+
|Name|Type|Description|
135+
|:--:|:--:|:----------|
136+
|**`true`**|`{Boolean}`|Enables local scoped CSS by default (use **local** mode by default)|
137+
|**`false`**|`{Boolean}`|Disable the **CSS Modules** spec, all **CSS Modules** features (like `@value`, `:local`, `:global` and `composes`) will not work|
138+
|**`'local'`** |`{String}`|Enables local scoped CSS by default (same as `true` value)|
139+
|**`'global'`**|`{String}`|Enables global scoped CSS by default|
140+
141+
Using `false` value increase performance because we avoid parsing **CSS Modules** features, it will be useful for developers who use vanilla css or use other technologies.
142+
143+
You can read about **modes** below
135144

136-
#### `Scope`
145+
##### `Scope`
146+
147+
Using `local` value requires you to specify `:global` classes.
148+
Using `global` value requires you to specify `:local` classes.
137149

138-
By default CSS exports all classnames into a global selector scope. Styles can be locally scoped to avoid globally scoping styles.
150+
You can find more information [here](https://github.com/css-modules/css-modules).
151+
152+
Styles can be locally scoped to avoid globally scoping styles.
139153

140154
The syntax `:local(.className)` can be used to declare `className` in the local scope. The local identifiers are exported by the module.
141155

142-
With `:local` (without brackets) local mode can be switched on for this selector. `:global(.className)` can be used to declare an explicit global selector. With `:global` (without brackets) global mode can be switched on for this selector.
156+
With `:local` (without brackets) local mode can be switched on for this selector.
157+
The `:global(.className)` nocation can be used to declare an explicit global selector.
158+
With `:global` (without brackets) global mode can be switched on for this selector.
143159

144160
The loader replaces local selectors with unique identifiers. The chosen unique identifiers are exported by the module.
145161

@@ -177,7 +193,7 @@ file.png => ./file.png
177193

178194
You can use `:local(#someId)`, but this is not recommended. Use classes instead of ids.
179195

180-
#### `Composing`
196+
##### `Composing`
181197

182198
When declaring a local classname you can compose a local class from another local classname.
183199

@@ -213,7 +229,7 @@ exports.locals = {
213229
}
214230
```
215231

216-
#### `Importing`
232+
##### `Importing`
217233

218234
To import a local classname from another module.
219235

@@ -282,7 +298,7 @@ You can also specify the absolute path to your custom `getLocalIdent` function t
282298

283299
To include source maps set the `sourceMap` option.
284300

285-
I.e. the extract-text-webpack-plugin can handle them.
301+
I.e. the `mini-css-extract-plugin` can handle them.
286302

287303
They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not). In addition to that relative paths are buggy and you need to use an absolute public path which includes the server URL.
288304

‎lib/loader.js

+46-34
Original file line numberDiff line numberDiff line change
@@ -62,43 +62,55 @@ module.exports = function loader(content, map, meta) {
6262

6363
const resolveImport = options.import !== false;
6464
const resolveUrl = options.url !== false;
65-
const loaderContext = this;
66-
67-
const plugins = [
68-
modulesValues,
69-
localByDefault({
70-
mode: options.modules ? 'local' : 'global',
71-
rewriteUrl(global, url) {
72-
if (resolveUrl) {
73-
// eslint-disable-next-line no-param-reassign
74-
url = url.trim();
75-
76-
if (!url.replace(/\s/g, '').length || !isUrlRequest(url)) {
77-
return url;
78-
}
7965

80-
if (global) {
81-
return urlToRequest(url);
66+
const plugins = [];
67+
68+
if (options.modules) {
69+
const loaderContext = this;
70+
const mode =
71+
typeof options.modules === 'boolean' ? 'local' : options.modules;
72+
73+
plugins.push(
74+
modulesValues,
75+
localByDefault({
76+
mode,
77+
rewriteUrl(global, url) {
78+
if (resolveUrl) {
79+
// eslint-disable-next-line no-param-reassign
80+
url = url.trim();
81+
82+
if (!url.replace(/\s/g, '').length || !isUrlRequest(url)) {
83+
return url;
84+
}
85+
86+
if (global) {
87+
return urlToRequest(url);
88+
}
8289
}
83-
}
8490

85-
return url;
86-
},
87-
}),
88-
extractImports(),
89-
modulesScope({
90-
generateScopedName: function generateScopedName(exportName) {
91-
const localIdentName = options.localIdentName || '[hash:base64]';
92-
const customGetLocalIdent = options.getLocalIdent || getLocalIdent;
93-
94-
return customGetLocalIdent(loaderContext, localIdentName, exportName, {
95-
regExp: options.localIdentRegExp,
96-
hashPrefix: options.hashPrefix || '',
97-
context: options.context,
98-
});
99-
},
100-
}),
101-
];
91+
return url;
92+
},
93+
}),
94+
extractImports(),
95+
modulesScope({
96+
generateScopedName: function generateScopedName(exportName) {
97+
const localIdentName = options.localIdentName || '[hash:base64]';
98+
const customGetLocalIdent = options.getLocalIdent || getLocalIdent;
99+
100+
return customGetLocalIdent(
101+
loaderContext,
102+
localIdentName,
103+
exportName,
104+
{
105+
regExp: options.localIdentRegExp,
106+
hashPrefix: options.hashPrefix || '',
107+
context: options.context,
108+
}
109+
);
110+
},
111+
})
112+
);
113+
}
102114

103115
if (resolveImport) {
104116
plugins.push(importParser());

‎test/__snapshots__/import-option.test.js.snap

+142-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,67 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`import option false and modules false: errors 1`] = `Array []`;
3+
exports[`import option false and modules \`false\`: errors 1`] = `Array []`;
44

5-
exports[`import option false and modules false: module (evaluated) 1`] = `
5+
exports[`import option false and modules \`false\`: module (evaluated) 1`] = `
6+
Array [
7+
Array [
8+
1,
9+
"@import url(test-other.css) (min-width: 100px);
10+
11+
@value def from './values.css';
12+
@value other from './values.css';
13+
@value other from './values.css';
14+
@value something from './something.css';
15+
@value foo: blue;
16+
@value bar: block;
17+
18+
.ghi {
19+
color: def;
20+
}
21+
22+
.class {
23+
color: foo;
24+
}
25+
26+
.other {
27+
display: bar;
28+
}
29+
30+
.other-other {
31+
width: something;
32+
}
33+
34+
.green {
35+
color: other;
36+
}
37+
38+
.foo {
39+
prop: def;
40+
duplicate: other;
41+
}
42+
",
43+
"",
44+
],
45+
]
46+
`;
47+
48+
exports[`import option false and modules \`false\`: module 1`] = `
49+
"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
50+
// imports
51+
52+
53+
// module
54+
exports.push([module.id, \\"@import url(test-other.css) (min-width: 100px);\\\\n\\\\n@value def from './values.css';\\\\n@value other from './values.css';\\\\n@value other from './values.css';\\\\n@value something from './something.css';\\\\n@value foo: blue;\\\\n@value bar: block;\\\\n\\\\n.ghi {\\\\n color: def;\\\\n}\\\\n\\\\n.class {\\\\n color: foo;\\\\n}\\\\n\\\\n.other {\\\\n display: bar;\\\\n}\\\\n\\\\n.other-other {\\\\n width: something;\\\\n}\\\\n\\\\n.green {\\\\n color: other;\\\\n}\\\\n\\\\n.foo {\\\\n prop: def;\\\\n duplicate: other;\\\\n}\\\\n\\", \\"\\"]);
55+
56+
// exports
57+
"
58+
`;
59+
60+
exports[`import option false and modules \`false\`: warnings 1`] = `Array []`;
61+
62+
exports[`import option false and modules \`global\`: errors 1`] = `Array []`;
63+
64+
exports[`import option false and modules \`global\`: module (evaluated) 1`] = `
665
Array [
766
Array [
867
2,
@@ -50,7 +109,7 @@ Array [
50109
]
51110
`;
52111

53-
exports[`import option false and modules false: module 1`] = `
112+
exports[`import option false and modules \`global\`: module 1`] = `
54113
"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
55114
// imports
56115
exports.i(require(\\"-!../../../index.js??ref--4-0!./values.css\\"), \\"\\");
@@ -69,11 +128,86 @@ exports.locals = {
69128
};"
70129
`;
71130
72-
exports[`import option false and modules false: warnings 1`] = `Array []`;
131+
exports[`import option false and modules \`global\`: warnings 1`] = `Array []`;
132+
133+
exports[`import option false and modules \`local\`: errors 1`] = `Array []`;
134+
135+
exports[`import option false and modules \`local\`: module (evaluated) 1`] = `
136+
Array [
137+
Array [
138+
2,
139+
"
140+
",
141+
"",
142+
],
143+
Array [
144+
3,
145+
"
146+
",
147+
"",
148+
],
149+
Array [
150+
1,
151+
"@import url(test-other.css) (min-width: 100px);
152+
153+
._3r49KZIIAltPknAjdNVZ-7 {
154+
color: red;
155+
}
156+
157+
._4o0o5eKzoeDOSI0_cR8mr {
158+
color: blue;
159+
}
160+
161+
._2wLXKM9pRjt1oRYvf0Wo3Q {
162+
display: block;
163+
}
164+
165+
._1RBgqC8j3f4iU6k-ocmIG7 {
166+
width: 2112moon;
167+
}
168+
169+
._1lCIckG6C8tRZjGNDsAPWr {
170+
color: green;
171+
}
172+
173+
._1YL4f0i_603GTMRC_pnsP5 {
174+
prop: red;
175+
duplicate: green;
176+
}
177+
",
178+
"",
179+
],
180+
]
181+
`;
182+
183+
exports[`import option false and modules \`local\`: module 1`] = `
184+
"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
185+
// imports
186+
exports.i(require(\\"-!../../../index.js??ref--4-0!./values.css\\"), \\"\\");
187+
exports.i(require(\\"-!../../../index.js??ref--4-0!./something.css\\"), \\"\\");
188+
189+
// module
190+
exports.push([module.id, \\"@import url(test-other.css) (min-width: 100px);\\\\n\\\\n._3r49KZIIAltPknAjdNVZ-7 {\\\\n color: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n}\\\\n\\\\n._4o0o5eKzoeDOSI0_cR8mr {\\\\n color: blue;\\\\n}\\\\n\\\\n._2wLXKM9pRjt1oRYvf0Wo3Q {\\\\n display: block;\\\\n}\\\\n\\\\n._1RBgqC8j3f4iU6k-ocmIG7 {\\\\n width: \\" + require(\\"-!../../../index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\";\\\\n}\\\\n\\\\n._1lCIckG6C8tRZjGNDsAPWr {\\\\n color: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n._1YL4f0i_603GTMRC_pnsP5 {\\\\n prop: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n duplicate: \\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\", \\"\\"]);
191+
192+
// exports
193+
exports.locals = {
194+
\\"def\\": \\"\\" + require(\\"-!../../../index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\"\\",
195+
\\"other\\": \\"_2wLXKM9pRjt1oRYvf0Wo3Q\\",
196+
\\"something\\": \\"\\" + require(\\"-!../../../index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\"\\",
197+
\\"foo\\": \\"_1YL4f0i_603GTMRC_pnsP5\\",
198+
\\"bar\\": \\"block\\",
199+
\\"ghi\\": \\"_3r49KZIIAltPknAjdNVZ-7\\",
200+
\\"class\\": \\"_4o0o5eKzoeDOSI0_cR8mr\\",
201+
\\"other-other\\": \\"_1RBgqC8j3f4iU6k-ocmIG7\\",
202+
\\"green\\": \\"_1lCIckG6C8tRZjGNDsAPWr\\"
203+
};"
204+
`;
205+
206+
exports[`import option false and modules \`local\`: warnings 1`] = `Array []`;
73207
74-
exports[`import option false and modules true: errors 1`] = `Array []`;
208+
exports[`import option false and modules \`true\`: errors 1`] = `Array []`;
75209
76-
exports[`import option false and modules true: module (evaluated) 1`] = `
210+
exports[`import option false and modules \`true\`: module (evaluated) 1`] = `
77211
Array [
78212
Array [
79213
2,
@@ -121,7 +255,7 @@ Array [
121255
]
122256
`;
123257
124-
exports[`import option false and modules true: module 1`] = `
258+
exports[`import option false and modules \`true\`: module 1`] = `
125259
"exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
126260
// imports
127261
exports.i(require(\\"-!../../../index.js??ref--4-0!./values.css\\"), \\"\\");
@@ -144,7 +278,7 @@ exports.locals = {
144278
};"
145279
`;
146280
147-
exports[`import option false and modules true: warnings 1`] = `Array []`;
281+
exports[`import option false and modules \`true\`: warnings 1`] = `Array []`;
148282
149283
exports[`import option false: errors 1`] = `Array []`;
150284

‎test/__snapshots__/loader.test.js.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -485,19 +485,19 @@ h1,h2,h3,h4,h5,h6 {
485485
}
486486
487487
main.hero, .hero.main {
488-
background-image: img1x.png;
488+
background-image: url(/webpack/public/path/img1x.png);
489489
}
490490
491491
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
492492
493493
main.hero, .hero.main {
494-
background-image: img2x.png;
494+
background-image: url(/webpack/public/path/img2x.png);
495495
}
496496
}
497497
498498
main.hero, .hero.main {
499499
background-image: -webkit-image-set(url(/webpack/public/path/img1x.png) 1x, url(/webpack/public/path/img2x.png) 2x);
500-
background-image: image-set(\\"img1x.png\\" 1x, \\"img2x.png\\" 2x);
500+
background-image: image-set(url(/webpack/public/path/img1x.png) 1x, url(/webpack/public/path/img2x.png) 2x);
501501
}
502502
503503
a {
@@ -520,7 +520,7 @@ exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
520520
521521
522522
// module
523-
exports.push([module.id, \\":root {\\\\n --fontSize: 1rem;\\\\n --mainColor: rgba(18,52,86,0.47059);\\\\n --secondaryColor: rgba(102, 51, 153, 0.9);\\\\n}\\\\n\\\\nhtml {\\\\n overflow-x: hidden;\\\\n overflow-y: auto;\\\\n overflow: hidden auto;\\\\n}\\\\n\\\\n@media (max-width: 50rem) {\\\\n body {\\\\n color: rgba(18,52,86,0.47059);\\\\n color: var(--mainColor);\\\\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;\\\\n font-size: 1rem;\\\\n font-size: var(--fontSize);\\\\n line-height: calc(1rem * 1.5);\\\\n line-height: calc(var(--fontSize) * 1.5);\\\\n word-wrap: break-word;\\\\n padding-left: calc(1rem / 2 + 1px);\\\\n padding-right: calc(1rem / 2 + 1px);\\\\n padding-left: calc(var(--fontSize) / 2 + 1px);\\\\n padding-right: calc(var(--fontSize) / 2 + 1px);\\\\n }\\\\n}\\\\n\\\\nh1,h2,h3,h4,h5,h6 {\\\\n margin-top: 0;\\\\n margin-bottom: 0;\\\\n}\\\\n\\\\nmain.hero, .hero.main {\\\\n background-image: img1x.png;\\\\n}\\\\n\\\\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\\\\n\\\\nmain.hero, .hero.main {\\\\n background-image: img2x.png;\\\\n}\\\\n}\\\\n\\\\nmain.hero, .hero.main {\\\\n background-image: -webkit-image-set(url(\\" + escape(require(\\"./img1x.png\\")) + \\") 1x, url(\\" + escape(require(\\"./img2x.png\\")) + \\") 2x);\\\\n background-image: image-set(\\\\\\"img1x.png\\\\\\" 1x, \\\\\\"img2x.png\\\\\\" 2x);\\\\n}\\\\n\\\\na {\\\\n color: rgba(0, 0, 255, 0.9)\\\\n}\\\\n\\\\na:hover {\\\\n color: #639;\\\\n }\\\\n\\", \\"\\"]);
523+
exports.push([module.id, \\":root {\\\\n --fontSize: 1rem;\\\\n --mainColor: rgba(18,52,86,0.47059);\\\\n --secondaryColor: rgba(102, 51, 153, 0.9);\\\\n}\\\\n\\\\nhtml {\\\\n overflow-x: hidden;\\\\n overflow-y: auto;\\\\n overflow: hidden auto;\\\\n}\\\\n\\\\n@media (max-width: 50rem) {\\\\n body {\\\\n color: rgba(18,52,86,0.47059);\\\\n color: var(--mainColor);\\\\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;\\\\n font-size: 1rem;\\\\n font-size: var(--fontSize);\\\\n line-height: calc(1rem * 1.5);\\\\n line-height: calc(var(--fontSize) * 1.5);\\\\n word-wrap: break-word;\\\\n padding-left: calc(1rem / 2 + 1px);\\\\n padding-right: calc(1rem / 2 + 1px);\\\\n padding-left: calc(var(--fontSize) / 2 + 1px);\\\\n padding-right: calc(var(--fontSize) / 2 + 1px);\\\\n }\\\\n}\\\\n\\\\nh1,h2,h3,h4,h5,h6 {\\\\n margin-top: 0;\\\\n margin-bottom: 0;\\\\n}\\\\n\\\\nmain.hero, .hero.main {\\\\n background-image: url(\\" + escape(require(\\"./img1x.png\\")) + \\");\\\\n}\\\\n\\\\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\\\\n\\\\nmain.hero, .hero.main {\\\\n background-image: url(\\" + escape(require(\\"./img2x.png\\")) + \\");\\\\n}\\\\n}\\\\n\\\\nmain.hero, .hero.main {\\\\n background-image: -webkit-image-set(url(\\" + escape(require(\\"./img1x.png\\")) + \\") 1x, url(\\" + escape(require(\\"./img2x.png\\")) + \\") 2x);\\\\n background-image: image-set(url(\\" + escape(require(\\"./img1x.png\\")) + \\") 1x, url(\\" + escape(require(\\"./img2x.png\\")) + \\") 2x);\\\\n}\\\\n\\\\na {\\\\n color: rgba(0, 0, 255, 0.9)\\\\n}\\\\n\\\\na:hover {\\\\n color: #639;\\\\n }\\\\n\\", \\"\\"]);
524524
525525
// exports
526526
"

‎test/__snapshots__/localIdentName-option.test.js.snap

+56-119
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,37 @@
22

33
exports[`localIdentName option basic: errors 1`] = `Array []`;
44

5-
exports[`localIdentName option basic: locals 1`] = `
6-
Object {
7-
"-a0-34a___f": "_2nJ5XVdGAwkzTI324zw6Pg",
8-
"_test": "_23te_4QsMe8I6hzxjH0MUx",
9-
"className": "_1E8Hx67EIx_tltp58vyNJ0",
10-
"someId": "_3w7JetWWlr8Zm4sxZ-ANzU",
11-
"subClass": "_3lo0JvMLLK_gjw1mbsomb3",
12-
"test": "NW9YAb4ijHq-3lCxF5vFu",
13-
}
14-
`;
5+
exports[`localIdentName option basic: locals 1`] = `undefined`;
156

167
exports[`localIdentName option basic: module (evaluated) 1`] = `
178
Array [
189
Array [
1910
1,
20-
".NW9YAb4ijHq-3lCxF5vFu {
11+
":local(.test) {
2112
background: red;
2213
}
2314
24-
._23te_4QsMe8I6hzxjH0MUx {
15+
:local(._test) {
2516
background: blue;
2617
}
2718
28-
._1E8Hx67EIx_tltp58vyNJ0 {
19+
:local(.className) {
2920
background: red;
3021
}
3122
32-
#_3w7JetWWlr8Zm4sxZ-ANzU {
23+
:local(#someId) {
3324
background: green;
3425
}
3526
36-
._1E8Hx67EIx_tltp58vyNJ0 ._3lo0JvMLLK_gjw1mbsomb3 {
27+
:local(.className .subClass) {
3728
color: green;
3829
}
3930
40-
#_3w7JetWWlr8Zm4sxZ-ANzU ._3lo0JvMLLK_gjw1mbsomb3 {
31+
:local(#someId .subClass) {
4132
color: blue;
4233
}
4334
44-
._2nJ5XVdGAwkzTI324zw6Pg {
35+
:local(.-a0-34a___f) {
4536
color: red;
4637
}
4738
",
@@ -54,46 +45,37 @@ exports[`localIdentName option basic: warnings 1`] = `Array []`;
5445

5546
exports[`localIdentName option should have hash: errors 1`] = `Array []`;
5647

57-
exports[`localIdentName option should have hash: locals 1`] = `
58-
Object {
59-
"-a0-34a___f": "localIdentName---a0-34a___f--3RHUZ",
60-
"_test": "localIdentName--_test--3Q--B",
61-
"className": "localIdentName--className--3wBIH",
62-
"someId": "localIdentName--someId--mxosG",
63-
"subClass": "localIdentName--subClass--3jIM-",
64-
"test": "localIdentName--test--1Os7J",
65-
}
66-
`;
48+
exports[`localIdentName option should have hash: locals 1`] = `undefined`;
6749

6850
exports[`localIdentName option should have hash: module (evaluated) 1`] = `
6951
Array [
7052
Array [
7153
1,
72-
".localIdentName--test--1Os7J {
54+
":local(.test) {
7355
background: red;
7456
}
7557
76-
.localIdentName--_test--3Q--B {
58+
:local(._test) {
7759
background: blue;
7860
}
7961
80-
.localIdentName--className--3wBIH {
62+
:local(.className) {
8163
background: red;
8264
}
8365
84-
#localIdentName--someId--mxosG {
66+
:local(#someId) {
8567
background: green;
8668
}
8769
88-
.localIdentName--className--3wBIH .localIdentName--subClass--3jIM- {
70+
:local(.className .subClass) {
8971
color: green;
9072
}
9173
92-
#localIdentName--someId--mxosG .localIdentName--subClass--3jIM- {
74+
:local(#someId .subClass) {
9375
color: blue;
9476
}
9577
96-
.localIdentName---a0-34a___f--3RHUZ {
78+
:local(.-a0-34a___f) {
9779
color: red;
9880
}
9981
",
@@ -106,46 +88,37 @@ exports[`localIdentName option should have hash: warnings 1`] = `Array []`;
10688

10789
exports[`localIdentName option should have path naming with context: errors 1`] = `Array []`;
10890

109-
exports[`localIdentName option should have path naming with context: locals 1`] = `
110-
Object {
111-
"-a0-34a___f": "fixtures-modules--localIdentName---a0-34a___f",
112-
"_test": "fixtures-modules--localIdentName--_test",
113-
"className": "fixtures-modules--localIdentName--className",
114-
"someId": "fixtures-modules--localIdentName--someId",
115-
"subClass": "fixtures-modules--localIdentName--subClass",
116-
"test": "fixtures-modules--localIdentName--test",
117-
}
118-
`;
91+
exports[`localIdentName option should have path naming with context: locals 1`] = `undefined`;
11992

12093
exports[`localIdentName option should have path naming with context: module (evaluated) 1`] = `
12194
Array [
12295
Array [
12396
1,
124-
".fixtures-modules--localIdentName--test {
97+
":local(.test) {
12598
background: red;
12699
}
127100
128-
.fixtures-modules--localIdentName--_test {
101+
:local(._test) {
129102
background: blue;
130103
}
131104
132-
.fixtures-modules--localIdentName--className {
105+
:local(.className) {
133106
background: red;
134107
}
135108
136-
#fixtures-modules--localIdentName--someId {
109+
:local(#someId) {
137110
background: green;
138111
}
139112
140-
.fixtures-modules--localIdentName--className .fixtures-modules--localIdentName--subClass {
113+
:local(.className .subClass) {
141114
color: green;
142115
}
143116
144-
#fixtures-modules--localIdentName--someId .fixtures-modules--localIdentName--subClass {
117+
:local(#someId .subClass) {
145118
color: blue;
146119
}
147120
148-
.fixtures-modules--localIdentName---a0-34a___f {
121+
:local(.-a0-34a___f) {
149122
color: red;
150123
}
151124
",
@@ -158,46 +131,37 @@ exports[`localIdentName option should have path naming with context: warnings 1`
158131

159132
exports[`localIdentName option should prefixes leading hyphen + digit with underscore: errors 1`] = `Array []`;
160133

161-
exports[`localIdentName option should prefixes leading hyphen + digit with underscore: locals 1`] = `
162-
Object {
163-
"-a0-34a___f": "_-1-a0-34a___f",
164-
"_test": "_-1_test",
165-
"className": "_-1className",
166-
"someId": "_-1someId",
167-
"subClass": "_-1subClass",
168-
"test": "_-1test",
169-
}
170-
`;
134+
exports[`localIdentName option should prefixes leading hyphen + digit with underscore: locals 1`] = `undefined`;
171135

172136
exports[`localIdentName option should prefixes leading hyphen + digit with underscore: module (evaluated) 1`] = `
173137
Array [
174138
Array [
175139
1,
176-
"._-1test {
140+
":local(.test) {
177141
background: red;
178142
}
179143
180-
._-1_test {
144+
:local(._test) {
181145
background: blue;
182146
}
183147
184-
._-1className {
148+
:local(.className) {
185149
background: red;
186150
}
187151
188-
#_-1someId {
152+
:local(#someId) {
189153
background: green;
190154
}
191155
192-
._-1className ._-1subClass {
156+
:local(.className .subClass) {
193157
color: green;
194158
}
195159
196-
#_-1someId ._-1subClass {
160+
:local(#someId .subClass) {
197161
color: blue;
198162
}
199163
200-
._-1-a0-34a___f {
164+
:local(.-a0-34a___f) {
201165
color: red;
202166
}
203167
",
@@ -210,46 +174,37 @@ exports[`localIdentName option should prefixes leading hyphen + digit with under
210174

211175
exports[`localIdentName option should prefixes two leading hyphens with underscore: errors 1`] = `Array []`;
212176

213-
exports[`localIdentName option should prefixes two leading hyphens with underscore: locals 1`] = `
214-
Object {
215-
"-a0-34a___f": "_---a0-34a___f",
216-
"_test": "_--_test",
217-
"className": "_--className",
218-
"someId": "_--someId",
219-
"subClass": "_--subClass",
220-
"test": "_--test",
221-
}
222-
`;
177+
exports[`localIdentName option should prefixes two leading hyphens with underscore: locals 1`] = `undefined`;
223178

224179
exports[`localIdentName option should prefixes two leading hyphens with underscore: module (evaluated) 1`] = `
225180
Array [
226181
Array [
227182
1,
228-
"._--test {
183+
":local(.test) {
229184
background: red;
230185
}
231186
232-
._--_test {
187+
:local(._test) {
233188
background: blue;
234189
}
235190
236-
._--className {
191+
:local(.className) {
237192
background: red;
238193
}
239194
240-
#_--someId {
195+
:local(#someId) {
241196
background: green;
242197
}
243198
244-
._--className ._--subClass {
199+
:local(.className .subClass) {
245200
color: green;
246201
}
247202
248-
#_--someId ._--subClass {
203+
:local(#someId .subClass) {
249204
color: blue;
250205
}
251206
252-
._---a0-34a___f {
207+
:local(.-a0-34a___f) {
253208
color: red;
254209
}
255210
",
@@ -262,46 +217,37 @@ exports[`localIdentName option should prefixes two leading hyphens with undersco
262217

263218
exports[`localIdentName option should saves underscore prefix in exported class names: errors 1`] = `Array []`;
264219

265-
exports[`localIdentName option should saves underscore prefix in exported class names: locals 1`] = `
266-
Object {
267-
"-a0-34a___f": "-a0-34a___f",
268-
"_test": "_test",
269-
"className": "className",
270-
"someId": "someId",
271-
"subClass": "subClass",
272-
"test": "test",
273-
}
274-
`;
220+
exports[`localIdentName option should saves underscore prefix in exported class names: locals 1`] = `undefined`;
275221

276222
exports[`localIdentName option should saves underscore prefix in exported class names: module (evaluated) 1`] = `
277223
Array [
278224
Array [
279225
1,
280-
".test {
226+
":local(.test) {
281227
background: red;
282228
}
283229
284-
._test {
230+
:local(._test) {
285231
background: blue;
286232
}
287233
288-
.className {
234+
:local(.className) {
289235
background: red;
290236
}
291237
292-
#someId {
238+
:local(#someId) {
293239
background: green;
294240
}
295241
296-
.className .subClass {
242+
:local(.className .subClass) {
297243
color: green;
298244
}
299245
300-
#someId .subClass {
246+
:local(#someId .subClass) {
301247
color: blue;
302248
}
303249
304-
.-a0-34a___f {
250+
:local(.-a0-34a___f) {
305251
color: red;
306252
}
307253
",
@@ -314,46 +260,37 @@ exports[`localIdentName option should saves underscore prefix in exported class
314260

315261
exports[`localIdentName option should use hash prefix: errors 1`] = `Array []`;
316262

317-
exports[`localIdentName option should use hash prefix: locals 1`] = `
318-
Object {
319-
"-a0-34a___f": "-a0-34a___f--e99d667fe0ceff9363b011302ac3f508",
320-
"_test": "_test--d745495d407559ef605c9072243801fd",
321-
"className": "className--eab624d1bc6b9c6b6a4278d1030dd690",
322-
"someId": "someId--a0ce220cc9bbb1ee0e85cc0d1f0c6aa9",
323-
"subClass": "subClass--2c82998be8a2b2e94ad7be56c9e685cd",
324-
"test": "test--307c32aa793aaec9aecded85a9fdd448",
325-
}
326-
`;
263+
exports[`localIdentName option should use hash prefix: locals 1`] = `undefined`;
327264

328265
exports[`localIdentName option should use hash prefix: module (evaluated) 1`] = `
329266
Array [
330267
Array [
331268
1,
332-
".test--307c32aa793aaec9aecded85a9fdd448 {
269+
":local(.test) {
333270
background: red;
334271
}
335272
336-
._test--d745495d407559ef605c9072243801fd {
273+
:local(._test) {
337274
background: blue;
338275
}
339276
340-
.className--eab624d1bc6b9c6b6a4278d1030dd690 {
277+
:local(.className) {
341278
background: red;
342279
}
343280
344-
#someId--a0ce220cc9bbb1ee0e85cc0d1f0c6aa9 {
281+
:local(#someId) {
345282
background: green;
346283
}
347284
348-
.className--eab624d1bc6b9c6b6a4278d1030dd690 .subClass--2c82998be8a2b2e94ad7be56c9e685cd {
285+
:local(.className .subClass) {
349286
color: green;
350287
}
351288
352-
#someId--a0ce220cc9bbb1ee0e85cc0d1f0c6aa9 .subClass--2c82998be8a2b2e94ad7be56c9e685cd {
289+
:local(#someId .subClass) {
353290
color: blue;
354291
}
355292
356-
.-a0-34a___f--e99d667fe0ceff9363b011302ac3f508 {
293+
:local(.-a0-34a___f) {
357294
color: red;
358295
}
359296
",

‎test/__snapshots__/modules-option.test.js.snap

+2,561-193
Large diffs are not rendered by default.

‎test/__snapshots__/url-option.test.js.snap

+36-36
Large diffs are not rendered by default.

‎test/fixtures/postcss-present-env/source.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ html {
2727
}
2828

2929
.hero:matches(main, .main) {
30-
background-image: image-set("img1x.png" 1x, "img2x.png" 2x);
30+
background-image: image-set(url("./img1x.png") 1x, url("./img2x.png") 2x);
3131
}
3232

3333
a {

‎test/fixtures/url/url.css

+30-30
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
11
@import "./imported.css";
22

33
.class {
4-
background: url('img.png');
4+
background: url('./img.png');
55
}
66

77
.class {
8-
background: url("img.png");
8+
background: url("./img.png");
99
}
1010

1111
.class {
12-
background: url(img.png);
12+
background: url(./img.png);
1313
}
1414

1515
.class {
16-
background: url("img.png#hash");
16+
background: url("./img.png#hash");
1717
}
1818

1919
.class {
2020
background: url(
21-
"img.png"
21+
"./img.png"
2222
);
2323
}
2424

2525
.class {
26-
background: green url( 'img.png' ) xyz;
26+
background: green url( './img.png' ) xyz;
2727
}
2828

2929
.class {
30-
background: green url( "img.png" ) xyz;
30+
background: green url( "./img.png" ) xyz;
3131
}
3232

3333
.class {
34-
background: green url( img.png ) xyz;
34+
background: green url( ./img.png ) xyz;
3535
}
3636

3737
.class {
38-
background: green url(~package/img.png) url(other-img.png) xyz;
38+
background: green /* url(~package/img.png) */ url(./other-img.png) xyz;
3939
}
4040

4141
.class {
42-
background: green url( "img img.png" ) xyz;
42+
background: green url( "./img img.png" ) xyz;
4343
}
4444

4545
.class {
46-
background: green url( 'img img.png' ) xyz;
46+
background: green url( './img img.png' ) xyz;
4747
}
4848

4949
.class {
@@ -79,20 +79,20 @@
7979
}
8080

8181
@font-face {
82-
src: url(font.woff) format('woff'),
83-
url('font.woff2') format('woff2'),
84-
url("font.eot") format('eot'),
85-
url(~package/font.ttf) format('truetype'),
86-
url("font with spaces.eot") format("embedded-opentype"),
87-
url('font.svg#svgFontName') format('svg'),
88-
url('font.woff2?foo=bar') format('woff2'),
89-
url("font.eot?#iefix") format('embedded-opentype'),
90-
url("font with spaces.eot?#iefix") format('embedded-opentype');
82+
src: url(./font.woff) format('woff'),
83+
url('./font.woff2') format('woff2'),
84+
url("./font.eot") format('eot'),
85+
/*url(~package/font.ttf) format('truetype'), */
86+
url("./font with spaces.eot") format("embedded-opentype"),
87+
url('./font.svg#svgFontName') format('svg'),
88+
url('./font.woff2?foo=bar') format('woff2'),
89+
url("./font.eot?#iefix") format('embedded-opentype'),
90+
url("./font with spaces.eot?#iefix") format('embedded-opentype');
9191
}
9292

9393
@media (min-width: 500px) {
9494
body {
95-
background: url("img.png");
95+
background: url("./img.png");
9696
}
9797
}
9898

@@ -105,15 +105,15 @@ b {
105105
}
106106

107107
@keyframes anim {
108-
background: green url('img.png') xyz;
108+
background: green url('./img.png') xyz;
109109
}
110110

111111
.a {
112-
background-image: -webkit-image-set(url('img1x.png') 1x, url('img2x.png') 2x)
112+
background-image: -webkit-image-set(url('./img1x.png') 1x, url('./img2x.png') 2x)
113113
}
114114

115115
.a {
116-
background-image: image-set(url('img1x.png') 1x, url('img2x.png') 2x)
116+
background-image: image-set(url('./img1x.png') 1x, url('./img2x.png') 2x)
117117
}
118118

119119
.class {
@@ -146,27 +146,27 @@ b {
146146
}
147147

148148
.class {
149-
background: url("img.png?foo");
149+
background: url("./img.png?foo");
150150
}
151151

152152
.class {
153-
background: url("img.png?foo=bar");
153+
background: url("./img.png?foo=bar");
154154
}
155155

156156
.class {
157-
background: url("img.png?foo=bar#hash");
157+
background: url("./img.png?foo=bar#hash");
158158
}
159159

160160
.class {
161-
background: url("img.png?foo=bar#hash");
161+
background: url("./img.png?foo=bar#hash");
162162
}
163163

164164
.class {
165-
background: url("img.png?");
165+
background: url("./img.png?");
166166
}
167167

168168
.class {
169-
background-image: url('img.png') url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>") url('img.png');
169+
background-image: url('./img.png') url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>") url('./img.png');
170170
}
171171

172172
.class {

‎test/getLocalIdent-option.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ describe('getLocalIdent option', () => {
3030
const config = {
3131
loader: {
3232
options: {
33-
modules: false,
33+
modules: 'global',
3434
getLocalIdent() {
3535
return 'foo';
3636
},

‎test/import-option.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ describe('import option', () => {
3232
expect(stats.compilation.errors).toMatchSnapshot('errors');
3333
});
3434

35-
[true, false].forEach((modulesValue) => {
36-
it(`false and modules ${modulesValue}`, async () => {
35+
[true, 'local', 'global', false].forEach((modulesValue) => {
36+
it(`false and modules \`${modulesValue}\``, async () => {
3737
const config = {
3838
loader: { options: { import: false, modules: modulesValue } },
3939
};

‎test/modules-option.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const testCases = fs.readdirSync(testCasesPath);
88

99
describe('modules', () => {
1010
[false, true].forEach((exportOnlyLocalsValue) => {
11-
[false, true].forEach((modulesValue) => {
11+
[true, 'local', 'global', false].forEach((modulesValue) => {
1212
testCases.forEach((name) => {
1313
it(`case \`${name}\`: (export \`${
1414
exportOnlyLocalsValue ? 'only locals' : 'all'

0 commit comments

Comments
 (0)
Please sign in to comment.