npm is now a part of GitHub
❤Nondeterministic Postrequisite Metaprotocol

npm

Sign UpSign In
Miss any of our Open RFC calls?Watch the recordings here! »

@peter554/cssutils

0.9.1 • Public • Published

cssutils

Build Status

npm install -g @peter554/cssutils

A CSS utility class generator. User friendly, simple, powerful. Inspired by tailwindcss and gordon.

Usage

  • cssutils --help
  • cssutils --config config.yml --nomin

Configuration file (YAML or JSON) is specified by the option --config, or discovered via cosmiconfig.

--nomin flag disables CSS minification/optimization.

CSS is written to stdout, or the location specified by the --output option.

Custom properties

variables:
  color:
    red: '#f00'
    green: '#0f0'
    grey:
      light: '#eee'
      mid: '#999'
:root { --color-green: #0f0; }
:root { --color-grey-light: #eee; }
:root { --color-grey-mid: #999; }
:root { --color-red: #f00; }

Utility classes

Utility classes may be generated from variables:

variables:
  color:
    red: '#f00'
    green: '#0f0'
generate:
  background-color:
    alias: bgclr
    from: color
:root { --color-green: #0f0; }
:root { --color-red: #f00; }
 
.bgclr-green { background-color: #0f0; }
.bgclr-red { background-color: #f00; }

By default custom properties are generated. We can disable this by setting customproperties: false.

variables:
  color:
    red: '#f00'
    green: '#0f0'
generate:
  background-color:
    alias: bgclr
    from: color
customproperties: false
.bgclr-green { background-color: #0f0; }
.bgclr-red { background-color: #f00; }

We can also generate utility classes from their "own" data:

generate:
  background-color:
    alias: bgclr
    from:
      red: '#f00'
      green: '#0f0'
  padding:
    from:
      0: 0
      1: 0.25rem
.bgclr-green { background-color: #0f0; }
.bgclr-red { background-color: #f00; }
 
.padding-0 { padding: 0; }
.padding-1 { padding: 0.25rem; }

Responsive utility classes

generate:
  background-color:
    alias: bgclr
    from:
      red: '#f00'
    breakpoints: true
breakpoints:
  md: 800px
  lg: 1200px
.bgclr-red { background-color: #f00; }
@media (min-width: 800px) { .md\:bgclr-red { background-color: #f00; } }
@media (min-width: 1200px) { .lg\:bgclr-red { background-color: #f00; } }

Pseudo utility classes

generate:
  background-color:
    alias: bgclr
    from:
      red: '#f00'
    pseudo: true
pseudo:
  hcs: [hover, focus]
.bgclr-red { background-color: #f00; }
.hcs\:bgclr-red:hover { background-color: #f00; }
.hcs\:bgclr-red:focus { background-color: #f00; }

Rotations

generate:
  padding:
    alias: pad
    from:
      1: 0.25rem
    rotations: true
.pad-1 { padding: 0.25rem; }
.pad-b-1 { padding-bottom: 0.25rem; }
.pad-l-1 { padding-left: 0.25rem; }
.pad-r-1 { padding-right: 0.25rem; }
.pad-t-1 { padding-top: 0.25rem; }
.pad-x-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.pad-y-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

Custom property substitution

By default custom properties are substituted into utility classes. This can be disabled.

variables:
  color:
    red: '#f00'
    green: '#0f0'
generate:
  background-color:
    alias: bgclr
    from: color
substitute: false
:root { --color-green: #0f0; }
:root { --color-red: #f00; }
 
.bgclr-green { background-color: var(--color-green); }
.bgclr-red { background-color: var(--color-red); }

Themes

(Consider using together with option substitute: false)

variables:
  color:
    text: black
    background: white
themes:
  dark:
   color:
    text: white
    background: black
:root { --color-background: white; }
:root { --color-text: black; }
 
.theme-dark { --color-background: black; }
.theme-dark { --color-text: white; }

!important & prefix

variables:
  color:
    red: '#f00'
    green: '#0f0'
generate:
  background-color:
    alias: bgclr
    from: color
prefix: app
important: true
:root { --app-color-green: #0f0; }
:root { --app-color-red: #f00; }
 
.app-bgclr-green { background-color: #0f0 !important; }
.app-bgclr-red { background-color: #f00 !important; }

More features & examples

Keywords

Install

npm i @peter554/cssutils

DownloadsWeekly Downloads

29

Version

0.9.1

License

MIT

Unpacked Size

32.7 kB

Total Files

6

Homepage

github.com/peter554/cssutils#readme

Repository

Gitgithub.com/peter554/cssutils

Last publish

Collaborators

  • avatar
Try on RunKit
Report a vulnerability