styled-components 6.0.0-beta.14 → 6.0.0-beta.15

package/dist/styled-components.js

@@ -8,7 +8,7 @@
         'data-styled';
     var SC_ATTR_ACTIVE = 'active';
     var SC_ATTR_VERSION = 'data-styled-version';
-    var SC_VERSION = "6.0.0-beta.14";
+    var SC_VERSION = "6.0.0-beta.15";
     var SPLITTER = '/*!sc*/\n';
     var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
     var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -607,7 +607,6 @@
     };
 
     var COMMENT_REGEX = /^\s*\/\/.*$/gm;
-    var COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
     /**
      * Serialize stylis output as an array of css strings. It is important that rules are
      * separated when using CSSOM injection.
@@ -637,7 +636,7 @@
                     return "".concat(namespace, " ").concat(prop);
                 });
             }
-            if (Array.isArray(rule.children)) {
+            if (Array.isArray(rule.children) && rule.type !== '@keyframes') {
                 rule.children = recursivelySetNamepace(rule.children, namespace);
             }
             return rule;
@@ -648,12 +647,18 @@
         var _componentId;
         var _selector;
         var _selectorRegexp;
-        var _consecutiveSelfRefRegExp;
         var selfReferenceReplacer = function (match, offset, string) {
             if (
-            // do not replace the first occurrence if it is complex (has a modifier)
-            (offset === 0 ? !COMPLEX_SELECTOR_PREFIX.includes(string[_selector.length]) : true) && // no consecutive self refs (.b.b); that is a precedence boost and treated differently
-                !string.match(_consecutiveSelfRefRegExp)) {
+            /**
+             * We only want to refer to the static class directly in the following scenarios:
+             *
+             * 1. The selector is alone on the line `& { color: red; }`
+             * 2. The selector is part of a self-reference selector `& + & { color: red; }`
+             */
+            string === _selector ||
+                (string.startsWith(_selector) &&
+                    string.endsWith(_selector) &&
+                    string.replaceAll(_selector, '').length > 0)) {
                 return ".".concat(_componentId);
             }
             return match;
@@ -697,7 +702,6 @@
             _componentId = componentId;
             _selector = selector;
             _selectorRegexp = new RegExp("\\".concat(_selector, "\\b"), 'g');
-            _consecutiveSelfRefRegExp = new RegExp("(\\".concat(_selector, "\\b){2,}"));
             var flatCSS = css.replace(COMMENT_REGEX, '');
             var compiled = ne(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS);
             if (options.namespace) {
@@ -839,8 +843,8 @@
         if (value == null || typeof value === 'boolean' || value === '') {
             return '';
         }
-        if (typeof value === 'number' && value !== 0 && !(name in unitlessKeys)) {
-            return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
+        if (typeof value === 'number' && value !== 0 && !(name in unitlessKeys) && !name.startsWith('--')) {
+            return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
         }
         return String(value).trim();
     }
@@ -1848,9 +1852,7 @@
             : options.componentId || componentId;
         // fold the underlying StyledComponent attrs up (implicit extend)
         var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
-            ? styledComponentTarget.attrs
-                .concat(attrs)
-                .filter(Boolean)
+            ? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
             : attrs;
         var shouldForwardProp = options.shouldForwardProp;
         if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {