iso-styles - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
     "name": "iso-styles",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Webpack loader and React 16 utilities for isomorphic and critical CSS",
-    "main": "src/index.js",
+    "main": "lib/index.js",
+    "module": "src/index.js",
     "repository": "https://github.com/arthanzel/isomorphic-styles",
@@ -11,9 +12,14 @@ "author": "Martin Hanzel",
     "scripts": {
-        "build": "babel src -d dist"
+        "build": "babel src -d lib"
     },
-    "devDependencies": {},
+    "devDependencies": {
+        "babel-cli": "^6.26.0",
+        "babel-preset-env": "^1.7.0"
+    },
     "dependencies": {
-        "loader-utils": "^1.1.0",
-        "react": "^16.4.0"
+        "loader-utils": "^1.1.0"
+    },
+    "peerDependencies": {
+        "react": "^16.0.0"
     }
 }

src/withStyles.js

@@ -1,14 +0,28 @@
-var React = require("react");
+import React from "react";
+import { insertCssIntoDom } from "./dom";
 
-var options = {
-    contextClass: null
+let 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);
+        }
+    },
 };
 
-module.exports = function withStyles(styles, Component) {
-    if (!options.contextClass) {
-        var msg = "You need to call withStyles.setup() to set up a React context"
-            + "See https://github.com/arthanzel/isomorphic-styles";
-        throw new Error(msg);
-    }
-
+export default function withStyles(styles, Component) {
     if (Component) {
@@ -20,8 +34,23 @@ return withStyles(styles)(Component);
         return function WrappedComponent(props) {
+            if (!checkContext()) return null;
             return React.createElement(React.Fragment, {},
                 React.createElement(options.contextClass.Consumer, {},
-                        function inContext(ctx) {
-
+                    function inContext(ctx) {
+                        if (typeof styles === "string") {
+                            options.insertCss(ctx, styles, randomId());
                         }
-                    ),
+                        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);
+                            }
+                        }
+                        else if (typeof styles === "object") {
+                            options.insertCss(ctx, styles.css, `${ styles.name }-${ randomId() }`);
+                        }
+                    }
+                ),
                 React.createElement(Component, props)
@@ -31,6 +60,24 @@ );
     };
-};
+}
 
-module.exports.setup = function setupWithStyles(newOptions) {
+withStyles.setup = function setup(newOptions) {
     options = Object.assign({}, options, newOptions);
 };
+
+function checkContext() {
+    if (!options.contextClass) {
+        const msg = "You need to call withStyles.setup() to set up a React context\n"
+            + "See https://github.com/arthanzel/isomorphic-styles";
+        console.error(msg);
+        return false;
+    }
+    return true;
+}
+
+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

Improved metrics

Total package byte prevSize

30507

increased by88.22%

Number of package files

14

increased by55.56%

Lines of code

250

increased by224.68%

Worsened metrics

Dev dependency count

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedreact@^16.4.0