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/' ) );
	}
);