styled-components 5.3.9 → 5.3.11

package/native/dist/base.d.ts

@@ -3,11 +3,10 @@ import createGlobalStyle from './constructors/createGlobalStyle';
 import css from './constructors/css';
 import keyframes from './constructors/keyframes';
 import withTheme from './hoc/withTheme';
-import useTheme from './hooks/useTheme';
 import ServerStyleSheet from './models/ServerStyleSheet';
 import { IStyleSheetContext, IStyleSheetManager, IStylisContext, StyleSheetConsumer, StyleSheetContext, StyleSheetManager } from './models/StyleSheetManager';
-import ThemeProvider, { ThemeConsumer, ThemeContext } from './models/ThemeProvider';
+import ThemeProvider, { ThemeConsumer, ThemeContext, useTheme } from './models/ThemeProvider';
 import isStyledComponent from './utils/isStyledComponent';
 export * from './secretInternals';
-export { AttrsArg as Attrs, DefaultTheme, ShouldForwardProp } from './types';
+export { Attrs, DefaultTheme, ShouldForwardProp } from './types';
 export { createGlobalStyle, css, isStyledComponent, IStyleSheetManager, IStyleSheetContext, IStylisContext, keyframes, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, useTheme, SC_VERSION as version, withTheme, };

package/native/dist/constructors/constructWithOptions.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Attrs, AttrsArg, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, Runtime, StyledOptions, StyledTarget, Styles } from '../types';
+import { Attrs, DataAttributes, ExecutionContext, ExecutionProps, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, NoInfer, Runtime, StyledOptions, StyledTarget, Styles, SubsetOnly } from '../types';
 /**
  * for types a and b, if b shares a field with a, mark a's field as optional
  */
@@ -15,10 +15,25 @@ type ExtractAttrsTarget<R extends Runtime, P extends ExecutionProps, DefaultTarg
  * with the passed attr type to capture any intended overrides.
  */
 type PropsSatisfiedByAttrs<T extends Attrs, Props extends object, Result extends ExecutionProps = AttrsResult<T>> = Omit<Props, keyof Result> & OptionalIntersection<Props, Result> & Partial<Omit<Result, keyof Props | 'as'>>;
+/**
+ * Rejects an attr factory function argument (T) if it returns any properties not defined in Props.
+ */
+type StrictAttrFactory<T, Props> = T extends ((props: ExecutionContext & Props) => infer TResult) ? TResult extends SubsetOnly<TResult, (Partial<Props> & ExecutionProps & DataAttributes & React.AriaAttributes)> ? (props: ExecutionContext & Props) => TResult : never : never;
 export interface Styled<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = object, OuterStatics extends object = object, RuntimeInjectedProps extends ExecutionProps = object> {
-    <Props extends object = object, Statics extends object = object>(initialStyles: Styles<OuterProps & RuntimeInjectedProps & Props>, ...interpolations: Interpolation<OuterProps & RuntimeInjectedProps & Props>[]): // @ts-expect-error KnownTarget is a subset of StyledTarget<R>
+    <Props extends object = object, Statics extends object = object>(initialStyles: Styles<OuterProps & RuntimeInjectedProps & NoInfer<Props>>, ...interpolations: Interpolation<OuterProps & RuntimeInjectedProps & NoInfer<Props>>[]): // @ts-expect-error KnownTarget is a subset of StyledTarget<R>
     IStyledComponent<R, ExtractAttrsTarget<R, RuntimeInjectedProps, Target>, OuterProps & Props> & OuterStatics & Statics;
-    attrs: <T extends Attrs, TResult extends ExecutionProps = AttrsResult<T>, TTarget extends StyledTarget<R> = ExtractAttrsTarget<R, TResult, Target>>(attrs: AttrsArg<T extends (...args: any) => infer P ? OuterProps & P : OuterProps & T>) => Styled<R, TTarget, PropsSatisfiedByAttrs<T, OuterProps>, OuterStatics, Omit<RuntimeInjectedProps, keyof TResult> & TResult>;
+    /**
+     * This is a chainable method that attaches some props to a styled component.
+     * @param props An object containing prop values that will be merged into the rest of the component's props
+     * @argument Props Additional props being injected in `props`
+     */
+    attrs<Props extends object = object, PropValues extends Partial<OuterProps> & ExecutionProps & DataAttributes & React.AriaAttributes & NoInfer<Props> = Partial<OuterProps> & ExecutionProps & DataAttributes & React.AriaAttributes & NoInfer<Props>>(props: PropValues & SubsetOnly<PropValues, Partial<OuterProps> & ExecutionProps & DataAttributes & React.AriaAttributes & NoInfer<Props>>): Styled<R, Target, PropsSatisfiedByAttrs<PropValues, OuterProps>, OuterStatics, Omit<RuntimeInjectedProps, keyof PropValues> & PropValues>;
+    /**
+     * This is a chainable method that attaches some props to a styled component.
+     * @param propFactory A function that receives the props that are passed into the component and computes a value, that is then going to be merged into the existing component props.
+     * @argument Props Additional props being returned by `propFactory`
+     */
+    attrs<Props extends object = object, Factory extends ((...args: any[]) => any) = (...args: any[]) => any, TTarget extends StyledTarget<R> = ExtractAttrsTarget<R, AttrsResult<Factory>, Target>>(propFactory: Factory & StrictAttrFactory<Factory, OuterProps & NoInfer<Props>>): Styled<R, TTarget, PropsSatisfiedByAttrs<Factory, OuterProps>, OuterStatics, Omit<RuntimeInjectedProps, keyof AttrsResult<Factory>> & AttrsResult<Factory>>;
     withConfig: (config: StyledOptions<R, OuterProps>) => Styled<R, Target, OuterProps, OuterStatics>;
 }
 export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.ComponentPropsWithRef<Target> : object, OuterStatics extends object = object>(componentConstructor: IStyledComponentFactory<R, Target, OuterProps, OuterStatics>, tag: Target, options?: StyledOptions<R, OuterProps>): Styled<R, Target, OuterProps, OuterStatics>;

