@erickmerchant/css
A CSS from JS tool.
Last updated 7 days ago by erickmerchant .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @erickmerchant/css 
SYNC missed versions from official npm registry.

@erickmerchant/css

CSS from JS

When I write CSS, I like to write it as if each element will have just one class, and no other styles will apply to that element, except via inheritance. It's nice to look at a rule and see all the declarations that will be applied. I feel like this makes authoring easier, at least for me. To avoid copy-pasting, composition can be used.

But the most ideal way to ship CSS to browsers is with little to no duplication. Something as close to atomic or functional as possible. Without this optimization, compression will help, but my CSS is still bigger than it needs to be.

This module takes a single ES module entry point, and outputs a single CSS file and a generated ES module that has a map of keys to the generated class names in the css file. As your CSS grows this will likely not scale at the moment, but since there is no browser runtime except for the map of classes this may not be a big deal to you.

Example

// input.js
const desktop = '@media (min-width: 100px)'

// some styles for reuse. font-weight normal is removed because it's overridden
const emphasis = `
  font-weight: normal;
  font-weight: bold;
`

// these styles are tacked onto the beginning of output.css unmodified
export const _start = `
  p {
    margin-top: var(--spacing)
  }
`

// these are the identifiers (class like) that we'll use later in app.mjs
export const styles = {
  loud: `
    ${emphasis}
    ${desktop} {
      font-size: 5em;

      ::after {
        content: '!!'
      }
    }
    ::after {
      content: '!'
    }
  `,
  button: `
    ${emphasis}
    background: #ff8000;
    color: #111;
  `
}
/* output.css */
p {
  margin-top: var(--spacing)
}

.a { font-weight: bold; }
.b {
  background: #ff8000;
  color: #111;
}
.c::after {
  content: '!';
}
@media (min-width: 100px) {
  .c {
    font-size: 5em;
  }
  .c::after {
    content: '!!';
  }
}
// output.mjs
export const classes = {
  "loud": "a c",
  "button": "a b"
}
// app.mjs
import {classes} from './output.mjs'

classes.loud // 'a c'

classes.button // 'a b'

usage

build once

css input.js -o output

watch for changes

css -w input.js -o output

Current Tags

  • 22.2.2                                ...           latest (7 days ago)

