Build your own emotion like CSS-in-JS library.

css( [ // <-- array of  { padding: '32px', backgrounColor: 'orange' }, // <-- style object 1 { fontSize: '24px', borderRadius: '4px' } // <-- style object 2 ] ) 

function css(styles) { // 1. convert to valid style-object const _style_object_ = getValidStyleObject(styles); // 2. generate unique className const className = getClassName(_style_object_); // 3. Parse the style-object to generate valid CSS styles and attach them to className const CSS = parseStyles(_styles_object_, className); // 4. Create or update the stylesheet in DOM injectStyles(CSS); // return className to be applied on element return className; }``` ### Step 1: Convert to a valid `style-object` The `css` function can accept a `style-object` or an array of `style-object`. In the case of the array of `style-object` we must merge those to generate a single style object. ```js function getValidStyleObject(styles) { let style_object = styles; if (Array.isArray(styles)) { style_object = merge(styles); } return style_object; } function merge(styles) { // (*) shallow merge return styles.reduce((acc, style) => Object.assign(acc, style), {}); } 

const styleObject1 = { fontSize: '16px', fontWeight: 600 }; const styleObject2 = { fontSize: '16px', fontWeight: 600 }; styleObject1 === styleObject2; // false: reference is different getClassName(styleObject) === getClassName(styleObject2); // true: Pure and Idempotent nature 

const obj1 = { a: 1, b: 2 }; const obj2 = { b: 2, a: 1 }; obj1 == obj2; // false: diff references // an ideal stringifying function stringify(obj1) === stringify(obj2) // true: '{ "a": 1, "b": 2 }' // our JSON.stringify  JSON.strinfigy(obj1) === JSON.stringify(obj2) // false // '{ "a": 1, "b": 2 }' === '{ "b": 2, "a": 1 }' // false 

// it is a cache map of "serialized-style-object" to "hashed-style-object" const style_classname_cache = {}; function getClassName(styleObject) { const stringified = stringify(styleObject); // pick the cached className to optimize and skip hashing every time let className = style_classname_cache[stringified]; // if there is not an entry for this stringified style means it is new // so generate a hashed className and register and entry of style if (!className) { // use any quick hashing algorithm // example: https://gist.github.com/jlevy/c246006675becc446360a798e2b2d781 const hashed = hash(stringified); // prefix some string to indicate it is generated from lib // it also makes sure that className is valid const _class_name_ = `css-${hashed}`; // hashing is costly so make an entry for the generated className style_classname_cache[stringified] = _class_name_; className = style_classname_cache[stringified]; } return className; } 

// it is a map of "stringified-style-object" to "hashed-classname" const style_classname_cache = {}; // inside css function // ... const className = getClassName(....); let CSS = classname_css_cache[className]; if (!CSS) { CSS = parseStyles(_style_object_, className); // <-- Step 3 classname_css_cache[classname] = CSS; } 

 // style-object const styles = { width: '600px', fontSize: '16px', // style-rule 1 fontWeight: 600, // style-rule 2, color: 'red', '&:hover, &:active': { color: 'green', }, '&[data-type="checkbox"]': { border: '1px solid black' }, '@media(max-width: 1200px)': { width: '200px' } }; css(styles) // compiled CSS from `style-object` .css-123 { font-size: 16px; font-weight: 600px; } // ! NOTE ! // 1) .css-123 is selector name or class-name here // 2) { and } marks style blocks/bound for this selector, each  // block need to be parsed // 3) font-size: 16px is processed CSS for`fontSize: '16px'` // 4) `&:hover, &:active' are two blocks ideally joined by a `,` // i.e '&:hover' and '&:active' // 5) '&:hover' block is read as `css-123:hover` where // `&` is replaced by current selector name // 6) `&[data-type="checkbox"]` attributes based styling is also possible // 7) @ rules are specific rule ex: @media screen size rules  // so it should be processed early // 8) each nested style (ex: &:hover) need to be parsed  // i.e recursive calling 

function parseStyles(style_object, selector) { // This collects `@import` rules which are independent of any selector let outer = ""; // This is for block rules collected let blocks = ""; 2; // This is for the currently processed style-rule let current = ""; // each property of style_object can be a rule (3) // or a nested styling 7, 8 for (const key in style_object) { const value = style_object[key]; // @ rules are specific and may be further nested // @media rules are essentially redefining styles on-screen breakpoints // so they need to be processed first const isAtRule = key[0] === "@"; if (isAtRule) { // There are 4 main at-rules // 1. @import // 2. @font-face // 3. @keyframe // 4. @media const isImportRule = key[1] === "i"; const isFontFaceRule = key[1] === "f"; const isKeyframeRule = key[1] === "k"; if (isImportRule) { // import is an outer rule declaration outer += key + " " + value; // @import nav.css } else if (isFontFaceRule) { // font face rules are global block rules but don't need a bound selector blocks += parseStyles(value, key); } else if (isKeyframeRule) { // keyframe rule are processed differently by our `css` function // which we should see implementation at a later point blocks += key + "{" + parseStyles(value, "") + "}"; } else { // @media rules are essentially redefining CSS on breakpoints // they are nested rules and are bound to selector blocks += key + "{" + parseStyles(value, selector) + "}"; } } // beside the At-Rules there are other nested rules // 4, 5, 6 else if (typeof value === "object") { // the nested rule can be simple as "&:hover" // or a group of selectors like "&:hover, &:active" or // "&:hover .wrapper" // "&:hover [data-toggled]" // many such complex selector we will have to break them into simple selectors // "&:active, &:hover" should be simplified to "&:hover" and "&:active" // finally removing self-references (&) with class-name(root-binding `selector`) const selectors = selector ? // replace multiple selectors selector.replace(/([^,])+/g, (_seletr) => { // check the key for '&:hover' like return key.replace(/(^:.*)|([^,])+/g, (v) => { // replace self-references '&' with '_seletr' if (/&/.test(v)) return v.replace(/&/g, _seletr); return _seletr ? _seletr + " " + v : v; }); }) : key; // each of these nested selectors create their own blocks // &:hover {} has its own block blocks += parseStyles(value, selectors); } // now that we have dealt with object `value` // it means we are a simple style-rules (3) // style-rule values should not be undefined or null else if (value !== undefined) { // in JavaScript object keys are camelCased by default // i.e "textAlign" but it is not a valid CSS property // so we should convert it to valid CSS-property i.e "text-align" // Note: the key can be a CSS variable that starts from "--" // which need to remain as it is as they will be referred by value in code somewhere. const isVariable = key.startsWith("--") // prop value as per CSS "text-align" not "textAlign" const cssProp = isVariable ? key : key.replace(/[A-Z]/g, "-$&").toLowerCase(); // css prop is written as "<prop>:<value>;" current += cssProp + ":" + value + ";"; } } return ( // outer are independent rules // and it is most likely to be the @import rule so it goes first outer + // if there are any current rules (style-rule)(3) // attach them to selector-block if any else attach them there (selector && current ? selector + "{" + current + "}" : current) + // all block-level CSS goes next blocks ); } 

// in case the process isn't running in a browser instance  // so we fake stylesheet-text-node behavior  const fake_sheet = { data: '' }; // keep track of all styles inserted so that we don't insert the same styles again const inserted_styles_cache = {}; function injectStyles(css_string) { // create and get the style-tag; return the text node directly const stylesheet = getStyleSheet(); // if already inserted style in the sheet we might ignore this call const hasInsertedInSheet = inserted_styles_cache[css_string]; // these styles need to be inserted if (!hasInsertedInSheet) { stylesheet.data += css_string; // <-- inserted style in sheet inserted_styles_cache[css_string] = true; // <-- mark the insertion } } function getStyleSheet() { // we aren't in the browser env so our fake_sheet will work if (typeof window === "undefined") { return fake_sheet; } const style = document.head.querySelector('#css-in-js'); if (style) { return style.firstChild; // <-- text-node containing styles } // style doesn't already exist create a style-element const styleTag = document.createElement('style'); styleTag.setAttribute('id', 'css-in-js'); styleTag.innerHTML = ' '; document.head.appendChild(styleTag); return styleTag.firstChild; // <-- text-node containing styles } 

const growAnimationName = keyframes({ // <-- argument is called keyframe-style-object from: { transform: 'scale(1)' }, to: { transform: 'scale(2)' }, }); // <-- call to keyframe with style-object returns animation-name. eg: (css-987) // used as css({ width: '100px', height: '100px', animation: `${growAnimationName} 2s ease infinite` }); // compiled as // @keyframe css-987 {  // from: { transform: scale(1) }; // to: { transform: scale(2) }; // } 

// keyframe-style-object { from: { transform: 'scale(1)' }, to: { transform: 'scale(2)' } } // converted style-object { }``` Adding keyframes support to `css` function can be done simply by telling `css` function to treat this `css` call as a `keyframe` function call and do the above conversion before parsing the `style-object`. ```js // adding one more parameter called `options`  // this can be used to change the behavior of `css` function and // it should be an optional parameter. // changing the name to _css_ to indicate this is not exported and passing // different values of options can yield different variations of _css_ functions // to suit different requirements example keyframes function _css_(styles, options) { // ...same no change... // in the parsing of the style function call parseStyles( // style-object options.hasKeyframes ? // convertion to valid style-object from a keyframe-style-object { [`@keyframe ${className}`]: _style_object_ } : _style_object_, // selector className ) // ...same no change... } // final exported function from library export const css = (style_object) => _css_(style_object, {}); export const keyframes = (style_object) => _css_(style_object, { hasKeyframes: true });