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

package/native/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.HTMLAttributes<Target> & React.ComponentPropsWithRef<Target> : object, object>) & {
+    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, React.HTMLAttributes<typeof import("react-native").ActivityIndicator> & import("react-native").ActivityIndicatorProps & React.RefAttributes<import("react-native").ActivityIndicator>, object>;
+    Button: Styled<"native", typeof import("react-native").Button, React.HTMLAttributes<typeof import("react-native").Button> & import("react-native").ButtonProps & React.RefAttributes<import("react-native").Button>, object>;
+    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, React.HTMLAttributes<typeof import("react-native").DatePickerIOS> & import("react-native").DatePickerIOSProps & React.RefAttributes<import("react-native").DatePickerIOS>, object>;
+    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, React.HTMLAttributes<typeof import("react-native").DrawerLayoutAndroid> & import("react-native").DrawerLayoutAndroidProps & React.RefAttributes<import("react-native").DrawerLayoutAndroid>, object>;
+    FlatList: Styled<"native", typeof import("react-native").FlatList, React.HTMLAttributes<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, React.HTMLAttributes<typeof import("react-native").Image> & import("react-native").ImageProps & React.RefAttributes<import("react-native").Image>, object>;
+    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, React.HTMLAttributes<typeof import("react-native").ImageBackground> & import("react-native").ImageBackgroundProps & React.RefAttributes<import("react-native").ImageBackground>, object>;
+    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, React.HTMLAttributes<typeof import("react-native").KeyboardAvoidingView> & import("react-native").KeyboardAvoidingViewProps & React.RefAttributes<import("react-native").KeyboardAvoidingView>, object>;
+    Modal: Styled<"native", typeof import("react-native").Modal, React.HTMLAttributes<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>>, React.HTMLAttributes<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, React.HTMLAttributes<typeof import("react-native").ProgressBarAndroid> & import("react-native").ProgressBarAndroidProps & React.RefAttributes<import("react-native").ProgressBarAndroid>, object>;
+    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, React.HTMLAttributes<typeof import("react-native").ProgressViewIOS> & import("react-native").ProgressViewIOSProps & React.RefAttributes<import("react-native").ProgressViewIOS>, object>;
+    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, React.HTMLAttributes<typeof import("react-native").RefreshControl> & import("react-native").RefreshControlProps & React.RefAttributes<import("react-native").RefreshControl>, object>;
+    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, React.HTMLAttributes<typeof import("react-native").SafeAreaView> & import("react-native").ViewProps & React.RefAttributes<import("react-native").SafeAreaView>, object>;
+    ScrollView: Styled<"native", typeof import("react-native").ScrollView, React.HTMLAttributes<typeof import("react-native").ScrollView> & import("react-native").ScrollViewProps & React.RefAttributes<import("react-native").ScrollView>, object>;
+    SectionList: Styled<"native", typeof import("react-native").SectionList, React.HTMLAttributes<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, React.HTMLAttributes<typeof import("react-native").Slider> & import("react-native").SliderProps & React.RefAttributes<import("react-native").Slider>, object>;
+    Switch: Styled<"native", typeof import("react-native").Switch, React.HTMLAttributes<typeof import("react-native").Switch> & import("react-native").SwitchProps & React.RefAttributes<import("react-native").Switch>, object>;
+    Text: Styled<"native", typeof import("react-native").Text, React.HTMLAttributes<typeof import("react-native").Text> & import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, object>;
+    TextInput: Styled<"native", typeof import("react-native").TextInput, React.HTMLAttributes<typeof import("react-native").TextInput> & import("react-native").TextInputProps & React.RefAttributes<import("react-native").TextInput>, object>;
+    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, React.HTMLAttributes<typeof import("react-native").TouchableHighlight> & import("react-native").TouchableHighlightProps & React.RefAttributes<import("react-native").TouchableHighlight>, object>;
+    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, React.HTMLAttributes<typeof import("react-native").TouchableOpacity> & import("react-native").TouchableOpacityProps & React.RefAttributes<import("react-native").TouchableOpacity>, object>;
+    View: Styled<"native", typeof import("react-native").View, React.HTMLAttributes<typeof import("react-native").View> & import("react-native").ViewProps & React.RefAttributes<import("react-native").View>, object>;
+    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, React.HTMLAttributes<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/native/dist/styled-components.native.cjs.js

@@ -79,7 +79,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.4";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -668,8 +668,8 @@ function getComponentName(target) {
  * 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()); };
 /**
@@ -686,7 +686,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;
 }
@@ -742,21 +742,18 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
         var ruleSet = [];
         for (var i = 0, len = chunk.length, result = void 0; i < len; i += 1) {
             result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);
-            if (result === '')
+            if (result.length === 0)
                 continue;
-            else if (Array.isArray(result))
-                ruleSet.push.apply(ruleSet, result);
-            else
-                ruleSet.push(result);
+            ruleSet.push.apply(ruleSet, result);
         }
         return ruleSet;
     }
     if (isFalsish(chunk)) {
-        return '';
+        return [];
     }
     /* Handle other components */
     if (isStyledComponent(chunk)) {
-        return ".".concat(chunk.styledComponentId);
+        return [".".concat(chunk.styledComponentId)];
     }
     /* Either execute or defer the function */
     if (isFunction(chunk)) {
@@ -773,19 +770,21 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
             }
             return flatten(result, executionContext, styleSheet, stylisInstance);
         }
