Add options.stackableRoot. v0.2.2

Add `postcss-plugin-context` example to readme.
MadLittleMods · Aug 1, 2015 · bc11dbb · bc11dbb
1 parent d1267e4
commit bc11dbb
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# v0.2.2 - 2015-8-1
+
+ - Add `options.stackableRoot` to customize the stackable selector used. Defaults to `:root`
+ - Add [`postcss-plugin-context`](https://github.com/postcss/postcss-plugin-context) example. Only apply plugin to certain areas of the CSS.
+ - Add note about the default `:root` not supported in IE8-
+
+
 # v0.2.1 - 2015-7-31
 
  - Switch to [`string.prototype.repeat`](https://www.npmjs.com/package/string.prototype.repeat) and [`object-assign`](https://www.npmjs.com/package/object-assign)
@@ -8,12 +15,14 @@
 
  - Use [`repeat-string`](https://www.npmjs.com/package/repeat-string) instead of `String.prototype.repeat` which doesn't work in node.js
 
+
 # v0.1.2 - 2015-7-30
 
  - Add tests
  - npm release
  - Add badges to readme
 
+
 # v0.1.0 - 2015-7-30
 
  - First release
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 [Why?](#why) Dealing with CSS you can't remove(mainly from a 3rd party), [see the why section](#why). 
 
-## Latest Version: v0.2.1
+## Latest Version: v0.2.2
 
 ### [Changelog](https://github.com/MadLittleMods/postcss-increase-specificity/blob/master/CHANGELOG.md)
 
@@ -16,6 +16,8 @@
 
 # Usage
 
+## Basic Example
+
 ```js
 var postcss = require('postcss');
 var increaseSpecificity = require('postcss-increase-specificity');
@@ -94,6 +96,66 @@ html:root:root:root {
 ```
 
 
+## Only apply to certain sections of styles
+
+[`postcss-increase-specificity`](https://github.com/postcss/postcss-plugin-context) allows you to apply plugins to only in certain areas of of your CSS.
+
+
+```js
+var postcss = require('postcss');
+var context = require('postcss-plugin-context');
+var increaseSpecificity = require('postcss-increase-specificity');
+
+var fs = require('fs');
+
+var mycss = fs.readFileSync('input.css', 'utf8');
+
+// Process your CSS with postcss-increase-specificity
+var output = postcss([
+		context({
+	        increaseSpecificity: increaseSpecificity(/*options*/)
+	    })
+    ])
+    .process(mycss)
+    .css;
+
+console.log(output);
+```
+
+Input:
+
+```css
+/* these styles will be left alone */
+html {
+	background: #485674;
+	height: 100%;
+}
+
+p {
+	display: inline-block;
+	width: 50%;
+}
+
+
+/* these styles will have the hacks prepended */
+@context increaseSpecifity {
+	#main-nav {
+		color: #ffffff;
+	}
+
+	.blocks {
+		background: #34405b;
+	}
+
+	.baz,
+	.qux {
+		display: inline-block;
+		width: 50%;
+	}
+}
+```
+
+
 # Why? *(my use case)*
 
 I had to use a 3rd party form-creation/data-aggregation service required by the client. The form is embedded in the website, via script tag, which unrolls an iframe with the form. The goal was to make the form match the rest of the site. 
@@ -112,10 +174,13 @@ This meant I had to make my own selectors have a lot more specificity in order f
 
 # Options
 
- - `repeat`: number - The number of times we prepend `:root` in front of your selector
+ - `repeat`: number - The number of times we prepend `options.stackableRoot` in front of your selector
  	 - Default: `3`
- - `overrideIds`: boolean - Whether we should add `!important` to all declarations that use id's in any way. Because id's are so specific, the only way(essentially) to overcome another id is to use `!important`.
+ - `overrideIds`: bool - Whether we should add `!important` to all declarations that use id's in any way. Because id's are so specific, the only way(essentially) to overcome another id is to use `!important`.
  	 - Default: `true`
+ - `stackableRoot`: string - Selector that is repeated to make up the piece that is added to increase specificity
+ 	 - Default: `:root`
+ 	 - *Warning:* The default `:root` pseudo-class selector is not supported in IE8-. To support IE-, you can change this option to a class such as `.my-root` and add it to the `<html class="my-root">` tag in your markup.
 
 
 # Tests

diff --git a/index.js b/index.js
@@ -1,4 +1,4 @@
-// postcss-increase-specificity v0.2.1
+// postcss-increase-specificity v0.2.2
 
 var postcss = require('postcss');
 var objectAssign = require('object-assign');
@@ -10,7 +10,9 @@ module.exports = postcss.plugin('postcss-increase-specifity', function(options)
 		// The number of times `:root` is appended in front of the selector
 		repeat: 3,
 		// Whether to add !important to declarations in rules with id selectors
-		overrideIds: true
+		overrideIds: true,
+		// The thing we repeat over and over to make up the piece that increases specificity
+		stackableRoot: ':root'
 	};
 
 	var opts = objectAssign({}, defaults, options);
@@ -23,14 +25,15 @@ module.exports = postcss.plugin('postcss-increase-specifity', function(options)
 				if(
 					selector === 'html' ||
 					selector === ':root' ||
-					selector === ':host'
+					selector === ':host' ||
+					selector === opts.stackableRoot
 				) {
-					return selector + ':root'.repeat(opts.repeat);
+					return selector + opts.stackableRoot.repeat(opts.repeat);
 				}
 
 				// Otherwise just make it a descendant (this is what will happen most of the time)
 				// `:root:root:root .foo`
-				return ':root'.repeat(opts.repeat) + ' ' + selector;
+				return opts.stackableRoot.repeat(opts.repeat) + ' ' + selector;
 			});
 
 			if(opts.overrideIds) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-increase-specificity",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "PostCSS plugin to increase the specificity of your selectors",
   "keywords": [
     "postcss",

diff --git a/test/fixtures/selection-pseudo.css b/test/fixtures/selection-pseudo.css
@@ -0,0 +1,6 @@
+::selection {
+	background-color: #fcf1ab; color: #000;
+}
+::-moz-selection {
+	background-color: #fcf1ab; color: #000;
+}
diff --git a/test/fixtures/selection-pseudo.expected.css b/test/fixtures/selection-pseudo.expected.css
@@ -0,0 +1,6 @@
+:root:root:root ::selection {
+	background-color: #fcf1ab; color: #000;
+}
+:root:root:root ::-moz-selection {
+	background-color: #fcf1ab; color: #000;
+}
diff --git a/test/fixtures/stackable-root-selector.css b/test/fixtures/stackable-root-selector.css
@@ -0,0 +1,3 @@
+.my-root {
+	background: #f00;
+}
diff --git a/test/fixtures/stackable-root-selector.expected.css b/test/fixtures/stackable-root-selector.expected.css
@@ -0,0 +1,3 @@
+.my-root.my-root.my-root.my-root {
+	background: #f00;
+}
diff --git a/test/fixtures/stackable-root.css b/test/fixtures/stackable-root.css
@@ -0,0 +1,3 @@
+.foo {
+	background: #f00;
+}
diff --git a/test/fixtures/stackable-root.expected.css b/test/fixtures/stackable-root.expected.css
@@ -0,0 +1,3 @@
+.my-root.my-root.my-root .foo {
+	background: #f00;
+}
diff --git a/test/test.js b/test/test.js
@@ -68,6 +68,10 @@ describe('postcss-increase-specificity', function() {
 		return testPlugin('./test/fixtures/root-level-selectors.css', './test/fixtures/root-level-selectors.expected.css');
 	});
 
+	it('should work with `::selection`', function() {
+		return testPlugin('./test/fixtures/selection-pseudo.css', './test/fixtures/selection-pseudo.expected.css');
+	});
+
 	it('should not mangle a decl that already has an `!important` on it', function() {
 		return testPlugin('./test/fixtures/no-mangle-important-decl-in-id.css', './test/fixtures/no-mangle-important-decl-in-id.expected.css');
 	});
@@ -92,6 +96,25 @@ describe('postcss-increase-specificity', function() {
 		);
 	});
 
+	it('should use stackableRoot `options.stackableRoot`', function() {
+		return testPlugin(
+			'./test/fixtures/stackable-root.css',
+			'./test/fixtures/stackable-root.expected.css',
+			{
+				stackableRoot: '.my-root'
+			}
+		);
+	});
+
+	it('should consider a selector that uses a `options.stackableRoot` a root', function() {
+		return testPlugin(
+			'./test/fixtures/stackable-root.css',
+			'./test/fixtures/stackable-root.expected.css',
+			{
+				stackableRoot: '.my-root'
+			}
+		);
+	});
 });