diff --git a/README.md b/README.md index ad10100e..0f1086cb 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`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase| |**[`importLoaders`](#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 diff --git a/lib/processCss.js b/lib/processCss.js index ab38c804..b7898bd1 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 = {}; @@ -156,6 +158,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) { resolve: options.resolve }; + var increaseSpecificity = query.increaseSpecificity || {}; + var pipeline = postcss([ modulesValues, localByDefault({ @@ -184,7 +188,13 @@ module.exports = function processCss(inputSource, inputMap, options, callback) { }); } }), - parserPlugin(parserOptions) + parserPlugin(parserOptions), + postcssIncreaseSpecificity({ + stackableRoot: increaseSpecificity.stackableRoot || '', + repeat: increaseSpecificity.repeat || 1, + overrideIds: increaseSpecificity.overrideIds || true, + ignoreList: increaseSpecificity.ignoreList || [], + }) ]); if(minimize) { diff --git a/package.json b/package.json index c29a246a..02431750 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "lodash.camelcase": "^4.3.0", "object-assign": "^4.1.1", "postcss": "^5.0.6", + "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",