https://github.com/stagas/nested-css

compile nested css rules
https://github.com/stagas/nested-css

compiler css css-in-js less nested parser sass

Last synced: 7 days ago
JSON representation

compile nested css rules

• Host: GitHub
• URL: https://github.com/stagas/nested-css
• Owner: stagas
• License: mit
• Created: 2021-11-02T06:47:39.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-08-04T07:21:12.000Z (over 2 years ago)
• Last Synced: 2024-08-08T22:53:07.544Z (3 months ago)
• Topics: compiler, css, css-in-js, less, nested, parser, sass
• Language: TypeScript
• Homepage:
• Size: 301 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


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:

```ts

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](https://npmjs.org/package/tokenizer-next) by [stagas](https://github.com/stagas) – iterator based tokenizer for writing parsers

## Contributing

[Fork](https://github.com/stagas/nested-css/fork) or [edit](https://github.dev/stagas/nested-css) and submit a PR.

All contributions are welcome!

## License

MIT © 2022 [stagas](https://github.com/stagas)