nested-css

compile nested css rules

🔧 Install · 🧩 Examples · 📜 API docs · 🔥 Releases · 💪🏼 Contribute · 🖐️ Help

---

Install

$ npm i nested-css

Examples

examples/basic/script.ts :

import { css } from '../../src'

const style = css`
  background: #000;
  .foo {
    color: blue;
    &:hover {
      color: green;
    }
  }
`

console.log(style())
// =>
// :host{background:#000}
// .foo{color:blue}
// .foo:hover{color:green}

// with custom root selector
console.log(style('.my-button'))
// =>
// .my-button{background:#000}
// .foo{color:blue}
// .foo:hover{color:green}

// with substitution
console.log(style(null, new Map([['foo', 'bar']])))
// =>
// .my-button{background:#000}
// .bar{color:blue}
// .bar:hover{color:green}

examples/css-to-js/script.ts :

import { cssToJs } from '../../src'

const style = cssToJs(`
  background: #000;
  .foo {
    color: blue;
    &:hover {
      color: green;
    }
  }
`)

console.log(style)
/* =>

{
  "background": "#000",
  ".foo": {
    "color": "blue",
    "&:hover": {
      "color": "green"
    }
  }
}

*/

examples/js-to-css/script.ts :

import { jsToCss } from '../../src'

const rules = {
  background: '#000',
  '.foo': {
    color: 'blue',
    '&:hover': {
      color: 'green'
    }
  }
}

const style = jsToCss(rules)

console.log(style)
/* =>
:host{background:#000}
.foo{color:blue}
.foo:hover{color:green}
*/

// with custom root selector
console.log(jsToCss(rules, '.my-button'))
// =>
// .my-button{background:#000}
// .foo{color:blue}
// .foo:hover{color:green}

// with substitution
console.log(jsToCss(rules, null, new Map([['foo', 'bar']])))
// =>
// .my-button{background:#000}
// .bar{color:blue}
// .bar:hover{color:green}

API

Table of Contents

• cssToJs
  • Parameters
• NestedCSSCompiler
• css
  • Parameters
• jsToCss
  • Parameters
• NestedCSSDeclaration
• joinPartsWithValues
  • Parameters
• kebabCase
  • Parameters

cssToJs

src/css-to-js.ts:20-48

Convert a CSS string to a NestedCSSDeclaration.

Parameters

• input string

NestedCSSCompiler

src/index.ts:10-13

Compile to CSS passing parameters to jsToCss.

Type: any

css

src/index.ts:21-32

Factory a NestedCSSCompiler for the given string.

Parameters

• parts TemplateStringsArray
• values ...Array<any>

Returns NestedCSSCompiler

jsToCss

src/js-to-css.ts:45-93

Compile a JS nested rules NestedCSSDeclaration to a CSS string.

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}

Parameters

• rules NestedCSSDeclaration Rules object
• rootSelector (string | null | undefined)? Top level rules will use this selector
• aliasMap Map<string, string>? Alias identifiers (i.e for .foo to become .bar you will need a foo=bar entry)

Returns any The compiled CSS string

NestedCSSDeclaration

src/types.ts:6-8

Nested CSS rules.

Type: any

joinPartsWithValues

src/util.ts:7-15

Joins parts with values

Parameters

• parts TemplateStringsArray
• values Array<any>

kebabCase

src/util.ts:22-24

Convert string to kebab-case.

Parameters

• s string PascalCase or camelCase string

Contribute

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2021 stagas