Skip to content
This repository was archived by the owner on Jul 25, 2023. It is now read-only.

Commit 821b489

Browse files
apexskierapexskier
committed
update css module postcss selectors, support imports in selectors
1 parent 1fee601 commit 821b489

File tree

3 files changed

+87
-69
lines changed

3 files changed

+87
-69
lines changed

‎lib/processCss.js

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@ var assign = require("object-assign");
1010
var getLocalIdent = require("./getLocalIdent");
1111

1212
var icssUtils = require('icss-utils');
13-
var localByDefault = require("postcss-modules-local-by-default");
14-
var extractImports = require("postcss-modules-extract-imports");
15-
var modulesScope = require("postcss-modules-scope");
16-
var modulesValues = require("postcss-modules-values");
13+
var icssSelectors = require("postcss-icss-selectors");
14+
var icssComposes = require("postcss-icss-composes");
15+
var icssValues = require("postcss-icss-values");
1716
var valueParser = require('postcss-value-parser');
1817

1918
var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
@@ -30,10 +29,17 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
3029
if (node.type !== 'word') {
3130
return;
3231
}
32+
var isClassName = /^\./.test(node.value); // starts with a period (className)
3333
var token = node.value;
34+
if (isClassName) {
35+
token = token.slice(1); // remove period
36+
}
3437
var importIndex = imports["$" + token];
3538
if(typeof importIndex === "number") {
3639
node.value = "___CSS_LOADER_IMPORT___" + importIndex + "___";
40+
if (isClassName) {
41+
node.value = "." + node.value; // add period
42+
}
3743
}
3844
})
3945
return tokens.toString();
@@ -115,16 +121,21 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
115121
}
116122
}
117123