package/native/dist/index.d.ts

@@ -1,4 +1,4 @@
 import styled from './constructors/styled';
 export * from './base';
-export { CSSProp, DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, PolymorphicComponent, PolymorphicComponentProps, Runtime, StyledObject, StyledOptions, WebTarget, } from './types';
+export { CSSProp, DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, PolymorphicComponent, PolymorphicComponentProps, RuleSet, Runtime, StyledObject, StyledOptions, WebTarget, } from './types';
 export { styled, styled as default };

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,20 +1,19 @@
 import React from 'react';
 import StyleSheet from '../sheet';
 import { ShouldForwardProp, Stringifier } from '../types';
+export declare const mainSheet: StyleSheet;
+export declare const mainStylis: Stringifier;
 export type IStyleSheetContext = {
     shouldForwardProp?: ShouldForwardProp<'web'>;
-    styleSheet?: StyleSheet;
+    styleSheet: StyleSheet;
+    stylis: Stringifier;
 };
 export declare const StyleSheetContext: React.Context<IStyleSheetContext>;
 export declare const StyleSheetConsumer: React.Consumer<IStyleSheetContext>;
 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 useShouldForwardProp(): ShouldForwardProp<"web"> | undefined;
-export declare function useStyleSheet(): StyleSheet;
-export declare function useStylis(): Stringifier;
+export declare function useStyleSheetContext(): IStyleSheetContext;
 export type IStyleSheetManager = React.PropsWithChildren<{
     /**
      * If desired, you can pass this prop to disable "speedy" insertion mode, which
@@ -26,7 +25,7 @@ export 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.
      */

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

@@ -32,6 +32,7 @@ type Props = {
 };
 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/styled-components.native.cjs.js

@@ -154,7 +154,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 var SC_ATTR = typeof process !== 'undefined' && typeof process.env !== '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 = "5.3.9";
+var SC_VERSION = "5.3.11";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean' ? SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env !== 'undefined' ? typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== '' ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== '' ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== 'production' : false); // Shared empty execution context when generating static styles
@@ -997,8 +997,8 @@ function addUnitIfNeeded(name, value) {
     return '';
   }
 
-  if (typeof value === 'number' && value !== 0 && !(name in unitless)) {
-    return value + "px"; // Presumes implicit 'px' suffix for unitless numbers
+  if (typeof value === 'number' && value !== 0 && !(name in unitless) && !name.startsWith('--')) {
+    return value + "px"; // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
   }
 
   return String(value).trim();