nested-css

compile nested css rules

npm i nested-css

pnpm add nested-css

yarn add nested-css

API

# NestedCSSCompiler – Compile to CSS passing parameters to {@link jsToCss}.

src/index.ts#L10

# (rootSelector, aliasMap)

# rootSelector

string

# aliasMap

Map<string, string>

(rootSelector, aliasMap)  =>

string

& {
# valueOf

src/index.ts#L15

NestedCSSCompiler

}

# NestedCSSDeclaration – Nested CSS rules.

src/types.ts#L6

Partial<CSSStyleDeclaration> & {}

# css(parts, values) – Factory a {@link NestedCSSCompiler} for the given string.

src/index.ts#L23

# parts

TemplateStringsArray

# values –

unknown []

css(parts, values)  =>

NestedCSSCompiler

# cssToJs(input) – Convert a CSS string to a {@link NestedCSSDeclaration}.

src/css-to-js.ts#L21

# input –

string

cssToJs(input)  =>

Partial<CSSStyleDeclaration>

# jsToCss(rules, rootSelector, aliasMap) – Compile a JS nested rules {@link NestedCSSDeclaration} to a CSS string.

src/js-to-css.ts#L44

Examples:

jsToCss({ '.foo': { color: 'blue' } })
// => .foo{color:blue}

// custom root
jsToCss({ color: 'red' }, '.my-button')
// => .my-button{color:red}

// with substitution
jsToCss({ '.foo': { color: 'blue' } }, null, new Map([['foo', 'bar']]))
// => .bar{color:blue}

# rules – Rules object

Partial<CSSStyleDeclaration>

# rootSelector – Top level rules will use this selector

null | string

# aliasMap – Alias identifiers (i.e for .foo to become .bar you will need a foo=bar entry)

Map<string, string>

jsToCss(rules, rootSelector, aliasMap)  =>

string

Credits

• tokenizer-next by stagas – iterator based tokenizer for writing parsers

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas