@emotion/cache - npm Package Compare versions

Comparing version 11.10.1 to 11.10.2

dist/emotion-cache.browser.esm.js

@@ -6,7 +6,2 @@ import { StyleSheet } from '@emotion/sheet';
 
-var last = function last(arr) {
-  return arr.length ? arr[arr.length - 1] : null;
-}; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
-
-
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
@@ -139,3 +134,3 @@ var previous = 0;
 var isIgnoringComment = function isIgnoringComment(element) {
-  return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
+  return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
 };
@@ -145,10 +140,57 @@
   return function (element, index, children) {
-    if (element.type !== 'rule') return;
+    if (element.type !== 'rule' || cache.compat) return;
     var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
 
-    if (unsafePseudoClasses && cache.compat !== true) {
-      var prevElement = index > 0 ? children[index - 1] : null;
+    if (unsafePseudoClasses) {
+      var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule
+      //
+      // considering this input:
+      // .a {
+      //   .b /* comm */ {}
+      //   color: hotpink;
+      // }
+      // we get output corresponding to this:
+      // .a {
+      //   & {
+      //     /* comm */
+      //     color: hotpink;
+      //   }
+      //   .b {}
+      // }
 
-      if (prevElement && isIgnoringComment(last(prevElement.children))) {
-        return;
+      var commentContainer = isNested ? children[0].children : // global rule at the root level
+      children;
+
+      for (var i = 0; i < commentContainer.length; i++) {
+        var node = commentContainer[i];
+
+        if (node.line > element.line) {
+          break;
+        } // it is quite weird but comments are *usually* put at `column: element.column - 1`
+        // so we seek for the node that is later than the rule's `element` and check the previous element
+        // this will also match inputs like this:
+        // .a {
+        //   /* comm */
+        //   .b {}
+        // }
+        //
+        // but that is fine
+        //
+        // it would be the easiest to change the placement of the comment to be the first child of the rule:
+        // .a {
+        //   .b { /* comm */ }
+        // }
+        // with such inputs we wouldn't have to search for the comment at all
+        // TODO: consider changing this comment placement in the next major version
+
+
+        if (node.column > element.column) {
+          var previousNode = commentContainer[i - 1];
+
+          if (isIgnoringComment(previousNode)) {
+            return;
+          }
+
+          break;
+        }
       }
@@ -155,0 +197,0 @@

dist/emotion-cache.cjs.dev.js

@@ -15,7 +15,2 @@ 'use strict';
 
-var last = function last(arr) {
-  return arr.length ? arr[arr.length - 1] : null;
-}; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
-
-
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
@@ -148,3 +143,3 @@ var previous = 0;
 var isIgnoringComment = function isIgnoringComment(element) {
-  return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
+  return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
 };
@@ -154,10 +149,57 @@
   return function (element, index, children) {
-    if (element.type !== 'rule') return;
+    if (element.type !== 'rule' || cache.compat) return;
     var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
 
-    if (unsafePseudoClasses && cache.compat !== true) {
-      var prevElement = index > 0 ? children[index - 1] : null;
+    if (unsafePseudoClasses) {
+      var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule
+      //
+      // considering this input:
+      // .a {
+      //   .b /* comm */ {}
+      //   color: hotpink;
+      // }
+      // we get output corresponding to this:
+      // .a {
+      //   & {
+      //     /* comm */
+      //     color: hotpink;
+      //   }
+      //   .b {}
+      // }
 
-      if (prevElement && isIgnoringComment(last(prevElement.children))) {
-        return;
+      var commentContainer = isNested ? children[0].children : // global rule at the root level
+      children;
+
+      for (var i = 0; i < commentContainer.length; i++) {
+        var node = commentContainer[i];
+
+        if (node.line > element.line) {
+          break;
+        } // it is quite weird but comments are *usually* put at `column: element.column - 1`
+        // so we seek for the node that is later than the rule's `element` and check the previous element
+        // this will also match inputs like this:
+        // .a {
+        //   /* comm */
+        //   .b {}
+        // }
+        //
+        // but that is fine
+        //
+        // it would be the easiest to change the placement of the comment to be the first child of the rule:
+        // .a {
+        //   .b { /* comm */ }
+        // }
+        // with such inputs we wouldn't have to search for the comment at all
+        // TODO: consider changing this comment placement in the next major version
+
+
+        if (node.column > element.column) {
+          var previousNode = commentContainer[i - 1];
+
+          if (isIgnoringComment(previousNode)) {
+            return;
+          }
+
+          break;
+        }
       }
@@ -164,0 +206,0 @@

dist/emotion-cache.esm.js

@@ -6,7 +6,2 @@ import { StyleSheet } from '@emotion/sheet';
 
-var last = function last(arr) {
-  return arr.length ? arr[arr.length - 1] : null;
-}; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
-
-
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
@@ -139,3 +134,3 @@ var previous = 0;
 var isIgnoringComment = function isIgnoringComment(element) {
-  return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
+  return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
 };
@@ -145,10 +140,57 @@
   return function (element, index, children) {
-    if (element.type !== 'rule') return;
+    if (element.type !== 'rule' || cache.compat) return;
     var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
 
-    if (unsafePseudoClasses && cache.compat !== true) {
-      var prevElement = index > 0 ? children[index - 1] : null;
+    if (unsafePseudoClasses) {
+      var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule
+      //
+      // considering this input:
+      // .a {
+      //   .b /* comm */ {}
+      //   color: hotpink;
+      // }
+      // we get output corresponding to this:
+      // .a {
+      //   & {
+      //     /* comm */
+      //     color: hotpink;
+      //   }
+      //   .b {}
+      // }
 
-      if (prevElement && isIgnoringComment(last(prevElement.children))) {
-        return;
+      var commentContainer = isNested ? children[0].children : // global rule at the root level
+      children;
+
+      for (var i = 0; i < commentContainer.length; i++) {
+        var node = commentContainer[i];
+
+        if (node.line > element.line) {
+          break;
+        } // it is quite weird but comments are *usually* put at `column: element.column - 1`
+        // so we seek for the node that is later than the rule's `element` and check the previous element
+        // this will also match inputs like this:
+        // .a {
+        //   /* comm */
+        //   .b {}
+        // }
+        //
+        // but that is fine
+        //
+        // it would be the easiest to change the placement of the comment to be the first child of the rule:
+        // .a {
+        //   .b { /* comm */ }
+        // }
+        // with such inputs we wouldn't have to search for the comment at all
+        // TODO: consider changing this comment placement in the next major version
+
+
+        if (node.column > element.column) {
+          var previousNode = commentContainer[i - 1];
+
+          if (isIgnoringComment(previousNode)) {
+            return;
+          }
+
+          break;
+        }
       }
@@ -155,0 +197,0 @@

dist/emotion-cache.worker.esm.js

@@ -6,7 +6,2 @@ import { StyleSheet } from '@emotion/sheet';
 
-var last = function last(arr) {
-  return arr.length ? arr[arr.length - 1] : null;
-}; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
-
-
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
@@ -139,3 +134,3 @@ var previous = 0;
 var isIgnoringComment = function isIgnoringComment(element) {
-  return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
+  return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
 };
@@ -145,10 +140,57 @@
   return function (element, index, children) {
-    if (element.type !== 'rule') return;
+    if (element.type !== 'rule' || cache.compat) return;
     var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
 
-    if (unsafePseudoClasses && cache.compat !== true) {
-      var prevElement = index > 0 ? children[index - 1] : null;
+    if (unsafePseudoClasses) {
+      var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule
+      //
+      // considering this input:
+      // .a {
+      //   .b /* comm */ {}
+      //   color: hotpink;
+      // }
+      // we get output corresponding to this:
+      // .a {
+      //   & {
+      //     /* comm */
+      //     color: hotpink;
+      //   }
+      //   .b {}
+      // }
 
-      if (prevElement && isIgnoringComment(last(prevElement.children))) {
-        return;
+      var commentContainer = isNested ? children[0].children : // global rule at the root level
+      children;
+
+      for (var i = 0; i < commentContainer.length; i++) {
+        var node = commentContainer[i];
+
+        if (node.line > element.line) {
+          break;
+        } // it is quite weird but comments are *usually* put at `column: element.column - 1`
+        // so we seek for the node that is later than the rule's `element` and check the previous element
+        // this will also match inputs like this:
+        // .a {
+        //   /* comm */
+        //   .b {}
+        // }
+        //
+        // but that is fine
+        //
+        // it would be the easiest to change the placement of the comment to be the first child of the rule:
+        // .a {
+        //   .b { /* comm */ }
+        // }
+        // with such inputs we wouldn't have to search for the comment at all
+        // TODO: consider changing this comment placement in the next major version
+
+
+        if (node.column > element.column) {
+          var previousNode = commentContainer[i - 1];
+
+          if (isIgnoringComment(previousNode)) {
+            return;
+          }
+
+          break;
+        }
       }
@@ -155,0 +197,0 @@

package.json

 {
   "name": "@emotion/cache",
-  "version": "11.10.1",
+  "version": "11.10.2",
   "description": "emotion's cache",
@@ -39,5 +39,2 @@ "main": "dist/emotion-cache.cjs.js",
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "files": [
@@ -44,0 +41,0 @@ "src",

src/stylis-plugins.js

@@ -158,8 +158,6 @@ import {
 const isIgnoringComment = element =>
-  !!element &&
-  element.type === 'comm' &&
-  element.children.indexOf(ignoreFlag) > -1
+  element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1
 
 export let createUnsafeSelectorsAlarm = cache => (element, index, children) => {
-  if (element.type !== 'rule') return
+  if (element.type !== 'rule' || cache.compat) return
 
@@ -170,7 +168,57 @@ const unsafePseudoClasses = element.value.match(
 
-  if (unsafePseudoClasses && cache.compat !== true) {
-    const prevElement = index > 0 ? children[index - 1] : null
-    if (prevElement && isIgnoringComment(last(prevElement.children))) {
-      return
+  if (unsafePseudoClasses) {
+    const isNested = element.parent === children[0]
+    // in nested rules comments become children of the "auto-inserted" rule
+    //
+    // considering this input:
+    // .a {
+    //   .b /* comm */ {}
+    //   color: hotpink;
+    // }
+    // we get output corresponding to this:
+    // .a {
+    //   & {
+    //     /* comm */
+    //     color: hotpink;
+    //   }
+    //   .b {}
+    // }
+    const commentContainer = isNested
+      ? children[0].children
+      : // global rule at the root level
+        children
+
+    for (let i = 0; i < commentContainer.length; i++) {
+      const node = commentContainer[i]
+
+      if (node.line > element.line) {
+        break
+      }
+
+      // it is quite weird but comments are *usually* put at `column: element.column - 1`
+      // so we seek for the node that is later than the rule's `element` and check the previous element
+      // this will also match inputs like this:
+      // .a {
+      //   /* comm */
+      //   .b {}
+      // }
+      //
+      // but that is fine
+      //
+      // it would be the easiest to change the placement of the comment to be the first child of the rule:
+      // .a {
+      //   .b { /* comm */ }
+      // }
+      // with such inputs we wouldn't have to search for the comment at all
+      // TODO: consider changing this comment placement in the next major version
+      if (node.column > element.column) {
+        const previousNode = commentContainer[i - 1]
+
+        if (isIgnoringComment(previousNode)) {
+          return
+        }
+        break
+      }
     }
+
     unsafePseudoClasses.forEach(unsafePseudoClass => {
@@ -177,0 +225,0 @@ console.error(

New 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

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

86901

increased by7.63%

Lines of code

2146

increased by9.99%

Number of low supply chain risk alerts

28

decreased by-50%

No dependency changes