@emotion/snapshot-serializer - npm Package Compare versions

Comparing version 0.6.4 to 0.7.0

dist/index.cjs.js

@@ -31,5 +31,7 @@ 'use strict';
   });
-}
+} // i know this looks hacky but it works pretty well
+// and most importantly it doesn't mutate the object that gets passed in
 
-var clsPattern = /css-([a-zA-Z0-9-]+)/gi;
+
+var re = /<style\n(\s+)dangerouslySetInnerHTML={\s+Object {\s+"__html": "(.*?)",\n\s+}\s+}\s+data-emotion-([\w-]+)="[^"]+"\s+\/>/g;
 var serializer = {
@@ -54,44 +56,24 @@ test: function test(val) {
     var classMap = {};
-    nodes.forEach(function (node) {
-      if (node.type !== 'style') return;
-      var dataKey;
-      Object.keys(node.props).forEach(function (key) {
-        if (key.indexOf('data-emotion-') === 0) {
-          dataKey = key;
+    var printed = printer(val).replace(re, function (match, whiteSpace, cssString, key) {
+      return "<style>\n" + whiteSpace + css.stringify(css.parse( // for some reason the quotes seem to be escaped and that breaks the formatting
+      cssString.replace(/\\"/g, '"').replace(/\\'/g, "'"))).replace(new RegExp(key + "-([a-zA-Z0-9-]+)", 'g'), function (match) {
+        if (classMap[match] !== undefined) {
+          return classMap[match];
         }
-      });
 
-      if (typeof node.props[dataKey] === 'string') {
-        try {
-          var replaced = node.props.dangerouslySetInnerHTML.__html.replace(clsPattern, function (match, p1) {
-            if (classMap[p1] === undefined) {
-              classMap[p1] = "emotion-" + i++;
-            }
-
-            return classMap[p1];
-          }); // split the string by line to get correct indentation
-
-
-          node.children = css.stringify(css.parse(replaced)).split('\n');
-        } catch (e) {
-          throw new Error("Error parsing css: " + node.props.dangerouslySetInnerHTML.__html);
-        }
-
-        delete node.props[dataKey];
-        delete node.props.dangerouslySetInnerHTML;
-      }
+        return classMap[match] = "emotion-" + i++;
+      }).split('\n').join('\n' + whiteSpace) + "\n" + whiteSpace.substring(2) + "</style>";
     });
-    nodes.forEach(function (node) {
-      if (typeof node.props.className === 'string') {
-        node.props.className = node.props.className.replace(clsPattern, function (match, p1) {
-          if (classMap[p1] !== undefined) {
-            return classMap[p1];
-          }
+    Object.keys(classMap).forEach(function (key) {
+      printed = printed.replace(new RegExp(key, 'g'), classMap[key]);
+    });
+    return printed;
+  } // clsPattern,
+  // (match, p1) => {
+  //   if (classMap[p1] !== undefined) {
+  //     return classMap[p1]
+  //   }
+  //   return match
+  // }
 
-          return match;
-        });
-      }
-    });
-    return printer(val);
-  }
 };
@@ -98,0 +80,0 @@

dist/index.es.js

@@ -29,5 +29,7 @@ import { parse, stringify } from 'css';
   });
-}
+} // i know this looks hacky but it works pretty well
+// and most importantly it doesn't mutate the object that gets passed in
 
-var clsPattern = /css-([a-zA-Z0-9-]+)/gi;
+
+var re = /<style\n(\s+)dangerouslySetInnerHTML={\s+Object {\s+"__html": "(.*?)",\n\s+}\s+}\s+data-emotion-([\w-]+)="[^"]+"\s+\/>/g;
 var serializer = {
@@ -52,44 +54,24 @@ test: function test(val) {
     var classMap = {};
-    nodes.forEach(function (node) {
-      if (node.type !== 'style') return;
-      var dataKey;
-      Object.keys(node.props).forEach(function (key) {
-        if (key.indexOf('data-emotion-') === 0) {
-          dataKey = key;
+    var printed = printer(val).replace(re, function (match, whiteSpace, cssString, key) {
+      return "<style>\n" + whiteSpace + stringify(parse( // for some reason the quotes seem to be escaped and that breaks the formatting
+      cssString.replace(/\\"/g, '"').replace(/\\'/g, "'"))).replace(new RegExp(key + "-([a-zA-Z0-9-]+)", 'g'), function (match) {
+        if (classMap[match] !== undefined) {
+          return classMap[match];
         }
-      });
 
-      if (typeof node.props[dataKey] === 'string') {
-        try {
-          var replaced = node.props.dangerouslySetInnerHTML.__html.replace(clsPattern, function (match, p1) {
-            if (classMap[p1] === undefined) {
-              classMap[p1] = "emotion-" + i++;
-            }
-
-            return classMap[p1];
-          }); // split the string by line to get correct indentation
-
-
-          node.children = stringify(parse(replaced)).split('\n');
-        } catch (e) {
-          throw new Error("Error parsing css: " + node.props.dangerouslySetInnerHTML.__html);
-        }
-
-        delete node.props[dataKey];
-        delete node.props.dangerouslySetInnerHTML;
-      }
+        return classMap[match] = "emotion-" + i++;
+      }).split('\n').join('\n' + whiteSpace) + "\n" + whiteSpace.substring(2) + "</style>";
     });
-    nodes.forEach(function (node) {
-      if (typeof node.props.className === 'string') {
-        node.props.className = node.props.className.replace(clsPattern, function (match, p1) {
-          if (classMap[p1] !== undefined) {
-            return classMap[p1];
-          }
+    Object.keys(classMap).forEach(function (key) {
+      printed = printed.replace(new RegExp(key, 'g'), classMap[key]);
+    });
+    return printed;
+  } // clsPattern,
+  // (match, p1) => {
+  //   if (classMap[p1] !== undefined) {
+  //     return classMap[p1]
+  //   }
+  //   return match
+  // }
 
-          return match;
-        });
-      }
-    });
-    return printer(val);
-  }
 };
@@ -96,0 +78,0 @@

package.json

 {
   "name": "@emotion/snapshot-serializer",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "A snapshot serializer for jest and emotion",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

src/index.js

@@ -23,3 +23,5 @@ // @flow
 
-const clsPattern = /css-([a-zA-Z0-9-]+)/gi
+// i know this looks hacky but it works pretty well
+// and most importantly it doesn't mutate the object that gets passed in
+let re = /<style\n(\s+)dangerouslySetInnerHTML={\s+Object {\s+"__html": "(.*?)",\n\s+}\s+}\s+data-emotion-([\w-]+)="[^"]+"\s+\/>/g
 
@@ -43,3 +45,3 @@ const serializer = {
   },
-  print: (val: any, printer: Function) => {
+  print: (val: any, printer: any => string) => {
     const nodes = getNodes(val)
@@ -50,51 +52,36 @@
     const classMap = {}
-
-    nodes.forEach(node => {
-      if (node.type !== 'style') return
-      let dataKey
-      Object.keys(node.props).forEach(key => {
-        if (key.indexOf('data-emotion-') === 0) {
-          dataKey = key
-        }
-      })
-      if (typeof node.props[dataKey] === 'string') {
-        try {
-          const replaced = node.props.dangerouslySetInnerHTML.__html.replace(
-            clsPattern,
-            (match, p1) => {
-              if (classMap[p1] === undefined) {
-                classMap[p1] = `emotion-${i++}`
-              }
-              return classMap[p1]
-            }
+    let printed = printer(val).replace(
+      re,
+      (match, whiteSpace, cssString, key) => {
+        return `<style>\n${whiteSpace}${stringify(
+          parse(
+            // for some reason the quotes seem to be escaped and that breaks the formatting
+            cssString.replace(/\\"/g, '"').replace(/\\'/g, "'")
           )
-          // split the string by line to get correct indentation
-          node.children = stringify(parse(replaced)).split('\n')
-        } catch (e) {
-          throw new Error(
-            `Error parsing css: ${node.props.dangerouslySetInnerHTML.__html}`
-          )
-        }
-
-        delete node.props[dataKey]
-        delete node.props.dangerouslySetInnerHTML
-      }
-    })
-    nodes.forEach(node => {
-      if (typeof node.props.className === 'string') {
-        node.props.className = node.props.className.replace(
-          clsPattern,
-          (match, p1) => {
-            if (classMap[p1] !== undefined) {
-              return classMap[p1]
+        )
+          .replace(new RegExp(`${key}-([a-zA-Z0-9-]+)`, 'g'), match => {
+            if (classMap[match] !== undefined) {
+              return classMap[match]
             }
-            return match
-          }
-        )
+            return (classMap[match] = `emotion-${i++}`)
+          })
+          .split('\n')
+          .join('\n' + whiteSpace)}\n${whiteSpace.substring(2)}</style>`
       }
+    )
+    Object.keys(classMap).forEach(key => {
+      printed = printed.replace(new RegExp(key, 'g'), classMap[key])
     })
-    return printer(val)
+    return printed
   }
 }
 
+// clsPattern,
+// (match, p1) => {
+//   if (classMap[p1] !== undefined) {
+//     return classMap[p1]
+//   }
+//   return match
+// }
+
 export default serializer

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

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

16992

decreased by-8.8%

Lines of code

209

decreased by-16.73%

No dependency changes