styled-components 6.0.0-beta.2 → 6.0.0-beta.3

package/dist/models/StyledComponent.d.ts

@@ -1,3 +1,3 @@
 import type { IStyledComponentFactory, RuleSet, StyledOptions, WebTarget } from '../types';
-declare function createStyledComponent<Target extends WebTarget, OuterProps = unknown, Statics = unknown>(target: Target, options: StyledOptions<'web', OuterProps>, rules: RuleSet<OuterProps>): ReturnType<IStyledComponentFactory<'web', Target, OuterProps, Statics>>;
+declare function createStyledComponent<Target extends WebTarget, OuterProps extends object, Statics extends object = object>(target: Target, options: StyledOptions<'web', OuterProps>, rules: RuleSet<OuterProps>): ReturnType<IStyledComponentFactory<'web', Target, OuterProps, Statics>>;
 export default createStyledComponent;

package/dist/models/StyledNativeComponent.d.ts

@@ -1,3 +1,3 @@
-import type { ExtensibleObject, IInlineStyleConstructor, IStyledComponent, IStyledComponentFactory, NativeTarget, RuleSet, StyledOptions } from '../types';
-declare const _default: (InlineStyle: IInlineStyleConstructor<any>) => <Target extends NativeTarget, OuterProps extends ExtensibleObject, Statics = unknown>(target: Target, options: StyledOptions<"native", OuterProps>, rules: RuleSet<OuterProps>) => IStyledComponent<"native", Target, OuterProps> & Statics;
+import type { ExecutionProps, IInlineStyleConstructor, IStyledComponent, IStyledComponentFactory, NativeTarget, RuleSet, StyledOptions } from '../types';
+declare const _default: (InlineStyle: IInlineStyleConstructor<any>) => <Target extends NativeTarget, OuterProps extends ExecutionProps, Statics extends object = object>(target: Target, options: StyledOptions<"native", OuterProps>, rules: RuleSet<OuterProps>) => IStyledComponent<"native", Target, OuterProps & object> & Statics & object;
 export default _default;

package/dist/native/index.d.ts

@@ -6,35 +6,31 @@ import useTheme from '../hooks/useTheme';
 import ThemeProvider, { ThemeConsumer, ThemeContext } from '../models/ThemeProvider';
 import { NativeTarget } from '../types';
 import isStyledComponent from '../utils/isStyledComponent';
