@emotion/styled-base - npm Package Compare versions

Comparing version 11.0.0-next.0 to 11.0.0-next.1

CHANGELOG.md

 # @emotion/styled-base
 
+## 11.0.0-next.1
+
+### Major Changes
+
+- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes:
+
+  - Reduce build times when using emotion
+  - In many cases remove the need for manually specifying generic parameters for your emotion components.
+
+  If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below.
+
+  ## Improvements
+
+  - useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section.
+  - Union types as props are better supported and should be inferred properly
+  - Build times should be reduced significantly in larger projects.
+
+  ## Breaking changes
+
+  - withTheme can now have the Theme type specified when calling it. For example `withTheme<MyTheme>(MyComponent)`
+
+    **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section
+
+  - `css` function has been restricted to prevent passing of invalid types
+  - `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example
+
+    `styled<typeof MyComponent, ExtraProps>(MyComponent)({})`
+    to
+    `styled(MyComponent)<ExtraProps>({})`
+
+  - `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example:
+
+    `StyledComponent<Props, {}, MyTheme>`
+    to
+    `StyledComponent<Props & { theme?: MyTheme }>`
+
+### Patch Changes
+
+- [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687) [#1588](https://github.com/emotion-js/emotion/pull/1588) Thanks [@FezVrasta](https://github.com/FezVrasta)! - StyledComponent Flow type is now polymorphic, that means you can now define the component prop types to get better type safety.
+- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]:
+  - @emotion/serialize@1.0.0-next.0
+  - @emotion/core@11.0.0-next.1
+
 ## 11.0.0-next.0
@@ -4,0 +47,0 @@

