Dynamic CSS for user interfaces
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
__tests__
assets
core
dom
examples
loader
postcss
react-dom
vanilla-dom
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
package.json
readme.md
yarn.lock

readme.md

NPM Version Known Vulnerabilities Coverage Status

Stylesheet Logo

Stylesheet

Dynamic CSS for user interfaces.

npm install stylesheet
  • Pure: Stylesheet uses pure standard CSS. Wrap your dynamic CSS properties with an attr() function or attribute selector and Stylesheet will automatically update and render them with your data. So you can develop new features in Stylesheet without rewriting existing code.

  • Component-Based: Build reusable, customizable and dynamic front-end UI elements. Since components styles is written in plain CSS you can easily define components's complex relationships, interactions and shared styles.

  • Write Once, Use Anywhere: Stylesheet can potentially work with any front-end technology stack, so you can share and transfer your styled components between platforms. Stylesheet has official bindings for React and vanilla DOM.

Usage

Title {
  font-size: 4em;
  color: attr(textColor color);
}

And an integration

Prior Art and Comparison

CSS Modules

A methodology to import CSS tokens (e.g. class names) to JavaScript and converting them to unique identifiers.

  • Requires boilerplate code to use as components.
  • Does not provide a solution for dynamic CSS.