-declare const styled: (<Target extends NativeTarget>(tag: Target) => {
-    <Props = unknown, Statics = unknown>(initialStyles: import("../types").Styles<(Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown) & Props>, ...interpolations: import("../types").Interpolation<import("../types").ExecutionContext & (Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown) & Props>[]): import("../types").IStyledComponent<"native", Target, (Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown) & Props> & Statics;
-    attrs(attrs: import("../types").Attrs<import("../types").ExtensibleObject & (Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown)>): any;
-    withConfig(config: import("../types").StyledOptions<"native", Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown>): any;
-}) & {
-    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, import("react-native").ActivityIndicatorProps, unknown, unknown>;
-    Button: Styled<"native", typeof import("react-native").Button, import("react-native").ButtonProps, unknown, unknown>;
-    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, import("react-native").DatePickerIOSProps, unknown, unknown>;
-    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, import("react-native").DrawerLayoutAndroidProps, unknown, unknown>;
-    FlatList: Styled<"native", typeof import("react-native").FlatList, import("react-native").FlatListProps<unknown>, unknown, unknown>;
-    Image: Styled<"native", typeof import("react-native").Image, import("react-native").ImageProps, unknown, unknown>;
-    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, import("react-native").ImageBackgroundProps, unknown, unknown>;
-    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, import("react-native").KeyboardAvoidingViewProps, unknown, unknown>;
-    Modal: Styled<"native", typeof import("react-native").Modal, import("react-native").ModalProps, unknown, unknown>;
-    Pressable: Styled<"native", import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>, unknown, unknown>;
-    ProgressBarAndroid: Styled<"native", typeof import("react-native").ProgressBarAndroid, import("react-native").ProgressBarAndroidProps, unknown, unknown>;
-    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, import("react-native").ProgressViewIOSProps, unknown, unknown>;
-    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, import("react-native").RefreshControlProps, unknown, unknown>;
-    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, import("react-native").ViewProps, unknown, unknown>;
-    ScrollView: Styled<"native", typeof import("react-native").ScrollView, import("react-native").ScrollViewProps, unknown, unknown>;
-    SectionList: Styled<"native", typeof import("react-native").SectionList, import("react-native").SectionListProps<unknown, unknown>, unknown, unknown>;
-    Slider: Styled<"native", typeof import("react-native").Slider, import("react-native").SliderProps, unknown, unknown>;
-    Switch: Styled<"native", typeof import("react-native").Switch, import("react-native").SwitchProps, unknown, unknown>;
-    Text: Styled<"native", typeof import("react-native").Text, import("react-native").TextProps, unknown, unknown>;
-    TextInput: Styled<"native", typeof import("react-native").TextInput, import("react-native").TextInputProps, unknown, unknown>;
-    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, import("react-native").TouchableHighlightProps, unknown, unknown>;
-    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, import("react-native").TouchableOpacityProps, unknown, unknown>;
-    View: Styled<"native", typeof import("react-native").View, import("react-native").ViewProps, unknown, unknown>;
-    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, import("react-native").VirtualizedListProps<unknown>, unknown, unknown>;
+declare const styled: (<Target extends NativeTarget>(tag: Target) => Styled<"native", Target, Target extends import("../types").KnownTarget ? React.ComponentPropsWithRef<Target> : object, object>) & {
+    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, import("react-native").ActivityIndicatorProps & React.RefAttributes<import("react-native").ActivityIndicator>, object>;
+    Button: Styled<"native", typeof import("react-native").Button, import("react-native").ButtonProps & React.RefAttributes<import("react-native").Button>, object>;
+    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, import("react-native").DatePickerIOSProps & React.RefAttributes<import("react-native").DatePickerIOS>, object>;
+    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, import("react-native").DrawerLayoutAndroidProps & React.RefAttributes<import("react-native").DrawerLayoutAndroid>, object>;
+    FlatList: Styled<"native", typeof import("react-native").FlatList, import("react-native").FlatListProps<unknown> & React.RefAttributes<import("react-native").FlatList<unknown>>, object>;
+    Image: Styled<"native", typeof import("react-native").Image, import("react-native").ImageProps & React.RefAttributes<import("react-native").Image>, object>;
+    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, import("react-native").ImageBackgroundProps & React.RefAttributes<import("react-native").ImageBackground>, object>;
+    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, import("react-native").KeyboardAvoidingViewProps & React.RefAttributes<import("react-native").KeyboardAvoidingView>, object>;
+    Modal: Styled<"native", typeof import("react-native").Modal, import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & React.RefAttributes<import("react-native").Modal>, object>;
+    Pressable: Styled<"native", import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>, object>;
+    ProgressBarAndroid: Styled<"native", typeof import("react-native").ProgressBarAndroid, import("react-native").ProgressBarAndroidProps & React.RefAttributes<import("react-native").ProgressBarAndroid>, object>;
+    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, import("react-native").ProgressViewIOSProps & React.RefAttributes<import("react-native").ProgressViewIOS>, object>;
+    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, import("react-native").RefreshControlProps & React.RefAttributes<import("react-native").RefreshControl>, object>;
+    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, import("react-native").ViewProps & React.RefAttributes<import("react-native").SafeAreaView>, object>;
+    ScrollView: Styled<"native", typeof import("react-native").ScrollView, import("react-native").ScrollViewProps & React.RefAttributes<import("react-native").ScrollView>, object>;
+    SectionList: Styled<"native", typeof import("react-native").SectionList, import("react-native").SectionListProps<unknown, unknown> & React.RefAttributes<import("react-native").SectionList<unknown, unknown>>, object>;
+    Slider: Styled<"native", typeof import("react-native").Slider, import("react-native").SliderProps & React.RefAttributes<import("react-native").Slider>, object>;
+    Switch: Styled<"native", typeof import("react-native").Switch, import("react-native").SwitchProps & React.RefAttributes<import("react-native").Switch>, object>;
+    Text: Styled<"native", typeof import("react-native").Text, import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, object>;
+    TextInput: Styled<"native", typeof import("react-native").TextInput, import("react-native").TextInputProps & React.RefAttributes<import("react-native").TextInput>, object>;
+    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, import("react-native").TouchableHighlightProps & React.RefAttributes<import("react-native").TouchableHighlight>, object>;
+    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, import("react-native").TouchableOpacityProps & React.RefAttributes<import("react-native").TouchableOpacity>, object>;
+    View: Styled<"native", typeof import("react-native").View, import("react-native").ViewProps & React.RefAttributes<import("react-native").View>, object>;
+    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, import("react-native").VirtualizedListProps<unknown> & React.RefAttributes<import("react-native").VirtualizedList<unknown>>, object>;
 };
 export { IStyledComponent, IStyledComponentFactory, IStyledStatics, NativeTarget, StyledOptions, } from '../types';
 export { css, isStyledComponent, ThemeProvider, ThemeConsumer, ThemeContext, withTheme, useTheme };

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

@@ -18,7 +18,7 @@ var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR
     'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "6.0.0-beta.2";
+var SC_VERSION = "6.0.0-beta.3";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -1140,8 +1140,8 @@ function addUnitIfNeeded(name, value) {
  * inlined version of
  * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
  */
-var uppercaseCheck = /([A-Z])/;
-var uppercasePattern = /([A-Z])/g;
+var uppercaseCheck = /[A-Z]/;
+var uppercasePattern = /[A-Z]/g;
 var msPattern = /^ms-/;
 var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase()); };
 /**
@@ -1158,7 +1158,7 @@ var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase())
  * is converted to `-ms-`.
  */
 function hyphenateStyleName(string) {
-    return uppercaseCheck.test(string)
+    return uppercaseCheck.test(string) && !string.startsWith('--')
         ? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-')
         : string;
 }
