This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

css-generator
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/css-generator package

1.0.1 • Public • Published

CSS Generator

Write CSS programatically using JavaScript.

Install

npm install css-generator

Usage

const cssGen = require('css-generator');
const options = {
    indentation: '  ' // 2 spaces
}
const css = cssGen.create(options);
 
css.addRule('.color-white', {
    color: 'white'
})
 
css.openBlock('media', 'screen and (min-width: 30em)')
 
css.addRule([ 'body', 'html' ], {
    color: 'gray'
})
 
css.closeBlock()
 
css.openBlock('supports', '(display: grid)')
 
css.addRule('.grid', {
    display: 'grid'
})
 
css.openBlock('media', 'screen and (max-width: 30em)')
 
css.addRule('.grid-sm', {
    display: 'grid'
})
 
console.log(css.getOutput())

output:

.color-white {
  color: white;
}
@media screen and (min-width: 30em) {
  body,
  html {
    color: gray;
  }
}
@supports (display: grid{
  .grid {
    display: grid;
  }
  @media screen and (max-width: 30em) {
    .grid-sm {
      display: grid;
    }
  }
}
 

There is also a method addRaw that adds any string to your css. Useful to comments or include a framework.

css.addRule('.color-white', { 'color': '#fff' })
css.addRaw('/* my comment */ a { text-decoration: none }')
 
console.log(css.getOutput())

output:

.color-white{
    color:#fff;
}
/* my comment */ a { text-decoration: none }

License

MIT License © 2018 Luiz Bills

Readme

Keywords

Package Sidebar

Install

npm i css-generator

Weekly Downloads

40

Version

1.0.1

License

MIT

Unpacked Size

5.56 kB

Total Files

5

Last publish

Collaborators

  • luizbills