styled-components 6.0.0-beta.8 → 6.0.0-beta.9

package/dist/styled-components-macro.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components-macro.cjs.js","sources":["../src/macro/index.ts"],"sourcesContent":["import { types } from '@babel/core';\nimport { addDefault, addNamed } from '@babel/helper-module-imports';\nimport traverse from '@babel/traverse';\nimport { createMacro, MacroParams } from 'babel-plugin-macros';\nimport babelPlugin from 'babel-plugin-styled-components';\n\nfunction styledComponentsMacro({\n  references,\n  state,\n  babel: { types: t },\n  config: { importModuleName = 'styled-components', ...config } = {},\n}: MacroParams) {\n  const program = state.file.path;\n\n  // FIRST STEP : replace `styled-components/macro` by `styled-components\n  // references looks like this\n  // { default: [path, path], css: [path], ... }\n  let customImportName;\n  Object.keys(references).forEach(refName => {\n    // generate new identifier\n    let id: types.Identifier;\n    if (refName === 'default') {\n      id = addDefault(program, importModuleName, { nameHint: 'styled' });\n      customImportName = id;\n    } else {\n      id = addNamed(program, refName, importModuleName, { nameHint: refName });\n    }\n\n    // update references with the new identifiers\n    references[refName].forEach(referencePath => {\n      // eslint-disable-next-line no-param-reassign\n      (referencePath.node as types.Identifier).name = id.name;\n    });\n  });\n\n  // SECOND STEP : apply babel-plugin-styled-components to the file\n  const stateWithOpts = {\n    ...state,\n    opts: {\n      ...config,\n      topLevelImportPaths: (config.topLevelImportPaths || []).concat(importModuleName),\n    },\n    customImportName,\n  };\n  traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);\n}\n\nexport default createMacro(styledComponentsMacro, {\n  configName: 'styledComponents',\n});\n"],"names":["__rest","addDefault","addNamed","__assign","traverse","babelPlugin","createMacro"],"mappings":";;;;;;;;;;;;;;;AAMA,SAAS,qBAAqB,CAAC,EAKjB,EAAA;IAJZ,IAAA,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,KAAK,GAAA,EAAA,CAAA,KAAA,EACW,CAAC,GAAA,EAAA,CAAA,KAAA,CAAA,KAAA,EACjB,EAAA,GAAA,EAAA,CAAA,MAAkE,EAAlE,EAAA,GAAA,EAAA,KAAA,KAAA,CAAA,GAAgE,EAAE,GAAA,EAAA,EAAxD,EAAsC,GAAA,EAAA,CAAA,gBAAA,EAAtC,gBAAgB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,mBAAmB,GAAA,EAAA,EAAK,MAAM,GAAnDA,YAAA,CAAA,EAAA,EAAA,CAAA,kBAAA,CAAqD,CAAK,CAAA;AAElE,IAAA,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;;;AAKhC,IAAA,IAAI,gBAAgB,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,UAAA,OAAO,EAAA;;AAErC,QAAA,IAAI,EAAoB,CAAC;QACzB,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,YAAA,EAAE,GAAGC,8BAAU,CAAC,OAAO,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YACnE,gBAAgB,GAAG,EAAE,CAAC;AACvB,SAAA;AAAM,aAAA;AACL,YAAA,EAAE,GAAGC,4BAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;AAC1E,SAAA;;AAGD,QAAA,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,UAAA,aAAa,EAAA;;YAEtC,aAAa,CAAC,IAAyB,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AAC1D,SAAC,CAAC,CAAC;AACL,KAAC,CAAC,CAAC;;IAGH,IAAM,aAAa,GACdC,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,KAAK,CACR,EAAA,EAAA,IAAI,EACCA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,MAAM,CACT,EAAA,EAAA,mBAAmB,EAAE,CAAC,MAAM,CAAC,mBAAmB,IAAI,EAAE,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAElF,CAAA,EAAA,gBAAgB,EAAA,gBAAA,EAAA,CACjB,CAAC;IACFC,4BAAQ,CAAC,OAAO,CAAC,MAAM,EAAEC,+BAAW,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AACxF,CAAC;AAED,YAAeC,6BAAW,CAAC,qBAAqB,EAAE;AAChD,IAAA,UAAU,EAAE,kBAAkB;AAC/B,CAAA,CAAC;;;;"}
+{"version":3,"file":"styled-components-macro.cjs.js","sources":["../src/macro/index.ts"],"sourcesContent":["import { types } from '@babel/core';\nimport { addDefault, addNamed } from '@babel/helper-module-imports';\nimport traverse from '@babel/traverse';\nimport { createMacro, MacroParams } from 'babel-plugin-macros';\nimport babelPlugin from 'babel-plugin-styled-components';\n\nfunction styledComponentsMacro({\n  references,\n  state,\n  babel: { types: t },\n  config: { importModuleName = 'styled-components', ...config } = {},\n}: MacroParams) {\n  const program = state.file.path;\n\n  // FIRST STEP : replace `styled-components/macro` by `styled-components\n  // references looks like this\n  // { default: [path, path], css: [path], ... }\n  let customImportName;\n  Object.keys(references).forEach(refName => {\n    // generate new identifier\n    let id: types.Identifier;\n    if (refName === 'default') {\n      id = addDefault(program, importModuleName, { nameHint: 'styled' });\n      customImportName = id;\n    } else {\n      id = addNamed(program, refName, importModuleName, { nameHint: refName });\n    }\n\n    // update references with the new identifiers\n    references[refName].forEach(referencePath => {\n      // eslint-disable-next-line no-param-reassign\n      (referencePath.node as types.Identifier).name = id.name;\n    });\n  });\n\n  // SECOND STEP : apply babel-plugin-styled-components to the file\n  const stateWithOpts = {\n    ...state,\n    opts: {\n      ...config,\n      topLevelImportPaths: (config.topLevelImportPaths || []).concat(importModuleName),\n    },\n    customImportName,\n  };\n  traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);\n}\n\nexport default createMacro(styledComponentsMacro, {\n  configName: 'styledComponents',\n});\n"],"names":["__rest","addDefault","addNamed","__assign","traverse","babelPlugin","createMacro"],"mappings":";;;;;;;;;;;;;;;AAMA,SAAS,qBAAqB,CAAC,EAKjB,EAAA;IAJZ,IAAA,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,KAAK,GAAA,EAAA,CAAA,KAAA,EACW,CAAC,GAAA,EAAA,CAAA,KAAA,CAAA,KAAA,EACjB,EAAA,GAAA,EAAA,CAAA,MAAkE,EAAlE,EAAA,GAAA,EAAA,KAAA,KAAA,CAAA,GAAgE,EAAE,GAAA,EAAA,EAAxD,EAAsC,GAAA,EAAA,CAAA,gBAAA,EAAtC,gBAAgB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,mBAAmB,GAAA,EAAA,EAAK,MAAM,GAAnDA,YAAA,CAAA,EAAA,EAAA,CAAA,kBAAA,CAAqD,CAAK,CAAA;AAElE,IAAA,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;;;AAKhC,IAAA,IAAI,gBAAgB,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,UAAA,OAAO,EAAA;;AAErC,QAAA,IAAI,EAAoB,CAAC;QACzB,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,YAAA,EAAE,GAAGC,8BAAU,CAAC,OAAO,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YACnE,gBAAgB,GAAG,EAAE,CAAC;AACvB,SAAA;AAAM,aAAA;AACL,YAAA,EAAE,GAAGC,4BAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;AAC1E,SAAA;;AAGD,QAAA,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,UAAA,aAAa,EAAA;;YAEtC,aAAa,CAAC,IAAyB,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AAC1D,SAAC,CAAC,CAAC;AACL,KAAC,CAAC,CAAC;;IAGH,IAAM,aAAa,GACdC,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,KAAK,CACR,EAAA,EAAA,IAAI,EACCA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,MAAM,CACT,EAAA,EAAA,mBAAmB,EAAE,CAAC,MAAM,CAAC,mBAAmB,IAAI,EAAE,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAElF,CAAA,EAAA,gBAAgB,EAAA,gBAAA,EAAA,CACjB,CAAC;IACFC,yBAAQ,CAAC,OAAO,CAAC,MAAM,EAAEC,4BAAW,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AACxF,CAAC;AAED,YAAeC,6BAAW,CAAC,qBAAqB,EAAE;AAChD,IAAA,UAAU,EAAE,kBAAkB;AAC/B,CAAA,CAAC;;;;"}

package/dist/styled-components.browser.cjs.js

@@ -8,17 +8,17 @@ var shallowequal = require('shallowequal');
 var stylis = require('stylis');
 var unitless = require('@emotion/unitless');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var shallowequal__default = /*#__PURE__*/_interopDefaultLegacy(shallowequal);
-var unitless__default = /*#__PURE__*/_interopDefaultLegacy(unitless);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var shallowequal__default = /*#__PURE__*/_interopDefault(shallowequal);
+var unitless__default = /*#__PURE__*/_interopDefault(unitless);
 
 var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
     'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "6.0.0-beta.8";
+var SC_VERSION = "6.0.0-beta.9";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -240,6 +240,7 @@ var domElements = [
     'track',
     'u',
     'ul',
+    'use',
     'var',
     'video',
     'wbr',
@@ -1067,9 +1068,9 @@ function createStylisInstance(_a) {
     return stringifyRules;
 }
 
-var StyleSheetContext = React__default["default"].createContext(undefined);
+var StyleSheetContext = React__default.default.createContext(undefined);
 var StyleSheetConsumer = StyleSheetContext.Consumer;
-var StylisContext = React__default["default"].createContext(undefined);
+var StylisContext = React__default.default.createContext(undefined);
 StylisContext.Consumer;
 var mainSheet = new StyleSheet();
 var mainStylis = createStylisInstance();
@@ -1103,12 +1104,12 @@ function StyleSheetManager(props) {
         });
     }, [props.disableVendorPrefixes, props.namespace, plugins]);
     React.useEffect(function () {
-        if (!shallowequal__default["default"](plugins, props.stylisPlugins))
+        if (!shallowequal__default.default(plugins, props.stylisPlugins))
             setPlugins(props.stylisPlugins);
     }, [props.stylisPlugins]);
-    return (React__default["default"].createElement(StyleSheetContext.Provider, { value: styleSheet },
-        React__default["default"].createElement(StylisContext.Provider, { value: stylis }, process.env.NODE_ENV !== 'production'
-            ? React__default["default"].Children.only(props.children)
+    return (React__default.default.createElement(StyleSheetContext.Provider, { value: styleSheet },
+        React__default.default.createElement(StylisContext.Provider, { value: stylis }, process.env.NODE_ENV !== 'production'
+            ? React__default.default.Children.only(props.children)
             : props.children)));
 }
 
@@ -1142,7 +1143,7 @@ function addUnitIfNeeded(name, value) {
     if (value == null || typeof value === 'boolean' || value === '') {
         return '';
     }
-    if (typeof value === 'number' && value !== 0 && !(name in unitless__default["default"])) {
+    if (typeof value === 'number' && value !== 0 && !(name in unitless__default.default)) {
         return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
     }
     return String(value).trim();
@@ -1349,7 +1350,7 @@ var ComponentStyle = /** @class */ (function () {
     return ComponentStyle;
 }());
 
-var ThemeContext = React__default["default"].createContext(undefined);
+var ThemeContext = React__default.default.createContext(undefined);
 var ThemeConsumer = ThemeContext.Consumer;
 function mergeTheme(theme, outerTheme) {
     if (!theme) {
@@ -1378,7 +1379,7 @@ function ThemeProvider(props) {
     if (!props.children) {
         return null;
     }
-    return React__default["default"].createElement(ThemeContext.Provider, { value: themeContext }, props.children);
+    return React__default.default.createElement(ThemeContext.Provider, { value: themeContext }, props.children);
 }
 
 var identifiers = {};
@@ -1500,7 +1501,7 @@ function createStyledComponent(target, options, rules) {
      * forwardRef creates a new interim component, which we'll take advantage of
      * instead of extending ParentComponent to create _another_ interim class
      */
-    var WrappedStyledComponent = React__default["default"].forwardRef(forwardRef);
+    var WrappedStyledComponent = React__default.default.forwardRef(forwardRef);
     WrappedStyledComponent.attrs = finalAttrs;
     WrappedStyledComponent.componentStyle = componentStyle;
     WrappedStyledComponent.displayName = displayName;
@@ -1661,10 +1662,10 @@ function createGlobalStyle(strings) {
     var GlobalStyleComponent = function (props) {
         var styleSheet = useStyleSheet();
         var stylis = useStylis();
-        var theme = React__default["default"].useContext(ThemeContext);
-        var instanceRef = React__default["default"].useRef(styleSheet.allocateGSInstance(styledComponentId));
+        var theme = React__default.default.useContext(ThemeContext);
+        var instanceRef = React__default.default.useRef(styleSheet.allocateGSInstance(styledComponentId));
         var instance = instanceRef.current;
-        if (process.env.NODE_ENV !== 'production' && React__default["default"].Children.count(props.children)) {
+        if (process.env.NODE_ENV !== 'production' && React__default.default.Children.count(props.children)) {
             // eslint-disable-next-line no-console
             console.warn("The global style component ".concat(styledComponentId, " was given child JSX. createGlobalStyle does not render children."));
         }
@@ -1679,7 +1680,7 @@ function createGlobalStyle(strings) {
         {
             // eslint-disable-next-line react-hooks/rules-of-hooks
             // @ts-expect-error still using React 17 types for the time being
-            (React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect)(function () {
+            (React__default.default.useInsertionEffect || React__default.default.useLayoutEffect)(function () {
                 if (!styleSheet.server) {
                     renderStyles(instance, props, styleSheet, theme, stylis);
                     return function () { return globalStyle.removeStyles(instance, styleSheet); };
@@ -1697,7 +1698,7 @@ function createGlobalStyle(strings) {
             globalStyle.renderStyles(instance, context, styleSheet, stylis);
         }
     }
-    return React__default["default"].memo(GlobalStyleComponent);
+    return React__default.default.memo(GlobalStyleComponent);
 }
 
 function keyframes(strings) {
@@ -1718,14 +1719,14 @@ function keyframes(strings) {
 }
 
 function withTheme(Component) {
-    var WithTheme = React__default["default"].forwardRef(function (props, ref) {
-        var theme = React__default["default"].useContext(ThemeContext);
+    var WithTheme = React__default.default.forwardRef(function (props, ref) {
+        var theme = React__default.default.useContext(ThemeContext);
         var themeProp = determineTheme(props, theme, Component.defaultProps);
         if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {
             // eslint-disable-next-line no-console
             console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"".concat(getComponentName(Component), "\""));
         }
-        return React__default["default"].createElement(Component, tslib.__assign({}, props, { theme: themeProp, ref: ref }));
+        return React__default.default.createElement(Component, tslib.__assign({}, props, { theme: themeProp, ref: ref }));
     });
     WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
     return hoistNonReactStatics(WithTheme, Component);
@@ -1770,7 +1771,7 @@ var ServerStyleSheet = /** @class */ (function () {
                 props.nonce = nonce;
             }
             // v4 returned an array for this fn, so we'll do the same for v5 for backward compat
-            return [React__default["default"].createElement("style", tslib.__assign({}, props, { key: "sc-0-0" }))];
+            return [React__default.default.createElement("style", tslib.__assign({}, props, { key: "sc-0-0" }))];
         };
         this.seal = function () {
             _this.sealed = true;
@@ -1782,7 +1783,7 @@ var ServerStyleSheet = /** @class */ (function () {
         if (this.sealed) {
             throw throwStyledComponentsError(2);
         }
-        return React__default["default"].createElement(StyleSheetManager, { sheet: this.instance }, children);
+        return React__default.default.createElement(StyleSheetManager, { sheet: this.instance }, children);
     };
     // eslint-disable-next-line consistent-return
     // @ts-expect-error alternate return types are not possible due to code transformation
@@ -1835,7 +1836,7 @@ exports.ThemeProvider = ThemeProvider;
 exports.__PRIVATE__ = __PRIVATE__;
 exports.createGlobalStyle = createGlobalStyle;
 exports.css = css;
-exports["default"] = styled;
+exports.default = styled;
 exports.isStyledComponent = isStyledComponent;
 exports.keyframes = keyframes;
 exports.styled = styled;