Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
postcss-nesting
Advanced tools
postcss-nesting - npm Package Compare versions
Comparing version 2.0.6 to 2.1.1
@@ -0,1 +1,9 @@ | ||
| ## 2.1.1 (2016-01-03) | ||
| - Updated: Project conventions | ||
| ## 2.1.0 (2016-01-03) | ||
| - Added: Support for valid direct nesting | ||
| ## 2.0.6 (2015-10-15) | ||
@@ -2,0 +10,0 @@ |
@@ -10,3 +10,3 @@ You want to help? You rock! Now, take a moment to be sure your contributions make sense to everyone else. | ||
| Remember, a bug is a _demonstrable problem_ caused by _our_ code. Please use this [demo] as a testing platform. You can share code entered here at any time by pressing the Meta and S keys (`⌘S`) to save the current code as a URL. | ||
| Remember, a bug is a _demonstrable problem_ caused by _our_ code. | ||
@@ -18,38 +18,38 @@ ## Submitting Pull Requests | ||
| 1. To begin, [fork this project], clone your fork, and add our upstream. | ||
| ```bash | ||
| # Clone your fork of the repo into the current directory | ||
| git clone https://github.com/<your-username>/postcss-nesting | ||
| # Navigate to the newly cloned directory | ||
| cd postcss-nesting | ||
| # Assign the original repo to a remote called "upstream" | ||
| git remote add upstream https://github.com/jonathantneal/postcss-nesting | ||
| # Install the tools necessary for development | ||
| npm install | ||
| ``` | ||
| ```bash | ||
| # Clone your fork of the repo into the current directory | ||
| git clone https://github.com/<your-username>/postcss-nesting | ||
| # Navigate to the newly cloned directory | ||
| cd postcss-nesting | ||
| # Assign the original repo to a remote called "upstream" | ||
| git remote add upstream https://github.com/jonathantneal/postcss-nesting | ||
| # Install the tools necessary for development | ||
| npm install | ||
| ``` | ||
| 2. Create a branch for your feature or fix: | ||
| ```bash | ||
| # Move into a new branch for a feature | ||
| git checkout -b feature/thing | ||
| ``` | ||
| ```bash | ||
| # Move into a new branch for a fix | ||
| git checkout -b fix/something | ||
| ``` | ||
| ```bash | ||
| # Move into a new branch for a feature | ||
| git checkout -b feature/thing | ||
| ``` | ||
| ```bash | ||
| # Move into a new branch for a fix | ||
| git checkout -b fix/something | ||
| ``` | ||
| 3. Be sure your code follows our practices. | ||
| ```bash | ||
| # Test current code | ||
| npm run test | ||
| ``` | ||
| ```bash | ||
| # Test current code | ||
| npm run test | ||
| ``` | ||
| 4. Push your branch up to your fork: | ||
| ```bash | ||
| # Push a feature branch | ||
| git push origin feature/thing | ||
| ``` | ||
| ```bash | ||
| # Push a fix branch | ||
| git push origin fix/something | ||
| ``` | ||
| ```bash | ||
| # Push a feature branch | ||
| git push origin feature/thing | ||
| ``` | ||
| ```bash | ||
| # Push a fix branch | ||
| git push origin fix/something | ||
| ``` | ||
@@ -59,6 +59,5 @@ 5. Now [open a pull request] with a clear title and description. | ||
| [already been reported]: issues | ||
| [demo]: http://jonathantneal.github.io/postcss-nesting/ | ||
| [fork this project]: fork | ||
| [live example]: http://codepen.io/pen | ||
| [open a pull request]: https://help.github.com/articles/using-pull-requests/ | ||
| [reduced test case]: https://css-tricks.com/reduced-test-cases/ | ||
| [reduced test case]: https://css-tricks.com/reduced-test-cases/ |
40
index.js
| var postcss = require('postcss'); | ||
| function transpileSelectors(fromRule, toRule) { | ||
| var selectors = []; | ||
| fromRule.selectors.forEach(function (fromSelector) { | ||
| toRule.selectors.forEach(function (toSelector) { | ||
| selectors.push(toSelector.replace(/&/g, fromSelector)); | ||
| }); | ||
| }); | ||
| toRule.selectors = selectors; | ||
| } | ||
| module.exports = postcss.plugin('postcss-nested', function (opts) { | ||
@@ -61,3 +49,31 @@ var bubble = ['document', 'media', 'supports']; | ||
| }); | ||
| css.walkRules(function (rule) { | ||
| if (rule.parent.type === 'root') return; | ||
| if (rule.selectors.filter(function (selector) { | ||
| return selector.lastIndexOf('&') !== 0; | ||
| }).length) return; | ||
| transpileSelectors(rule.parent, rule); | ||
| rule.moveAfter(rule.parent); | ||
| if (!rule.prev().nodes.length) { | ||
| rule.prev().remove(); | ||
| } | ||
| }); | ||
| }; | ||
| }); | ||
| function transpileSelectors(fromRule, toRule) { | ||
| var selectors = []; | ||
| fromRule.selectors.forEach(function (fromSelector) { | ||
| toRule.selectors.forEach(function (toSelector) { | ||
| selectors.push(toSelector.replace(/&/g, fromSelector)); | ||
| }); | ||
| }); | ||
| toRule.selectors = selectors; | ||
| } |
| { | ||
| "name": "postcss-nesting", | ||
| "version": "2.0.6", | ||
| "version": "2.1.1", | ||
| "description": "Transpiles nested rules according to CSS Nesting Module Level 3", | ||
@@ -15,22 +15,17 @@ "keywords": [ | ||
| "license": "CC0-1.0", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/jonathantneal/postcss-nesting.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/jonathantneal/postcss-nesting/issues" | ||
| }, | ||
| "repository": "jonathantneal/postcss-nesting", | ||
| "bugs": "https://github.com/jonathantneal/postcss-nesting/issues", | ||
| "homepage": "https://github.com/jonathantneal/postcss-nesting", | ||
| "dependencies": { | ||
| "postcss": "^5.0.9" | ||
| "postcss": "^5.0.14" | ||
| }, | ||
| "devDependencies": { | ||
| "eslint": "^1.6.0", | ||
| "tap-spec": "^4.1.0", | ||
| "tape": "^4.2.1" | ||
| "eslint": "^1.10.3", | ||
| "tap-spec": "^4.1.1", | ||
| "tape": "^4.4.0" | ||
| }, | ||
| "scripts": { | ||
| "lint": "eslint . --ignore-path .gitignore", | ||
| "test-fixtures": "tape test/*.js | tap-spec", | ||
| "test": "npm run lint && npm run test-fixtures" | ||
| "tape": "tape test.js | tap-spec", | ||
| "test": "npm run lint && npm run tape" | ||
| }, | ||
@@ -41,2 +36,2 @@ "engines": { | ||
| } | ||
| } | ||
| } |
@@ -1,9 +0,11 @@ | ||
| # CSS Nesting [![Build Status][ci-img]][ci] | ||
| # CSS Nesting | ||
| <img align="right" width="135" height="95" src="http://postcss.github.io/postcss/logo-leftp.png" title="Philosopher’s stone, logo of PostCSS"> | ||
| <a href="https://github.com/postcss/postcss"><img src="http://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="80" height="80" align="right"></a> | ||
| [![NPM Version][npm-img]][npm] [![Build Status][ci-img]][ci] | ||
| [CSS Nesting] allows you to nest one style rule inside another, following the [CSS Nesting Module Level 3] specification. | ||
| ```css | ||
| /* before */ | ||
| /* at rule nesting */ | ||
@@ -30,2 +32,24 @@ a, b { | ||
| /* direct nesting */ | ||
| a, b { | ||
| color: red; | ||
| & c, & d { | ||
| color: white; | ||
| } | ||
| & & { | ||
| color: blue; | ||
| } | ||
| &:hover { | ||
| color: black; | ||
| } | ||
| @media (min-width: 30em) { | ||
| color: yellow; | ||
| } | ||
| } | ||
| /* after */ | ||
@@ -58,4 +82,2 @@ | ||
| Follow these steps to use [CSS Nesting]. | ||
| Add [CSS Nesting] to your build tool: | ||
@@ -69,6 +91,4 @@ | ||
| Use [CSS Nesting] directly: | ||
| ```js | ||
| require('postcss-nesting')({ /* options */ }).process(YOUR_CSS); | ||
| require('postcss-nesting').process(YOUR_CSS, { /* options */ }); | ||
| ``` | ||
@@ -84,3 +104,3 @@ | ||
| Use [CSS Nesting] as a PostCSS plugin: | ||
| Load [CSS Nesting] as a PostCSS plugin: | ||
@@ -90,3 +110,3 @@ ```js | ||
| require('postcss-nesting')({ /* options */ }) | ||
| ]); | ||
| ]).process(YOUR_CSS, /* options */); | ||
| ``` | ||
@@ -102,3 +122,3 @@ | ||
| Use [CSS Nesting] within your Gulpfile: | ||
| Enable [CSS Nesting] within your Gulpfile: | ||
@@ -109,3 +129,3 @@ ```js | ||
| gulp.task('css', function () { | ||
| return gulp.src('./css/src/*.css').pipe( | ||
| return gulp.src('./src/*.css').pipe( | ||
| postcss([ | ||
@@ -115,3 +135,3 @@ require('postcss-nesting')({ /* options */ }) | ||
| ).pipe( | ||
| gulp.dest('./css') | ||
| gulp.dest('.') | ||
| ); | ||
@@ -129,3 +149,3 @@ }); | ||
| Use [CSS Nesting] within your Gruntfile: | ||
| Enable [CSS Nesting] within your Gruntfile: | ||
@@ -138,3 +158,3 @@ ```js | ||
| options: { | ||
| processors: [ | ||
| use: [ | ||
| require('postcss-nesting')({ /* options */ }) | ||
@@ -144,3 +164,3 @@ ] | ||
| dist: { | ||
| src: 'css/*.css' | ||
| src: '*.css' | ||
| } | ||
@@ -167,8 +187,13 @@ } | ||
| [ci]: https://travis-ci.org/jonathantneal/postcss-nesting | ||
| [ci-img]: https://travis-ci.org/jonathantneal/postcss-nesting.svg | ||
| [ci]: https://travis-ci.org/jonathantneal/postcss-nesting | ||
| [ci-img]: https://img.shields.io/travis/jonathantneal/postcss-nesting.svg | ||
| [npm]: https://www.npmjs.com/package/postcss-nesting | ||
| [npm-img]: https://img.shields.io/npm/v/postcss-nesting.svg | ||
| [Gulp PostCSS]: https://github.com/postcss/gulp-postcss | ||
| [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss | ||
| [PostCSS]: https://github.com/postcss/postcss | ||
| [CSS Nesting Module Level 3]: http://tabatkins.github.io/specs/css-nesting/ | ||
| [CSS Nesting]: https://github.com/jonathantneal/postcss-nesting | ||
| [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 | ||
| [PostCSS]: https://github.com/postcss/postcss |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by15.34%
20396
- Number of package files
- increased by17.65%
20
- Lines of code
- increased by77.92%
564
- Number of lines in readme file
- increased by15.34%
188
Worsened metrics
- Number of low maintenance alerts
- increased byInfinity%
1
- Number of low supply chain risk alerts
- increased by100%
2
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
Updatedpostcss@^5.0.14