From 68cb9e5d8bf441e7f5384238fa397e03d5689247 Mon Sep 17 00:00:00 2001 From: Ivan Kalinin Date: Sun, 10 Sep 2017 21:44:56 -0700 Subject: [PATCH 1/5] added postcss postcss-increase-specificity --- lib/processCss.js | 11 ++++++++++- package.json | 1 + 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/lib/processCss.js b/lib/processCss.js index 8979f7ad..420b8702 100644 --- a/lib/processCss.js +++ b/lib/processCss.js @@ -16,6 +16,8 @@ var modulesScope = require("postcss-modules-scope"); var modulesValues = require("postcss-modules-values"); var valueParser = require('postcss-value-parser'); +var postcssIncreaseSpecificity = require('postcss-increase-specificity'); + var parserPlugin = postcss.plugin("css-loader-parser", function(options) { return function(css) { var imports = {}; @@ -158,6 +160,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) { resolve: options.resolve }; + var increaseSpecificity = query.increaseSpecificity || {}; + var pipeline = postcss([ modulesValues, localByDefault({ @@ -186,7 +190,12 @@ module.exports = function processCss(inputSource, inputMap, options, callback) { }); } }), - parserPlugin(parserOptions) + parserPlugin(parserOptions), + postcssIncreaseSpecificity({ + stackableRoot: increaseSpecificity.stackableRoot || '', + repeat: increaseSpecificity.repeat || 1, + overrideIds: increaseSpecificity.overrideIds || true, + }) ]); if(minimize) { diff --git a/package.json b/package.json index 9cd6e8d9..fdc7ec32 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "lodash.camelcase": "^4.3.0", "object-assign": "^4.0.1", "postcss": "^5.0.6", + "postcss-increase-specificity": "^0.5.0", "postcss-modules-extract-imports": "^1.0.0", "postcss-modules-local-by-default": "^1.0.1", "postcss-modules-scope": "^1.0.0", From 2b582ad14d2fa4e7baca974cb6dc44068d75a414 Mon Sep 17 00:00:00 2001 From: Ivan Kalinin Date: Sun, 10 Sep 2017 21:58:11 -0700 Subject: [PATCH 2/5] updated README.md --- README.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/README.md b/README.md index d558fcbb..54527583 100644 --- a/README.md +++ b/README.md @@ -104,6 +104,7 @@ It's useful when you, for instance, need to post process the CSS as a string. |**`camelCase`**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase| |**`importLoaders`**|`{Number}`|`0`|Number of loaders applied before CSS loader| |**`localIdentName`**|`{String}`|`[hash:base64]`|Configure the generated ident| +|**`increaseSpecificity`**|`{Object}`|`{}`|Enable/Disable and configure the postcss-increase-specificity plugin| ### `root` @@ -430,6 +431,31 @@ The query parameter `importLoaders` allows to configure how many loaders before This may change in the future, when the module system (i. e. webpack) supports loader matching by origin. +### `increaseSpecificity` + +The query parameter `increaseSpecificity` allows to enable and configure postcss-increase-specificity plugin. See [postcss-increase-specificity's documentation](https://github.com/MadLittleMods/postcss-increase-specificity/blob/master/README.md) for more information on the available options. + +**webpack.config.js** +```js +{ + test: /\.s?css$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + increaseSpecificity: { + stackableRoot: '.my-root', // string - Selector that is repeated to make up the piece that is added to increase specificity + repeat: 1, // number - The number of times we prepend options.stackableRoot in front of your selector + }, + } + }, + 'postcss-loader', + 'sass-loader' + ] +} +``` +

Examples

### Assets From b63ed1ee11616f1999204e6e7d50886fa8f881e0 Mon Sep 17 00:00:00 2001 From: Ivan Kalinin Date: Tue, 10 Oct 2017 10:25:08 -0700 Subject: [PATCH 3/5] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fdc7ec32..3b5038e9 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "lodash.camelcase": "^4.3.0", "object-assign": "^4.0.1", "postcss": "^5.0.6", - "postcss-increase-specificity": "^0.5.0", + "postcss-increase-specificity": "^0.6.0", "postcss-modules-extract-imports": "^1.0.0", "postcss-modules-local-by-default": "^1.0.1", "postcss-modules-scope": "^1.0.0", From 3db24a33cf8f5de899666c05c37f0772ae289342 Mon Sep 17 00:00:00 2001 From: Ivan Kalinin Date: Wed, 17 Jan 2018 12:22:47 -0800 Subject: [PATCH 4/5] updated postcss increase specificity --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 206f3435..02431750 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "lodash.camelcase": "^4.3.0", "object-assign": "^4.1.1", "postcss": "^5.0.6", - "postcss-increase-specificity": "^0.6.0", + "postcss-increase-specificity": "github:IvanKalinin/postcss-increase-specificity#3dff494fb0aa65fad4845809f9c66cf83c89ae0e", "postcss-modules-extract-imports": "^1.2.0", "postcss-modules-local-by-default": "^1.2.0", "postcss-modules-scope": "^1.1.0", From 2cd628fb6b3e92aa76824299130cad4f1e6e9035 Mon Sep 17 00:00:00 2001 From: Ivan Kalinin Date: Wed, 17 Jan 2018 12:45:38 -0800 Subject: [PATCH 5/5] added increase specificity ignoreList option in css loader --- lib/processCss.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/processCss.js b/lib/processCss.js index bec93b5f..b7898bd1 100644 --- a/lib/processCss.js +++ b/lib/processCss.js @@ -193,6 +193,7 @@ module.exports = function processCss(inputSource, inputMap, options, callback) { stackableRoot: increaseSpecificity.stackableRoot || '', repeat: increaseSpecificity.repeat || 1, overrideIds: increaseSpecificity.overrideIds || true, + ignoreList: increaseSpecificity.ignoreList || [], }) ]);