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 });