create-emotion-server - npm Package Compare versions

Comparing version 9.2.12 to 10.0.0-beta.0

package.json

 {
   "name": "create-emotion-server",
-  "version": "9.2.12",
+  "version": "10.0.0-beta.0",
   "description": "SSR and style extraction tooling for emotion, The Next Generation of CSS-in-JS.",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs.js",
   "types": "types/index.d.ts",
@@ -21,6 +21,6 @@ "files": [
   "devDependencies": {
-    "@types/node": "*",
+    "@types/node": "^10.11.4",
     "dtslint": "^0.3.0",
-    "emotion": "^9.2.12",
-    "react-emotion": "^9.2.12"
+    "emotion": "^10.0.0-beta.0",
+    "react-emotion": "^10.0.0-beta.0"
   },
@@ -43,3 +43,8 @@ "author": "Kye Hohenberger",
   },
-  "gitHead": "7c582301317cd9c0038a13a118456e798ffcadf8"
+  "publishConfig": {
+    "tag": "next"
+  },
+  "browser": {
+    "./dist/index.cjs.js": "./dist/index.browser.cjs.js"
+  }
 }

src/extract-critical.js

 // @flow
-import type { Emotion } from 'create-emotion'
+import type { EmotionCache } from '@emotion/utils'
 
-const createExtractCritical = (emotion: Emotion) => (html: string) => {
+const createExtractCritical = (cache: EmotionCache) => (html: string) => {
   // parse out ids from html
   // reconstruct css/rules/cache to pass
-  let RGX = new RegExp(`${emotion.caches.key}-([a-zA-Z0-9-_]+)`, 'gm')
+  let RGX = new RegExp(`${cache.key}-([a-zA-Z0-9-_]+)`, 'gm')
 
@@ -20,10 +20,9 @@ let o = { html, ids: [], css: '' }
 
-  o.ids = Object.keys(emotion.caches.inserted).filter(id => {
+  o.ids = Object.keys(cache.inserted).filter(id => {
     if (
-      (ids[id] === true ||
-        emotion.caches.registered[`${emotion.caches.key}-${id}`] ===
-          undefined) &&
-      emotion.caches.inserted[id] !== true
+      (ids[id] !== undefined ||
+        cache.registered[`${cache.key}-${id}`] === undefined) &&
+      cache.inserted[id] !== true
     ) {
-      o.css += emotion.caches.inserted[id]
+      o.css += cache.inserted[id]
       return true
@@ -30,0 +29,0 @@ }

src/index.js

 // @flow
-import type { Emotion } from 'create-emotion'
+import type { EmotionCache } from '@emotion/utils'
 import createExtractCritical from './extract-critical'
@@ -7,10 +7,14 @@ import createRenderStylesToString from './inline'
 
-export default function(emotion: Emotion) {
-  const nonceString =
-    emotion.caches.nonce !== undefined ? ` nonce="${emotion.caches.nonce}"` : ''
+export default function(cache: EmotionCache) {
+  if (cache.compat !== true) {
+    // is this good? should we do this automatically?
+    // this is only for when using the new apis (not emotion or create-emotion)
+    cache.compat = true
+  }
+  const nonceString = cache.nonce !== undefined ? ` nonce="${cache.nonce}"` : ''
   return {
-    extractCritical: createExtractCritical(emotion),
-    renderStylesToString: createRenderStylesToString(emotion, nonceString),
-    renderStylesToNodeStream: createRenderStylesToStream(emotion, nonceString)
+    extractCritical: createExtractCritical(cache),
+    renderStylesToString: createRenderStylesToString(cache, nonceString),
+    renderStylesToNodeStream: createRenderStylesToStream(cache, nonceString)
   }
 }

src/inline.js

 // @flow
-import type { Emotion } from 'create-emotion'
+import type { EmotionCache } from '@emotion/utils'
 
@@ -15,6 +15,7 @@ function generateStyleTag(
 
-const createRenderStylesToString = (emotion: Emotion, nonceString: string) => (
-  html: string
-): string => {
-  const { inserted, key: cssKey, registered } = emotion.caches
+const createRenderStylesToString = (
+  cache: EmotionCache,
+  nonceString: string
+) => (html: string): string => {
+  const { inserted, key: cssKey, registered } = cache
   const regex = new RegExp(`<|${cssKey}-([a-zA-Z0-9-_]+)`, 'gm')
@@ -21,0 +22,0 @@

src/stream.js

 // @flow
-import type { Emotion } from 'create-emotion'
+import type { EmotionCache } from '@emotion/utils'
 import through from 'through'
@@ -8,3 +8,3 @@ import tokenize from 'html-tokenize'
 const createRenderStylesToNodeStream = (
-  emotion: Emotion,
+  cache: EmotionCache,
   nonceString: string
@@ -24,3 +24,3 @@ ) => () => {
         let fragment = data.toString()
-        let regex = new RegExp(`${emotion.caches.key}-([a-zA-Z0-9-_]+)`, 'gm')
+        let regex = new RegExp(`${cache.key}-([a-zA-Z0-9-_]+)`, 'gm')
         while ((match = regex.exec(fragment)) !== null) {
@@ -31,9 +31,8 @@ if (match !== null && insed[match[1]] === undefined) {
         }
-        Object.keys(emotion.caches.inserted).forEach(id => {
+        Object.keys(cache.inserted).forEach(id => {
           if (
-            emotion.caches.inserted[id] !== true &&
+            cache.inserted[id] !== true &&
             insed[id] === undefined &&
             (ids[id] === true ||
-              (emotion.caches.registered[`${emotion.caches.key}-${id}`] ===
-                undefined &&
+              (cache.registered[`${cache.key}-${id}`] === undefined &&
                 (ids[id] = true)))
@@ -43,3 +42,3 @@ ) {
             // $FlowFixMe flow thinks emotion.caches.inserted[id] can be true even though it's checked earlier
-            css += emotion.caches.inserted[id]
+            css += cache.inserted[id]
           }
@@ -50,3 +49,3 @@ })
           this.queue(
-            `<style data-emotion-${emotion.caches.key}="${Object.keys(ids).join(
+            `<style data-emotion-${cache.key}="${Object.keys(ids).join(
               ' '
@@ -53,0 +52,0 @@ )}"${nonceString}>${css}</style>`

types/index.d.ts

@@ -0,12 +1,19 @@
+// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
+// TypeScript Version: 2.8
+
 /// <reference types="node" />
-// TypeScript Version: 2.3
+import { EmotionCache } from 'emotion'
 
-import { Emotion } from 'create-emotion';
+export interface EmotionCritical {
+  html: string
+  ids: Array<string>
+  css: string
+}
 
 export interface EmotionServer {
-  extractCritical(html: string): { html: string; ids: string[]; css: string; };
-  renderStylesToString(html: string): string;
-  renderStylesToNodeStream(): NodeJS.ReadWriteStream;
+  extractCritical(html: string): EmotionCritical
+  renderStylesToString(html: string): string
+  renderStylesToNodeStream(): NodeJS.ReadWriteStream
 }
 
-export default function createEmotionServer(emotion: Emotion): EmotionServer;
+export default function createEmotionServer(cache: EmotionCache): EmotionServer

types/tslint.json

 {
     "extends": "dtslint/dtslint.json",
     "rules": {
-        "no-relative-import-in-test": false
+        "array-type": [true, "generic"],
+        "semicolon": false
     }
 }

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

23748

increased by70.59%

Number of package files

15

increased by25%

Lines of code

679

increased by93.45%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes