Skip to content

feat: support imported classes in selectors (postcss-icss) #562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

feat: support imported classes in selectors (postcss-icss) #562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 31 additions & 22 deletions lib/processCss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,9 @@ var assign = require("object-assign");
var getLocalIdent = require("./getLocalIdent");

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

var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
Expand All @@ -30,10 +29,17 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
if (node.type !== 'word') {
return;
}
var isClassName = /^\./.test(node.value); // starts with a period (className)
var token = node.value;
if (isClassName) {
token = token.slice(1); // remove period
}
var importIndex = imports["$" + token];
if(typeof importIndex === "number") {
node.value = "___CSS_LOADER_IMPORT___" + importIndex + "___";
if (isClassName) {
node.value = "." + node.value; // add period
}
}
})
return tokens.toString();
Expand Down Expand Up @@ -115,16 +121,21 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
}
}

css.walkDecls(function(decl) {
var values = Tokenizer.parseValues(decl.value);
values.nodes.forEach(function(value) {
value.nodes.forEach(processNode);
});
decl.value = Tokenizer.stringifyValues(values);
});
css.walkAtRules(function(atrule) {
if(typeof atrule.params === "string") {
atrule.params = replaceImportsInString(atrule.params);
css.walk(function(node) {
if (node.type === "decl") {
var values = Tokenizer.parseValues(node.value);
values.nodes.forEach(function(value) {
value.nodes.forEach(processNode);
});
node.value = Tokenizer.stringifyValues(values);
} else if (node.type === "rule") {
if (typeof node.selector === "string") {
node.selector = replaceImportsInString(node.selector);
}
} else if (node.type === "atrule" && node.name === "media") {
if (typeof node.params === "string") {
node.params = replaceImportsInString(node.params);
}
}
});

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

var pipeline = postcss([
modulesValues,
localByDefault({
icssValues,
icssSelectors({
mode: options.mode,
rewriteUrl: function(global, url) {
if(parserOptions.url){
url = url.trim();
url = url.trim();

if(!url.replace(/\s/g, '').length || !loaderUtils.isUrlRequest(url, root)) {
return url;
Expand All @@ -168,18 +179,16 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
}
}
return url;
}
}),
extractImports(),
modulesScope({
},
generateScopedName: function generateScopedName (exportName) {
return customGetLocalIdent(options.loaderContext, localIdentName, exportName, {
regExp: localIdentRegExp,
hashPrefix: query.hashPrefix || "",
context: context
});
}
},
}),
icssComposes,
parserPlugin(parserOptions)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the contract logic changes with renaming the various postcss-modules-* to postcss-icss-* my gut feeling tells me, that this will require a few changes to that internal plugin (parserPlugin) aswell

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I've covered a bit of that above, but yeah, I'm not sure about everything.

]);

Expand Down
7 changes: 3 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,9 @@
"lodash.camelcase": "^4.3.0",
"object-assign": "^4.0.1",
"postcss": "^5.0.6",
"postcss-modules-extract-imports": "^1.0.0",
"postcss-modules-local-by-default": "^1.0.1",
"postcss-modules-scope": "^1.0.0",
"postcss-modules-values": "^1.1.0",
"postcss-icss-composes": "^2.0.3",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

postcss-icss-keyframes is missing, that was splitted into it's own plugin :) for @keyframes support

Maybe postcss-icss-import (@import) && postcss-icss-url (url()) aswell

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

postcss-icss-url seems to break a bunch of stuff for me on first testing. Might not end up being worthwhile with the new-loader branch being in progress. I'd still like to get css-modules/postcss-icss-selectors#119 merged, since I think it'll be required even with new-loader and the reorganization of icss loaders.

"postcss-icss-selectors": "^2.0.3",
"postcss-icss-values": "^2.0.1",
"postcss-value-parser": "^3.3.0",
"source-list-map": "^0.1.7"
},
Expand Down
96 changes: 53 additions & 43 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -534,14 +534,6 @@ [email protected]:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"

css-selector-tokenizer@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
dependencies:
cssesc "^0.1.0"
fastparse "^1.1.1"
regexpu-core "^1.0.0"

css-selector-tokenizer@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
Expand Down Expand Up @@ -962,6 +954,12 @@ generate-object-property@^1.1.0:
dependencies:
is-property "^1.0.0"

generic-names@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-1.0.2.tgz#e25b7feceb5b5a8f28f5f972a7ccfe57e562adcd"
dependencies:
loader-utils "^0.2.16"

get-caller-file@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
Expand Down Expand Up @@ -1156,16 +1154,18 @@ http-signature@~1.1.0:
jsprim "^1.2.2"
sshpk "^1.7.0"

icss-replace-symbols@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"

icss-utils@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
dependencies:
postcss "^6.0.1"

icss-utils@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-3.0.1.tgz#ee70d3ae8cac38c6be5ed91e851b27eed343ad0f"
dependencies:
postcss "^6.0.2"

ignore@^3.2.0:
version "3.2.4"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.4.tgz#4055e03596729a8fabe45a43c100ad5ed815c4e8"
Expand Down Expand Up @@ -1468,6 +1468,15 @@ load-json-file@^1.0.0:
pinkie-promise "^2.0.0"
strip-bom "^2.0.0"

loader-utils@^0.2.16:
version "0.2.17"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
dependencies:
big.js "^3.1.3"
emojis-list "^2.0.0"
json5 "^0.5.0"
object-assign "^4.0.1"

loader-utils@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.0.3.tgz#566c320c24c33cb3f02db4df83f3dbf60b253de3"
Expand Down Expand Up @@ -1552,7 +1561,7 @@ lodash.uniq@^4.3.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"

lodash@^4.0.0, lodash@^4.2.1, lodash@^4.3.0:
lodash@^4.0.0, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

Expand Down Expand Up @@ -1861,6 +1870,34 @@ postcss-filter-plugins@^2.0.0:
postcss "^5.0.4"
uniqid "^4.0.0"

postcss-icss-composes@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/postcss-icss-composes/-/postcss-icss-composes-2.0.3.tgz#ac24b13de1979f5d7f0e7194ef203a10b0f653e6"
dependencies:
css-selector-tokenizer "^0.7.0"
icss-utils "^3.0.1"
postcss "^6.0.2"
postcss-value-parser "^3.3.0"

postcss-icss-selectors@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/postcss-icss-selectors/-/postcss-icss-selectors-2.0.3.tgz#27fa1afcaab6c602c866cbb298f3218e9bc1c9b3"
dependencies:
css-selector-tokenizer "^0.7.0"
generic-names "^1.0.2"
icss-utils "^3.0.1"
lodash "^4.17.4"
postcss "^6.0.2"

postcss-icss-values@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/postcss-icss-values/-/postcss-icss-values-2.0.1.tgz#5a3388b759986ed25aa1c1c06836584b2b32780f"
dependencies:
icss-utils "^3.0.1"
lodash "^4.17.4"
postcss "^6.0.2"
postcss-value-parser "^3.3.0"

postcss-merge-idents@^2.1.5:
version "2.1.7"
resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
Expand Down Expand Up @@ -1922,33 +1959,6 @@ postcss-minify-selectors@^2.0.4:
postcss "^5.0.14"
postcss-selector-parser "^2.0.0"

postcss-modules-extract-imports@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
dependencies:
postcss "^5.0.4"

postcss-modules-local-by-default@^1.0.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
dependencies:
css-selector-tokenizer "^0.6.0"
postcss "^5.0.4"

postcss-modules-scope@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
dependencies:
css-selector-tokenizer "^0.6.0"
postcss "^5.0.4"

postcss-modules-values@^1.1.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
dependencies:
icss-replace-symbols "^1.0.2"
postcss "^5.0.14"

postcss-normalize-charset@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
Expand Down Expand Up @@ -2038,9 +2048,9 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
source-map "^0.5.6"
supports-color "^3.2.3"

postcss@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
postcss@^6.0.1, postcss@^6.0.2:
version "6.0.2"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.2.tgz#5c4fea589f0ac3b00caa75b1cbc3a284195b7e5d"
dependencies:
chalk "^1.1.3"
source-map "^0.5.6"
Expand Down