styled-components 6.0.0-beta.9 → 6.0.0-rc.0

package/native/dist/models/ComponentStyle.d.ts

@@ -8,7 +8,6 @@ export default class ComponentStyle {
     baseStyle: ComponentStyle | null | undefined;
     componentId: string;
     isStatic: boolean;
-    names: string[];
     rules: RuleSet<any>;
     staticRulesId: string;
     constructor(rules: RuleSet<any>, componentId: string, baseStyle?: ComponentStyle);

package/native/dist/models/StyleSheetManager.d.ts

@@ -1,17 +1,20 @@
 import React from 'react';
 import StyleSheet from '../sheet';
-import { Stringifier } from '../types';
-export declare type IStyleSheetContext = StyleSheet | void;
+import { ShouldForwardProp, Stringifier } from '../types';
+export declare const mainSheet: StyleSheet;
+export declare const mainStylis: Stringifier;
+export type IStyleSheetContext = {
+    shouldForwardProp?: ShouldForwardProp<'web'>;
+    styleSheet: StyleSheet;
+    stylis: Stringifier;
+};
 export declare const StyleSheetContext: React.Context<IStyleSheetContext>;
 export declare const StyleSheetConsumer: React.Consumer<IStyleSheetContext>;
-export declare type IStylisContext = Stringifier | void;
+export type IStylisContext = Stringifier | void;
 export declare const StylisContext: React.Context<IStylisContext>;
 export declare const StylisConsumer: React.Consumer<IStylisContext>;
-export declare const mainSheet: StyleSheet;
-export declare const mainStylis: Stringifier;
-export declare function useStyleSheet(): StyleSheet;
-export declare function useStylis(): Stringifier;
-export declare type IStyleSheetManager = React.PropsWithChildren<{
+export declare function useStyleSheetContext(): IStyleSheetContext;
+export type IStyleSheetManager = React.PropsWithChildren<{
     /**
      * If desired, you can pass this prop to disable "speedy" insertion mode, which
      * uses the browser [CSSOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet).
@@ -22,7 +25,7 @@ export declare type IStyleSheetManager = React.PropsWithChildren<{
      * If you are working exclusively with modern browsers, vendor prefixes can often be omitted
      * to reduce the weight of CSS on the page.
      */
-    disableVendorPrefixes?: boolean;
+    enableVendorPrefixes?: boolean;
     /**
      * Provide an optional selector to be prepended to all generated style rules.
      */
@@ -31,6 +34,21 @@ export declare type IStyleSheetManager = React.PropsWithChildren<{
      * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.
      */
     sheet?: StyleSheet;
+    /**
+     * Starting in v6, styled-components no longer does its own prop validation
+     * and recommends use of transient props "$prop" to pass style-only props to
+     * components. If for some reason you are not able to use transient props, a
+     * prop validation function can be provided via `StyleSheetManager`, such as
+     * `@emotion/is-prop-valid`.
+     *
+     * When the return value is `true`, props will be forwarded to the DOM/underlying
+     * component. If return value is `false`, the prop will be discarded after styles
+     * are calculated.
+     *
+     * Manually composing `styled.{element}.withConfig({shouldForwardProp})` will
+     * override this default.
+     */
+    shouldForwardProp?: IStyleSheetContext['shouldForwardProp'];
     /**
      * An array of plugins to be run by stylis (style processor) during compilation.
      * Check out [what's available on npm*](https://www.npmjs.com/search?q=keywords%3Astylis).

package/native/dist/models/ThemeProvider.d.ts

@@ -24,14 +24,15 @@ import React from 'react';
 export interface DefaultTheme {
     [key: string]: any;
 }
-declare type ThemeFn = (outerTheme?: DefaultTheme) => DefaultTheme;
-declare type ThemeArgument = DefaultTheme | ThemeFn;
-declare type Props = {
+type ThemeFn = (outerTheme?: DefaultTheme) => DefaultTheme;
+type ThemeArgument = DefaultTheme | ThemeFn;
+type Props = {
     children?: React.ReactNode;
     theme: ThemeArgument;
 };
 export declare const ThemeContext: React.Context<DefaultTheme | undefined>;
 export declare const ThemeConsumer: React.Consumer<DefaultTheme | undefined>;
+export declare function useTheme(): DefaultTheme | undefined;
 /**
  * Provide a theme to an entire react component tree via context
  */

package/native/dist/native/index.d.ts

@@ -2,35 +2,34 @@ import React from 'react';
 import { Styled } from '../constructors/constructWithOptions';
 import css from '../constructors/css';
 import withTheme from '../hoc/withTheme';
-import useTheme from '../hooks/useTheme';
-import ThemeProvider, { ThemeConsumer, ThemeContext } from '../models/ThemeProvider';
+import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from '../models/ThemeProvider';
 import { NativeTarget } from '../types';
 import isStyledComponent from '../utils/isStyledComponent';
 declare const styled: (<Target extends NativeTarget>(tag: Target) => Styled<"native", Target, Target extends import("../types").KnownTarget ? React.ComponentPropsWithRef<Target> : object, object, object>) & {
-    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, object, object, object>;
-    Button: Styled<"native", typeof import("react-native").Button, object, object, object>;
-    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, object, object, object>;
-    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, object, object, object>;
-    FlatList: Styled<"native", typeof import("react-native").FlatList, object, object, object>;
-    Image: Styled<"native", typeof import("react-native").Image, object, object, object>;
-    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, object, object, object>;
-    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, object, object, object>;
-    Modal: Styled<"native", typeof import("react-native").Modal, object, object, object>;
-    Pressable: Styled<"native", import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, object, object, object>;
-    ProgressBarAndroid: Styled<"native", typeof import("react-native").ProgressBarAndroid, object, object, object>;
-    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, object, object, object>;
-    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, object, object, object>;
-    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, object, object, object>;
-    ScrollView: Styled<"native", typeof import("react-native").ScrollView, object, object, object>;
-    SectionList: Styled<"native", typeof import("react-native").SectionList, object, object, object>;
-    Slider: Styled<"native", typeof import("react-native").Slider, object, object, object>;
-    Switch: Styled<"native", typeof import("react-native").Switch, object, object, object>;
-    Text: Styled<"native", typeof import("react-native").Text, object, object, object>;
-    TextInput: Styled<"native", typeof import("react-native").TextInput, object, object, object>;
-    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, object, object, object>;
-    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, object, object, object>;
-    View: Styled<"native", typeof import("react-native").View, object, object, object>;
-    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, object, object, object>;
+    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, import("react-native").ActivityIndicatorProps, object, object>;
+    Button: Styled<"native", typeof import("react-native").Button, import("react-native").ButtonProps, object, object>;
+    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, import("react-native").DatePickerIOSProps, object, object>;
+    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, import("react-native").DrawerLayoutAndroidProps, object, object>;
+    FlatList: Styled<"native", typeof import("react-native").FlatList, import("react-native").FlatListProps<unknown>, object, object>;
+    Image: Styled<"native", typeof import("react-native").Image, import("react-native").ImageProps, object, object>;
+    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, import("react-native").ImageBackgroundProps, object, object>;
+    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, import("react-native").KeyboardAvoidingViewProps, object, 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, object, 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, object>;
+    ProgressBarAndroid: Styled<"native", typeof import("react-native").ProgressBarAndroid, import("react-native").ProgressBarAndroidProps, object, object>;
+    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, import("react-native").ProgressViewIOSProps, object, object>;
+    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, import("react-native").RefreshControlProps, object, object>;
+    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, import("react-native").ViewProps, object, object>;
+    ScrollView: Styled<"native", typeof import("react-native").ScrollView, import("react-native").ScrollViewProps, object, object>;
+    SectionList: Styled<"native", typeof import("react-native").SectionList, import("react-native").SectionListProps<unknown, unknown>, object, object>;
+    Slider: Styled<"native", typeof import("react-native").Slider, import("react-native").SliderProps, object, object>;
+    Switch: Styled<"native", typeof import("react-native").Switch, import("react-native").SwitchProps, object, object>;
+    Text: Styled<"native", typeof import("react-native").Text, import("react-native").TextProps, object, object>;
+    TextInput: Styled<"native", typeof import("react-native").TextInput, import("react-native").TextInputProps, object, object>;
+    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, import("react-native").TouchableHighlightProps, object, object>;
+    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, import("react-native").TouchableOpacityProps, object, object>;
+    View: Styled<"native", typeof import("react-native").View, import("react-native").ViewProps, object, object>;
+    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, import("react-native").VirtualizedListProps<unknown>, object, object>;
 };
 export { DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, NativeTarget, PolymorphicComponent, PolymorphicComponentProps, Runtime, StyledObject, StyledOptions, } from '../types';
 export { css, isStyledComponent, ThemeProvider, ThemeConsumer, ThemeContext, withTheme, useTheme };

package/native/dist/sheet/GroupedTag.d.ts

@@ -5,7 +5,7 @@ export declare const makeGroupedTag: (tag: Tag) => {
     length: number;
     tag: Tag;
     indexOfGroup(group: number): number;
-    insertRules(group: number, rules: string | string[]): void;
+    insertRules(group: number, rules: string[]): void;
     clearGroup(group: number): void;
     getGroup(group: number): string;
 };

package/native/dist/sheet/Sheet.d.ts

@@ -1,13 +1,13 @@
 import { GroupedTag, Sheet, SheetOptions } from './types';
-declare type SheetConstructorArgs = {
+type SheetConstructorArgs = {
     isServer?: boolean;
     useCSSOMInjection?: boolean;
     target?: HTMLElement;
 };
-declare type GlobalStylesAllocationMap = {
+type GlobalStylesAllocationMap = {
     [key: string]: number;
 };
-declare type NamesAllocationMap = Map<string, Set<string>>;
+type NamesAllocationMap = Map<string, Set<string>>;
 /** Contains the main stylesheet logic for stringification and caching */
 export default class StyleSheet implements Sheet {
     gs: GlobalStylesAllocationMap;

package/native/dist/sheet/types.d.ts

@@ -14,7 +14,7 @@ export interface GroupedTag {
     length: number;
     tag: Tag;
 }
-export declare type SheetOptions = {
+export type SheetOptions = {
     isServer: boolean;
     target?: HTMLElement;
     useCSSOMInjection: boolean;