@emotion/serialize - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

dist/index.cjs.js

@@ -15,3 +15,3 @@ 'use strict';
 });
-var processStyleValue = function processStyleValue(key, value) {
+exports.processStyleValue = function processStyleValue(key, value) {
   if (value == null || typeof value === 'boolean') {
@@ -28,3 +28,20 @@ return '';
 };
-function handleInterpolation(interpolation) {
+
+if (process.env.NODE_ENV !== 'production') {
+  var contentValuePattern = /(attr|calc|counters?|url)\(/;
+  var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
+  var oldProcessStyleValue = exports.processStyleValue;
+
+  exports.processStyleValue = function processStyleValue(key, value) {
+    if (key === 'content') {
+      if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
+        console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
+      }
+    }
+
+    return oldProcessStyleValue(key, value);
+  };
+}
+
+function handleInterpolation(registered, interpolation) {
   if (interpolation == null) {
@@ -43,3 +60,3 @@ return '';
 
-      return handleInterpolation.call(this, // $FlowFixMe
+      return handleInterpolation.call(this, registered, // $FlowFixMe
       interpolation(this));
@@ -49,3 +66,3 @@
       if (interpolation.type === 2) {
-        return interpolation.toString();
+        return interpolation.name;
       }
@@ -57,21 +74,30 @@
 
-      return createStringFromObject.call(this, interpolation);
+      return createStringFromObject.call(this, registered, interpolation);
 
     default:
-      return interpolation;
+      var cached = registered[interpolation];
+      return cached !== undefined ? cached : interpolation;
   }
 }
 
-function createStringFromObject(obj) {
+function createStringFromObject(registered, obj) {
   var string = '';
 
   function _ref(interpolation) {
-    string += handleInterpolation.call(this, interpolation);
+    string += handleInterpolation.call(this, registered, interpolation);
   }
 
-  function _ref2(key) {
+  function _ref3(key) {
+    function _ref2(value) {
+      string += processStyleName(key) + ":" + exports.processStyleValue(key, value) + ";";
+    }
+
     if (typeof obj[key] !== 'object') {
-      string += processStyleName(key) + ":" + processStyleValue(key, obj[key]) + ";";
+      string += processStyleName(key) + ":" + exports.processStyleValue(key, obj[key]) + ";";
     } else {
-      string += key + "{" + handleInterpolation.call(this, obj[key]) + "}";
+      if (Array.isArray(obj[key]) && typeof obj[key][0] === 'string') {
+        obj[key].forEach(_ref2);
+      } else {
+        string += key + "{" + handleInterpolation.call(this, registered, obj[key]) + "}";
+      }
     }
@@ -83,3 +109,3 @@ }
   } else {
-    Object.keys(obj).forEach(_ref2, this);
+    Object.keys(obj).forEach(_ref3, this);
   }
@@ -91,4 +117,4 @@
 var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g;
-var serializeStyles = function serializeStyles(args) {
-  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].cls !== undefined) {
+var serializeStyles = function serializeStyles(registered, args) {
+  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
     return args[0];
@@ -100,3 +126,3 @@ }
   args.forEach(function (interpolation, i) {
-    styles += handleInterpolation.call(this, interpolation);
+    styles += handleInterpolation.call(this, registered, interpolation);
   }, this);
@@ -109,6 +135,5 @@ styles = styles.replace(labelPattern, function (match, p1) {
   return {
-    styles: styles,
+    type: 1,
     name: name,
-    type: 1,
-    cls: "css-" + name
+    styles: styles
   };
@@ -118,3 +143,2 @@ };
 exports.processStyleName = processStyleName;
-exports.processStyleValue = processStyleValue;
 exports.handleInterpolation = handleInterpolation;
@@ -121,0 +145,0 @@ exports.labelPattern = labelPattern;

dist/index.es.js

@@ -21,3 +21,20 @@ import hashString from '@emotion/hash';
 };
-function handleInterpolation(interpolation) {
+
+if (process.env.NODE_ENV !== 'production') {
+  var contentValuePattern = /(attr|calc|counters?|url)\(/;
+  var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
+  var oldProcessStyleValue = processStyleValue;
+
+  processStyleValue = function processStyleValue(key, value) {
+    if (key === 'content') {
+      if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
+        console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
+      }
+    }
+
+    return oldProcessStyleValue(key, value);
+  };
+}
+
+function handleInterpolation(registered, interpolation) {
   if (interpolation == null) {
@@ -36,3 +53,3 @@ return '';
 
-      return handleInterpolation.call(this, // $FlowFixMe
+      return handleInterpolation.call(this, registered, // $FlowFixMe
       interpolation(this));
@@ -42,3 +59,3 @@
       if (interpolation.type === 2) {
-        return interpolation.toString();
+        return interpolation.name;
       }
@@ -50,21 +67,30 @@
 
-      return createStringFromObject.call(this, interpolation);
+      return createStringFromObject.call(this, registered, interpolation);
 
     default:
-      return interpolation;
+      var cached = registered[interpolation];
+      return cached !== undefined ? cached : interpolation;
   }
 }
 
-function createStringFromObject(obj) {
+function createStringFromObject(registered, obj) {
   var string = '';
 
   function _ref(interpolation) {
-    string += handleInterpolation.call(this, interpolation);
+    string += handleInterpolation.call(this, registered, interpolation);
   }
 
-  function _ref2(key) {
+  function _ref3(key) {
+    function _ref2(value) {
+      string += processStyleName(key) + ":" + processStyleValue(key, value) + ";";
+    }
+
     if (typeof obj[key] !== 'object') {
       string += processStyleName(key) + ":" + processStyleValue(key, obj[key]) + ";";
     } else {
-      string += key + "{" + handleInterpolation.call(this, obj[key]) + "}";
+      if (Array.isArray(obj[key]) && typeof obj[key][0] === 'string') {
+        obj[key].forEach(_ref2);
+      } else {
+        string += key + "{" + handleInterpolation.call(this, registered, obj[key]) + "}";
+      }
     }
@@ -76,3 +102,3 @@ }
   } else {
-    Object.keys(obj).forEach(_ref2, this);
+    Object.keys(obj).forEach(_ref3, this);
   }
@@ -84,4 +110,4 @@
 var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g;
-var serializeStyles = function serializeStyles(args) {
-  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].cls !== undefined) {
+var serializeStyles = function serializeStyles(registered, args) {
+  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
     return args[0];
@@ -93,3 +119,3 @@ }
   args.forEach(function (interpolation, i) {
-    styles += handleInterpolation.call(this, interpolation);
+    styles += handleInterpolation.call(this, registered, interpolation);
   }, this);
@@ -102,6 +128,5 @@ styles = styles.replace(labelPattern, function (match, p1) {
   return {
-    styles: styles,
+    type: 1,
     name: name,
-    type: 1,
-    cls: "css-" + name
+    styles: styles
   };
@@ -108,0 +133,0 @@ };

package.json

 {
   "name": "@emotion/serialize",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "serialization utils for emotion",
@@ -13,5 +13,5 @@ "main": "dist/index.cjs.js",
   "dependencies": {
-    "@emotion/hash": "^0.6.2",
-    "@emotion/memoize": "^0.6.1",
-    "@emotion/unitless": "^0.6.2"
+    "@emotion/hash": "^0.6.3",
+    "@emotion/memoize": "^0.6.2",
+    "@emotion/unitless": "^0.6.3"
   },
@@ -21,3 +21,4 @@ "files": [
     "dist"
-  ]
+  ],
+  "umd:main": "./dist/index.min.js"
 }

src/index.js

 // @flow
-import type { Interpolation, ScopedInsertableStyles } from '@emotion/types'
+import type {
+  Interpolation,
+  ScopedInsertableStyles,
+  CSSCache
+} from '@emotion/types'
 import hashString from '@emotion/hash'
@@ -13,3 +17,3 @@ import unitless from '@emotion/unitless'
 
-export const processStyleValue = (key: string, value: string): string => {
+export let processStyleValue = (key: string, value: string): string => {
   if (value == null || typeof value === 'boolean') {
@@ -30,3 +34,37 @@ return ''
 
+if (process.env.NODE_ENV !== 'production') {
+  let contentValuePattern = /(attr|calc|counters?|url)\(/
+  let contentValues = [
+    'normal',
+    'none',
+    'counter',
+    'open-quote',
+    'close-quote',
+    'no-open-quote',
+    'no-close-quote',
+    'initial',
+    'inherit',
+    'unset'
+  ]
+  let oldProcessStyleValue = processStyleValue
+  processStyleValue = (key: string, value: string) => {
+    if (key === 'content') {
+      if (
+        typeof value !== 'string' ||
+        (contentValues.indexOf(value) === -1 &&
+          !contentValuePattern.test(value) &&
+          (value.charAt(0) !== value.charAt(value.length - 1) ||
+            (value.charAt(0) !== '"' && value.charAt(0) !== "'")))
+      ) {
+        console.error(
+          `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
+        )
+      }
+    }
+    return oldProcessStyleValue(key, value)
+  }
+}
+
 export function handleInterpolation(
+  registered: CSSCache,
   interpolation: Interpolation
@@ -47,2 +85,3 @@ ): string | number {
         this,
+        registered,
         // $FlowFixMe
@@ -53,3 +92,3 @@ interpolation(this)
       if (interpolation.type === 2) {
-        return interpolation.toString()
+        return interpolation.name
       }
@@ -60,9 +99,13 @@ if (interpolation.styles !== undefined) {
 
-      return createStringFromObject.call(this, interpolation)
+      return createStringFromObject.call(this, registered, interpolation)
     default:
-      return interpolation
+      const cached = registered[interpolation]
+      return cached !== undefined ? cached : interpolation
   }
 }
 
-function createStringFromObject(obj: { [key: string]: Interpolation }): string {
+function createStringFromObject(
+  registered: CSSCache,
+  obj: { [key: string]: Interpolation }
+): string {
   let string = ''
@@ -72,3 +115,3 @@
     obj.forEach(function(interpolation: Interpolation) {
-      string += handleInterpolation.call(this, interpolation)
+      string += handleInterpolation.call(this, registered, interpolation)
     }, this)
@@ -83,3 +126,16 @@ } else {
       } else {
-        string += `${key}{${handleInterpolation.call(this, obj[key])}}`
+        if (Array.isArray(obj[key]) && typeof obj[key][0] === 'string') {
+          obj[key].forEach(value => {
+            string += `${processStyleName(key)}:${processStyleValue(
+              key,
+              value
+            )};`
+          })
+        } else {
+          string += `${key}{${handleInterpolation.call(
+            this,
+            registered,
+            obj[key]
+          )}}`
+        }
       }
@@ -95,2 +151,3 @@ }, this)
 export const serializeStyles = function(
+  registered: CSSCache,
   args: Array<Interpolation>
@@ -102,3 +159,3 @@ ): ScopedInsertableStyles {
     args[0] !== null &&
-    args[0].cls !== undefined
+    args[0].styles !== undefined
   ) {
@@ -110,3 +167,3 @@ return args[0]
   args.forEach(function(interpolation, i) {
-    styles += handleInterpolation.call(this, interpolation)
+    styles += handleInterpolation.call(this, registered, interpolation)
   }, this)
@@ -118,8 +175,8 @@ styles = styles.replace(labelPattern, (match, p1: string) => {
   let name = hashString(styles) + identifierName
+
   return {
-    styles,
+    type: 1,
     name,
-    type: 1,
-    cls: `css-${name}`
+    styles
   }
 }

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

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

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

40752

increased by109.31%

Number of package files

10

increased by25%

Lines of code

385

increased by37.99%

Worsened metrics

Number of low supply chain risk alerts

4

increased by300%

Dependency changes

• Updated@emotion/hash@^0.6.3

• Updated@emotion/memoize@^0.6.2

• Updated@emotion/unitless@^0.6.3