@@ -1248,8 +1248,7 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
 function isStaticRules(rules) {
     for (var i = 0; i < rules.length; i += 1) {
         var rule = rules[i];
-        if (isFunction(rule) &&
-            !isStyledComponent(rule)) {
+        if (isFunction(rule) && !isStyledComponent(rule)) {
             // functions are allowed to be static if they're just being
             // used to get the classname of a nested styled component
             return false;
@@ -1383,35 +1382,10 @@ function generateId(displayName, parentComponentId) {
     SC_VERSION + name + identifiers[name]));
     return parentComponentId ? "".concat(parentComponentId, "-").concat(componentId) : componentId;
 }
-function useResolvedAttrs(theme, props, attrs) {
-    if (theme === void 0) { theme = EMPTY_OBJECT; }
-    // NOTE: can't memoize this
-    // returns [context, resolvedAttrs]
-    // where resolvedAttrs is only the things injected by the attrs themselves
-    var context = tslib.__assign(tslib.__assign({}, props), { theme: theme });
-    attrs.forEach(function (attrDef) {
-        // @ts-expect-error narrowing isn't working properly for some reason
-        var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(context) : attrDef;
-        var key;
-        /* eslint-disable guard-for-in */
-        for (key in resolvedAttrDef) {
-            // @ts-expect-error bad types
-            context[key] =
-                key === 'className'
-                    ? joinStrings(context[key], resolvedAttrDef[key])
-                    : key === 'style'
-                        ? tslib.__assign(tslib.__assign({}, context[key]), resolvedAttrDef[key]) : resolvedAttrDef[key];
-        }
-        /* eslint-enable guard-for-in */
-    });
-    return context;
-}
 function useInjectedStyle(componentStyle, isStatic, resolvedAttrs, warnTooManyClasses) {
     var styleSheet = useStyleSheet();
     var stylis = useStylis();
-    var className = isStatic
-        ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)
-        : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);
+    var className = componentStyle.generateAndInjectStyles(isStatic ? EMPTY_OBJECT : resolvedAttrs, styleSheet, stylis);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     if (process.env.NODE_ENV !== 'production')
         React.useDebugValue(className);
@@ -1428,36 +1402,56 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStati
     // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
     // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it
     // should be an immutable value, but behave for now.
-    var theme = determineTheme(props, React.useContext(ThemeContext), defaultProps);
-    var context = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);
+    var theme = determineTheme(props, React.useContext(ThemeContext), defaultProps) || EMPTY_OBJECT;
+    var context = componentAttrs.reduce(function (p, attrDef) {
+        var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(p) : attrDef;
+        var key;
+        /* eslint-disable guard-for-in */
+        for (key in resolvedAttrDef) {
+            // @ts-expect-error bad types
+            p[key] =
+                key === 'className'
+                    ? // @ts-expect-error bad types
+                        joinStrings(p[key], resolvedAttrDef[key])
+                    : key === 'style'
+                        ? // @ts-expect-error bad types
+                         tslib.__assign(tslib.__assign({}, p[key]), resolvedAttrDef[key]) : // @ts-expect-error bad types
+                        resolvedAttrDef[key];
+        }
+        /* eslint-enable guard-for-in */
+        return p;
+    }, tslib.__assign(tslib.__assign({}, props), { theme: theme }));
     var generatedClassName = useInjectedStyle(componentStyle, isStatic, context, process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined);
     var refToForward = forwardedRef;
-    var elementToBeCreated = context.$as || context.as || target;
+    var elementToBeCreated = context.as || target;
     var isTargetTag = isTag(elementToBeCreated);
-    var propsForElement = {};
     // eslint-disable-next-line guard-for-in
     for (var key in context) {
+        // @ts-expect-error type narrowing not working properly
         if (key[0] === '$' || key === 'as' || key === 'theme')
-            continue;
+            context[key] = undefined;
         else if (key === 'forwardedAs') {
-            propsForElement.as = context[key];
+            context.as = context[key];
+            context[key] = undefined;
         }
-        else if (shouldForwardProp ? shouldForwardProp(key, elementToBeCreated) : true) {
+        else if (shouldForwardProp ? !shouldForwardProp(key, elementToBeCreated) : false) {
             // Don't pass through non HTML tags through to HTML elements
-            propsForElement[key] = context[key];
+            // @ts-expect-error we don't know ahead of time
+            context[key] = undefined;
         }
     }
-    propsForElement[
+    context[
     // handle custom elements which React doesn't properly alias
     isTargetTag &&
         domElements.indexOf(elementToBeCreated) === -1
         ? 'class'
         : 'className'] = foldedComponentIds
-        .concat(styledComponentId, (generatedClassName !== styledComponentId ? generatedClassName : null), context.className)
+        .concat(styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : '', context.className || '')
         .filter(Boolean)
         .join(' ');
-    propsForElement.ref = refToForward;
-    return React.createElement(elementToBeCreated, propsForElement);
+    // @ts-expect-error idk the type is probably wrong in this file
+    context.ref = refToForward;
+    return React.createElement(elementToBeCreated, context);
 }
 function createStyledComponent(target, options, rules) {
     var isTargetStyledComp = isStyledComponent(target);