@emotion/server - npm Package Compare versions

Comparing version 11.0.0 to 11.4.0

CHANGELOG.md

 # @emotion/server
 
+## 11.4.0
+
+### Minor Changes
+
+- [#2334](https://github.com/emotion-js/emotion/pull/2334) [`7d9e74f8`](https://github.com/emotion-js/emotion/commit/7d9e74f8f0d0e0ea60573a19965eded61dc41024) Thanks [@mnajdova](https://github.com/mnajdova)! - Added `extractCriticalToChunks` that allows the Global component to remove styles on unmount unlike `extractCritical` along with `constructStyleTagsFromChunks` to render the chunks to style tags.
+
 ## 11.0.0
@@ -4,0 +10,0 @@

create-instance/dist/emotion-server-create-instance.browser.cjs.js

@@ -46,4 +46,53 @@ 'use strict';
 
+var createExtractCriticalToChunks = function createExtractCriticalToChunks(cache) {
+  return function (html) {
+    // parse out ids from html
+    // reconstruct css/rules/cache to pass
+    var RGX = new RegExp(cache.key + "-([a-zA-Z0-9-_]+)", 'gm');
+    var o = {
+      html: html,
+      styles: []
+    };
+    var match;
+    var ids = {};
+
+    while ((match = RGX.exec(html)) !== null) {
+      // $FlowFixMe
+      if (ids[match[1]] === undefined) {
+        // $FlowFixMe
+        ids[match[1]] = true;
+      }
+    }
+
+    var regularCssIds = [];
+    var regularCss = '';
+    Object.keys(cache.inserted).forEach(function (id) {
+      if ((ids[id] !== undefined || cache.registered[cache.key + "-" + id] === undefined) && cache.inserted[id] !== true) {
+        if (cache.registered[cache.key + "-" + id]) {
+          // regular css can be added in one style tag
+          regularCssIds.push(id); // $FlowFixMe
+
+          regularCss += cache.inserted[id];
+        } else {
+          // each global styles require a new entry so it can be independently flushed
+          o.styles.push({
+            key: cache.key + "-global",
+            ids: [id],
+            css: cache.inserted[id]
+          });
+        }
+      }
+    }); // make sure that regular css is added after the global styles
+
+    o.styles.push({
+      key: cache.key,
+      ids: regularCssIds,
+      css: regularCss
+    });
+    return o;
+  };
+};
+
 function generateStyleTag(cssKey, ids, styles, nonceString) {
-  return "<style data-emotion=\"" + cssKey + " " + ids.substring(1) + "\"" + nonceString + ">" + styles + "</style>";
+  return "<style data-emotion=\"" + cssKey + " " + ids + "\"" + nonceString + ">" + styles + "</style>";
 }
@@ -76,3 +125,3 @@
     if (globalStyles !== '') {
-      result = generateStyleTag(cssKey, globalIds, globalStyles, nonceString);
+      result = generateStyleTag(cssKey, globalIds.substring(1), globalStyles, nonceString);
     }
@@ -89,3 +138,3 @@
         if (ids !== '') {
-          result += generateStyleTag(cssKey, ids, styles, nonceString);
+          result += generateStyleTag(cssKey, ids.substring(1), styles, nonceString);
           ids = '';
@@ -162,2 +211,12 @@ styles = '';
 
+var createConstructStyleTagsFromChunks = function createConstructStyleTagsFromChunks(cache, nonceString) {
+  return function (criticalData) {
+    var styleTagsString = '';
+    criticalData.styles.forEach(function (item) {
+      styleTagsString += generateStyleTag(item.key, item.ids.join(' '), item.css, nonceString);
+    });
+    return styleTagsString;
+  };
+};
+
 function createEmotionServer (cache) {
@@ -173,4 +232,6 @@ if (cache.compat !== true) {
     extractCritical: createExtractCritical(cache),
+    extractCriticalToChunks: createExtractCriticalToChunks(cache),
     renderStylesToString: createRenderStylesToString(cache, nonceString),
-    renderStylesToNodeStream: createRenderStylesToNodeStream(cache, nonceString)
+    renderStylesToNodeStream: createRenderStylesToNodeStream(cache, nonceString),
+    constructStyleTagsFromChunks: createConstructStyleTagsFromChunks(cache, nonceString)
   };
@@ -177,0 +238,0 @@ }

create-instance/dist/emotion-server-create-instance.cjs.dev.js

@@ -46,4 +46,53 @@ 'use strict';
 
+var createExtractCriticalToChunks = function createExtractCriticalToChunks(cache) {
+  return function (html) {
+    // parse out ids from html
+    // reconstruct css/rules/cache to pass
+    var RGX = new RegExp(cache.key + "-([a-zA-Z0-9-_]+)", 'gm');
+    var o = {
+      html: html,
+      styles: []
+    };
+    var match;
+    var ids = {};
+
+    while ((match = RGX.exec(html)) !== null) {
+      // $FlowFixMe
+      if (ids[match[1]] === undefined) {
+        // $FlowFixMe
+        ids[match[1]] = true;
+      }
+    }
+
+    var regularCssIds = [];
+    var regularCss = '';
+    Object.keys(cache.inserted).forEach(function (id) {
+      if ((ids[id] !== undefined || cache.registered[cache.key + "-" + id] === undefined) && cache.inserted[id] !== true) {
+        if (cache.registered[cache.key + "-" + id]) {
+          // regular css can be added in one style tag
+          regularCssIds.push(id); // $FlowFixMe
+
+          regularCss += cache.inserted[id];
+        } else {
+          // each global styles require a new entry so it can be independently flushed
+          o.styles.push({
+            key: cache.key + "-global",
+            ids: [id],
+            css: cache.inserted[id]
+          });
+        }
+      }
+    }); // make sure that regular css is added after the global styles
+
+    o.styles.push({
+      key: cache.key,
+      ids: regularCssIds,
+      css: regularCss
+    });
+    return o;
+  };
+};
+
 function generateStyleTag(cssKey, ids, styles, nonceString) {
-  return "<style data-emotion=\"" + cssKey + " " + ids.substring(1) + "\"" + nonceString + ">" + styles + "</style>";
+  return "<style data-emotion=\"" + cssKey + " " + ids + "\"" + nonceString + ">" + styles + "</style>";
 }
@@ -76,3 +125,3 @@
     if (globalStyles !== '') {
-      result = generateStyleTag(cssKey, globalIds, globalStyles, nonceString);
+      result = generateStyleTag(cssKey, globalIds.substring(1), globalStyles, nonceString);
     }
@@ -89,3 +138,3 @@
         if (ids !== '') {
-          result += generateStyleTag(cssKey, ids, styles, nonceString);
+          result += generateStyleTag(cssKey, ids.substring(1), styles, nonceString);
           ids = '';
@@ -162,2 +211,12 @@ styles = '';
 
+var createConstructStyleTagsFromChunks = function createConstructStyleTagsFromChunks(cache, nonceString) {
+  return function (criticalData) {
+    var styleTagsString = '';
+    criticalData.styles.forEach(function (item) {
+      styleTagsString += generateStyleTag(item.key, item.ids.join(' '), item.css, nonceString);
+    });
+    return styleTagsString;
+  };
+};
+
 function createEmotionServer (cache) {
@@ -173,4 +232,6 @@ if (cache.compat !== true) {
     extractCritical: createExtractCritical(cache),
+    extractCriticalToChunks: createExtractCriticalToChunks(cache),
     renderStylesToString: createRenderStylesToString(cache, nonceString),
-    renderStylesToNodeStream: createRenderStylesToNodeStream(cache, nonceString)
+    renderStylesToNodeStream: createRenderStylesToNodeStream(cache, nonceString),
+    constructStyleTagsFromChunks: createConstructStyleTagsFromChunks(cache, nonceString)
   };
@@ -177,0 +238,0 @@ }

create-instance/dist/emotion-server-create-instance.cjs.prod.js

@@ -27,6 +27,26 @@ "use strict";
   };
+}, createExtractCriticalToChunks = function(cache) {
+  return function(html) {
+    for (var match, RGX = new RegExp(cache.key + "-([a-zA-Z0-9-_]+)", "gm"), o = {
+      html: html,
+      styles: []
+    }, ids = {}; null !== (match = RGX.exec(html)); ) void 0 === ids[match[1]] && (ids[match[1]] = !0);
+    var regularCssIds = [], regularCss = "";
+    return Object.keys(cache.inserted).forEach((function(id) {
+      void 0 === ids[id] && void 0 !== cache.registered[cache.key + "-" + id] || !0 === cache.inserted[id] || (cache.registered[cache.key + "-" + id] ? (regularCssIds.push(id), 
+      regularCss += cache.inserted[id]) : o.styles.push({
+        key: cache.key + "-global",
+        ids: [ id ],
+        css: cache.inserted[id]
+      }));
+    })), o.styles.push({
+      key: cache.key,
+      ids: regularCssIds,
+      css: regularCss
+    }), o;
+  };
 };
 
 function generateStyleTag(cssKey, ids, styles, nonceString) {
-  return '<style data-emotion="' + cssKey + " " + ids.substring(1) + '"' + nonceString + ">" + styles + "</style>";
+  return '<style data-emotion="' + cssKey + " " + ids + '"' + nonceString + ">" + styles + "</style>";
 }
@@ -42,3 +62,3 @@
     }
-    "" !== globalStyles && (result = generateStyleTag(cssKey, globalIds, globalStyles, nonceString));
+    "" !== globalStyles && (result = generateStyleTag(cssKey, globalIds.substring(1), globalStyles, nonceString));
     for (var match, ids = "", styles = "", lastInsertionPoint = 0; null !== (match = regex.exec(html)); ) if ("<" !== match[0]) {
@@ -48,3 +68,3 @@ var _id = match[1], _style = inserted[_id];
       ids += " " + _id);
-    } else "" !== ids && (result += generateStyleTag(cssKey, ids, styles, nonceString), 
+    } else "" !== ids && (result += generateStyleTag(cssKey, ids.substring(1), styles, nonceString), 
     ids = "", styles = ""), result += html.substring(lastInsertionPoint, match.index), 
@@ -71,2 +91,9 @@ lastInsertionPoint = match.index;
   };
+}, createConstructStyleTagsFromChunks = function(cache, nonceString) {
+  return function(criticalData) {
+    var styleTagsString = "";
+    return criticalData.styles.forEach((function(item) {
+      styleTagsString += generateStyleTag(item.key, item.ids.join(" "), item.css, nonceString);
+    })), styleTagsString;
+  };
 };
@@ -79,4 +106,6 @@
     extractCritical: createExtractCritical(cache),
+    extractCriticalToChunks: createExtractCriticalToChunks(cache),
     renderStylesToString: createRenderStylesToString(cache, nonceString),
-    renderStylesToNodeStream: createRenderStylesToNodeStream(cache, nonceString)
+    renderStylesToNodeStream: createRenderStylesToNodeStream(cache, nonceString),
+    constructStyleTagsFromChunks: createConstructStyleTagsFromChunks(cache, nonceString)
   };
@@ -83,0 +112,0 @@ }

dist/emotion-server.browser.cjs.js

@@ -13,7 +13,11 @@ 'use strict';
     extractCritical = _createEmotionServer.extractCritical,
+    extractCriticalToChunks = _createEmotionServer.extractCriticalToChunks,
     renderStylesToString = _createEmotionServer.renderStylesToString,
-    renderStylesToNodeStream = _createEmotionServer.renderStylesToNodeStream;
+    renderStylesToNodeStream = _createEmotionServer.renderStylesToNodeStream,
+    constructStyleTagsFromChunks = _createEmotionServer.constructStyleTagsFromChunks;
 
+exports.constructStyleTagsFromChunks = constructStyleTagsFromChunks;
 exports.extractCritical = extractCritical;
+exports.extractCriticalToChunks = extractCriticalToChunks;
 exports.renderStylesToNodeStream = renderStylesToNodeStream;
 exports.renderStylesToString = renderStylesToString;

dist/emotion-server.cjs.dev.js

@@ -13,7 +13,11 @@ 'use strict';
     extractCritical = _createEmotionServer.extractCritical,
+    extractCriticalToChunks = _createEmotionServer.extractCriticalToChunks,
     renderStylesToString = _createEmotionServer.renderStylesToString,
-    renderStylesToNodeStream = _createEmotionServer.renderStylesToNodeStream;
+    renderStylesToNodeStream = _createEmotionServer.renderStylesToNodeStream,
+    constructStyleTagsFromChunks = _createEmotionServer.constructStyleTagsFromChunks;
 
+exports.constructStyleTagsFromChunks = constructStyleTagsFromChunks;
 exports.extractCritical = extractCritical;
+exports.extractCriticalToChunks = extractCriticalToChunks;
 exports.renderStylesToNodeStream = renderStylesToNodeStream;
 exports.renderStylesToString = renderStylesToString;

dist/emotion-server.cjs.prod.js

@@ -11,5 +11,6 @@ "use strict";
 
-var css = require("@emotion/css"), _createEmotionServer = createInstance_dist_emotionServerCreateInstance.default(css.cache), extractCritical = _createEmotionServer.extractCritical, renderStylesToString = _createEmotionServer.renderStylesToString, renderStylesToNodeStream = _createEmotionServer.renderStylesToNodeStream;
+var css = require("@emotion/css"), _createEmotionServer = createInstance_dist_emotionServerCreateInstance.default(css.cache), extractCritical = _createEmotionServer.extractCritical, extractCriticalToChunks = _createEmotionServer.extractCriticalToChunks, renderStylesToString = _createEmotionServer.renderStylesToString, renderStylesToNodeStream = _createEmotionServer.renderStylesToNodeStream, constructStyleTagsFromChunks = _createEmotionServer.constructStyleTagsFromChunks;
 
