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",