@emotion/core - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/index.cjs.js

@@ -9,70 +9,4 @@ 'use strict';
 var React = require('react');
-var StyleSheet = _interopDefault(require('@emotion/sheet'));
-var emotionUtils = require('emotion-utils');
+var createCache = _interopDefault(require('@emotion/cache'));
 
-// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
-// inlined to avoid umd wrapper and peerDep warnings/installing stylis
-// since we use stylis after closure compiler
-var delimiter = '/*|*/';
-var needle = delimiter + '}';
-function createRuleSheetPlugin(insertRule) {
-  function toSheet(block) {
-    if (block) {
-      insertRule(block + '}');
-    }
-  }
-
-  return function ruleSheet(context, content, selectors, parents, line, column, length, at, depth) {
-    switch (context) {
-      case 2:
-        if (at === 0) return content + delimiter;
-        break;
-      // at-rule
-
-      case 3:
-        switch (at) {
-          // @font-face, @page
-          case 102:
-          case 112:
-            {
-              insertRule(selectors[0] + content);
-              return '';
-            }
-
-          default:
-            {
-              return content + delimiter;
-            }
-        }
-
-      case -2:
-        {
-          content.split(needle).forEach(toSheet);
-        }
-    }
-  };
-}
-
-var stylis = new emotionUtils.Stylis({
-  keyframe: false,
-  global: false,
-  semicolon: true
-});
-var current;
-var insertionPlugin = createRuleSheetPlugin(function (rule) {
-  current.push(rule);
-});
-
-var returnFullPlugin = function returnFullPlugin(context) {
-  if (context === -1) {
-    current = [];
-  }
-
-  if (context === -2) {
-    return current;
-  }
-};
-
-stylis.use(insertionPlugin)(returnFullPlugin);
-
 var hydration = {
@@ -98,31 +32,16 @@ shouldHydrate: false
   });
-}
+} // $FlowFixMe
 
-var createInstance = function createInstance() {
-  var context = {
-    stylis: stylis,
-    sheet: new StyleSheet({
-      key: ''
-    }),
-    inserted: {},
-    registered: {},
-    theme: {}
-  };
 
-  if (utils.isBrowser) {
-    context.sheet.inject();
-  }
-
-  return context;
-}; // $FlowFixMe
-
-
 var CSSContext = React.createContext(null);
-function consumer(func) {
+function consumer(instance, func) {
   return React.createElement(CSSContext.Consumer, null, function (context) {
     if (context === null) {
-      var instance = createInstance();
+      if (instance.emotionCache === undefined) {
+        instance.emotionCache = createCache();
+      }
+
       return React.createElement(CSSContext.Provider, {
-        value: instance
-      }, func(instance));
+        value: instance.emotionCache
+      }, func(instance.emotionCache));
     } else {
@@ -135,3 +54,4 @@ return func(context);
 exports.hydration = hydration;
+exports.CSSContext = CSSContext;
 exports.consumer = consumer;
 //# sourceMappingURL=index.cjs.js.map

dist/index.es.js

 import { isBrowser } from '@emotion/utils';
 import { createContext, createElement } from 'react';
-import StyleSheet from '@emotion/sheet';
-import { Stylis } from 'emotion-utils';
+import createCache from '@emotion/cache';
 
-// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
-// inlined to avoid umd wrapper and peerDep warnings/installing stylis
-// since we use stylis after closure compiler
-var delimiter = '/*|*/';
-var needle = delimiter + '}';
-function createRuleSheetPlugin(insertRule) {
-  function toSheet(block) {
-    if (block) {
-      insertRule(block + '}');
-    }
-  }
-
-  return function ruleSheet(context, content, selectors, parents, line, column, length, at, depth) {
-    switch (context) {
-      case 2:
-        if (at === 0) return content + delimiter;
-        break;
-      // at-rule
-
-      case 3:
-        switch (at) {
-          // @font-face, @page
-          case 102:
-          case 112:
-            {
-              insertRule(selectors[0] + content);
-              return '';
-            }
-
-          default:
-            {
-              return content + delimiter;
-            }
-        }
-
-      case -2:
-        {
-          content.split(needle).forEach(toSheet);
-        }
-    }
-  };
-}
-
-var stylis = new Stylis({
-  keyframe: false,
-  global: false,
-  semicolon: true
-});
-var current;
-var insertionPlugin = createRuleSheetPlugin(function (rule) {
-  current.push(rule);
-});
-
-var returnFullPlugin = function returnFullPlugin(context) {
-  if (context === -1) {
-    current = [];
-  }
-
-  if (context === -2) {
-    return current;
-  }
-};
-
-stylis.use(insertionPlugin)(returnFullPlugin);
-
 var hydration = {
@@ -91,31 +25,16 @@ shouldHydrate: false
   });
-}
+} // $FlowFixMe
 
