prius

A hybrid CSS preprocessor/runtime

Usage no npm install needed!

<script type="module">
  import prius from 'https://cdn.skypack.dev/prius';
</script>

README

Prius

Prius enables you to write next generation CSS in your apps today. It operates via a hybrid runtime and preprocessor. Prius is currently intended for usage inside Ember CLI applications, however it was built to be used with any JS framework.

Demo

Installation

ember install prius

Add {{prius-meta}} to the <head> of your app/index.html & tests/index.html

TODO: instructions for general usage.

Features

CSS custom properties and var

Example usage

.button {
  font-size: var(--font-size, 1em);
}

.button-large {
  --font-size: 2em;
}

Planned features

Custom functions

Example usage

:root {
  --primary-color: red;
}

.button {
  color: darken(var(--primary-color)); /* `darken` is a custom function */
}

Experimental features we're investigating

Mixins

As proposed by the Polymer team: https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins

Example usage

:root {
  --my-mixin: {
    padding: 0.5em;
    --color: red;
  }
}

.button {
  @apply(--my-mixin);
  background-color: var(--color);
}