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
- _headings/
- &.pcss
- main/
- body/
With results like:
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 = ;var cssNdb = ;var concat = ; gulp;