@emotion/styled-base - npm Package Compare versions

Comparing version 10.0.0-really-unsafe-please-do-not-use.2 to 10.0.0

dist/styled-base.browser.cjs.js

@@ -9,2 +9,3 @@ 'use strict';
 var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
+var _objectAssign = _interopDefault(require('object-assign'));
 var core = require('@emotion/core');
@@ -14,21 +15,4 @@ var utils = require('@emotion/utils');
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var testOmitPropsOnStringTag = isPropValid;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-var testOmitPropsOnStringTag = isPropValid;
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
@@ -38,2 +22,9 @@ return key !== 'theme' && key !== 'innerRef';
 
+var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
+  return typeof tag === 'string' && // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+};
+
 var createStyled = function createStyled(tag, options) {
@@ -61,40 +52,26 @@ if (process.env.NODE_ENV !== 'production') {
   var baseTag = isReal && tag.__emotion_base || tag;
-  var isStringTag = typeof baseTag === 'string';
 
-  if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp = isStringTag && // 96 is one less than the char code
-    // for "a" so this is checking that
-    // it's a lowercase character
-    baseTag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
   }
 
+  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
+  var shouldUseAs = !defaultShouldForwardProp('as');
   return function () {
     var args = arguments;
-    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : []; // idk if this is worth it.
-    // it's only for when autoLabel is on and styles are completely static
-    // and it's only a performance optimisation
-    // just committing this in case we want it later
+    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
 
-    if (identifierName !== undefined && args.length === 1 && styles.length === 0 && args[0].styles !== undefined) {
-      styles.push({
-        name: args[0].name,
-        label: identifierName,
-        styles: args[0].styles,
-        map: args[0].map
-      });
+    if (identifierName !== undefined) {
+      styles.push("label:" + identifierName + ";");
+    }
+
+    if (args[0] == null || args[0].raw === undefined) {
+      styles.push.apply(styles, args);
     } else {
-      if (identifierName !== undefined) {
-        styles.push("label:" + identifierName + ";");
-      }
+      styles.push(args[0][0]);
+      var len = args.length;
+      var i = 1;
 
-      if (args[0] == null || args[0].raw === undefined) {
-        styles.push.apply(styles, args);
-      } else {
-        styles.push(args[0][0]);
-        var len = args.length;
-        var i = 1;
-
-        for (; i < len; i++) {
-          styles.push(args[i], args[0][i]);
-        }
+      for (; i < len; i++) {
+        styles.push(args[i], args[0][i]);
       }
@@ -105,2 +82,3 @@ }
       return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
+        var finalTag = shouldUseAs && props.as || baseTag;
         var className = '';
@@ -124,4 +102,4 @@ var classInterpolations = [];
 
-        var serialized = serialize.serializeStyles(context.registered, styles.concat(classInterpolations), mergedProps);
-        var rules = utils.insertStyles(context, serialized, isStringTag);
+        var serialized = serialize.serializeStyles(styles.concat(classInterpolations), context.registered, mergedProps);
+        var rules = utils.insertStyles(context, serialized, typeof finalTag === 'string');
         className += context.key + "-" + serialized.name;
@@ -133,7 +111,10 @@
 
+        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
         var newProps = {};
 
         for (var _key in props) {
+          if (shouldUseAs && _key === 'as') continue;
+
           if ( // $FlowFixMe
-          shouldForwardProp(_key)) {
+          finalShouldForwardProp(_key)) {
             newProps[_key] = props[_key];
@@ -144,12 +125,9 @@ }
         newProps.className = className;
+        newProps.ref = ref || props.innerRef;
 
-        {
-          newProps.ref = ref;
-
-          if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-            console.error('`innerRef` is no longer allowed, please use the `ref` prop instead');
-          }
+        if (process.env.NODE_ENV !== 'production' && props.innerRef) {
+          console.error('`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' + (identifierName === undefined ? '' : " in the usage of `" + identifierName + "`"));
         }
 
-        var ele = React.createElement(baseTag, newProps);
+        var ele = React.createElement(finalTag, newProps);
 
@@ -177,3 +155,3 @@ return ele;
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, nextOptions) : options).apply(void 0, styles);
+      return createStyled(nextTag, nextOptions !== undefined ? _objectAssign({}, options || {}, nextOptions) : options).apply(void 0, styles);
     };
@@ -180,0 +158,0 @@

dist/styled-base.browser.esm.js

 import { createElement } from 'react';
 import isPropValid from '@emotion/is-prop-valid';
+import _objectAssign from 'object-assign';
 import { withEmotionCache, ThemeContext } from '@emotion/core';
@@ -7,21 +8,4 @@ import { getRegisteredStyles, insertStyles } from '@emotion/utils';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var testOmitPropsOnStringTag = isPropValid;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-var testOmitPropsOnStringTag = isPropValid;
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
@@ -31,2 +15,9 @@ return key !== 'theme' && key !== 'innerRef';
 
+var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
+  return typeof tag === 'string' && // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+};
+
 var createStyled = function createStyled(tag, options) {
@@ -54,40 +45,26 @@ if (process.env.NODE_ENV !== 'production') {
   var baseTag = isReal && tag.__emotion_base || tag;
-  var isStringTag = typeof baseTag === 'string';
 
-  if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp = isStringTag && // 96 is one less than the char code
-    // for "a" so this is checking that
-    // it's a lowercase character
-    baseTag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
   }
 
+  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
+  var shouldUseAs = !defaultShouldForwardProp('as');
   return function () {
     var args = arguments;
-    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : []; // idk if this is worth it.
-    // it's only for when autoLabel is on and styles are completely static
-    // and it's only a performance optimisation
-    // just committing this in case we want it later
+    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
 
-    if (identifierName !== undefined && args.length === 1 && styles.length === 0 && args[0].styles !== undefined) {
-      styles.push({
-        name: args[0].name,
-        label: identifierName,
-        styles: args[0].styles,
-        map: args[0].map
-      });
+    if (identifierName !== undefined) {
+      styles.push("label:" + identifierName + ";");
+    }
+
+    if (args[0] == null || args[0].raw === undefined) {
+      styles.push.apply(styles, args);
     } else {
-      if (identifierName !== undefined) {
-        styles.push("label:" + identifierName + ";");
-      }
+      styles.push(args[0][0]);
+      var len = args.length;
+      var i = 1;
 
-      if (args[0] == null || args[0].raw === undefined) {
-        styles.push.apply(styles, args);
-      } else {
-        styles.push(args[0][0]);
-        var len = args.length;
-        var i = 1;
-
-        for (; i < len; i++) {
-          styles.push(args[i], args[0][i]);
-        }
+      for (; i < len; i++) {
+        styles.push(args[i], args[0][i]);
       }
@@ -98,2 +75,3 @@ }
       return createElement(ThemeContext.Consumer, null, function (theme) {
+        var finalTag = shouldUseAs && props.as || baseTag;
         var className = '';
@@ -117,4 +95,4 @@ var classInterpolations = [];
 
-        var serialized = serializeStyles(context.registered, styles.concat(classInterpolations), mergedProps);
-        var rules = insertStyles(context, serialized, isStringTag);
+        var serialized = serializeStyles(styles.concat(classInterpolations), context.registered, mergedProps);
+        var rules = insertStyles(context, serialized, typeof finalTag === 'string');
         className += context.key + "-" + serialized.name;
@@ -126,7 +104,10 @@
 
+        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
         var newProps = {};
 
         for (var _key in props) {
+          if (shouldUseAs && _key === 'as') continue;
+
           if ( // $FlowFixMe
-          shouldForwardProp(_key)) {
+          finalShouldForwardProp(_key)) {
             newProps[_key] = props[_key];
@@ -137,12 +118,9 @@ }
         newProps.className = className;
+        newProps.ref = ref || props.innerRef;
 
-        {
-          newProps.ref = ref;
-
-          if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-            console.error('`innerRef` is no longer allowed, please use the `ref` prop instead');
-          }
+        if (process.env.NODE_ENV !== 'production' && props.innerRef) {
+          console.error('`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' + (identifierName === undefined ? '' : " in the usage of `" + identifierName + "`"));
         }
 
-        var ele = createElement(baseTag, newProps);
+        var ele = createElement(finalTag, newProps);
 
@@ -170,3 +148,3 @@ return ele;
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, nextOptions) : options).apply(void 0, styles);
+      return createStyled(nextTag, nextOptions !== undefined ? _objectAssign({}, options || {}, nextOptions) : options).apply(void 0, styles);
     };
@@ -173,0 +151,0 @@

dist/styled-base.cjs.dev.js

@@ -9,2 +9,3 @@ 'use strict';
 var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
+var _objectAssign = _interopDefault(require('object-assign'));
 var core = require('@emotion/core');
@@ -14,21 +15,4 @@ var utils = require('@emotion/utils');
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var testOmitPropsOnStringTag = isPropValid;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-var testOmitPropsOnStringTag = isPropValid;
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
@@ -38,2 +22,11 @@ return key !== 'theme' && key !== 'innerRef';
 
+var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
+  return typeof tag === 'string' && // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+};
+
+var isBrowser = typeof document !== 'undefined';
+
 var createStyled = function createStyled(tag, options) {
@@ -61,40 +54,26 @@ if (process.env.NODE_ENV !== 'production') {
   var baseTag = isReal && tag.__emotion_base || tag;
-  var isStringTag = typeof baseTag === 'string';
 
-  if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp = isStringTag && // 96 is one less than the char code
-    // for "a" so this is checking that
-    // it's a lowercase character
-    baseTag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
   }
 
+  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
+  var shouldUseAs = !defaultShouldForwardProp('as');
   return function () {
     var args = arguments;
-    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : []; // idk if this is worth it.
-    // it's only for when autoLabel is on and styles are completely static
-    // and it's only a performance optimisation
-    // just committing this in case we want it later
+    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
 
-    if (identifierName !== undefined && args.length === 1 && styles.length === 0 && args[0].styles !== undefined) {
-      styles.push({
-        name: args[0].name,
-        label: identifierName,
-        styles: args[0].styles,
-        map: args[0].map
-      });
+    if (identifierName !== undefined) {
+      styles.push("label:" + identifierName + ";");
+    }
+
+    if (args[0] == null || args[0].raw === undefined) {
+      styles.push.apply(styles, args);
     } else {
-      if (identifierName !== undefined) {
-        styles.push("label:" + identifierName + ";");
-      }
+      styles.push(args[0][0]);
+      var len = args.length;
+      var i = 1;
 
-      if (args[0] == null || args[0].raw === undefined) {
-        styles.push.apply(styles, args);
-      } else {
-        styles.push(args[0][0]);
-        var len = args.length;
-        var i = 1;
-
-        for (; i < len; i++) {
-          styles.push(args[i], args[0][i]);
-        }
+      for (; i < len; i++) {
+        styles.push(args[i], args[0][i]);
       }
@@ -105,2 +84,3 @@ }
       return React.createElement(core.ThemeContext.Consumer, null, function (theme) {
+        var finalTag = shouldUseAs && props.as || baseTag;
         var className = '';
@@ -124,4 +104,4 @@ var classInterpolations = [];
 
-        var serialized = serialize.serializeStyles(context.registered, styles.concat(classInterpolations), mergedProps);
-        var rules = utils.insertStyles(context, serialized, isStringTag);
+        var serialized = serialize.serializeStyles(styles.concat(classInterpolations), context.registered, mergedProps);
+        var rules = utils.insertStyles(context, serialized, typeof finalTag === 'string');
         className += context.key + "-" + serialized.name;
@@ -133,7 +113,10 @@
 
+        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
         var newProps = {};
 
         for (var _key in props) {
+          if (shouldUseAs && _key === 'as') continue;
+
           if ( // $FlowFixMe
-          shouldForwardProp(_key)) {
+          finalShouldForwardProp(_key)) {
             newProps[_key] = props[_key];
@@ -144,14 +127,11 @@ }
         newProps.className = className;
+        newProps.ref = ref || props.innerRef;
 
-        {
-          newProps.ref = ref;
-
-          if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-            console.error('`innerRef` is no longer allowed, please use the `ref` prop instead');
-          }
+        if (process.env.NODE_ENV !== 'production' && props.innerRef) {
+          console.error('`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' + (identifierName === undefined ? '' : " in the usage of `" + identifierName + "`"));
         }
 
-        var ele = React.createElement(baseTag, newProps);
+        var ele = React.createElement(finalTag, newProps);
 
-        if (!utils.isBrowser && rules !== undefined) {
+        if (!isBrowser && rules !== undefined) {
           var _ref;
@@ -193,3 +173,3 @@
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, nextOptions) : options).apply(void 0, styles);
+      return createStyled(nextTag, nextOptions !== undefined ? _objectAssign({}, options || {}, nextOptions) : options).apply(void 0, styles);
     };
@@ -196,0 +176,0 @@

dist/styled-base.cjs.js

 'use strict';
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./styled-base.cjs.prod.js');
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./styled-base.cjs.prod.js");
 } else {
-  module.exports = require('./styled-base.cjs.dev.js');
+  module.exports = require("./styled-base.cjs.dev.js");
 }

dist/styled-base.cjs.prod.js

@@ -8,22 +8,16 @@ "use strict";
   isPropValid = _interopDefault(require("@emotion/is-prop-valid")),
+  _objectAssign = _interopDefault(require("object-assign")),
   core = require("@emotion/core"),
   utils = require("@emotion/utils"),
-  serialize = require("@emotion/serialize");
-function _extends() {
-  return (_extends =
-    Object.assign ||
-    function(target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source)
-          Object.prototype.hasOwnProperty.call(source, key) &&
-            (target[key] = source[key]);
-      }
-      return target;
-    }).apply(this, arguments);
-}
-var testOmitPropsOnStringTag = isPropValid,
+  serialize = require("@emotion/serialize"),
+  testOmitPropsOnStringTag = isPropValid,
   testOmitPropsOnComponent = function(key) {
     return "theme" !== key && "innerRef" !== key;
   },
+  getDefaultShouldForwardProp = function(tag) {
+    return "string" == typeof tag && 96 < tag.charCodeAt(0)
+      ? testOmitPropsOnStringTag
+      : testOmitPropsOnComponent;
+  },
+  isBrowser = "undefined" != typeof document,
   createStyled = function createStyled(tag, options) {
@@ -44,129 +38,123 @@ var identifierName, shouldForwardProp, targetClassName;
     var isReal = tag.__emotion_real === tag,
-      baseTag = (isReal && tag.__emotion_base) || tag,
-      isStringTag = "string" == typeof baseTag;
-    return (
-      "function" != typeof shouldForwardProp &&
-        (shouldForwardProp =
-          isStringTag && 96 < baseTag.charCodeAt(0)
-            ? testOmitPropsOnStringTag
-            : testOmitPropsOnComponent),
-      function() {
-        var args = arguments,
-          styles =
-            isReal && void 0 !== tag.__emotion_styles
-              ? tag.__emotion_styles.slice(0)
-              : [];
-        if (
-          void 0 !== identifierName &&
-          1 === args.length &&
-          0 === styles.length &&
-          void 0 !== args[0].styles
-        )
-          styles.push({
-            name: args[0].name,
-            label: identifierName,
-            styles: args[0].styles,
-            map: args[0].map
-          });
-        else if (
-          (void 0 !== identifierName &&
-            styles.push("label:" + identifierName + ";"),
-          null == args[0] || void 0 === args[0].raw)
-        )
-          styles.push.apply(styles, args);
-        else {
-          styles.push(args[0][0]);
-          for (var len = args.length, i = 1; i < len; i++)
-            styles.push(args[i], args[0][i]);
-        }
-        var Styled = core.withEmotionCache(function(props, context, ref) {
-          return React.createElement(core.ThemeContext.Consumer, null, function(
-            theme
-          ) {
-            var className = "",
-              classInterpolations = [],
-              mergedProps = props;
-            if (null == props.theme) {
-              for (var key in ((mergedProps = {}), props))
-                mergedProps[key] = props[key];
-              mergedProps.theme = theme;
-            }
-            "string" == typeof props.className &&
-              (className += utils.getRegisteredStyles(
-                context.registered,
-                classInterpolations,
-                props.className
-              ));
-            var serialized = serialize.serializeStyles(
-                context.registered,
-                styles.concat(classInterpolations),
-                mergedProps
+      baseTag = (isReal && tag.__emotion_base) || tag;
+    "function" != typeof shouldForwardProp &&
+      isReal &&
+      (shouldForwardProp = tag.__emotion_forwardProp);
+    var defaultShouldForwardProp =
+        shouldForwardProp || getDefaultShouldForwardProp(baseTag),
+      shouldUseAs = !defaultShouldForwardProp("as");
+    return function() {
+      var args = arguments,
+        styles =
+          isReal && void 0 !== tag.__emotion_styles
+            ? tag.__emotion_styles.slice(0)
+            : [];
+      if (
+        (void 0 !== identifierName &&
+          styles.push("label:" + identifierName + ";"),
+        null == args[0] || void 0 === args[0].raw)
+      )
+        styles.push.apply(styles, args);
+      else {
+        styles.push(args[0][0]);
+        for (var len = args.length, i = 1; i < len; i++)
+          styles.push(args[i], args[0][i]);
+      }
+      var Styled = core.withEmotionCache(function(props, context, ref) {
+        return React.createElement(core.ThemeContext.Consumer, null, function(
+          theme
+        ) {
+          var finalTag = (shouldUseAs && props.as) || baseTag,
+            className = "",
+            classInterpolations = [],
+            mergedProps = props;
+          if (null == props.theme) {
+            for (var key in ((mergedProps = {}), props))
+              mergedProps[key] = props[key];
+            mergedProps.theme = theme;
+          }
+          "string" == typeof props.className &&
+            (className += utils.getRegisteredStyles(
+              context.registered,
+              classInterpolations,
+              props.className
+            ));
+          var serialized = serialize.serializeStyles(
+              styles.concat(classInterpolations),
+              context.registered,
+              mergedProps
+            ),
+            rules = utils.insertStyles(
+              context,
+              serialized,
+              "string" == typeof finalTag
+            );
+          (className += context.key + "-" + serialized.name),
+            void 0 !== targetClassName && (className += " " + targetClassName);
+          var finalShouldForwardProp =
+              shouldUseAs && void 0 === shouldForwardProp
+                ? getDefaultShouldForwardProp(finalTag)
+                : defaultShouldForwardProp,
+            newProps = {};
+          for (var _key in props)
+            (shouldUseAs && "as" === _key) ||
+              (finalShouldForwardProp(_key) && (newProps[_key] = props[_key]));
+          (newProps.className = className),
+            (newProps.ref = ref || props.innerRef);
+          var ele = React.createElement(finalTag, newProps);
+          if (!isBrowser && void 0 !== rules) {
+            for (
+              var _ref,
+                serializedNames = serialized.name,
+                next = serialized.next;
+              void 0 !== next;
+
+            )
+              (serializedNames += " " + next.name), (next = next.next);
+            return React.createElement(
+              React.Fragment,
+              null,
+              React.createElement(
+                "style",
+                (((_ref = {})["data-emotion-" + context.key] = serializedNames),
+                (_ref.dangerouslySetInnerHTML = { __html: rules }),
+                (_ref.nonce = context.sheet.nonce),
+                _ref)
               ),
-              rules = utils.insertStyles(context, serialized, isStringTag);
-            (className += context.key + "-" + serialized.name),
-              void 0 !== targetClassName &&
-                (className += " " + targetClassName);
-            var newProps = {};
-            for (var _key in props)
-              shouldForwardProp(_key) && (newProps[_key] = props[_key]);
-            (newProps.className = className), (newProps.ref = ref);
-            var ele = React.createElement(baseTag, newProps);
-            if (!utils.isBrowser && void 0 !== rules) {
-              for (
-                var _ref,
-                  serializedNames = serialized.name,
-                  next = serialized.next;
-                void 0 !== next;
-
-              )
-                (serializedNames += " " + next.name), (next = next.next);
-              return React.createElement(
-                React.Fragment,
-                null,
-                React.createElement(
-                  "style",
-                  (((_ref = {})[
-                    "data-emotion-" + context.key
-                  ] = serializedNames),
-                  (_ref.dangerouslySetInnerHTML = { __html: rules }),
-                  (_ref.nonce = context.sheet.nonce),
-                  _ref)
-                ),
-                ele
-              );
-            }
-            return ele;
-          });
+              ele
+            );
+          }
+          return ele;
         });
-        return (
-          (Styled.displayName =
-            void 0 !== identifierName
-              ? identifierName
-              : "Styled(" +
-                ("string" == typeof baseTag
-                  ? baseTag
-                  : baseTag.displayName || baseTag.name || "Component") +
-                ")"),
-          (Styled.defaultProps = tag.defaultProps),
-          ((Styled.__emotion_real = Styled).__emotion_base = baseTag),
-          (Styled.__emotion_styles = styles),
-          (Styled.__emotion_forwardProp = shouldForwardProp),
-          Object.defineProperty(Styled, "toString", {
-            value: function() {
-              return "." + targetClassName;
-            }
-          }),
-          (Styled.withComponent = function(nextTag, nextOptions) {
-            return createStyled(
-              nextTag,
-              void 0 !== nextOptions
-                ? _extends({}, options || {}, nextOptions)
-                : options
-            ).apply(void 0, styles);
-          }),
-          Styled
-        );
-      }
-    );
+      });
+      return (
+        (Styled.displayName =
+          void 0 !== identifierName
+            ? identifierName
+            : "Styled(" +
+              ("string" == typeof baseTag
+                ? baseTag
+                : baseTag.displayName || baseTag.name || "Component") +
+              ")"),
+        (Styled.defaultProps = tag.defaultProps),
+        ((Styled.__emotion_real = Styled).__emotion_base = baseTag),
+        (Styled.__emotion_styles = styles),
+        (Styled.__emotion_forwardProp = shouldForwardProp),
+        Object.defineProperty(Styled, "toString", {
+          value: function() {
+            return "." + targetClassName;
+          }
+        }),
+        (Styled.withComponent = function(nextTag, nextOptions) {
+          return createStyled(
+            nextTag,
+            void 0 !== nextOptions
+              ? _objectAssign({}, options || {}, nextOptions)
+              : options
+          ).apply(void 0, styles);
+        }),
+        Styled
+      );
+    };
   };
 exports.default = createStyled;

dist/styled-base.esm.js

 import { createElement, Fragment } from 'react';
 import isPropValid from '@emotion/is-prop-valid';
+import _objectAssign from 'object-assign';
 import { withEmotionCache, ThemeContext } from '@emotion/core';
-import { getRegisteredStyles, insertStyles, isBrowser } from '@emotion/utils';
+import { getRegisteredStyles, insertStyles } from '@emotion/utils';
 import { serializeStyles } from '@emotion/serialize';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var testOmitPropsOnStringTag = isPropValid;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-var testOmitPropsOnStringTag = isPropValid;
 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
@@ -30,2 +14,11 @@ return key !== 'theme' && key !== 'innerRef';
 
+var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
+  return typeof tag === 'string' && // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+};
+
+var isBrowser = typeof document !== 'undefined';
+
 var createStyled = function createStyled(tag, options) {
@@ -53,40 +46,26 @@ if (process.env.NODE_ENV !== 'production') {
   var baseTag = isReal && tag.__emotion_base || tag;
-  var isStringTag = typeof baseTag === 'string';
 
-  if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp = isStringTag && // 96 is one less than the char code
-    // for "a" so this is checking that
-    // it's a lowercase character
-    baseTag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
   }
 
+  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
+  var shouldUseAs = !defaultShouldForwardProp('as');
   return function () {
     var args = arguments;
-    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : []; // idk if this is worth it.
-    // it's only for when autoLabel is on and styles are completely static
-    // and it's only a performance optimisation
-    // just committing this in case we want it later
+    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
 
-    if (identifierName !== undefined && args.length === 1 && styles.length === 0 && args[0].styles !== undefined) {
-      styles.push({
-        name: args[0].name,
-        label: identifierName,
-        styles: args[0].styles,
-        map: args[0].map
-      });
+    if (identifierName !== undefined) {
+      styles.push("label:" + identifierName + ";");
+    }
+
+    if (args[0] == null || args[0].raw === undefined) {
+      styles.push.apply(styles, args);
     } else {
-      if (identifierName !== undefined) {
-        styles.push("label:" + identifierName + ";");
-      }
+      styles.push(args[0][0]);
+      var len = args.length;
+      var i = 1;
 
-      if (args[0] == null || args[0].raw === undefined) {
-        styles.push.apply(styles, args);
-      } else {
-        styles.push(args[0][0]);
-        var len = args.length;
-        var i = 1;
-
-        for (; i < len; i++) {
-          styles.push(args[i], args[0][i]);
-        }
+      for (; i < len; i++) {
+        styles.push(args[i], args[0][i]);
       }
@@ -97,2 +76,3 @@ }
       return createElement(ThemeContext.Consumer, null, function (theme) {
+        var finalTag = shouldUseAs && props.as || baseTag;
         var className = '';
@@ -116,4 +96,4 @@ var classInterpolations = [];
 
-        var serialized = serializeStyles(context.registered, styles.concat(classInterpolations), mergedProps);
-        var rules = insertStyles(context, serialized, isStringTag);
+        var serialized = serializeStyles(styles.concat(classInterpolations), context.registered, mergedProps);
+        var rules = insertStyles(context, serialized, typeof finalTag === 'string');
         className += context.key + "-" + serialized.name;
@@ -125,7 +105,10 @@
 
+        var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;
         var newProps = {};
 
         for (var _key in props) {
+          if (shouldUseAs && _key === 'as') continue;
+
           if ( // $FlowFixMe
-          shouldForwardProp(_key)) {
+          finalShouldForwardProp(_key)) {
             newProps[_key] = props[_key];
@@ -136,12 +119,9 @@ }
         newProps.className = className;
+        newProps.ref = ref || props.innerRef;
 
-        {
-          newProps.ref = ref;
-
-          if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-            console.error('`innerRef` is no longer allowed, please use the `ref` prop instead');
-          }
+        if (process.env.NODE_ENV !== 'production' && props.innerRef) {
+          console.error('`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' + (identifierName === undefined ? '' : " in the usage of `" + identifierName + "`"));
         }
 
-        var ele = createElement(baseTag, newProps);
+        var ele = createElement(finalTag, newProps);
 
@@ -185,3 +165,3 @@ if (!isBrowser && rules !== undefined) {
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, nextOptions !== undefined ? _extends({}, options || {}, nextOptions) : options).apply(void 0, styles);
+      return createStyled(nextTag, nextOptions !== undefined ? _objectAssign({}, options || {}, nextOptions) : options).apply(void 0, styles);
     };
@@ -188,0 +168,0 @@

package.json

 {
   "name": "@emotion/styled-base",
-  "version": "10.0.0-really-unsafe-please-do-not-use.2",
+  "version": "10.0.0",
   "description": "base styled API for emotion",
@@ -11,11 +11,20 @@ "main": "dist/styled-base.cjs.js",
   },
+  "types": "types/index.d.ts",
   "license": "MIT",
-  "repository": "https://github.com/emotion-js/emotion/tree/master/next-packages/styled-base",
+  "repository": "https://github.com/emotion-js/emotion/tree/master/packages/styled-base",
+  "scripts": {
+    "test:typescript": "dtslint types"
+  },
   "dependencies": {
-    "@emotion/is-prop-valid": "^10.0.0-really-unsafe-please-do-not-use.2",
-    "@emotion/serialize": "^10.0.0-really-unsafe-please-do-not-use.2",
-    "@emotion/utils": "^10.0.0-really-unsafe-please-do-not-use.2"
+    "@emotion/is-prop-valid": "0.7.2",
+    "@emotion/serialize": "0.11.0",
+    "@emotion/utils": "0.11.1",
+    "object-assign": "^4.1.1"
   },
+  "devDependencies": {
+    "@types/react": "16.3.18",
+    "dtslint": "^0.3.0"
+  },
   "peerDependencies": {
-    "@emotion/core": "0.x.x",
+    "@emotion/core": "^10.0.0",
     "react": ">=16.3.0"
@@ -28,6 +37,9 @@ },
     "src",
-    "dist"
+    "dist",
+    "types"
   ],
-  "umd:main": "./dist/index.min.js",
-  "gitHead": "0da0de50f6f2c19e46bca7662d1a954d48db1264"
+  "umd:main": "dist/styled-base.umd.min.js",
+  "preconstruct": {
+    "umdName": "emotionStyledBase"
+  }
 }

src/index.js

@@ -5,4 +5,3 @@ // @flow
 import {
-  testOmitPropsOnComponent,
-  testOmitPropsOnStringTag,
+  getDefaultShouldForwardProp,
   type StyledOptions,
@@ -12,5 +11,7 @@ type CreateStyled
 import { withEmotionCache, ThemeContext } from '@emotion/core'
-import { getRegisteredStyles, insertStyles, isBrowser } from '@emotion/utils'
+import { getRegisteredStyles, insertStyles } from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
 
+let isBrowser = typeof document !== 'undefined'
+
 type StyledComponent = (
@@ -46,13 +47,9 @@ props: *
   const baseTag = (isReal && tag.__emotion_base) || tag
-  let isStringTag = typeof baseTag === 'string'
-  if (typeof shouldForwardProp !== 'function') {
-    shouldForwardProp =
-      isStringTag &&
-      // 96 is one less than the char code
-      // for "a" so this is checking that
-      // it's a lowercase character
-      baseTag.charCodeAt(0) > 96
-        ? testOmitPropsOnStringTag
-        : testOmitPropsOnComponent
+
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp
   }
+  let defaultShouldForwardProp =
+    shouldForwardProp || getDefaultShouldForwardProp(baseTag)
+  const shouldUseAs = !defaultShouldForwardProp('as')
 
@@ -66,32 +63,14 @@ return function(): StyledComponent {
 
-    // idk if this is worth it.
-    // it's only for when autoLabel is on and styles are completely static
-    // and it's only a performance optimisation
-    // just committing this in case we want it later
-    if (
-      identifierName !== undefined &&
-      args.length === 1 &&
-      styles.length === 0 &&
-      args[0].styles !== undefined
-    ) {
-      styles.push({
-        name: args[0].name,
-        label: identifierName,
-        styles: args[0].styles,
-        map: args[0].map
-      })
+    if (identifierName !== undefined) {
+      styles.push(`label:${identifierName};`)
+    }
+    if (args[0] == null || args[0].raw === undefined) {
+      styles.push.apply(styles, args)
     } else {
-      if (identifierName !== undefined) {
-        styles.push(`label:${identifierName};`)
+      styles.push(args[0][0])
+      let len = args.length
+      let i = 1
+      for (; i < len; i++) {
+        styles.push(args[i], args[0][i])
       }
-      if (args[0] == null || args[0].raw === undefined) {
-        styles.push.apply(styles, args)
-      } else {
-        styles.push(args[0][0])
-        let len = args.length
-        let i = 1
-        for (; i < len; i++) {
-          styles.push(args[i], args[0][i])
-        }
-      }
     }
@@ -103,2 +82,4 @@
           {theme => {
+            const finalTag = (shouldUseAs && props.as) || baseTag
+
             let className = ''
@@ -123,7 +104,11 @@ let classInterpolations = []
             const serialized = serializeStyles(
+              styles.concat(classInterpolations),
               context.registered,
-              styles.concat(classInterpolations),
               mergedProps
             )
-            const rules = insertStyles(context, serialized, isStringTag)
+            const rules = insertStyles(
+              context,
+              serialized,
+              typeof finalTag === 'string'
+            )
             className += `${context.key}-${serialized.name}`
@@ -133,8 +118,16 @@ if (targetClassName !== undefined) {
             }
+
+            const finalShouldForwardProp =
+              shouldUseAs && shouldForwardProp === undefined
+                ? getDefaultShouldForwardProp(finalTag)
+                : defaultShouldForwardProp
+
             let newProps = {}
 
             for (let key in props) {
+              if (shouldUseAs && key === 'as') continue
+
               if (
                 // $FlowFixMe
-                shouldForwardProp(key)
+                finalShouldForwardProp(key)
               ) {
@@ -146,16 +139,14 @@ newProps[key] = props[key]
             newProps.className = className
-            if (process.env.PREACT) {
-              if (props.innerRef != null) {
-                newProps.ref = props.innerRef
-              }
-            } else {
-              newProps.ref = ref
-              if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-                console.error(
-                  '`innerRef` is no longer allowed, please use the `ref` prop instead'
-                )
-              }
+
+            newProps.ref = ref || props.innerRef
+            if (process.env.NODE_ENV !== 'production' && props.innerRef) {
+              console.error(
+                '`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' +
+                  (identifierName === undefined
+                    ? ''
+                    : ` in the usage of \`${identifierName}\``)
+              )
             }
 
-            const ele = React.createElement(baseTag, newProps)
+            const ele = React.createElement(finalTag, newProps)
             if (!isBrowser && rules !== undefined) {
@@ -162,0 +153,0 @@ let serializedNames = serialized.name

src/utils.js

@@ -7,6 +7,15 @@ // @flow
 
-export const testOmitPropsOnStringTag: (key: string) => boolean = isPropValid
-export const testOmitPropsOnComponent = (key: string) =>
+const testOmitPropsOnStringTag = isPropValid
+const testOmitPropsOnComponent = (key: string) =>
   key !== 'theme' && key !== 'innerRef'
 
+export const getDefaultShouldForwardProp = (tag: React.ElementType) =>
+  typeof tag === 'string' &&
+  // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96
+    ? testOmitPropsOnStringTag
+    : testOmitPropsOnComponent
+
 export type StyledOptions = {
@@ -13,0 +22,0 @@ label?: string,

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88321

increased by12.7%

Number of package files

17

increased by30.77%

Lines of code

1304

increased by28.09%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

2

increased byInfinity%

Dependency changes

• + Addedobject-assign@^4.1.1

• + Added@babel/code-frame@7.24.7(transitive)

• + Added@babel/generator@7.25.6(transitive)

• + Added@babel/helper-module-imports@7.24.7(transitive)

• + Added@babel/helper-string-parser@7.24.8(transitive)

• + Added@babel/helper-validator-identifier@7.24.7(transitive)

• + Added@babel/highlight@7.24.7(transitive)

• + Added@babel/parser@7.25.6(transitive)

• + Added@babel/runtime@7.25.6(transitive)

• + Added@babel/template@7.25.0(transitive)

• + Added@babel/traverse@7.25.6(transitive)

• + Added@babel/types@7.25.6(transitive)

• + Added@emotion/cache@10.0.29(transitive)

• + Added@emotion/core@10.3.1(transitive)

• + Added@emotion/css@10.0.27(transitive)

• + Added@emotion/hash@0.7.10.8.0(transitive)

• + Added@emotion/is-prop-valid@0.7.2(transitive)

• + Added@emotion/memoize@0.7.10.7.4(transitive)

• + Added@emotion/serialize@0.11.00.11.16(transitive)

• + Added@emotion/sheet@0.9.4(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.30.7.5(transitive)

• + Added@emotion/utils@0.11.10.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbabel-plugin-emotion@10.2.2(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedjsesc@2.5.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedto-fast-properties@2.0.0(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removed@emotion/cache@0.8.8(transitive)

• - Removed@emotion/core@0.13.1(transitive)

• - Removed@emotion/css@0.9.8(transitive)

• - Removed@emotion/hash@0.6.610.0.0-really-unsafe-please-do-not-use.2(transitive)

• - Removed@emotion/is-prop-valid@10.0.0-really-unsafe-please-do-not-use.2(transitive)

• - Removed@emotion/memoize@0.6.610.0.0-really-unsafe-please-do-not-use.2(transitive)

• - Removed@emotion/serialize@0.9.110.0.0-really-unsafe-please-do-not-use.2(transitive)

• - Removed@emotion/sheet@0.8.1(transitive)

• - Removed@emotion/stylis@0.7.1(transitive)

• - Removed@emotion/unitless@0.6.710.0.0-really-unsafe-please-do-not-use.2(transitive)

• - Removed@emotion/utils@0.8.210.0.0-really-unsafe-please-do-not-use.2(transitive)

• Updated@emotion/is-prop-valid@0.7.2

• Updated@emotion/serialize@0.11.0

• Updated@emotion/utils@0.11.1