superstyle
CSSOM-based CSS-in-JS library
npm i superstyle
Superstyle is an experimental CSS-in-JS utility library that uses CSSOM to patch updates to styles after injection. Using plain JavaScript objects to author styles, superstyle helps promote style encapsulation while making use of native browser CSS APIs.
// Usage // create a superstyle rule objectconst rule = const h1 = document // Add className to an elementh1className = ruleclassName // Update the style in the CSSOMrule
Superstyle also supports nested objects for pseudoselectors and media queries
const rule =
API
superstyle
(function) returns a superstyle rule object
superstyle.sheet
(CSSStyleSheet) stylesheet object with additional helper methods
sheet.css
(getter) returns a string of CSS rules
const css = sheetcss
sheet.insert()
(function) accepts an array of CSS rule strings and returns an array of corresponding CSSRule objects
const cssRules = sheet
rule
(object) core object with className, set method and references to CSSRules
const rule =
rule.className
(string) unique className for the ruleset
elclassName = ruleclassName
rule.set()
(function) method to update the style object
rule
rule.rules
(array) array of CSSRules that correspond to the given rule
rule.css
(getter) returns an array of CSS strings for the rule
React higher-order component
Superstyle also includes a React higher order component (HOC) for creating components with static styles that can be updated with a css
prop.
Import the HOC from superstyle/react
.
import superstyle from 'superstyle/react' // Any component that accepts the `className` propconst Button = <button />) // Static style objectconst style = display: 'inline-flex' fontFamily: 'inherit' fontSize: 'inherit' margin: 0 paddingTop: 12 paddingBottom: 12 paddingLeft: 24 paddingRight: 24 color: 'white' backgroundColor: '#07c' border: 0 borderRadius: 3 appearance: 'none' styleButton
<div> <Button => Hello </Button></div>
The higher order component also accepts strings for HTML tags to create primitive components.
const Button = 'button'
Is this production-ready?
No. This is a proof-of-concept and has not been tested well enough for use in production. For a more stable CSS-in-JS library, try glamor, cxs, or styled-components
MIT License