New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
@emotion/native
Advanced tools
@emotion/native - npm Package Compare versions
| export * from '../types' | ||
| export { default } from '../types' |
| // Definitions by: Pat Sissons <https://github.com/patsissons> | ||
| // TypeScript Version: 3.4 | ||
| import { Theme } from '@emotion/react' | ||
| import * as RN from 'react-native' | ||
| type ReactNative = typeof RN | ||
| export type ReactNativeStyle = RN.ViewStyle | RN.TextStyle | RN.ImageStyle | ||
| export type ReactNativeStyleType<Props> = Props extends { | ||
| style?: RN.StyleProp<infer StyleType> | ||
| } | ||
| ? StyleType extends ReactNativeStyle | ||
| ? StyleType | ||
| : ReactNativeStyle | ||
| : ReactNativeStyle | ||
| export type InterpolationPrimitive< | ||
| StyleType extends ReactNativeStyle = ReactNativeStyle | ||
| > = | ||
| | null | ||
| | undefined | ||
| | boolean | ||
| | number | ||
| | string | ||
| | ObjectInterpolation<StyleType> | ||
| export type ObjectInterpolation< | ||
| StyleType extends ReactNativeStyle = ReactNativeStyle | ||
| > = StyleType | ||
| export interface ArrayCSSInterpolation< | ||
| StyleType extends ReactNativeStyle = ReactNativeStyle | ||
| > extends Array<CSSInterpolation<StyleType>> {} | ||
| export type CSSInterpolation< | ||
| StyleType extends ReactNativeStyle = ReactNativeStyle | ||
| > = InterpolationPrimitive<StyleType> | ArrayCSSInterpolation<StyleType> | ||
| export interface ArrayInterpolation< | ||
| MergedProps, | ||
| StyleType extends ReactNativeStyle = ReactNativeStyle | ||
| > extends Array<Interpolation<MergedProps, StyleType>> {} | ||
| export interface FunctionInterpolation< | ||
| MergedProps, | ||
| StyleType extends ReactNativeStyle = ReactNativeStyle | ||
| > { | ||
| (mergedProps: MergedProps): Interpolation<MergedProps, StyleType> | ||
| } | ||
| export type Interpolation< | ||
| MergedProps = unknown, | ||
| StyleType extends ReactNativeStyle = ReactNativeStyle | ||
| > = | ||
| | InterpolationPrimitive<StyleType> | ||
| | ArrayInterpolation<MergedProps, StyleType> | ||
| | FunctionInterpolation<MergedProps, StyleType> | ||
| /** Same as StyledOptions but shouldForwardProp must be a type guard */ | ||
| export interface FilteringStyledOptions< | ||
| Props = Record<string, any>, | ||
| ForwardedProps extends keyof Props & string = keyof Props & string | ||
| > { | ||
| shouldForwardProp?: (propName: string) => propName is ForwardedProps | ||
| } | ||
| export interface StyledOptions<Props = Record<string, any>> { | ||
| shouldForwardProp?: (propName: string) => boolean | ||
| } | ||
| /** | ||
| * @typeparam ComponentProps Props which will be included when withComponent is called | ||
| * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called | ||
| */ | ||
| export interface StyledComponent< | ||
| ComponentProps extends {}, | ||
| SpecificComponentProps extends {} = {}, | ||
| JSXProps extends {} = {} | ||
| > extends React.FC<ComponentProps & SpecificComponentProps & JSXProps> { | ||
| withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>( | ||
| component: C | ||
| ): StyledComponent< | ||
| ComponentProps & React.ComponentProps<C>, | ||
| {}, | ||
| { ref?: React.Ref<InstanceType<C>> } | ||
| > | ||
| withComponent<C extends React.ComponentType<React.ComponentProps<C>>>( | ||
| component: C | ||
| ): StyledComponent<ComponentProps & React.ComponentProps<C>> | ||
| } | ||
| /** | ||
| * @typeparam ComponentProps Props which will be included when withComponent is called | ||
| * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called | ||
| */ | ||
| export interface CreateStyledComponent< | ||
| ComponentProps extends {}, | ||
| SpecificComponentProps extends {} = {}, | ||
| JSXProps extends {} = {}, | ||
| StyleType extends ReactNativeStyle = ReactNativeStyle | ||
| > { | ||
| /** | ||
| * @typeparam AdditionalProps Additional props to add to your styled component | ||
| */ | ||
| <AdditionalProps extends {} = {}>( | ||
| ...styles: ArrayInterpolation< | ||
| ComponentProps & | ||
| SpecificComponentProps & | ||
| AdditionalProps & { theme: Theme }, | ||
| StyleType | ||
| > | ||
| ): StyledComponent< | ||
| ComponentProps & AdditionalProps, | ||
| SpecificComponentProps, | ||
| JSXProps | ||
| > | ||
| /** | ||
| * @typeparam AdditionalProps Additional props to add to your styled component | ||
| */ | ||
| <AdditionalProps extends {} = {}>( | ||
| template: TemplateStringsArray, | ||
| ...styles: ArrayInterpolation< | ||
| ComponentProps & | ||
| SpecificComponentProps & | ||
| AdditionalProps & { theme: Theme }, | ||
| StyleType | ||
| > | ||
| ): StyledComponent< | ||
| ComponentProps & AdditionalProps, | ||
| SpecificComponentProps, | ||
| JSXProps | ||
| > | ||
| } | ||
| /** | ||
| * @desc | ||
| * This function accepts a React component. | ||
| * | ||
| * @example styled(MyComponent)({ width: 100 }) | ||
| * @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width }) | ||
| * @example styled(View)({ width: 100 }) | ||
| * @example styled(View)<Props>(props => ({ width: props.width }) | ||
| */ | ||
| export interface CreateStyled { | ||
| < | ||
| C extends React.ComponentClass<React.ComponentProps<C>>, | ||
| ForwardedProps extends keyof React.ComponentProps<C> & | ||
| string = keyof React.ComponentProps<C> & string | ||
| >( | ||
| component: C, | ||
| options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> | ||
| ): CreateStyledComponent< | ||
| Pick<React.ComponentProps<C>, ForwardedProps> & { | ||
| theme?: Theme | ||
| as?: React.ElementType | ||
| }, | ||
| {}, | ||
| { ref?: React.Ref<InstanceType<C>> }, | ||
| ReactNativeStyleType<React.ComponentProps<C>> | ||
| > | ||
| <C extends React.ComponentClass<React.ComponentProps<C>>>( | ||
| component: C, | ||
| options?: StyledOptions<React.ComponentProps<C>> | ||
| ): CreateStyledComponent< | ||
| React.ComponentProps<C> & { | ||
| theme?: Theme | ||
| as?: React.ElementType | ||
| }, | ||
| {}, | ||
| { ref?: React.Ref<InstanceType<C>> }, | ||
| ReactNativeStyleType<React.ComponentProps<C>> | ||
| > | ||
| < | ||
| C extends React.ComponentType<React.ComponentProps<C>>, | ||
| ForwardedProps extends keyof React.ComponentProps<C> & | ||
| string = keyof React.ComponentProps<C> & string | ||
| >( | ||
| component: C, | ||
| options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> | ||
| ): CreateStyledComponent< | ||
| Pick<React.ComponentProps<C>, ForwardedProps> & { | ||
| theme?: Theme | ||
| as?: React.ElementType | ||
| }, | ||
| {}, | ||
| {}, | ||
| ReactNativeStyleType<React.ComponentProps<C>> | ||
| > | ||
| <C extends React.ComponentType<React.ComponentProps<C>>>( | ||
| component: C, | ||
| options?: StyledOptions<React.ComponentProps<C>> | ||
| ): CreateStyledComponent< | ||
| React.ComponentProps<C> & { theme?: Theme; as?: React.ElementType }, | ||
| {}, | ||
| {}, | ||
| ReactNativeStyleType<React.ComponentProps<C>> | ||
| > | ||
| } | ||
| export const styled: CreateStyled |
| // Definitions by: Pat Sissons <https://github.com/patsissons> | ||
| // TypeScript Version: 3.4 | ||
| import * as RN from 'react-native' | ||
| import { Theme } from '@emotion/react' | ||
| import { | ||
| CreateStyled as BaseCreateStyled, | ||
| CreateStyledComponent, | ||
| CSSInterpolation, | ||
| Interpolation, | ||
| ReactNativeStyle, | ||
| ReactNativeStyleType | ||
| } from './base' | ||
| export { | ||
| ArrayCSSInterpolation, | ||
| ArrayInterpolation, | ||
| CreateStyledComponent, | ||
| CSSInterpolation, | ||
| FilteringStyledOptions, | ||
| FunctionInterpolation, | ||
| Interpolation, | ||
| InterpolationPrimitive, | ||
| ObjectInterpolation, | ||
| ReactNativeStyle, | ||
| StyledComponent, | ||
| StyledOptions | ||
| } from './base' | ||
| type ReactNative = typeof RN | ||
| export function css<StyleType extends ReactNativeStyle = ReactNativeStyle>( | ||
| template: TemplateStringsArray, | ||
| ...args: Array<Interpolation> | ||
| ): StyleType | ||
| export function css<StyleType extends ReactNativeStyle = ReactNativeStyle>( | ||
| ...args: Array<StyleType> | ||
| ): StyleType | ||
| export function css<StyleType extends ReactNativeStyle = ReactNativeStyle>( | ||
| ...args: Array<CSSInterpolation> | ||
| ): StyleType | ||
| // those 2 are just copies of the `BaseCreateStyled` with supplied `C` type argument | ||
| type HostClassComponent<C extends React.ComponentClass<any>> = | ||
| CreateStyledComponent< | ||
| React.ComponentProps<C> & { theme?: Theme; as?: React.ElementType }, | ||
| {}, | ||
| { ref?: React.Ref<InstanceType<C>> }, | ||
| ReactNativeStyleType<React.ComponentProps<C>> | ||
| > | ||
| type HostFunctionComponent<C extends React.FunctionComponent<any>> = | ||
| CreateStyledComponent< | ||
| React.ComponentProps<C> & { theme?: Theme; as?: React.ElementType }, | ||
| {}, | ||
| {}, | ||
| ReactNativeStyleType<React.ComponentProps<C>> | ||
| > | ||
| export interface StyledComponents { | ||
| ActivityIndicator: HostClassComponent<ReactNative['ActivityIndicator']> | ||
| Button: HostClassComponent<ReactNative['Button']> | ||
| DatePickerIOS: HostClassComponent<ReactNative['DatePickerIOS']> | ||
| DrawerLayoutAndroid: HostClassComponent<ReactNative['DrawerLayoutAndroid']> | ||
| FlatList: HostClassComponent<ReactNative['FlatList']> | ||
| Image: HostClassComponent<ReactNative['Image']> | ||
| ImageBackground: HostClassComponent<ReactNative['ImageBackground']> | ||
| KeyboardAvoidingView: HostClassComponent<ReactNative['KeyboardAvoidingView']> | ||
| ListView: HostClassComponent<ReactNative['ListView']> | ||
| Modal: HostClassComponent<ReactNative['Modal']> | ||
| NavigatorIOS: HostClassComponent<ReactNative['NavigatorIOS']> | ||
| Picker: HostClassComponent<ReactNative['Picker']> | ||
| PickerIOS: HostClassComponent<ReactNative['PickerIOS']> | ||
| Pressable: HostFunctionComponent<ReactNative['Pressable']> | ||
| ProgressBarAndroid: HostClassComponent<ReactNative['ProgressBarAndroid']> | ||
| ProgressViewIOS: HostClassComponent<ReactNative['ProgressViewIOS']> | ||
| RecyclerViewBackedScrollView: HostClassComponent< | ||
| ReactNative['RecyclerViewBackedScrollView'] | ||
| > | ||
| RefreshControl: HostClassComponent<ReactNative['RefreshControl']> | ||
| SafeAreaView: HostClassComponent<ReactNative['SafeAreaView']> | ||
| ScrollView: HostClassComponent<ReactNative['ScrollView']> | ||
| SectionList: HostClassComponent<ReactNative['SectionList']> | ||
| SegmentedControlIOS: HostClassComponent<ReactNative['SegmentedControlIOS']> | ||
| Slider: HostClassComponent<ReactNative['Slider']> | ||
| SnapshotViewIOS: HostClassComponent<ReactNative['SnapshotViewIOS']> | ||
| StatusBar: HostClassComponent<ReactNative['StatusBar']> | ||
| SwipeableListView: HostClassComponent<ReactNative['SwipeableListView']> | ||
| Switch: HostClassComponent<ReactNative['Switch']> | ||
| SwitchIOS: HostClassComponent<ReactNative['SwitchIOS']> | ||
| TabBarIOS: HostClassComponent<ReactNative['TabBarIOS']> | ||
| Text: HostClassComponent<ReactNative['Text']> | ||
| TextInput: HostClassComponent<ReactNative['TextInput']> | ||
| ToolbarAndroid: HostClassComponent<ReactNative['ToolbarAndroid']> | ||
| TouchableHighlight: HostClassComponent<ReactNative['TouchableHighlight']> | ||
| TouchableNativeFeedback: HostClassComponent< | ||
| ReactNative['TouchableNativeFeedback'] | ||
| > | ||
| TouchableOpacity: HostClassComponent<ReactNative['TouchableOpacity']> | ||
| TouchableWithoutFeedback: HostClassComponent< | ||
| ReactNative['TouchableWithoutFeedback'] | ||
| > | ||
| View: HostClassComponent<ReactNative['View']> | ||
| ViewPagerAndroid: HostClassComponent<ReactNative['ViewPagerAndroid']> | ||
| } | ||
| export interface CreateStyled extends BaseCreateStyled, StyledComponents {} | ||
| declare const styled: CreateStyled | ||
| export default styled |
| export * from "./declarations/src/index"; | ||
| export { default } from "./declarations/src/index"; |
| export * from '../types' | ||
| export { default } from '../types' |
+17
-6
| { | ||
| "name": "@emotion/native", | ||
| "version": "11.9.3", | ||
| "version": "11.10.0", | ||
| "description": "Style and render React Native components using emotion", | ||
| "main": "dist/emotion-native.cjs.js", | ||
| "module": "dist/emotion-native.esm.js", | ||
| "exports": { | ||
| ".": { | ||
| "module": "./dist/emotion-native.esm.js", | ||
| "default": "./dist/emotion-native.cjs.js" | ||
| }, | ||
| "./package.json": "./package.json", | ||
| "./macro": "./macro.js" | ||
| }, | ||
| "scripts": { | ||
@@ -18,3 +26,3 @@ "test:typescript": "dtslint types" | ||
| "devDependencies": { | ||
| "@babel/core": "^7.13.10", | ||
| "@babel/core": "^7.18.5", | ||
| "@definitelytyped/dtslint": "0.0.112", | ||
@@ -27,3 +35,3 @@ "@types/react-native": "^0.63.2", | ||
| "dependencies": { | ||
| "@emotion/primitives-core": "^11.0.0" | ||
| "@emotion/primitives-core": "^11.10.0" | ||
| }, | ||
@@ -56,6 +64,9 @@ "peerDependencies": { | ||
| }, | ||
| "browser": { | ||
| "./dist/emotion-native.cjs.js": "./dist/emotion-native.browser.cjs.js", | ||
| "./dist/emotion-native.esm.js": "./dist/emotion-native.browser.esm.js" | ||
| "preconstruct": { | ||
| "exports": { | ||
| "extra": { | ||
| "./macro": "./macro.js" | ||
| } | ||
| } | ||
| } | ||
| } |
+0
-51
@@ -131,52 +131,1 @@ # @emotion/native | ||
| - Note that the `flex` property works like CSS shorthand, and not the legacy `flex` property in React Native. Setting `flex: 1` sets `flexShrink` to `1` in addition to setting `flexGrow` to `1` and `flexBasis` to `0`. | ||
| ## Usage with `react-360` | ||
| `@emotion/native` can also be used with `react-360` for styling VR applications. Check out [this](https://facebook.github.io/react-360/docs/setup.html) guide for setting up a `react-360` project. | ||
| ### Example | ||
| ```js | ||
| import React from 'react' | ||
| import { AppRegistry, StyleSheet, Text, View } from 'react-360' | ||
| import styled from '@emotion/native' | ||
| const StyledName = styled.Text` | ||
| font-size: 40px; | ||
| color: hotpink; | ||
| ` | ||
| export default class App extends React.Component { | ||
| render() { | ||
| return ( | ||
| <View style={styles.panel}> | ||
| <View style={styles.greetingBox}> | ||
| <StyledName>Emotion Native</StyledName> | ||
| </View> | ||
| </View> | ||
| ) | ||
| } | ||
| } | ||
| const styles = StyleSheet.create({ | ||
| panel: { | ||
| // Fill the entire surface | ||
| width: 1000, | ||
| height: 600, | ||
| backgroundColor: 'rgba(255, 255, 255, 0.4)', | ||
| justifyContent: 'center', | ||
| alignItems: 'center' | ||
| }, | ||
| greetingBox: { | ||
| padding: 20, | ||
| backgroundColor: '#000000', | ||
| borderColor: '#639dda', | ||
| borderWidth: 2 | ||
| }, | ||
| greeting: { | ||
| fontSize: 30 | ||
| } | ||
| }) | ||
| AppRegistry.registerComponent('App', () => App) | ||
| ``` |
-282
| # @emotion/native | ||
| ## 11.9.3 | ||
| ### Patch Changes | ||
| - [#2759](https://github.com/emotion-js/emotion/pull/2759) Thanks [@srmagura](https://github.com/srmagura), [@Andarist](https://github.com/Andarist)! - Change the argument of the `shouldForwardProp` option of `styled` from `PropertyKey` to `string` in the TypeScript definitions. | ||
| * [#2333](https://github.com/emotion-js/emotion/pull/2333) [`3055efdd`](https://github.com/emotion-js/emotion/commit/3055efddf8f9fb14b148fda466dcb4eb9affc525) Thanks [@Andarist](https://github.com/Andarist)! - `shouldForwardProp` has been changed from being a bivariant method to a contravariant function - it improves the type-safety for those that type this option. | ||
| - [#2333](https://github.com/emotion-js/emotion/pull/2333) [`3055efdd`](https://github.com/emotion-js/emotion/commit/3055efddf8f9fb14b148fda466dcb4eb9affc525) Thanks [@antongolub](https://github.com/antongolub)! - `FilteringStyledOptions` and `StyledOptions` types no longer require a type argument for the `Props` generic. | ||
| ## 11.0.0 | ||
| ### Major Changes | ||
| - [`95ea2839`](https://github.com/emotion-js/emotion/commit/95ea2839890629748894b3942d26f608f203d3f9) [#2014](https://github.com/emotion-js/emotion/pull/2014) Thanks [@Andarist](https://github.com/Andarist)! - Functions are no longer accepted as values for the `style` prop. This unifies the behavior with the web version of Emotion as `style`'s equivalent is `className` prop and functions are not resolved for it. | ||
| * [`139ea336`](https://github.com/emotion-js/emotion/commit/139ea336c7f49a3246813238e388e164b80de4da) [#2060](https://github.com/emotion-js/emotion/pull/2060) Thanks [@efoken](https://github.com/efoken)! - `StyleSheet.create` is used now under the hood. This means that when used in combination with React Native Web atomic class names are applied on components instead of inline styles. | ||
| - [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use hooks internally for improved bundle size and a better tree in React DevTools | ||
| * [`95ea2839`](https://github.com/emotion-js/emotion/commit/95ea2839890629748894b3942d26f608f203d3f9) [#2014](https://github.com/emotion-js/emotion/pull/2014) Thanks [@Andarist](https://github.com/Andarist)! - Updated `css-to-react-native` dependency to the 3.x version - it comes with some breaking changes listed [here](https://github.com/styled-components/css-to-react-native/releases/tag/v3.0.0). | ||
| ### Minor Changes | ||
| - [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41) [#1630](https://github.com/emotion-js/emotion/pull/1630) Thanks [@Andarist](https://github.com/Andarist)! - `@emotion/native` & `@emotion/primitives` packages come with macros now. Both can be used as `@emotion/native/macro` & `@emotion/primitives/macro` respectively. | ||
| * [`456be9a6`](https://github.com/emotion-js/emotion/commit/456be9a602d7d0bac291617f69f59f5ed30d1b84) [#1634](https://github.com/emotion-js/emotion/pull/1634) Thanks [@patsissons](https://github.com/patsissons)! - Added TypeScript type definitions. | ||
| - [`2d597857`](https://github.com/emotion-js/emotion/commit/2d5978579f758163663c1bfb40e7d76bc24ae26a) [#2058](https://github.com/emotion-js/emotion/pull/2058) Thanks [@efoken](https://github.com/efoken)! - Added support for the `as` prop. | ||
| * [`f1b7c9d6`](https://github.com/emotion-js/emotion/commit/f1b7c9d6dcdb45a02d7c7dce8c3fff28e14ed3ec) [#1642](https://github.com/emotion-js/emotion/pull/1642) Thanks [@Andarist](https://github.com/Andarist)! - Added basic support for accepting custom `shouldForwardProp` option. | ||
| ### Patch Changes | ||
| - [`11fc27f8`](https://github.com/emotion-js/emotion/commit/11fc27f8fa00661353cc7650111afaa068399aca) [#1750](https://github.com/emotion-js/emotion/pull/1750) Thanks [@Zn4rK](https://github.com/Zn4rK)! - Match supported components to what is exported from the latest version of React Native (0.61.5). | ||
| * [`db16ac35`](https://github.com/emotion-js/emotion/commit/db16ac358ded4cc04fbd649700716b7cb3b3e40a) [#2013](https://github.com/emotion-js/emotion/pull/2013) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with styles being lost for nested factory calls like: | ||
| ```js | ||
| const bgColor = color => css` | ||
| background-color: ${color}; | ||
| ` | ||
| const Text = styled.Text` | ||
| color: hotpink; | ||
| ${({ backgroundColor }) => bgColor(backgroundColor)}; | ||
| ` | ||
| ``` | ||
| * Updated dependencies [[`95ea2839`](https://github.com/emotion-js/emotion/commit/95ea2839890629748894b3942d26f608f203d3f9), [`db16ac35`](https://github.com/emotion-js/emotion/commit/db16ac358ded4cc04fbd649700716b7cb3b3e40a), [`95ea2839`](https://github.com/emotion-js/emotion/commit/95ea2839890629748894b3942d26f608f203d3f9), [`139ea336`](https://github.com/emotion-js/emotion/commit/139ea336c7f49a3246813238e388e164b80de4da), [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967), [`2d597857`](https://github.com/emotion-js/emotion/commit/2d5978579f758163663c1bfb40e7d76bc24ae26a)]: | ||
| - @emotion/primitives-core@11.0.0 | ||
| ## 11.0.0-rc.0 | ||
| ### Major Changes | ||
| - [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version. | ||
| ### Patch Changes | ||
| - Updated dependencies [[`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63)]: | ||
| - @emotion/primitives-core@11.0.0-rc.0 | ||
| ## 11.0.0-next.19 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.19 | ||
| ## 11.0.0-next.18 | ||
| ### Major Changes | ||
| - [`95ea2839`](https://github.com/emotion-js/emotion/commit/95ea2839890629748894b3942d26f608f203d3f9) [#2014](https://github.com/emotion-js/emotion/pull/2014) Thanks [@Andarist](https://github.com/Andarist)! - Updated `css-to-react-native` dependency to the 3.x version - it comes with some breaking changes listed [here](https://github.com/styled-components/css-to-react-native/releases/tag/v3.0.0). | ||
| * [`95ea2839`](https://github.com/emotion-js/emotion/commit/95ea2839890629748894b3942d26f608f203d3f9) [#2014](https://github.com/emotion-js/emotion/pull/2014) Thanks [@Andarist](https://github.com/Andarist)! - Functions are no longer accepted as values for the `style` prop. This unifies the behavior with the web version of Emotion as `style`'s equivalent is `className` prop and functions are not resolved for it. | ||
| ### Patch Changes | ||
| - [`db16ac35`](https://github.com/emotion-js/emotion/commit/db16ac358ded4cc04fbd649700716b7cb3b3e40a) [#2013](https://github.com/emotion-js/emotion/pull/2013) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with styles being lost for nested factory calls like: | ||
| ```js | ||
| const bgColor = color => css` | ||
| background-color: ${color}; | ||
| ` | ||
| const Text = styled.Text` | ||
| color: hotpink; | ||
| ${({ backgroundColor }) => bgColor(backgroundColor)}; | ||
| ` | ||
| ``` | ||
| - Updated dependencies [[`95ea2839`](https://github.com/emotion-js/emotion/commit/95ea2839890629748894b3942d26f608f203d3f9), [`db16ac35`](https://github.com/emotion-js/emotion/commit/db16ac358ded4cc04fbd649700716b7cb3b3e40a), [`95ea2839`](https://github.com/emotion-js/emotion/commit/95ea2839890629748894b3942d26f608f203d3f9)]: | ||
| - @emotion/primitives-core@11.0.0-next.18 | ||
| ## 11.0.0-next.17 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.17 | ||
| ## 11.0.0-next.16 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.16 | ||
| ## 11.0.0-next.15 | ||
| ### Minor Changes | ||
| - [`620f7327`](https://github.com/emotion-js/emotion/commit/620f7327485236a4c57792787484af7d1f9cd799) [#1954](https://github.com/emotion-js/emotion/pull/1954) Thanks [@Andarist](https://github.com/Andarist)! - Reworked TypeScript types around types for React Native's core components. All of them, and all wrapped class components, should now accept `ref` prop properly. | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.15 | ||
| ## 11.0.0-next.14 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.14 | ||
| ## 11.0.0-next.13 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.13 | ||
| ## 11.0.0-next.12 | ||
| ### Patch Changes | ||
| - [`11fc27f8`](https://github.com/emotion-js/emotion/commit/11fc27f8fa00661353cc7650111afaa068399aca) [#1750](https://github.com/emotion-js/emotion/pull/1750) Thanks [@Zn4rK](https://github.com/Zn4rK)! - Match supported components to what is exported from the latest version of React Native (0.61.5). | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.12 | ||
| ## 11.0.0-next.11 | ||
| ### Patch Changes | ||
| - [`cb637e65`](https://github.com/emotion-js/emotion/commit/cb637e659964d24c56ba7a93d01f3865f2d94669) [#1716](https://github.com/emotion-js/emotion/pull/1716) Thanks [@hammadj](https://github.com/hammadj)! - Add type definitions to published files for NPM | ||
| ## 11.0.0-next.10 | ||
| ### Minor Changes | ||
| - [`456be9a6`](https://github.com/emotion-js/emotion/commit/456be9a602d7d0bac291617f69f59f5ed30d1b84) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@patsissons](https://github.com/patsissons)! - Added TypeScript type definitions. | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.10 | ||
| ## 11.0.0-next.9 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.9 | ||
| ## 11.0.0-next.8 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.8 | ||
| ## 11.0.0-next.7 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.7 | ||
| ## 11.0.0-next.6 | ||
| ### Minor Changes | ||
| - [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41) [#1630](https://github.com/emotion-js/emotion/pull/1630) Thanks [@Andarist](https://github.com/Andarist)! - `@emotion/native` & `@emotion/primitives` packages come with macros now. Both can be used as `@emotion/native/macro` & `@emotion/primitives/macro` respectively. | ||
| * [`f1b7c9d6`](https://github.com/emotion-js/emotion/commit/f1b7c9d6dcdb45a02d7c7dce8c3fff28e14ed3ec) [#1642](https://github.com/emotion-js/emotion/pull/1642) Thanks [@Andarist](https://github.com/Andarist)! - Added basic support for accepting custom `shouldForwardProp` option. | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - @emotion/primitives-core@11.0.0-next.6 | ||
| ## 11.0.0-next.5 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - emotion-theming@11.0.0-next.5 | ||
| - @emotion/primitives-core@11.0.0-next.5 | ||
| ## 11.0.0-next.4 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - emotion-theming@11.0.0-next.4 | ||
| - @emotion/primitives-core@11.0.0-next.4 | ||
| ## 11.0.0-next.3 | ||
| ### Patch Changes | ||
| - Updated dependencies []: | ||
| - emotion-theming@11.0.0-next.3 | ||
| - @emotion/primitives-core@11.0.0-next.3 | ||
| ## 11.0.0-next.2 | ||
| ### Major Changes | ||
| - [`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Use hooks internally for improved bundle size and a better tree in React DevTools | ||
| ### Patch Changes | ||
| - Updated dependencies [[`79036056`](https://github.com/emotion-js/emotion/commit/79036056808eefc81a77225254f7c25c2ff9d967)]: | ||
| - emotion-theming@11.0.0-next.2 | ||
| - @emotion/primitives-core@11.0.0-next.2 | ||
| ## 11.0.0-next.1 | ||
| ### Patch Changes | ||
| - Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]: | ||
| - emotion-theming@11.0.0-next.1 | ||
| - @emotion/primitives-core@11.0.0-next.1 | ||
| ## 11.0.0-next.0 | ||
| ### Major Changes | ||
| - [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number | ||
| ### Patch Changes | ||
| - Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: | ||
| - emotion-theming@11.0.0-next.0 | ||
| - @emotion/primitives-core@11.0.0-next.0 | ||
| ## 10.0.27 | ||
| ### Patch Changes | ||
| - [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file | ||
| - Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]: | ||
| - emotion-theming@10.0.27 | ||
| - @emotion/primitives-core@10.0.27 | ||
| ## 10.0.22 | ||
| ### Patch Changes | ||
| - [`ae90f000`](https://github.com/emotion-js/emotion/commit/ae90f00094483ff12d8cbb80d628e30fe6d57d7a) [#841](https://github.com/emotion-js/emotion/pull/841) Thanks [@nitin42](https://github.com/nitin42)! - Improve error message for shorthand properties with missing units. | ||
| - Updated dependencies [[`ae90f000`](https://github.com/emotion-js/emotion/commit/ae90f00094483ff12d8cbb80d628e30fe6d57d7a)]: | ||
| - @emotion/primitives-core@10.0.22 | ||
| ## 10.0.14 | ||
| ### Patch Changes | ||
| - [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool | ||
| ## 10.0.11 | ||
| ### Patch Changes | ||
| - [8164e7b](https://github.com/emotion-js/emotion/commit/8164e7b) [#1289](https://github.com/emotion-js/emotion/pull/1344) Thanks [@Josema](https://github.com/Josema)! - Fix usage of @emotion/native with react-native-web |
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var reactNative = require('react-native'); | ||
| var primitivesCore = require('@emotion/primitives-core'); | ||
| function _interopNamespace(e) { | ||
| if (e && e.__esModule) return e; | ||
| var n = Object.create(null); | ||
| if (e) { | ||
| Object.keys(e).forEach(function (k) { | ||
| if (k !== 'default') { | ||
| var d = Object.getOwnPropertyDescriptor(e, k); | ||
| Object.defineProperty(n, k, d.get ? d : { | ||
| enumerable: true, | ||
| get: function () { | ||
| return e[k]; | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| n['default'] = e; | ||
| return Object.freeze(n); | ||
| } | ||
| var reactNative__namespace = /*#__PURE__*/_interopNamespace(reactNative); | ||
| /** | ||
| * a function that returns a styled component which render styles in React Native | ||
| */ | ||
| var styled = primitivesCore.createStyled(reactNative.StyleSheet); | ||
| var css = primitivesCore.createCss(reactNative.StyleSheet); | ||
| var components = ['ActivityIndicator', 'Button', 'DatePickerIOS', 'DrawerLayoutAndroid', 'FlatList', 'Image', 'ImageBackground', 'KeyboardAvoidingView', 'ListView', 'Modal', 'NavigatorIOS', 'Picker', 'PickerIOS', 'Pressable', 'ProgressBarAndroid', 'ProgressViewIOS', 'RecyclerViewBackedScrollView', 'RefreshControl', 'SafeAreaView', 'ScrollView', 'SectionList', 'SegmentedControlIOS', 'Slider', 'SnapshotViewIOS', 'StatusBar', 'SwipeableListView', 'Switch', 'SwitchIOS', 'TabBarIOS', 'Text', 'TextInput', 'ToolbarAndroid', 'TouchableHighlight', 'TouchableNativeFeedback', 'TouchableOpacity', 'TouchableWithoutFeedback', 'View', 'ViewPagerAndroid']; | ||
| var index = components.reduce(function (acc, comp) { | ||
| return Object.defineProperty(acc, comp, { | ||
| enumerable: true, | ||
| configurable: false, | ||
| get: function get() { | ||
| return styled(reactNative__namespace[comp]); | ||
| } | ||
| }); | ||
| }, styled); | ||
| exports.css = css; | ||
| exports.default = index; |
| import * as reactNative from 'react-native'; | ||
| import { StyleSheet } from 'react-native'; | ||
| import { createStyled, createCss } from '@emotion/primitives-core'; | ||
| /** | ||
| * a function that returns a styled component which render styles in React Native | ||
| */ | ||
| var styled = createStyled(StyleSheet); | ||
| var css = createCss(StyleSheet); | ||
| var components = ['ActivityIndicator', 'Button', 'DatePickerIOS', 'DrawerLayoutAndroid', 'FlatList', 'Image', 'ImageBackground', 'KeyboardAvoidingView', 'ListView', 'Modal', 'NavigatorIOS', 'Picker', 'PickerIOS', 'Pressable', 'ProgressBarAndroid', 'ProgressViewIOS', 'RecyclerViewBackedScrollView', 'RefreshControl', 'SafeAreaView', 'ScrollView', 'SectionList', 'SegmentedControlIOS', 'Slider', 'SnapshotViewIOS', 'StatusBar', 'SwipeableListView', 'Switch', 'SwitchIOS', 'TabBarIOS', 'Text', 'TextInput', 'ToolbarAndroid', 'TouchableHighlight', 'TouchableNativeFeedback', 'TouchableOpacity', 'TouchableWithoutFeedback', 'View', 'ViewPagerAndroid']; | ||
| var index = components.reduce(function (acc, comp) { | ||
| return Object.defineProperty(acc, comp, { | ||
| enumerable: true, | ||
| configurable: false, | ||
| get: function get() { | ||
| return styled(reactNative[comp]); | ||
| } | ||
| }); | ||
| }, styled); | ||
| export default index; | ||
| export { css }; |
New alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Fixed alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Number of package files
17
13.33%- Lines of code
756
42.91%Worsened metrics
- Total package byte prevSize
32961
-18.19%- Number of lines in readme file
131
-28.02%