iso-styles - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/index.js

@@ -6,4 +6,8 @@ "use strict";
 });
-exports.withStyles = undefined;
+exports.withStyles = exports.insertCssIntoDom = undefined;
 
+var _insertCssIntoDom2 = require("./insertCssIntoDom");
+
+var _insertCssIntoDom3 = _interopRequireDefault(_insertCssIntoDom2);
+
 var _withStyles2 = require("./withStyles");
@@ -15,2 +19,3 @@
 
+var insertCssIntoDom = exports.insertCssIntoDom = _insertCssIntoDom3.default;
 var withStyles = exports.withStyles = _withStyles3.default;

lib/withStyles.js

@@ -15,3 +15,3 @@ "use strict";
 
-var _dom = require("./dom");
+var _util = require("./util");
 
@@ -23,24 +23,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-    contextStylesProperty: "styles",
+    contextStylesProperty: "styles"
+};
 
-    insertCss: function insertCss(ctx, css, name) {
-        var path = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
-
-        var cssWithName = "\n/* ====== " + name + " ====== */\n" + css + "\n\n";
-
-        if (isBrowser()) {
-            // On the browser, add the styles to the DOM
-            (0, _dom.insertCssIntoDom)(css, name, path);
-        } else {
-            // On the server, add the styles to the context
-            var prop = options.contextStylesProperty;
-            if (!ctx[prop]) {
-                ctx[prop] = new Set();
-            }
-            ctx[prop].add(cssWithName);
-        }
+function withStyles(styles, Component) {
+    if ((0, _util.isBrowser)()) {
+        // Only add critical styles in SSR
+        return function (props) {
+            return _react2.default.createElement(Component, props);
+        };
     }
-};
 
-function withStyles(styles, Component) {
     if (Component) {
@@ -50,52 +39,68 @@ return withStyles(styles)(Component);
 
-    return function withStylesInner(Component) {
-        return function WrappedComponent(props) {
-            if (!checkContext()) return null;
-            return _react2.default.createElement(_react2.default.Fragment, {}, _react2.default.createElement(options.contextClass.Consumer, {}, function inContext(ctx) {
-                if (typeof styles === "string") {
-                    options.insertCss(ctx, styles, randomId());
-                } else if (Array.isArray(styles)) {
-                    var _iteratorNormalCompletion = true;
-                    var _didIteratorError = false;
-                    var _iteratorError = undefined;
-
-                    try {
-                        for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                            var line = _step.value;
-
-                            // line[0] = unique Webpack require() string
-                            // line[1] = the actual CSS
-                            var split = line[0].split("!");
-                            var filename = split[split.length - 1];
-                            options.insertCss(ctx, line[1], filename, filename);
-                        }
-                    } catch (err) {
-                        _didIteratorError = true;
-                        _iteratorError = err;
-                    } finally {
-                        try {
-                            if (!_iteratorNormalCompletion && _iterator.return) {
-                                _iterator.return();
-                            }
-                        } finally {
-                            if (_didIteratorError) {
-                                throw _iteratorError;
-                            }
-                        }
+    // Curried function
+    return function (Component) {
+        return (
+            // Functional React component
+            function (props) {
+                if (!checkContext()) return null;
+                return _react2.default.createElement(_react2.default.Fragment, {},
+                // Context consumer
+                _react2.default.createElement(options.contextClass.Consumer, {}, function inContext(ctx) {
+                    if (typeof styles === "string") {
+                        var uniqueId = "anonymous-" + (0, _util.fastHash)(styles);
+                        insertCssIntoContext(ctx, [[uniqueId, styles, ""]]);
+                    } else if (Array.isArray(styles)) {
+                        // If styles is output from css-loader
+                        insertCssIntoContext(ctx, styles);
+                    } else if ((typeof styles === "undefined" ? "undefined" : _typeof(styles)) === "object") {
+                        insertCssIntoContext(ctx, [[styles.name, styles.css, ""]]);
                     }
-                } else if ((typeof styles === "undefined" ? "undefined" : _typeof(styles)) === "object") {
-                    options.insertCss(ctx, styles.css, styles.name + "-" + randomId());
-                }
-            }), _react2.default.createElement(Component, props));
-        };
+                }), _react2.default.createElement(Component, props));
+            }
+        );
     };
 }
 
-withStyles.setup = function setup(newOptions) {
-    options = Object.assign({}, options, newOptions);
+withStyles.configure = function withStylesConfigure(contextClass) {
+    var stylesProp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : options.contextStylesProperty;
+
+    options.contextClass = contextClass;
+    options.contextStylesProperty = stylesProp;
 };
 
+function insertCssIntoContext(ctx, styles) {
+    var prop = options.contextStylesProperty;
+    if (!ctx[prop]) {
+        ctx[prop] = new Map();
+    }
+
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+
+    try {
+        for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var line = _step.value;
+
+            ctx[prop].set((0, _util.simplifyName)(line[0]), line[1]);
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally {
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return) {
+                _iterator.return();
+            }
+        } finally {
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+}
+
 function checkContext() {
     if (!options.contextClass) {
-        var msg = "You need to call withStyles.setup() to set up a React context\n" + "See https://github.com/arthanzel/isomorphic-styles";
+        var msg = "You need to call withStyles.configure() to set up a React context\n" + "See https://github.com/arthanzel/isomorphic-styles";
         console.error(msg);
@@ -105,10 +110,2 @@ return false;
     return true;
-}
-
-function isBrowser() {
-    return typeof document !== "undefined" && typeof window !== "undefined";
-}
-
-function randomId() {
-    return Math.random().toString(36).substr(2);
 }

loader.js

@@ -8,3 +8,3 @@ /**
 
-const path = require("path");
+const getOptions = require("loader-utils").getOptions;
 const stringifyRequest = require("loader-utils").stringifyRequest;
@@ -19,8 +19,19 @@
 
+    const options = getOptions(this) || {};
+
+    let hmr;
+    if (process.env.NODE_ENV === "production")
+        hmr = false;
+    else
+        hmr = options.hmr === undefined ? true : options.hmr;
+
+    let injectCss = options.injectCss === undefined ? true : options.injectCss;
+
     const stringifiedRequest = stringifyRequest(this, `!!${ remainingRequest }`);
 
-    const insertCssPath = path.join(__dirname, "./insertCss.js");
-    return `
+    let loaderCode = `
     var out = require(${ stringifiedRequest });
-    
+    var insertCssIntoDom = require("iso-styles").insertCssIntoDom;
+    var browser = typeof window !== "undefined" && typeof document !== "undefined";
+
     if (typeof out === "string") {
@@ -32,3 +43,3 @@ out = [[module.id, out, ""]];
     if (out.locals) {
-        for (const key of Object.keys(out.locals)) {
+        for (var key of Object.keys(out.locals)) {
             out[key] = out.locals[key];
@@ -38,26 +49,37 @@ }
     
+    // toString returns the whole CSS plus dependencies in a string
+    // Prefix it with an underscore to avoid name collisions
     out._toString = out.toString;
-    out._originalRequest = ${ stringifiedRequest };
     
-    module.exports = out;`;
-    /*
+    module.exports = out;
+    `;
 
-    // Hot Module Replacement
-    // https://webpack.github.io/docs/hot-module-replacement
-    // Only activated in browser context
-    if (module.hot && typeof window !== 'undefined' && window.document) {
-      var removeCss = function() {};
-      module.hot.accept(${stringifyRequest(this, `!!${remainingRequest}`)}, function() {
-        content = require(${stringifyRequest(this, `!!${remainingRequest}`)});
+    const injectCode = `
+    if (browser) {
+        insertCssIntoDom(out);
+    }
+    `;
 
-        if (typeof content === 'string') {
-          content = [[module.id, content, '']];
-        }
+    const hmrCode = `
+    if (module.hot && browser) {
+        console.log("watching");
+        var remove = function() {};
+        module.hot.accept(${ stringifiedRequest }, function() {
+            const newStyles = require(${ stringifiedRequest });
+            remove = insertCssIntoDom(newStyles);
+            
+            module.hot.dispose(function() {
+                remove();
+            });
+        });
+    }
+    `;
 
-        removeCss = insertCss(content, { replace: true });
-      });
-      module.hot.dispose(function() { removeCss(); });
-    }
-  `;
-  */
+    if (injectCss)
+        loaderCode += injectCode;
+    if (hmr)
+        loaderCode += hmrCode;
+
+    return loaderCode;
 };
+

package.json

 {
     "name": "iso-styles",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Webpack loader and React 16 utilities for isomorphic and critical CSS",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/index.js

@@ -0,3 +1,5 @@
+import _insertCssIntoDom from "./insertCssIntoDom";
 import _withStyles from "./withStyles";
 
+export const insertCssIntoDom = _insertCssIntoDom;
 export const withStyles = _withStyles;

src/withStyles.js

 import React from "react";
-import { insertCssIntoDom } from "./dom";
 
-let options = {
+import { fastHash, isBrowser, simplifyName } from "./util";
+
+const options = {
     contextClass: null,
 
     contextStylesProperty: "styles",
-
-    insertCss(ctx, css, name, path = undefined) {
-        const cssWithName = `\n/* ====== ${ name } ====== */\n${ css }\n\n`;
-
-        if (isBrowser()) {
-            // On the browser, add the styles to the DOM
-            insertCssIntoDom(css, name, path);
-        }
-        else {
-            // On the server, add the styles to the context
-            const prop = options.contextStylesProperty;
-            if (!ctx[prop]) {
-                ctx[prop] = new Set();
-            }
-            ctx[prop].add(cssWithName);
-        }
-    },
 };
 
 export default function withStyles(styles, Component) {
+    if (isBrowser()) {
+        // Only add critical styles in SSR
+        return props => React.createElement(Component, props);
+    }
+
     if (Component) {
@@ -32,22 +21,21 @@ return withStyles(styles)(Component);
 
-    return function withStylesInner(Component) {
-        return function WrappedComponent(props) {
+    // Curried function
+    return Component =>
+        // Functional React component
+        props => {
             if (!checkContext()) return null;
             return React.createElement(React.Fragment, {},
+                // Context consumer
                 React.createElement(options.contextClass.Consumer, {},
                     function inContext(ctx) {
                         if (typeof styles === "string") {
-                            options.insertCss(ctx, styles, randomId());
+                            const uniqueId = "anonymous-" + fastHash(styles);
+                            insertCssIntoContext(ctx, [[uniqueId, styles, ""]]);
                         }
                         else if (Array.isArray(styles)) {
-                            for (const line of styles) {
-                                // line[0] = unique Webpack require() string
-                                // line[1] = the actual CSS
-                                const split = line[0].split("!");
-                                const filename = split[split.length - 1];
-                                options.insertCss(ctx, line[1], filename, filename);
-                            }
+                            // If styles is output from css-loader
+                            insertCssIntoContext(ctx, styles);
                         }
                         else if (typeof styles === "object") {
-                            options.insertCss(ctx, styles.css, `${ styles.name }-${ randomId() }`);
+                            insertCssIntoContext(ctx, [[styles.name, styles.css, ""]]);
                         }
@@ -59,12 +47,23 @@ }
         }
-    };
 }
 
-withStyles.setup = function setup(newOptions) {
-    options = Object.assign({}, options, newOptions);
+withStyles.configure = function withStylesConfigure(contextClass, stylesProp = options.contextStylesProperty) {
+    options.contextClass = contextClass;
+    options.contextStylesProperty = stylesProp;
 };
 
+function insertCssIntoContext(ctx, styles) {
+    const prop = options.contextStylesProperty;
+    if (!ctx[prop]) {
+        ctx[prop] = new Map();
+    }
+
+    for (const line of styles) {
+        ctx[prop].set(simplifyName(line[0]), line[1]);
+    }
+}
+
 function checkContext() {
     if (!options.contextClass) {
-        const msg = "You need to call withStyles.setup() to set up a React context\n"
+        const msg = "You need to call withStyles.configure() to set up a React context\n"
             + "See https://github.com/arthanzel/isomorphic-styles";
@@ -77,8 +76,2 @@ console.error(msg);
 
-function isBrowser() {
-    return typeof document !== "undefined" && typeof window !== "undefined";
-}
 
-function randomId() {
-    return (Math.random().toString(36).substr(2));
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41463

increased by35.91%

Number of package files

16

increased by14.29%

Lines of code

376

increased by50.4%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

No dependency changes