@erickmerchant/css/README.md

# @erickmerchant/css

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, concatenation can be used.

In contrast to authoring, 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 project aims to combine those two ideals. The CLI 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.

## Example

```javascript
// 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.js
export const styles = {
  loud: `
    ${emphasis}

    ${desktop} {
      font-size: 5em;

      ::after {
        content: '!!'
      }
    }
    ::after {
      content: '!'
    }
  `,
  button: `
    ${emphasis}

    background: #ff8000;
    color: #111;
  `
}
```

```css
/* 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: '!!';
  }
}
```

```javascript
// output.js
export const classes = {
  loud: 'a c',
  button: 'a b'
}
```

```javascript
// app.js
import {classes} from './output.js'

classes.loud // 'a c'

classes.button // 'a b'
```

## Usage

build once

```
npx @erickmerchant/css input.js -o output
```

watch for changes

```
npx @erickmerchant/css -w input.js -o output
```

> ⚠️ 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.