118-
css.walkDecls(function(decl) {
119-
var values = Tokenizer.parseValues(decl.value);
120-
values.nodes.forEach(function(value) {
121-
value.nodes.forEach(processNode);
122-
});
123-
decl.value = Tokenizer.stringifyValues(values);
124-
});
125-
css.walkAtRules(function(atrule) {
126-
if(typeof atrule.params === "string") {
127-
atrule.params = replaceImportsInString(atrule.params);
124+
css.walk(function(node) {
125+
if (node.type === "decl") {
126+
var values = Tokenizer.parseValues(node.value);
127+
values.nodes.forEach(function(value) {
128+
value.nodes.forEach(processNode);
129+
});
130+
node.value = Tokenizer.stringifyValues(values);
131+
} else if (node.type === "rule") {
132+
if (typeof node.selector === "string") {
133+
node.selector = replaceImportsInString(node.selector);
134+
}
135+
} else if (node.type === "atrule" && node.name === "media") {
136+
if (typeof node.params === "string") {
137+
node.params = replaceImportsInString(node.params);
138+
}
128139
}
129140
});
130141

@@ -153,12 +164,12 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
153164
};
154165

155166
var pipeline = postcss([
156-
modulesValues,
157-
localByDefault({
167+
icssValues,
168+
icssSelectors({
158169
mode: options.mode,
159170
rewriteUrl: function(global, url) {
160171
if(parserOptions.url){
161-
url = url.trim();
172+
url = url.trim();
162173

163174
if(!url.replace(/\s/g, '').length || !loaderUtils.isUrlRequest(url, root)) {
164175
return url;
@@ -168,18 +179,16 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
168179
}
169180
}
170181
return url;
171-
}
172-
}),
173-
extractImports(),
174-
modulesScope({
182+
},
175183
generateScopedName: function generateScopedName (exportName) {
176184
return customGetLocalIdent(options.loaderContext, localIdentName, exportName, {
177185
regExp: localIdentRegExp,
178186
hashPrefix: query.hashPrefix || "",
179187
context: context
180188
});
181-
}
189+
},
182190
}),
191+
icssComposes,
183192
parserPlugin(parserOptions)
184193
]);
185194

‎package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,9 @@
2020
"lodash.camelcase": "^4.3.0",
2121
"object-assign": "^4.0.1",
2222
"postcss": "^5.0.6",
23-
"postcss-modules-extract-imports": "^1.0.0",
24-
"postcss-modules-local-by-default": "^1.0.1",
25-
"postcss-modules-scope": "^1.0.0",
26-
"postcss-modules-values": "^1.1.0",
23+
"postcss-icss-composes": "^2.0.3",
24+
"postcss-icss-selectors": "^2.0.3",
25+
"postcss-icss-values": "^2.0.1",
2726
"postcss-value-parser": "^3.3.0",
2827
"source-list-map": "^0.1.7"
2928
},

‎yarn.lock

Lines changed: 53 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -534,14 +534,6 @@ css-color-names@0.0.4:
534534
version "0.0.4"
535535
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
536536

537-
css-selector-tokenizer@^0.6.0:
538-
version "0.6.0"
539-
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
540-
dependencies:
541-
cssesc "^0.1.0"
542-
fastparse "^1.1.1"
543-
regexpu-core "^1.0.0"
544-
545537
css-selector-tokenizer@^0.7.0:
546538
version "0.7.0"
547539
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
@@ -962,6 +954,12 @@ generate-object-property@^1.1.0:
962954
dependencies:
963955
is-property "^1.0.0"
964956

957+
generic-names@^1.0.2:
958+
version "1.0.2"
959+
resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-1.0.2.tgz#e25b7feceb5b5a8f28f5f972a7ccfe57e562adcd"
960+
dependencies:
961+
loader-utils "^0.2.16"
962+
965963
get-caller-file@^1.0.1:
966964
version "1.0.2"
967965
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -1156,16 +1154,18 @@ http-signature@~1.1.0:
11561154
jsprim "^1.2.2"
11571155
sshpk "^1.7.0"
11581156

1159-
icss-replace-symbols@^1.0.2:
1160-
version "1.0.2"
1161-
resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
1162-
11631157
icss-utils@^2.1.0:
11641158
version "2.1.0"
11651159
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
11661160
dependencies:
11671161
postcss "^6.0.1"
11681162

1163+
icss-utils@^3.0.1:
1164+
version "3.0.1"
1165+
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-3.0.1.tgz#ee70d3ae8cac38c6be5ed91e851b27eed343ad0f"
1166+
dependencies:
1167+
postcss "^6.0.2"
1168+
11691169
ignore@^3.2.0:
11701170
version "3.2.4"
11711171
resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.4.tgz#4055e03596729a8fabe45a43c100ad5ed815c4e8"
@@ -1468,6 +1468,15 @@ load-json-file@^1.0.0:
14681468
pinkie-promise "^2.0.0"
14691469
strip-bom "^2.0.0"
14701470

1471+
loader-utils@^0.2.16:
1472+
version "0.2.17"
1473+
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
1474+
dependencies:
1475+
big.js "^3.1.3"
1476+
emojis-list "^2.0.0"
1477+
json5 "^0.5.0"
1478+
object-assign "^4.0.1"
1479+
14711480
loader-utils@^1.0.2:
14721481
version "1.0.3"
14731482
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.0.3.tgz#566c320c24c33cb3f02db4df83f3dbf60b253de3"
@@ -1552,7 +1561,7 @@ lodash.uniq@^4.3.0:
15521561
version "4.5.0"
15531562
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
15541563

1555-
lodash@^4.0.0, lodash@^4.2.1, lodash@^4.3.0:
1564+
lodash@^4.0.0, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0:
15561565
version "4.17.4"
15571566
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
15581567

@@ -1861,6 +1870,34 @@ postcss-filter-plugins@^2.0.0:
18611870
postcss "^5.0.4"
18621871
uniqid "^4.0.0"
18631872

1873+
postcss-icss-composes@^2.0.3:
1874+
version "2.0.3"
1875+
resolved "https://registry.yarnpkg.com/postcss-icss-composes/-/postcss-icss-composes-2.0.3.tgz#ac24b13de1979f5d7f0e7194ef203a10b0f653e6"
1876+
dependencies:
1877+
css-selector-tokenizer "^0.7.0"
1878+
icss-utils "^3.0.1"
1879+
postcss "^6.0.2"
1880+
postcss-value-parser "^3.3.0"
1881+
1882+
postcss-icss-selectors@^2.0.3:
1883+
version "2.0.3"
1884+
resolved "https://registry.yarnpkg.com/postcss-icss-selectors/-/postcss-icss-selectors-2.0.3.tgz#27fa1afcaab6c602c866cbb298f3218e9bc1c9b3"
1885+
dependencies:
1886+
css-selector-tokenizer "^0.7.0"
1887+
generic-names "^1.0.2"
1888+
icss-utils "^3.0.1"
1889+
lodash "^4.17.4"
1890+
postcss "^6.0.2"
1891+
1892+
postcss-icss-values@^2.0.1:
1893+
version "2.0.1"
1894+
resolved "https://registry.yarnpkg.com/postcss-icss-values/-/postcss-icss-values-2.0.1.tgz#5a3388b759986ed25aa1c1c06836584b2b32780f"
1895+
dependencies:
1896+
icss-utils "^3.0.1"
1897+
lodash "^4.17.4"
1898+
postcss "^6.0.2"
1899+
postcss-value-parser "^3.3.0"
1900+
18641901
postcss-merge-idents@^2.1.5:
18651902
version "2.1.7"
18661903
resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
@@ -1922,33 +1959,6 @@ postcss-minify-selectors@^2.0.4:
19221959
postcss "^5.0.14"
19231960
postcss-selector-parser "^2.0.0"
19241961

1925-
postcss-modules-extract-imports@^1.0.0:
1926-
version "1.0.1"
1927-
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
1928-
dependencies:
1929-
postcss "^5.0.4"
1930-
1931-
postcss-modules-local-by-default@^1.0.1:
1932-
version "1.1.1"
1933-
resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
1934-
dependencies:
1935-
css-selector-tokenizer "^0.6.0"
1936-
postcss "^5.0.4"
1937-
1938-
postcss-modules-scope@^1.0.0:
1939-
version "1.0.2"
1940-
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
1941-
dependencies:
1942-
css-selector-tokenizer "^0.6.0"
1943-
postcss "^5.0.4"
1944-
1945-
postcss-modules-values@^1.1.0:
1946-
version "1.2.2"
1947-
resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
1948-
dependencies:
1949-
icss-replace-symbols "^1.0.2"
1950-
postcss "^5.0.14"
1951-
19521962
postcss-normalize-charset@^1.1.0:
19531963
version "1.1.1"
19541964
resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
@@ -2038,9 +2048,9 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
20382048
source-map "^0.5.6"
20392049
supports-color "^3.2.3"
20402050

2041-
postcss@^6.0.1:
2042-
version "6.0.1"
2043-
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
2051+
postcss@^6.0.1, postcss@^6.0.2:
2052+
version "6.0.2"
2053+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.2.tgz#5c4fea589f0ac3b00caa75b1cbc3a284195b7e5d"
20442054
dependencies:
20452055
chalk "^1.1.3"
20462056
source-map "^0.5.6"

0 commit comments

Comments
 (0)