-exports.extractCritical = extractCritical, exports.renderStylesToNodeStream = renderStylesToNodeStream, 
+exports.constructStyleTagsFromChunks = constructStyleTagsFromChunks, exports.extractCritical = extractCritical, 
+exports.extractCriticalToChunks = extractCriticalToChunks, exports.renderStylesToNodeStream = renderStylesToNodeStream, 
 exports.renderStylesToString = renderStylesToString;

package.json

 {
   "name": "@emotion/server",
-  "version": "11.0.0",
+  "version": "11.4.0",
   "description": "Extract and inline critical css with emotion for server side rendering.",
@@ -31,4 +31,4 @@ "main": "dist/emotion-server.cjs.js",
   "devDependencies": {
-    "@emotion/babel-plugin": "11.0.0",
-    "@emotion/css": "11.0.0",
+    "@emotion/babel-plugin": "11.3.0",
+    "@emotion/css": "11.1.3",
     "@emotion/css-prettifier": "1.0.0",
@@ -41,3 +41,3 @@ "@types/node": "^10.11.4",
   "license": "MIT",
-  "repository": "https://github.com/emotion-js/emotion/tree/master/packages/emotion-server",
+  "repository": "https://github.com/emotion-js/emotion/tree/main/packages/server",
   "keywords": [
@@ -44,0 +44,0 @@ "styles",

src/create-instance/index.js

 // @flow
 import type { EmotionCache } from '@emotion/utils'
 import createExtractCritical from './extract-critical'
+import createExtractCriticalToChunks from './extract-critical-to-chunks'
 import createRenderStylesToString from './inline'
 import createRenderStylesToStream from './stream'
-
+import createConstructStyleTagsFromChunks from './construct-style-tags-from-chunks'
 export default function(cache: EmotionCache) {
@@ -16,5 +17,10 @@ if (cache.compat !== true) {
     extractCritical: createExtractCritical(cache),
+    extractCriticalToChunks: createExtractCriticalToChunks(cache),
     renderStylesToString: createRenderStylesToString(cache, nonceString),
-    renderStylesToNodeStream: createRenderStylesToStream(cache, nonceString)
+    renderStylesToNodeStream: createRenderStylesToStream(cache, nonceString),
+    constructStyleTagsFromChunks: createConstructStyleTagsFromChunks(
+      cache,
+      nonceString
+    )
   }
 }

src/create-instance/inline.js

 // @flow
 import type { EmotionCache } from '@emotion/utils'
+import { generateStyleTag } from './utils'
 
-function generateStyleTag(
-  cssKey: string,
-  ids: string,
-  styles: string,
-  nonceString: string
-) {
-  return `<style data-emotion="${cssKey} ${ids.substring(
-    1
-  )}"${nonceString}>${styles}</style>`
-}
-
 const createRenderStylesToString = (
@@ -41,3 +31,8 @@ cache: EmotionCache,
   if (globalStyles !== '') {
-    result = generateStyleTag(cssKey, globalIds, globalStyles, nonceString)
+    result = generateStyleTag(
+      cssKey,
+      globalIds.substring(1),
+      globalStyles,
+      nonceString
+    )
   }
@@ -54,3 +49,8 @@
       if (ids !== '') {
-        result += generateStyleTag(cssKey, ids, styles, nonceString)
+        result += generateStyleTag(
+          cssKey,
+          ids.substring(1),
+          styles,
+          nonceString
+        )
         ids = ''
@@ -57,0 +57,0 @@ styles = ''

src/index.js

@@ -7,4 +7,6 @@ // @flow
   extractCritical,
+  extractCriticalToChunks,
   renderStylesToString,
-  renderStylesToNodeStream
+  renderStylesToNodeStream,
+  constructStyleTagsFromChunks
 } = createEmotionServer(cache)

types/create-instance.d.ts

@@ -13,8 +13,15 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 
+export interface EmotionCriticalToChunks {
+  html: string
+  styles: Array<{ key: string; ids: Array<string>; css: string }>
+}
+
 export interface EmotionServer {
   extractCritical(html: string): EmotionCritical
+  extractCriticalToChunks(html: string): EmotionCriticalToChunks
   renderStylesToString(html: string): string
   renderStylesToNodeStream(): NodeJS.ReadWriteStream
+  constructStyleTagsFromChunks(criticalData: EmotionCriticalToChunks): string
 }
 
 export default function createEmotionServer(cache: EmotionCache): EmotionServer

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

43237

increased by27.35%

Number of package files

25

increased by13.64%

Lines of code

849

increased by39.64%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes