From 821b489ea69b27c627ee3908b6e616875cacfc79 Mon Sep 17 00:00:00 2001 From: Cameron Little Date: Fri, 23 Jun 2017 13:11:49 -0700 Subject: [PATCH] update css module postcss selectors, support imports in selectors --- lib/processCss.js | 53 +++++++++++++++----------- package.json | 7 ++-- yarn.lock | 96 ++++++++++++++++++++++++++--------------------- 3 files changed, 87 insertions(+), 69 deletions(-) diff --git a/lib/processCss.js b/lib/processCss.js index 8c688e34..2df20bb0 100644 --- a/lib/processCss.js +++ b/lib/processCss.js @@ -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) { @@ -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(); @@ -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); + } } }); @@ -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; @@ -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) ]); diff --git a/package.json b/package.json index f72aeb4c..0539f3a2 100644 --- a/package.json +++ b/package.json @@ -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", + "postcss-icss-selectors": "^2.0.3", + "postcss-icss-values": "^2.0.1", "postcss-value-parser": "^3.3.0", "source-list-map": "^0.1.7" }, diff --git a/yarn.lock b/yarn.lock index b5ab0cdc..181420ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -534,14 +534,6 @@ css-color-names@0.0.4: 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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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"