-        else
-            return chunk;
+        else {
+            return [chunk];
+        }
     }
     if (chunk instanceof Keyframes) {
         if (styleSheet) {
             chunk.inject(styleSheet, stylisInstance);
-            return chunk.getName(stylisInstance);
+            return [chunk.getName(stylisInstance)];
+        }
+        else {
+            return [chunk];
         }
-        else
-            return chunk;
     }
     /* Handle objects */
-    return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
+    return isPlainObject(chunk) ? objToCssArray(chunk) : [chunk.toString()];
 }
 
 function interleave(strings, interpolations) {
@@ -801,11 +800,7 @@ function interleave(strings, interpolations) {
  * expand an array of styles.
  */
 var addTag = function (arg) {
-    if (Array.isArray(arg)) {
-        // eslint-disable-next-line no-param-reassign
-        arg.isCss = true;
-    }
-    return arg;
+    return Object.assign(arg, { isCss: true });
 };
 function css(styles) {
     var interpolations = [];
@@ -822,7 +817,7 @@ function css(styles) {
     if (interpolations.length === 0 &&
         styleStringArray.length === 1 &&
         typeof styleStringArray[0] === 'string') {
-        return styleStringArray;
+        return flatten(styleStringArray);
     }
     return addTag(flatten(interleave(styleStringArray, interpolations)));
 }
@@ -1109,7 +1104,6 @@ function mixinRecursively(target, source, forceMerge) {
  * Source objects applied left to right.  Mutates & returns target.  Similar to lodash merge.
  */
 function mixinDeep(target) {
-    if (target === void 0) { target = {}; }
     var sources = [];
     for (var _i = 1; _i < arguments.length; _i++) {
         sources[_i - 1] = arguments[_i];
@@ -1129,7 +1123,6 @@ function useResolvedAttrs(theme, props, attrs) {
     var context = tslib.__assign(tslib.__assign({}, props), { theme: theme });
     var resolvedAttrs = {};
     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 */
@@ -1150,7 +1143,7 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
     var _a = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs), context = _a[0], attrs = _a[1];
     var generatedStyles = inlineStyle.generateStyleObject(context);
     var refToForward = forwardedRef;
-    var elementToBeCreated = attrs.$as || props.$as || attrs.as || props.as || target;
+    var elementToBeCreated = attrs.as || props.as || target;
     var computedProps = attrs !== props ? tslib.__assign(tslib.__assign({}, props), attrs) : props;
     var propsForElement = {};
     // eslint-disable-next-line guard-for-in
@@ -1165,17 +1158,11 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
         }
     }
     propsForElement.style = React.useMemo(function () {
-        if (typeof props.style === 'function') {
-            return function (state) {
-                return [generatedStyles].concat(props.style(state));
-            };
-        }
-        else if (props.style == null) {
-            return generatedStyles;
-        }
-        else {
-            return [generatedStyles].concat(props.style || []);
-        }
+        return typeof props.style === 'function'
+            ? function (state) { return [generatedStyles].concat(props.style(state)); }
+            : props.style
+                ? [generatedStyles].concat(props.style)
+                : generatedStyles;
     }, [props.style, generatedStyles]);
     propsForElement.ref = refToForward;
     return React.createElement(elementToBeCreated, propsForElement);