Package Exports

gulp-css-nbd

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gulp-css-nbd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gulp-css-nbd

CSS nesting by directory gulp plugin

Description

Part of Nest-CSS methodology.

Plugin for building very specific selectors by directory structure like:

src/

_global/
- _constants.pcss
_text/
- a.pcss
.some-container/
- div.widget.pcss
html/
- body/
  - main/
    - _headings/
      - h1.pcss
      - h2.pcss
      - h3,h4.pcss
    - !table.pcss
    - p.pcss
  - &.pcss

With results like:

a {}
.some-container > div.widget {}
html > body {}
html > body > main table {}
html > body > main > p {}
html > body > main > h1 {}
html > body > main > h2 {}
html > body > main > h3, html > body > main > h4 {}

Rules:

CSS files should start with & selector (for using selector, based on their path).
Path to file (with file name) used to build the selector.
Directories starts with _ used only for special grouping and their name is not used in the selector.
Files starts with _ are skipped.
Files and directories starts with ! joined using descendant combinator, other joined using child combinator.
Files starts with @ are not add their name to the selector (useful for at-rules).
Filenames are unescaped using querystring.unescape (to bypass filesystem limits).

These characters should be escaped:

`<`	`>`	`:`	`"`	`/`	`\`	\|	`?`	`*`	`%`
%3C	%3E	%3A	%22	%2F	%5C	%7C	%3F	%2A	%25

It’s not strictly required and can be used without escaping (except /), even % (because of using querystring.unescape instead of decodeURIComponent), but this will make code more reliable.

Usage

Install with npm:

npm install --save gulp-css-nbd

And use:

var gulp = require( 'gulp' );
var cssNdb = require( 'gulp-css-nbd' );
var concat = require( 'gulp-concat' );

gulp.task(
    'default',
    function ()
    {
        gulp.src( './styles/src/**/*.pcss' )
            .pipe( cssNdb() )
            .pipe( concat( 'common.css' ) )
            // Some processing (PostCSS, LESS, SCSS or any other with nesting and &)
            .pipe( gulp.dest( './styles/' ) );
    }
);