styletron-client/src/styletron-client.js

  1. const DECL_REGEX = /.([^:{]+)(:[^{]+)?{([^:]+):([^}]+)}/g;
  3. const StyletronCore = require('styletron-core');
  5. /**
  6.  * A Styletron class for rendering styles in the browser
  7.  * @extends StyletronCore
  8.  * @packagename styletron-client
  9.  * @example
  10.  * const elements = document.getElementsByClassName('_styletron_hydrate_');
  11.  * const styletron = new StyletronClient(elements);
  12.  */
  13. class StyletronClient extends StyletronCore {
  14.   /**
  15.    * Create a new StyletronClient instance
  16.    * @param {NodeList|HTMLCollection|HTMLStyleElement[]} [serverStyles] - List of server style elements
  17.    * @param {object} [opts] - StyletronCore options
  18.    */
  19.   constructor(serverStyles, opts) {
  20.     super(opts);
  21.     this.uniqueCount = 0;
  22.     this.mediaSheets = {};
  23.     if (serverStyles) {
  24.       for (let i = 0; i < serverStyles.length; i++) {
  25.         const element = serverStyles[i];
  26.         if (element.media) {
  27.           this.mediaSheets[element.media] = element;
  28.         } else {
  29.           this.mainSheet = element;
  30.         }
  31.         this.hydrateCacheFromCssString(element.textContent, element.media);
  32.       }
  33.     } else {
  34.       const styleSheet = document.createElement('style');
  35.       document.head.appendChild(styleSheet);
  36.       this.mainSheet = styleSheet;
  37.     }
  38.   }
  40.   /*
  41.    * Hydrate the cache from a css string and media string
  42.    * @param {string} css   - The stylesheet css content
  43.    * @param {string} media - The stylesheet media string
  44.    */
  45.   hydrateCacheFromCssString(css, media) {
  46.     let decl;
  47.     // {
  48.     //  1: className,
  49.     //  2: pseudo,
  50.     //  3: prop,
  51.     //  4: val
  52.     // }
  53.     while (decl = DECL_REGEX.exec(css)) {
  54.       super.incrementVirtualCount();
  55.       StyletronCore.assignDecl(this.cache, {
  56.         pseudo: decl[2],
  57.         prop: decl[3],
  58.         val: decl[4],
  59.         media
  60.       }, decl[1]);
  61.     }
  62.   }
  64.   /**
  65.    * Inject declaration into the stylesheet and return the unique class name
  66.    * @return {string}      class name
  67.    * @example
  68.    * // <style id="styletron">.a{color:red}</style>
  69.    * const styletron = new StyletronClient(document.getElementsByClassName('_styletron_hydrate_'));
  70.    * styletron.injectDeclaration({prop: 'color', val: 'blue'});
  71.    * // → 'b'
  72.    * styletron.injectDeclaration({prop: 'color', val: 'red', media: '(min-width: 800px)'});
  73.    * // → 'c'
  74.    * styletron.injectDeclaration({prop: 'color', val: 'red'});
  75.    * // → 'a'
  76.    */
  77.   injectDeclaration(decl) {
  78.     const oldCount = this.uniqueCount;
  79.     const className = super.injectDeclaration(decl);
  80.     if (oldCount !== this.uniqueCount) {
  81.       const rule = declarationToRule(className, decl);
  82.       let sheet;
  83.       if (decl.media) {
  84.         if (!this.mediaSheets[decl.media]) {
  85.           const mediaSheet = document.createElement('style');
  86.           mediaSheet.media = decl.media;
  87.           this.mediaSheets[decl.media] = mediaSheet;
  88.           this.mainSheet.parentNode.appendChild(mediaSheet);
  89.         }
  90.         sheet = this.mediaSheets[decl.media].sheet;
  91.       } else {
  92.         sheet = this.mainSheet.sheet;
  93.       }
  94.       sheet.insertRule(rule, sheet.cssRules.length);
  95.     }
  96.     return className;
  97.   }
  98. }
  100. module.exports = StyletronClient;
  102. /*
  103.  * Injection helpers
  104.  */
  106. function declarationToRule(className, {prop, val, pseudo}) {
  107.   const decl = `${prop}:${val}`;
  108.   let selector = `.${className}`;
  109.   if (pseudo) {
  110.     selector += pseudo;
  111.   }
  112.   return `${selector}{${decl}}`;
  113. }