react-themed-too - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

lib/compose.js

@@ -24,3 +24,3 @@ "use strict";
 const mapCssToSource = (item, useSourceMap) => {
-  const content = item[1] || '';
+  const content = item[1] || "";
   const cssMap = item[3];
@@ -32,9 +32,9 @@
 
-  if (useSourceMap && typeof btoa === 'function') {
+  if (useSourceMap && typeof btoa === "function") {
     const sourceMapping = toComment(cssMap);
     const sourceUrls = cssMap.sources.map(source => `/*# sourceURL=${cssMap.sourceRoot + source}*/`);
-    return [content].concat(sourceUrls).concat([sourceMapping]).join('\n');
+    return [content].concat(sourceUrls).concat([sourceMapping]).join("\n");
   }
 
-  return [content].join('\n');
+  return [content].join("\n");
 };
@@ -51,3 +51,3 @@
   const res2 = fn2();
-  return typeof res1 === 'string' && typeof res2 === 'string' ? `${res1}${res2}` : undefined;
+  return typeof res1 === "string" && typeof res2 === "string" ? `${res1}${res2}` : undefined;
 };
@@ -59,3 +59,3 @@
     switch (typeof acc[key]) {
-      case 'undefined':
+      case "undefined":
         if (mixin[key] !== null) {
@@ -67,8 +67,8 @@ acc[key] = mixin[key];
 
-      case 'string':
-        if (typeof mixin[key] === 'string') {
+      case "string":
+        if (typeof mixin[key] === "string") {
           if (target[key] === mixin[key]) {
             acc[key] = mixin[key];
           } else {
-            acc[key] = [target[key], mixin[key]].filter(x => x).join(' ');
+            acc[key] = [target[key], mixin[key]].filter(x => x).join(" ");
           }
@@ -79,4 +79,4 @@ }
 
-      case 'object':
-        if (typeof mixin[key] === 'object') {
+      case "object":
+        if (typeof mixin[key] === "object") {
           composeThemes(acc[key], mixin[key]);
@@ -87,4 +87,4 @@ }
 
-      case 'function':
-        if (typeof mixin[key] === 'function') {
+      case "function":
+        if (typeof mixin[key] === "function") {
           acc[key] = combineFunctions(acc[key], mixin[key]);
@@ -133,3 +133,3 @@ }
 function compose(theme, target) {
-  if (theme && theme.locals) {
+  if (theme.locals) {
     const locals = theme.locals;
@@ -146,13 +146,26 @@ const css = compileCssObject.call(theme, false);
         const matchArr = cssRulesSelectorsObject.cache && cssRulesSelectorsObject.cache.length > 0 ? cssRulesSelectorsObject.cache.reduce((cssAcc, cssSelector) => {
-          const cssProp = cssRulesSelectorsObject[cssSelector] && cssRulesSelectorsObject[cssSelector].css ? cssRulesSelectorsObject[cssSelector].css : false;
-          const mediaProp = cssRulesSelectorsObject[cssSelector] && cssRulesSelectorsObject[cssSelector].mediaQuery ? cssRulesSelectorsObject[cssSelector].mediaQuery : false;
+          const cssRule = cssRulesSelectorsObject[cssSelector];
+          const cssProp = cssRule && cssRule.css ? cssRule.css : false;
+          const mediaProp = cssRule && cssRule.mediaQuery ? cssRule.mediaQuery : false;
 
           if (match.test(cssSelector)) {
-            if (cssProp && mediaProp) {
-              cssAcc.css = cssAcc.css ? cssAcc.css += cssProp : cssAcc.css = cssProp;
-              cssAcc.mediaQuery = cssAcc.mediaQuery ? cssAcc.mediaQuery += mediaProp : cssAcc.mediaQuery = mediaProp;
-            } else if (cssProp && !mediaProp) {
-              cssAcc.css = cssAcc.css ? cssAcc.css += cssProp : cssAcc.css = cssProp;
-            } else if (!cssProp && mediaProp) {
-              cssAcc.mediaQuery = cssAcc.mediaQuery ? cssAcc.mediaQuery += mediaProp : cssAcc.mediaQuery = mediaProp;
+            if (cssProp) {
+              if (!cssAcc[localName]) {
+                if (mediaProp) {
+                  cssAcc[localName] = {
+                    css: cssProp,
+                    mediaQuery: mediaProp
+                  };
+                } else {
+                  cssAcc[localName] = {
+                    css: cssProp
+                  };
+                }
+              }
+            } else if (mediaProp) {
+              if (!cssAcc[localName]) {
+                cssAcc[localName] = {
+                  mediaQuery: mediaProp
+                };
+              }
             }
@@ -171,3 +184,3 @@ }
         if (!isEmpty(matchArr)) {
-          const keyReg = new RegExp(`${_const.contextKey}--([a-zA-Z0-9-]+)`, 'g');
+          const keyReg = new RegExp(`${_const.contextKey}--([a-zA-Z0-9-]+)`, "g");
           const ids = localName.split(keyReg);
@@ -189,4 +202,4 @@ const name = localName;
             [localName]: {
-              type: 'css',
-              css: matchArr,
+              type: "css",
+              body: matchArr[localName] || false,
               local: curr
@@ -198,4 +211,4 @@ }
             [curr]: {
-              type: 'variable',
-              css: localName,
+              type: "variable",
+              body: localName,
               local: false
@@ -213,3 +226,3 @@ }
             } else {
-              acc.theme[curr] = [target.theme[curr], localName].join(' ');
+              acc.theme[curr] = [target.theme[curr], localName].join(" ");
             }
@@ -236,9 +249,9 @@ } else if (!acc.theme[curr]) {
 function cssRulesGenerate(cssTokenizedArray) {
-  const selectorSeparator = ',',
-        ruleSeparator = ':',
-        space = ' ';
+  const selectorSeparator = ",",
+        ruleSeparator = ":",
+        space = " ";
   let currentSelector = false,
       currentMediaSelector = false,
       output = {
-    other: '',
+    other: "",
     mediaQueries: [],
@@ -254,3 +267,3 @@ cache: []
     switch (token.token) {
-      case '{':
+      case "{":
         //
@@ -272,3 +285,3 @@ // @NOTE: If it's just a normal selector, add its children if it has any
           //
-          if (token.atRule === 'media' && hasChildren) {
+          if (token.atRule === "media" && hasChildren) {
             currentMediaSelector = token.code;
@@ -280,15 +293,20 @@
 
-            if (currentSelector && output[currentSelector] && !output[currentSelector].mediaQuery) {
-              output[currentSelector].mediaQuery = `${currentMediaSelector} { ${_simpleTokenizer.default.build(token.children, options)} }`;
-            } else if (!currentSelector && !output[currentSelector]) {
-              token.children.forEach(child => {
-                if (child.token === '{' && child.selectors !== void 0) {
-                  currentSelector = child.code;
-                  output.cache.push(!output.cache.includes(child.code) && child.node);
+            token.children.forEach(child => {
+              if (child.token === "{" && child.selectors !== void 0) {
+                currentSelector = child.code;
+                !output.cache.includes && output.cache.push(child.code);
+
+                if (output[currentSelector]) {
+                  if (!output[currentSelector].mediaQuery) {
+                    output[currentSelector].mediaQuery = `${currentMediaSelector} { ${_simpleTokenizer.default.build(token.children, options)} }`;
+                  } else {
+                    output[currentSelector].mediaQuery += `${currentMediaSelector} { ${_simpleTokenizer.default.build(token.children, options)} }`;
+                  }
+                } else if (!output[currentSelector]) {
                   output[currentSelector] = {
-                    mediaQuery: `${currentMediaSelector} {${_simpleTokenizer.default.build(child.children, options)}}`
+                    mediaQuery: `${currentMediaSelector} { ${_simpleTokenizer.default.build(token.children, options)} }`
                   };
                 }
-              });
-            }
+              }
+            });
           }
@@ -295,0 +313,0 @@ }

lib/const.js

@@ -11,3 +11,3 @@ "use strict";
 exports.contextKey = contextKey;
-const webpackIdentity = `[name]__${contextKey}--[hash:base64:5]`;
+const webpackIdentity = `[name]_[local]__${contextKey}--[hash:base64:5]`;
 exports.webpackIdentity = webpackIdentity;

lib/extractCritical.js

@@ -13,6 +13,8 @@ "use strict";
     styles,
-    classCache
+    classCache,
+    globalCss
   } = GlobalContext[_const.contextSecret];
   let {
-    inserted
+    inserted,
+    insertedCache
   } = GlobalContext[_const.contextSecret];
@@ -22,3 +24,6 @@ let RGX = new RegExp(`${_const.contextKey}--([a-zA-Z0-9-]+)`, 'gm');
     html,
-    css: ''
+    body: {
+      css: '',
+      mediaQueries: ''
+    }
   };
@@ -28,2 +33,6 @@ let match;
 
+  if (globalCss !== '') {
+    o.body.css += globalCss;
+  }
+
   while ((match = RGX.exec(html)) !== null) {
@@ -33,20 +42,36 @@ if (ids[match[1]] === undefined) {
     }
-  }
+  } // 1. create hash on extractCritical
+  // 2. if hash exists, serve cache
+  // 3. otherwise extract
 
+
   Object.keys(ids).filter(id => {
     if (ids[id] && typeof inserted[id] === 'undefined' && classCache[id]) {
       inserted[id] = true;
-      let currentID = classCache[id];
+      const currentID = classCache[id];
 
       if (styles[currentID]) {
-        let currentCss = styles[currentID].css && styles[currentID].css.css ? styles[currentID].css.css : false;
-        let currentMediaQuery = styles[currentID].css && styles[currentID].css.mediaQuery ? styles[currentID].css.mediaQuery : false;
+        inserted[id] = {};
+        const currentCss = styles[currentID].body && styles[currentID].body.css ? styles[currentID].body.css : false;
+        const currentMediaQuery = styles[currentID].body && styles[currentID].body.mediaQuery ? styles[currentID].body.mediaQuery : false;
 
         if (currentCss) {
-          o.css += currentCss;
+          o.body.css += currentCss;
+          inserted[id].css = currentCss;
+
+          if (currentMediaQuery) {
+            o.body.mediaQueries += currentMediaQuery;
+            inserted[id].mediaQuery = currentMediaQuery;
+          }
+
           return true;
+        } else if (currentMediaQuery) {
+          o.body.css += currentMediaQuery;
+          inserted[id].mediaQuery = currentMediaQuery;
+          return true;
         }
       }
-    } else {
-      return false;
+    } else if (ids[id] && inserted[id] && classCache[id]) {
+      o.body.css += inserted[id].css ? inserted[id].css : '';
+      o.body.mediaQueries += inserted[id].mediaQuery ? inserted[id].mediaQuery : '';
     }
@@ -53,0 +78,0 @@ });

lib/index.js

@@ -6,8 +6,12 @@ "use strict";
 });
-exports.webpackIdentity = exports.addGlobalCss = exports.globalCss = exports.compose = exports.ThemeProvider = exports.themed = exports.extractCritical = exports.renderToStream = void 0;
+exports.renderToStream = exports.extractCritical = exports.webpackIdentity = exports.addGlobalCss = exports.globalCss = exports.compose = exports.ThemeProvider = exports.themed = exports.insertedCache = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _reactThemed = _interopRequireDefault(require("./react-themed"));
+var _reactThemed = _interopRequireDefault(require("./reactThemed"));
 
+var _extractCritical = _interopRequireDefault(require("./extractCritical"));
+
+var _renderToStream = _interopRequireDefault(require("./renderToStream"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,5 +23,8 @@
 const GlobalContext = typeof global !== 'undefined' ? global : {};
+const extractCritical = (0, _extractCritical.default)(GlobalContext);
+exports.extractCritical = extractCritical;
+const renderToStream = (0, _renderToStream.default)(GlobalContext);
+exports.renderToStream = renderToStream;
 const {
-  renderToStream,
-  extractCritical,
+  insertedCache,
   themed,
@@ -36,3 +43,2 @@ ThemeProvider,
 exports.themed = themed;
-exports.extractCritical = extractCritical;
-exports.renderToStream = renderToStream;
+exports.insertedCache = insertedCache;

lib/react-themed.js

@@ -57,4 +57,2 @@ "use strict";
   const reactThemed = {
-    renderToStream: (0, _renderToStream.default)(GlobalContext),
-    extractCritical: (0, _extractCritical.default)(GlobalContext),
     themed: (0, _themed.default)(context),
@@ -61,0 +59,0 @@ ThemeProvider: (0, _themeProvider.default)(context, GlobalContext),

lib/renderToStream.js

@@ -20,2 +20,3 @@ "use strict";
   const tokenStream = (0, _htmlTokenize.default)();
+  let globalCssInjected = false;
   const inlineStream = (0, _through.default)(function write(thing) {
@@ -26,5 +27,13 @@ let [type, data] = thing;
       classCache,
-      inserted
+      inserted,
+      globalCss
     } = GlobalContext[_const.contextSecret];
 
+    if (globalCss !== '' && !globalCssInjected) {
+      this.queue(`<style data-${_const.contextKey}="globalCss">
+            ${globalCss}
+          </style>`);
+      globalCssInjected = true;
+    }
+
     if (type === 'open') {
@@ -45,9 +54,8 @@ let css = '';
       Object.keys(ids).forEach(id => {
-        let currentID = classCache[id];
-        console.log(classCache);
+        const currentID = classCache[id];
 
         if (styles[currentID] && typeof inserted[id] === 'undefined' && ids[id] === true) {
           inserted[id] = true;
-          let styleCss = styles[currentID] && styles[currentID].css && styles[currentID].css.css ? styles[currentID].css.css : false;
-          let styleQuery = styles[currentID] && styles[currentID].css.mediaQuery ? styles[currentID].css.mediaQuery : false;
+          const styleCss = styles[currentID] && styles[currentID].body && styles[currentID].body.css ? styles[currentID].body.css : false;
+          const styleQuery = styles[currentID] && styles[currentID].body.mediaQuery ? styles[currentID].body.mediaQuery : false;
           css += styleCss;
@@ -64,6 +72,2 @@ }
 
-    if (type === 'close') {
-      let fragment = data.toString();
-    }
-
     this.queue(data);
@@ -70,0 +74,0 @@ }, function end() {

package.json

 {
   "name": "react-themed-too",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "CSS in React",
@@ -34,8 +34,6 @@ "main": "./lib/index.js",
   },
-  "peerDependencies": {
-    "react": "^16.4.2"
-  },
   "dependencies": {
     "html-tokenize": "^2.0.0",
     "multipipe": "^2.0.3",
+    "react": "^16.4.2",
     "simple-tokenizer": "^1.0.2",
@@ -42,0 +40,0 @@ "through": "^2.3.8"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33768

increased by22.73%

Number of package files

15

increased by25%

Lines of code

755

increased by28.84%

Dependency changes

• + Addedreact@^16.4.2