Write modular and scalable CSS using the next version of ECMAScript.
Usage no npm install needed!
<script type="module">
import unistyle from 'https://cdn.skypack.dev/unistyle';
</script>
README
unistyle
Write modular and scalable CSS using the next version of ECMAScript.
Why?
Using ES2015 (and some ES2016) features to write CSS in JavaScript makes it really modular, scalable and gives you in practice all the features of a good CSS pre- or postprocessor, without resorting to a new language. See the example section for use together with React for how to avoid the annoying cascading feature of CSS, which is troublesome in large scale CSS.
Unistyle?
The name is an abbreviation of Uniform Stylesheets. It is also somewhat related to Universal JavaScript or what you want to call it, because of the ability to share the same CSS code written in JavaScript between your frontend component's inline styles and the application's complete CSS.
gt; unistyle --help
Write modular and scalable CSS using the next version of ECMAScript.
Usage:
unistyle [options] <path to module>
Options:
-o, --output Output compiled CSS to specified file instead of to stdout [string]
-h, --help Show help [boolean]
-v, --version Show version number [boolean]
Examples:
unistyle -o app.css src/styles.js Compile src/styles.js to app.css
Examples
Note: All examples below assumes you're already using Babel in your project. Or perhaps unistyle-loader together with a Babel loader and Webpack.
The examples source code can be found in ./examples and their compiled counterparts in ./examples-es5.
Using modules and variables
You can use either CommonJS modules or the new ES2015 modules syntax.
In examples/vars/vars.js:
export const padding = '15px';
export const dark = '#333';
Every preprocessor I can think of (e.g. LESS, Sass and Stylus) have the ability to extend one CSS declaration with another, for reusability. They all have their own syntax, however with Unistyle you can use the object rest spread syntax (which you should already be using if Babel is your thing):
import React from 'react';
import buttonStyle from './button-style';
export default class Button extends React.Component {
render() {
return <button style={buttonStyle}>My button</button>;
}
}
No compilation step is needed here...
Keeping the CSS in a separate file
Note: this is not limited to React but works with almost any frontend framework/library, if you're using Browserify, Webpack or similar.
Using the modules cngen and classnameify respectively makes it possible to keep all CSS for your React components in its own file. As a bonus you get round the biggest problem with large scale CSS, i.e. the fact that it cascades.
Because Unistyle CSS modules are JavaScript only, they are easily reused if you publish them to npm after which they can be installed and imported/required. Babel module best practices still applies though, i.e. you should transpile your code before publishing.
When publishing a Unistyle CSS module to npm I recommend adding "unistyle" as a keyword in your package.json for easier discoverability.
Using third party modules
When adding third party modules to your app's Unistyle CSS you should export an array instead of an object, for instance with normalize-unistyle:
import normalize from 'normalize-unistyle';
import myStyles from './my-styles';
export default [
normalize,
myStyles
];
This is to have colliding selectors in normalize-unistyle and myStyles merged instead of overwritten.
E.g. compiling this (examples/third-party/object.js):
Unistyle uses Babel and AbsurdJS under the hood. Unistyle does not use Babel or AbsurdJS anymore. It's up to you to use Babel if you want to, or stick with the ES2015 features currently in Node v4 or v5. Instead of AbsurdJS Unistyle uses unistyle-flat to allow nesting of styles and to-css to compile to CSS. This is because AbsurdJS had so many more features than are actually needed which makes Unistyle less magical now.
Unistyle also uses kebab-case and pixelify to be able to write CSS properties in camelCase (to lessen the need for quotes) and to append values with 'px' when appropriate, i.e. {fontSize: 10} => font-size: 10px;. This makes your Unistyle modules compatible with React inline styles.