-var createInstance = function createInstance() {
-  var context = {
-    stylis: stylis,
-    sheet: new StyleSheet({
-      key: ''
-    }),
-    inserted: {},
-    registered: {},
-    theme: {}
-  };
 
-  if (isBrowser) {
-    context.sheet.inject();
-  }
-
-  return context;
-}; // $FlowFixMe
-
-
 var CSSContext = createContext(null);
-function consumer(func) {
+function consumer(instance, func) {
   return createElement(CSSContext.Consumer, null, function (context) {
     if (context === null) {
-      var instance = createInstance();
+      if (instance.emotionCache === undefined) {
+        instance.emotionCache = createCache();
+      }
+
       return createElement(CSSContext.Provider, {
-        value: instance
-      }, func(instance));
+        value: instance.emotionCache
+      }, func(instance.emotionCache));
     } else {
@@ -127,3 +46,3 @@ return func(context);
 
-export { hydration, consumer };
+export { hydration, CSSContext, consumer };
 //# sourceMappingURL=index.es.js.map

package.json

 {
   "name": "@emotion/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/index.cjs.js",
@@ -18,5 +18,6 @@ "module": "dist/index.es.js",
   "dependencies": {
-    "@emotion/sheet": "^0.0.5",
-    "@emotion/types": "^0.0.5",
-    "@emotion/utils": "^0.1.0",
+    "@emotion/cache": "^0.2.0",
+    "@emotion/sheet": "^0.2.0",
+    "@emotion/types": "^0.2.0",
+    "@emotion/utils": "^0.2.0",
     "emotion-utils": "^9.0.0"
@@ -23,0 +24,0 @@ },

src/index.js

@@ -5,4 +5,3 @@ // @flow
 import type { CSSContextType } from '@emotion/types'
-import StyleSheet from '@emotion/sheet'
-import stylis from './stylis'
+import createCache from '@emotion/cache'
 
@@ -48,20 +47,9 @@ type RenderFn<T> = (value: T) => React.Node
 
-const createInstance = () => {
-  const context: CSSContextType = {
-    stylis,
-    sheet: new StyleSheet({ key: '' }),
-    inserted: {},
-    registered: {},
-    theme: {}
-  }
-  if (isBrowser) {
-    context.sheet.inject()
-  }
-  return context
-}
-
 // $FlowFixMe
-const CSSContext: Context<CSSContextType> = React.createContext(null)
+export const CSSContext: Context<CSSContextType> = React.createContext(null)
 
-export function consumer(func: CSSContextType => React.Node) {
+export function consumer(
+  instance: { emotionCache?: CSSContextType },
+  func: CSSContextType => React.Node
+) {
   return (
@@ -71,6 +59,8 @@ <CSSContext.Consumer>
         if (context === null) {
-          const instance = createInstance()
+          if (instance.emotionCache === undefined) {
+            instance.emotionCache = createCache()
+          }
           return (
-            <CSSContext.Provider value={instance}>
-              {func(instance)}
+            <CSSContext.Provider value={instance.emotionCache}>
+              {func(instance.emotionCache)}
             </CSSContext.Provider>
@@ -77,0 +67,0 @@ )

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

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

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

Worsened metrics

Total package byte prevSize

10097

decreased by-51.83%

Dependency count

6

increased by20%

Number of package files

8

decreased by-20%

Lines of code

138

decreased by-60.91%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/cache@^0.2.0

• + Added@emotion/cache@0.2.3(transitive)

• + Added@emotion/sheet@0.2.0(transitive)

• + Added@emotion/types@0.2.3(transitive)

• + Added@emotion/utils@0.2.0(transitive)

• - Removed@emotion/sheet@0.0.5(transitive)

• - Removed@emotion/types@0.0.5(transitive)

• - Removed@emotion/utils@0.1.0(transitive)

• Updated@emotion/sheet@^0.2.0

• Updated@emotion/types@^0.2.0

• Updated@emotion/utils@^0.2.0