Merge pull request #1 from IvanKalinin/feature--increase-specificity

Feature  increase specificity

Author: IvanKalinin

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'
+  ]
+}
+```
+
 <h2 align="center">Examples</h2>
 
 ### Assets

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) {

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