postcss-nesting - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+## 2.0.0 (2015-09-16)
+
+- Added: Requirement of `&` per the specification
+- Added: New prefix option
+- Added: `@document` and `@supports` as bubbles
+- Updated: Documentation
+
 ## 1.0.0 (2015-09-15)
@@ -2,0 +9,0 @@

index.js

@@ -1,3 +0,4 @@
-var bubble  = ['media'];
+var bubble  = ['document', 'media', 'supports'];
 var postcss = require('postcss');
+var prefix  = '';
 
@@ -59,2 +60,3 @@ function transpileSelectors(fromRule, toRule) {
 	var index = -1;
+	var name  = prefix ? '-' + prefix + '-nest' : 'nest';
 	var child;
@@ -69,3 +71,3 @@
 			// if atrule is nest
-			if (child.name === 'nest') {
+			if (child.name === name && child.params.indexOf('&') !== -1) {
 				transpileNestRule(rule, newRule, child);
@@ -87,2 +89,3 @@
 	if (opts && opts.bubble) bubble = bubble.concat(opts.bubble);
+	if (opts && opts.prefix) prefix = opts.prefix;
 
@@ -89,0 +92,0 @@ return function (css) {

package.json

 {
   "name": "postcss-nesting",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Transpiles nested rules according to CSS Nesting Module Level 3",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,7 +0,9 @@
-# PostCSS Nesting [![Build Status][ci-img]][ci]
+# CSS Nesting [![Build Status][ci-img]][ci]
 
 <img align="right" width="135" height="95" src="http://postcss.github.io/postcss/logo-leftp.png" title="Philosopher’s stone, logo of PostCSS">
 
-[PostCSS Nesting] is a [PostCSS] plugin that transforms W3C [CSS Nesting Module Level 3] syntax (@tabatkins’ proposal) to more compatible CSS.
+[CSS Nesting] is a [PostCSS] plugin that allows you to nest one style rule inside another, similar to Sass, but following the [CSS Nesting Module Level 3] specification.
 
+This greatly increases the modularity and maintainability of CSS stylesheets.
+
 ```css
@@ -13,15 +15,16 @@ /* before */
 
-    {
-        c, d {
-            color: white;
-        }
+    @nest c, d {
+        color: white;
 
-        & & {
-            color: blue;
-        }
+    @nest & & {
+        color: blue;
+    }
 
-        &:hover {
-            color: white;
-        }
+    @nest &:hover {
+        color: black;
     }
+
+    @media (min-width: 30em) {
+        color: yellow;
+    }
 }
@@ -44,37 +47,79 @@
 a:hover, b:hover {
-    color: white;
+    color: black;
 }
+
+@media (min-width: 30em) {
+    a, b {
+        color: yellow;
+    }
+}
 ```
 
-From [CSS Nesting Module Level 3]:
-> This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increase the modularity and maintainability of CSS stylesheets.
-
 ## Usage
 
-You just need to follow these two steps to use [PostCSS Nesting]:
+Follow these steps to use [CSS Nesting].
 
-1. Add [PostCSS] to your build tool.
-2. Add [PostCSS Nesting] as a PostCSS process.
+Add [CSS Nesting] to your build tool:
 
-```sh
+```bash
 npm install postcss-nesting --save-dev
 ```
 
-### Node
+#### Node
 
 ```js
-postcss([ require('postcss-nesting')({ /* options */ }) ])
+require('postcss-nesting')({ /* options */ }).process(YOUR_CSS);
 ```
 
-### Grunt
+#### PostCSS
 
-Install [Grunt PostCSS]:
+Add [PostCSS] to your build tool:
 
-```shell
-npm install postcss-nesting --save-dev
+```bash
+npm install postcss --save-dev
 ```
 
-Enable [PostCSS Nesting] within your Gruntfile:
+Load [CSS Nesting] as a PostCSS plugin:
 
 ```js
+postcss([
+    require('postcss-nesting')({ /* options */ })
+]);
+```
+
+#### Gulp
+
+Add [Gulp PostCSS] to your build tool:
+
+```bash
+npm install gulp-postcss --save-dev
+```
+
+Enable [CSS Nesting] within your Gulpfile:
+
+```js
+var postcss = require('gulp-postcss');
+
+gulp.task('css', function () {
+    return gulp.src('./css/src/*.css').pipe(
+        postcss([
+            require('postcss-nesting')({ /* options */ })
+        ])
+    ).pipe(
+        gulp.dest('./css')
+    );
+});
+```
+
+#### Grunt
+
+Add [Grunt PostCSS] to your build tool:
+
+```bash
+npm install grunt-postcss --save-dev
+```
+
+Enable [CSS Nesting] within your Gruntfile:
+
+```js
 grunt.loadNpmTasks('grunt-postcss');
@@ -96,7 +141,24 @@
 
+
+## Options
+
+#### `bubble`
+
+Type: `Array`  
+Default: `['document', 'media', 'supports']`
+
+Specifies additional at-rules whose contents should be transpiled so that the at-rule comes first. By default, `@media`, `@supports` and `@document` will do this.
+
+#### `prefix`
+
+Type: `String`  
+Default: `null`
+
+Specifies a prefix to be surrounded by dashes before the `@nest` at-rule (e.g. `@-x-nest`).
+
 [ci]: https://travis-ci.org/jonathantneal/postcss-nesting
 [ci-img]: https://travis-ci.org/jonathantneal/postcss-nesting.svg
-[CSS Nesting Module Level 3]: http://tabatkins.github.io/specs/css-nesting/
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
 [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
+[CSS Nesting]: https://github.com/jonathantneal/postcss-nesting
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Nesting]: https://github.com/jonathantneal/postcss-nesting

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12231

increased by11.1%

Lines of code

77

increased by4.05%

Number of lines in readme file

162

increased by62%

No dependency changes