package.json

 {
   "name": "@emotion/styled-base",
-  "version": "11.0.0-next.0",
+  "version": "11.0.0-next.1",
   "description": "base styled API for emotion",
@@ -20,7 +20,7 @@ "main": "dist/styled-base.cjs.js",
     "@emotion/is-prop-valid": "0.8.5",
-    "@emotion/serialize": "^0.11.14",
+    "@emotion/serialize": "^1.0.0-next.0",
     "@emotion/utils": "0.11.2"
   },
   "devDependencies": {
-    "@emotion/core": "^11.0.0-next.0",
+    "@emotion/core": "^11.0.0-next.1",
     "@types/react": "^16.8.20",
@@ -31,3 +31,3 @@ "dtslint": "^0.3.0",
   "peerDependencies": {
-    "@emotion/core": "^11.0.0-next.0",
+    "@emotion/core": "^11.0.0-next.1",
     "react": ">=16.3.0"
@@ -34,0 +34,0 @@ },

src/index.js

@@ -53,3 +53,3 @@ // @flow
 
-  return function<P>(): PrivateStyledComponent<P> {
+  return function<Props>(): PrivateStyledComponent<Props> {
     let args = arguments
@@ -82,3 +82,3 @@ let styles =
     // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
-    const Styled: PrivateStyledComponent<P> = withEmotionCache(
+    const Styled: PrivateStyledComponent<Props> = withEmotionCache(
       (props, context, ref) => {
@@ -85,0 +85,0 @@ return (

src/utils.js

 // @flow
-import * as React from 'react'
-import type { ElementType } from 'react'
+import type { ElementType, StatelessFunctionalComponent } from 'react'
 import isPropValid from '@emotion/is-prop-valid'
@@ -14,3 +13,3 @@
 
-export type StyledComponent<P> = React.StatelessFunctionalComponent<P> & {
+export type StyledComponent<Props> = StatelessFunctionalComponent<Props> & {
   defaultProps: any,
@@ -21,7 +20,7 @@ toString: () => string,
     nextOptions?: StyledOptions
-  ) => StyledComponent<P>
+  ) => StyledComponent<Props>
 }
 
-export type PrivateStyledComponent<P> = StyledComponent<P> & {
-  __emotion_real: StyledComponent<P>,
+export type PrivateStyledComponent<Props> = StyledComponent<Props> & {
+  __emotion_real: StyledComponent<Props>,
   __emotion_base: any,
@@ -36,3 +35,3 @@ __emotion_styles: any,
 
-export const getDefaultShouldForwardProp = (tag: React.ElementType) =>
+export const getDefaultShouldForwardProp = (tag: ElementType) =>
   typeof tag === 'string' &&
@@ -46,10 +45,13 @@ // 96 is one less than the char code
 
-export type CreateStyledComponent = <P>(
+export type CreateStyledComponent = <Props>(
   ...args: Interpolations
-) => StyledComponent<P>
+) => StyledComponent<Props>
 
 export type CreateStyled = {
-  (tag: React.ElementType, options?: StyledOptions): CreateStyledComponent,
+  <Props>(
+    tag: ElementType,
+    options?: StyledOptions
+  ): (...args: Interpolations) => StyledComponent<Props>,
   [key: string]: CreateStyledComponent,
   bind: () => CreateStyled
 }

types/helper.d.ts

@@ -8,5 +8,7 @@ import * as React from 'react'
   C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
-> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>
+> = JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>
 
-export type Omit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never
-export type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>
+// We need to use this version of Omit as it's distributive (Will preserve unions)
+export type DistributiveOmit<T, U> = T extends any
+  ? Pick<T, Exclude<keyof T, U>>
+  : never

types/index.d.ts

 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 3.1
+// TypeScript Version: 3.2
 
@@ -15,7 +15,6 @@ /**
 
+import * as React from 'react'
 import { ComponentSelector, Interpolation } from '@emotion/serialize'
-import * as React from 'react'
+import { PropsOf, DistributiveOmit } from './helper'
 
-import { Omit, Overwrapped, PropsOf } from './helper'
-
 export {
@@ -28,10 +27,4 @@ ArrayInterpolation,
 
-export { ComponentSelector, Interpolation }
+export { ComponentSelector, Interpolation, PropsOf, DistributiveOmit }
 
-type JSXInEl = JSX.IntrinsicElements
-
-export type WithTheme<P, T> = P extends { theme: infer Theme }
-  ? P & { theme: Exclude<Theme, undefined> }
-  : P & { theme: T }
-
 export interface StyledOptions {
@@ -43,109 +36,72 @@ label?: string
 
-export interface StyledComponent<InnerProps, StyleProps, Theme extends object>
-  extends React.SFC<InnerProps & StyleProps & { theme?: Theme }>,
-    ComponentSelector {
-  /**
-   * @desc this method is type-unsafe
-   */
-  withComponent<NewTag extends keyof JSXInEl>(
-    tag: NewTag
-  ): StyledComponent<JSXInEl[NewTag], StyleProps, Theme>
-  withComponent<Tag extends React.ComponentType<any>>(
+/**
+ * @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 {} = {}
+> extends React.FC<ComponentProps & SpecificComponentProps>, ComponentSelector {
+  withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
+    component: C
+  ): StyledComponent<ComponentProps & PropsOf<C>>
+  withComponent<Tag extends keyof JSX.IntrinsicElements>(
     tag: Tag
-  ): StyledComponent<PropsOf<Tag>, StyleProps, Theme>
+  ): StyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>
 }
 
-type ReactClassPropKeys = keyof React.ClassAttributes<any>
-
-interface CreateStyledComponentBaseThemeless<InnerProps, ExtraProps> {
-  <
-    StyleProps extends Omit<
-      Overwrapped<InnerProps, StyleProps>,
-      ReactClassPropKeys
-    > = Omit<InnerProps & ExtraProps, ReactClassPropKeys>,
-    Theme extends object = object
-  >(
-    ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
-  ): StyledComponent<InnerProps, StyleProps, Theme>
-  <
-    StyleProps extends Omit<
-      Overwrapped<InnerProps, StyleProps>,
-      ReactClassPropKeys
-    > = Omit<InnerProps & ExtraProps, ReactClassPropKeys>,
-    Theme extends object = object
-  >(
-    template: TemplateStringsArray,
-    ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
-  ): StyledComponent<InnerProps, StyleProps, Theme>
-}
-
-interface CreateStyledComponentBaseThemed<
-  InnerProps,
-  ExtraProps,
-  StyledInstanceTheme extends object
+/**
+ * @typeparam ComponentProps  Props which will be included when withComponent is called
+ * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
+ * @typeparam StyleProps  Params passed to styles but not exposed as React props. These are normally library provided props
+ */
+export interface CreateStyledComponent<
+  ComponentProps extends {},
+  SpecificComponentProps extends {} = {},
+  StyleProps extends {} = {}
 > {
-  <
-    StyleProps extends Omit<
-      Overwrapped<InnerProps, StyleProps>,
-      ReactClassPropKeys
-    > = Omit<InnerProps & ExtraProps, ReactClassPropKeys>
-  >(
-    ...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
-  ): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>
-  <
-    StyleProps extends Omit<
-      Overwrapped<InnerProps, StyleProps>,
-      ReactClassPropKeys
-    > = Omit<InnerProps & ExtraProps, ReactClassPropKeys>
-  >(
+  /**
+   * @typeparam AdditionalProps  Additional props to add to your styled component
+   */
+  <AdditionalProps extends {} = {}>(
+    ...styles: Array<
+      Interpolation<
+        ComponentProps & SpecificComponentProps & StyleProps & AdditionalProps
+      >
+    >
+  ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
+  /**
+   * @typeparam AdditionalProps  Additional props to add to your styled component
+   */
+  <AdditionalProps extends {} = {}>(
     template: TemplateStringsArray,
-    ...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
-  ): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>
+    ...styles: Array<
+      Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps>
+    >
+  ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
 }
 
-export type CreateStyledComponentBase<
-  InnerProps,
-  ExtraProps,
-  StyledInstanceTheme extends object
-> =
-  // this "reversed" condition checks if StyledInstanceTheme was already parametrized when using CreateStyled
-  object extends StyledInstanceTheme
-    ? CreateStyledComponentBaseThemeless<InnerProps, ExtraProps>
-    : CreateStyledComponentBaseThemed<
-        InnerProps,
-        ExtraProps,
-        StyledInstanceTheme
-      >
-
-export type CreateStyledComponentIntrinsic<
-  Tag extends keyof JSXInEl,
-  ExtraProps,
-  Theme extends object
-> = CreateStyledComponentBase<JSXInEl[Tag], ExtraProps, Theme>
-export type CreateStyledComponentExtrinsic<
-  Tag extends React.ComponentType<any>,
-  ExtraProps,
-  Theme extends object
-> = CreateStyledComponentBase<PropsOf<Tag>, ExtraProps, Theme>
-
 /**
  * @desc
- * This function accepts `InnerProps`/`Tag` to infer the type of `tag`,
- * and accepts `ExtraProps` for user who use string style
- * to be able to declare extra props without using
- * `` styled('button')<ExtraProps>`...` ``, which does not supported in
- * styled-component VSCode extension.
- * If your tool support syntax highlighting for `` styled('button')<ExtraProps>`...` ``
- * it could be more efficient.
+ * This function accepts a React component or tag ('div', 'a' etc).
+ *
+ * @example styled(MyComponent)({ width: 100 })
+ * @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width })
+ * @example styled('div')({ width: 100 })
+ * @example styled('div')<Props>(props => ({ width: props.width })
  */
-export interface CreateStyled<Theme extends object = any> {
-  <Tag extends React.ComponentType<any>, ExtraProps = {}>(
-    tag: Tag,
+export interface CreateStyled<Theme extends {} = any> {
+  <C extends React.ComponentType<React.ComponentProps<C>>>(
+    component: C,
     options?: StyledOptions
-  ): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme>
+  ): CreateStyledComponent<PropsOf<C> & { theme?: Theme }, {}, { theme: Theme }>
 
-  <Tag extends keyof JSXInEl, ExtraProps = {}>(
+  <Tag extends keyof JSX.IntrinsicElements>(
     tag: Tag,
     options?: StyledOptions
-  ): CreateStyledComponentIntrinsic<Tag, ExtraProps, Theme>
+  ): CreateStyledComponent<
+    { theme?: Theme },
+    JSX.IntrinsicElements[Tag],
+    { theme: Theme }
+  >
 }
@@ -152,0 +108,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114038

increased by3.34%

Lines of code

1450

increased by3.94%

Dependency changes

• + Added@emotion/hash@0.9.2(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/serialize@1.3.0(transitive)

• + Added@emotion/unitless@0.9.0(transitive)

• + Added@emotion/utils@1.4.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• - Removed@emotion/hash@0.8.0(transitive)

• - Removed@emotion/memoize@0.7.4(transitive)

• - Removed@emotion/serialize@0.11.16(transitive)

• - Removed@emotion/unitless@0.7.5(transitive)

• - Removed@emotion/utils@0.11.3(transitive)

• - Removedcsstype@2.6.21(transitive)

• Updated@emotion/serialize@^1.0.0-next.0