138 Versions

  • 22.2.2                                ...           7 days ago
  • 22.2.1                                ...           18 days ago
  • 22.2.0                                ...           22 days ago
  • 22.1.0                                ...           a month ago
  • 22.0.0                                ...           a month ago
  • 21.1.0                                ...           a month ago
  • 21.0.1                                ...           a month ago
  • 21.0.0                                ...           a month ago
  • 20.10.0                                ...           3 months ago
  • 20.9.1                                ...           3 months ago
  • 20.9.0                                ...           3 months ago
  • 20.8.0                                ...           3 months ago
  • 20.7.2                                ...           3 months ago
  • 20.7.1                                ...           3 months ago
  • 20.7.0                                ...           3 months ago
  • 20.6.0                                ...           4 months ago
  • 20.5.0                                ...           4 months ago
  • 20.4.0                                ...           4 months ago
  • 20.3.1                                ...           4 months ago
  • 20.3.0                                ...           4 months ago
  • 20.2.0                                ...           4 months ago
  • 20.1.0                                ...           4 months ago
  • 20.0.1                                ...           4 months ago
  • 20.0.0                                ...           4 months ago
  • 19.0.1                                ...           5 months ago
  • 19.0.0                                ...           5 months ago
  • 18.0.1                                ...           5 months ago
  • 18.0.0                                ...           5 months ago
  • 17.1.0                                ...           5 months ago
  • 17.0.5                                ...           5 months ago
  • 17.0.4                                ...           5 months ago
  • 17.0.3                                ...           5 months ago
  • 17.0.2                                ...           5 months ago
  • 17.0.1                                ...           5 months ago
  • 17.0.0                                ...           5 months ago
  • 16.1.0                                ...           5 months ago
  • 16.0.1                                ...           5 months ago
  • 16.0.0                                ...           5 months ago
  • 15.1.3                                ...           5 months ago
  • 15.1.2                                ...           5 months ago
  • 15.1.1                                ...           5 months ago
  • 15.1.0                                ...           5 months ago
  • 15.0.2                                ...           5 months ago
  • 15.0.1                                ...           5 months ago
  • 15.0.0                                ...           5 months ago
  • 14.2.0                                ...           2 years ago
  • 14.1.4                                ...           2 years ago
  • 14.1.3                                ...           2 years ago
  • 14.1.2                                ...           2 years ago
  • 14.1.1                                ...           2 years ago
  • 14.1.0                                ...           2 years ago
  • 14.0.3                                ...           2 years ago
  • 14.0.2                                ...           2 years ago
  • 14.0.1                                ...           2 years ago
  • 14.0.0                                ...           2 years ago
  • 13.0.0                                ...           2 years ago
  • 12.0.2                                ...           2 years ago
  • 12.0.1                                ...           2 years ago
  • 12.0.0                                ...           2 years ago
  • 11.5.8                                ...           2 years ago
  • 11.5.7                                ...           2 years ago
  • 11.5.6                                ...           2 years ago
  • 11.5.5                                ...           2 years ago
  • 11.5.4                                ...           2 years ago
  • 11.5.3                                ...           2 years ago
  • 11.5.2                                ...           2 years ago
  • 11.5.1                                ...           2 years ago
  • 11.5.0                                ...           2 years ago
  • 11.4.4                                ...           2 years ago
  • 11.4.3                                ...           2 years ago
  • 11.4.2                                ...           2 years ago
  • 11.4.1                                ...           2 years ago
  • 11.4.0                                ...           2 years ago
  • 11.3.0                                ...           2 years ago
  • 11.2.4                                ...           2 years ago
  • 11.2.3                                ...           2 years ago
  • 11.2.2                                ...           2 years ago
  • 11.2.1                                ...           2 years ago
  • 11.2.0                                ...           2 years ago
  • 11.1.2                                ...           2 years ago
  • 11.1.1                                ...           2 years ago
  • 11.1.0                                ...           2 years ago
  • 11.0.5                                ...           2 years ago
  • 11.0.4                                ...           2 years ago
  • 11.0.3                                ...           2 years ago
  • 11.0.2                                ...           2 years ago
  • 11.0.1                                ...           2 years ago
  • 11.0.0                                ...           2 years ago
  • 10.3.8                                ...           2 years ago
  • 10.3.7                                ...           2 years ago
  • 10.3.6                                ...           2 years ago
  • 10.3.5                                ...           2 years ago
  • 10.3.4                                ...           2 years ago
  • 10.3.3                                ...           2 years ago
  • 10.3.2                                ...           2 years ago
  • 10.3.1                                ...           2 years ago
  • 10.3.0                                ...           2 years ago
  • 10.2.2                                ...           2 years ago
  • 10.2.1                                ...           2 years ago
  • 10.2.0                                ...           2 years ago
  • 10.1.1                                ...           2 years ago
  • 10.1.0                                ...           2 years ago
  • 10.0.0                                ...           3 years ago
  • 9.0.8                                ...           3 years ago
  • 9.0.7                                ...           3 years ago
  • 9.0.6                                ...           3 years ago
  • 9.0.5                                ...           3 years ago
  • 9.0.4                                ...           3 years ago
  • 9.0.3                                ...           3 years ago
  • 9.0.2                                ...           3 years ago
  • 9.0.1                                ...           3 years ago
  • 9.0.0                                ...           3 years ago
  • 8.0.8                                ...           3 years ago
  • 8.0.7                                ...           3 years ago
  • 8.0.6                                ...           3 years ago
  • 8.0.5                                ...           3 years ago
  • 8.0.4                                ...           3 years ago
  • 8.0.3                                ...           3 years ago
  • 8.0.2                                ...           3 years ago
  • 8.0.1                                ...           3 years ago
  • 8.0.0                                ...           3 years ago
  • 7.0.0                                ...           3 years ago
  • 6.2.1                                ...           3 years ago
  • 6.2.0                                ...           3 years ago
  • 6.1.0                                ...           3 years ago
  • 6.0.0                                ...           3 years ago
  • 5.0.2                                ...           3 years ago
  • 5.0.1                                ...           3 years ago
  • 5.0.0                                ...           3 years ago
  • 4.0.0                                ...           3 years ago
  • 3.1.2                                ...           3 years ago
  • 3.1.1                                ...           3 years ago
  • 3.1.0                                ...           3 years ago
  • 3.0.0                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 222
Last Day 0
Last Week 152
Last Month 82
Dependencies (4)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |