babel-plugin-emotion - npm Package Compare versions

Comparing version 10.0.14 to 10.0.15

CHANGELOG.md

 # babel-plugin-emotion
 
+## 10.0.15
+
+### Patch Changes
+
+- [4a3b18a2](https://github.com/emotion-js/emotion/commit/4a3b18a2) [#1451](https://github.com/emotion-js/emotion/pull/1451) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with auto-labelling crashing on \$ at runtime
+- [284f8fa](https://github.com/emotion-js/emotion/commit/284f8fa9e0d2926fa26346e63519f8db24e22cc7) [#1336](https://github.com/emotion-js/emotion/pull/1336) Thanks [@Zenwolf](https://github.com/Zenwolf)! - Keep CSS comments that include `@`
+
 ## 10.0.14
@@ -7,3 +14,3 @@
 
-- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pulls/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
+- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
 
@@ -14,2 +21,2 @@ ## 10.0.13
 
-- [7bad392c](https://github.com/emotion-js/emotion/commit/7bad392c) [#1387](https://github.com/emotion-js/emotion/pulls/1387) Thanks [@mherodev](https://github.com/mherodev)! - Added object property auto label support for babel-plugin-emotion
+- [7bad392c](https://github.com/emotion-js/emotion/commit/7bad392c) [#1387](https://github.com/emotion-js/emotion/pull/1387) Thanks [@mherodev](https://github.com/mherodev)! - Added object property auto label support for babel-plugin-emotion

dist/babel-plugin-emotion.cjs.dev.js

@@ -77,4 +77,24 @@ 'use strict';
 var linebreakRegex = /[\r\n]\s*/g;
+var spacesAndLinebreakRegex = /\s+|\n+/g;
+
+function multilineReplacer(match) {
+  // When we encounter a standard multi-line CSS comment and it contains a '@'
+  // character, we keep the comment but optimize it into a single line. Some
+  // Stylis plugins, such as the stylis-rtl via the cssjanus plugin, use this
+  // special comment syntax to control behavior (such as: /* @noflip */).
+  // We can do this with standard CSS comments because they will work with
+  // compression, as opposed to non-standard single-line comments that will
+  // break compressed CSS. If the comment doesn't contain '@', then we replace
+  // it with a line break, which effectively removes it from the output.
+  var keepComment = match.indexOf('@') > -1;
+
+  if (keepComment) {
+    return match.replace(spacesAndLinebreakRegex, ' ').trim();
+  }
+
+  return '\n';
+}
+
 var minify = function minify(code) {
-  var newCode = code.replace(multilineCommentRegex, '\n') // Remove multiline comments
+  var newCode = code.replace(multilineCommentRegex, multilineReplacer) // If allowed, remove line breaks and extra space from multi-line comments so they appear on one line
   .split(linebreakRegex) // Split at newlines
@@ -175,5 +195,11 @@ .filter(function (line) {
 
+var invalidClassNameCharacters = /[!"#$%&'()*+,./:;<=>?@[\]^`|}~{]/g;
+
+var sanitizeLabelPart = function sanitizeLabelPart(labelPart) {
+  return labelPart.trim().replace(invalidClassNameCharacters, '-');
+};
+
 function getLabel(identifierName, autoLabel, labelFormat, filename) {
   if (!identifierName || !autoLabel) return null;
-  if (!labelFormat) return identifierName.trim();
+  if (!labelFormat) return sanitizeLabelPart(identifierName);
   var parsedPath = nodePath.parse(filename);
@@ -187,4 +213,3 @@ var localDirname = nodePath.basename(parsedPath.dir);
 
-  localFilename = localFilename.replace('.', '-');
-  return labelFormat.replace(/\[local\]/gi, identifierName.trim()).replace(/\[filename\]/gi, localFilename).replace(/\[dirname\]/gi, localDirname);
+  return labelFormat.replace(/\[local\]/gi, sanitizeLabelPart(identifierName)).replace(/\[filename\]/gi, sanitizeLabelPart(localFilename)).replace(/\[dirname\]/gi, sanitizeLabelPart(localDirname));
 }
@@ -191,0 +216,0 @@

dist/babel-plugin-emotion.cjs.prod.js

@@ -28,4 +28,10 @@ "use strict";
   return line.trim().startsWith("//");
-}, linebreakRegex = /[\r\n]\s*/g, minify = function(code) {
-  var newCode = code.replace(multilineCommentRegex, "\n").split(linebreakRegex).filter(function(line) {
+}, linebreakRegex = /[\r\n]\s*/g, spacesAndLinebreakRegex = /\s+|\n+/g;
+
+function multilineReplacer(match) {
+  return match.indexOf("@") > -1 ? match.replace(spacesAndLinebreakRegex, " ").trim() : "\n";
+}
+
+var minify = function(code) {
+  var newCode = code.replace(multilineCommentRegex, multilineReplacer).split(linebreakRegex).filter(function(line) {
     return line.length > 0 && !isLineComment(line);
@@ -78,8 +84,11 @@ }).map(stripLineComment).join(" ");
 
+var invalidClassNameCharacters = /[!"#$%&'()*+,.\/:;<=>?@[\]^`|}~{]/g, sanitizeLabelPart = function(labelPart) {
+  return labelPart.trim().replace(invalidClassNameCharacters, "-");
+};
+
 function getLabel(identifierName, autoLabel, labelFormat, filename) {
   if (!identifierName || !autoLabel) return null;
-  if (!labelFormat) return identifierName.trim();
+  if (!labelFormat) return sanitizeLabelPart(identifierName);
   var parsedPath = nodePath.parse(filename), localDirname = nodePath.basename(parsedPath.dir), localFilename = parsedPath.name;
-  return "index" === localFilename && (localFilename = localDirname), localFilename = localFilename.replace(".", "-"), 
-  labelFormat.replace(/\[local\]/gi, identifierName.trim()).replace(/\[filename\]/gi, localFilename).replace(/\[dirname\]/gi, localDirname);
+  return "index" === localFilename && (localFilename = localDirname), labelFormat.replace(/\[local\]/gi, sanitizeLabelPart(identifierName)).replace(/\[filename\]/gi, sanitizeLabelPart(localFilename)).replace(/\[dirname\]/gi, sanitizeLabelPart(localDirname));
 }
@@ -86,0 +95,0 @@

package.json

 {
   "name": "babel-plugin-emotion",
-  "version": "10.0.14",
+  "version": "10.0.15",
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
   "main": "dist/babel-plugin-emotion.cjs.js",
+  "module": "dist/babel-plugin-emotion.esm.js",
   "files": [
@@ -15,3 +16,3 @@ "src",
     "@emotion/memoize": "0.7.2",
-    "@emotion/serialize": "^0.11.8",
+    "@emotion/serialize": "^0.11.9",
     "babel-plugin-macros": "^2.0.0",
@@ -18,0 +19,0 @@ "babel-plugin-syntax-jsx": "^6.18.0",

src/index.js

 // @flow
-import { createEmotionMacro } from './macro'
+import { createEmotionMacro } from './emotion-macro'
 import { createStyledMacro } from './styled-macro'
@@ -4,0 +4,0 @@ import cssMacro, { transformCssCallExpression } from './css-macro'

src/utils/label.js

 // @flow
 import nodePath from 'path'
 
+const invalidClassNameCharacters = /[!"#$%&'()*+,./:;<=>?@[\]^`|}~{]/g
+
+const sanitizeLabelPart = (labelPart: string) =>
+  labelPart.trim().replace(invalidClassNameCharacters, '-')
+
 function getLabel(
@@ -11,3 +16,3 @@ identifierName?: string,
   if (!identifierName || !autoLabel) return null
-  if (!labelFormat) return identifierName.trim()
+  if (!labelFormat) return sanitizeLabelPart(identifierName)
 
@@ -17,11 +22,11 @@ const parsedPath = nodePath.parse(filename)
   let localFilename = parsedPath.name
+
   if (localFilename === 'index') {
     localFilename = localDirname
   }
-  localFilename = localFilename.replace('.', '-')
 
   return labelFormat
-    .replace(/\[local\]/gi, identifierName.trim())
-    .replace(/\[filename\]/gi, localFilename)
-    .replace(/\[dirname\]/gi, localDirname)
+    .replace(/\[local\]/gi, sanitizeLabelPart(identifierName))
+    .replace(/\[filename\]/gi, sanitizeLabelPart(localFilename))
+    .replace(/\[dirname\]/gi, sanitizeLabelPart(localDirname))
 }
@@ -28,0 +33,0 @@

src/utils/minify-utils.js

@@ -66,6 +66,26 @@ // @flow
 const linebreakRegex = /[\r\n]\s*/g
+const spacesAndLinebreakRegex = /\s+|\n+/g
 
+function multilineReplacer(match: string) {
+  // When we encounter a standard multi-line CSS comment and it contains a '@'
+  // character, we keep the comment but optimize it into a single line. Some
+  // Stylis plugins, such as the stylis-rtl via the cssjanus plugin, use this
+  // special comment syntax to control behavior (such as: /* @noflip */).
+  // We can do this with standard CSS comments because they will work with
+  // compression, as opposed to non-standard single-line comments that will
+  // break compressed CSS. If the comment doesn't contain '@', then we replace
+  // it with a line break, which effectively removes it from the output.
+
+  const keepComment = match.indexOf('@') > -1
+
+  if (keepComment) {
+    return match.replace(spacesAndLinebreakRegex, ' ').trim()
+  }
+
+  return '\n'
+}
+
 export const minify = (code: string) => {
   const newCode = code
-    .replace(multilineCommentRegex, '\n') // Remove multiline comments
+    .replace(multilineCommentRegex, multilineReplacer) // If allowed, remove line breaks and extra space from multi-line comments so they appear on one line
     .split(linebreakRegex) // Split at newlines
@@ -72,0 +92,0 @@ .filter(line => line.length > 0 && !isLineComment(line)) // Removes lines containing only line comments

Fixed alerts

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

Improved metrics

Total package byte prevSize

134016

increased by36.03%

Number of package files

22

increased by4.76%

Lines of code

3163

increased by38.36%

Worsened metrics

Number of low supply chain risk alerts

9

increased by12.5%

Dependency changes

• Updated@emotion/serialize@^0.11.9