dchester / zcss.js

Minimal nested CSS preprocessor in ~30 lines of JavaScript

zcss

Minimal nested CSS preprocessor in ~30 lines of JavaScript

/* button.zcss */

:root {
  --blue: #8098d4;
}

.button {
  background: var(--blue);
  border-radius: 4px;
  font-size: 18px;

  &:hover {
    transform: scale(1.1);
  }

  &[disabled] {
    opacity: 0.5
  }

  .icon {
    margin-right: 1em;
  }
}

Compile zcss to css:

$ cat button.zcss | node zcss > button.css

Syntax

This preprocessor implements just two core features inspired by SCSS, Less, and the CSS Nesting draft spec -- implicit nesting, and the ampersand selector.

Implicit nesting

section {
  p {
    line-height: 2;
  }
}

/* section p {
 *   line-height: 2;
 * }
 */

Each property must be on its own line, separate from its selector.

Ampersand selector

section {
  &:hover {
    color: purple;
  }
}

/* section:hover {
 *  color: purple;
 * }
 */

The ampersand must appear exclusively at the beginning of the selector (similarly to the & in CSS Nesting)

zcss.js's Issues

Bug around {}

thanks for the great library

I think the output is strange if you don't put a newline in {}.

example

The output is as follows, so could you please fix it?

NG

input

div{color: red}

output

}
}

NG

input

div{
}

output

}

OK

input

div{
  color: red
}

output

div{
  color: red
}

my environment

windows 10
Chromium: 105.0.5195.127