Stylight: simple & reliable CSS-in-JS

A feature-rich CSS-in-JS module, with minimal overhead, designed for better developer experience, granularity and simplicity.

Features

• Renders CSS-in-JS into CSS by itself
• Selectors nesting
• Property overrides
• Literal CSS selectors support
• Isolation, obfuscation and class picking
• Embeddable into React out of the box
• Convenient objects definition hierarchy

Advantages

• Made with Typescript; type completion friendly
• Zero-dependency: The only dependency is an actual 'csstype' module which is only a typedef package that does not affect bundle sizes at all.
• Lightweight: minified bundle size is only , React integration plugin is
• Great performance. No more IDE lags during typechecks of simple stylings applied

Installation

npm

npm i -S stylight

This will provide stylight core package with plugins included, e.g. stylight/react

Browser (UMD)

<!-- core package -->
<script type="text/javascript" src="https://unpkg.com/[email protected]/umd/stylight.min.js"></script>
<!-- will provide Stylight UMD global -->

<!-- React plugin -->
<script type="text/javascript" src="https://unpkg.com/[email protected]/umd/stylight.react.min.js"></script>
<!-- will provide StylightReact UMD global -->

Requirements

There are two conditional requirements for this package to use.

• Typescript >= 4.1 must be used by default for TS server in case of using type completion. A package relies on Template Literal Types feature introduced in this version, so earlier versions of Typescript will most likely cause problems. However, for Javascript projects without type completion and type checks both in a project and IDE, no Typescript version requirements are applied.
• In case of using React, versions 16 and higher are considered supported since no tests for lower versions has been done. A package relies on React as an optional dependency only, in case React is actually used in a host project

License

This product is being distributed for free and without any warranty. Copying, redistribution and modification of this code are not subjects to regulations, but including original links to initial version of this product within any redistribution is highly appreciated.

TODO

• Keyframes documentation
• At-rules (other than just media queries + documentation)
• Render planner documentation