@emotion/styled - npm Package Compare versions

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

CHANGELOG.md

 # @emotion/styled
 
+## 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), [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687)]:
+  - @emotion/styled-base@11.0.0-next.1
+  - babel-plugin-emotion@11.0.0-next.1
+  - @emotion/core@11.0.0-next.1
+
 ## 11.0.0-next.0
@@ -4,0 +48,0 @@

dist/styled.browser.cjs.js

@@ -14,2 +14,3 @@ 'use strict';
 tags.forEach(function (tagName) {
+  // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
   newStyled[tagName] = newStyled(tagName);
@@ -16,0 +17,0 @@ });

dist/styled.browser.esm.js

@@ -8,2 +8,3 @@ import styled from '@emotion/styled-base';
 tags.forEach(function (tagName) {
+  // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
   newStyled[tagName] = newStyled(tagName);
@@ -10,0 +11,0 @@ });

dist/styled.cjs.dev.js

@@ -14,2 +14,3 @@ 'use strict';
 tags.forEach(function (tagName) {
+  // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
   newStyled[tagName] = newStyled(tagName);
@@ -16,0 +17,0 @@ });

dist/styled.esm.js

@@ -8,2 +8,3 @@ import styled from '@emotion/styled-base';
 tags.forEach(function (tagName) {
+  // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
   newStyled[tagName] = newStyled(tagName);
@@ -10,0 +11,0 @@ });

package.json

 {
   "name": "@emotion/styled",
-  "version": "11.0.0-next.0",
+  "version": "11.0.0-next.1",
   "description": "styled API for emotion",
@@ -14,7 +14,7 @@ "main": "dist/styled.cjs.js",
   "dependencies": {
-    "@emotion/styled-base": "^11.0.0-next.0",
-    "babel-plugin-emotion": "^11.0.0-next.0"
+    "@emotion/styled-base": "^11.0.0-next.1",
+    "babel-plugin-emotion": "^11.0.0-next.1"
   },
   "devDependencies": {
-    "@emotion/core": "^11.0.0-next.0",
+    "@emotion/core": "^11.0.0-next.1",
     "dtslint": "^0.3.0",
@@ -24,3 +24,3 @@ "react": "^16.5.2"
   "peerDependencies": {
-    "@emotion/core": "^11.0.0-next.0",
+    "@emotion/core": "^11.0.0-next.1",
     "react": ">=16.3.0"
@@ -27,0 +27,0 @@ },

src/index.js

@@ -9,2 +9,3 @@ // @flow
 tags.forEach(tagName => {
+  // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
   newStyled[tagName] = newStyled(tagName)
@@ -11,0 +12,0 @@ })

types/index.d.ts

 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 2.8
+// TypeScript Version: 2.9
 
 import {
   CreateStyled as BaseCreateStyled,
-  CreateStyledComponentIntrinsic
+  CreateStyledComponent
 } from '@emotion/styled-base'
@@ -12,5 +12,2 @@
   ComponentSelector,
-  CreateStyledComponentBase,
-  CreateStyledComponentExtrinsic,
-  CreateStyledComponentIntrinsic,
   CSSObject,
@@ -22,156 +19,14 @@ FunctionInterpolation,
   StyledOptions,
-  WithTheme
+  CreateStyledComponent
 } from '@emotion/styled-base'
 
-export interface StyledTags<Theme extends object> {
-  /**
-   * @desc
-   * HTML tags
-   */
-  a: CreateStyledComponentIntrinsic<'a', {}, Theme>
-  abbr: CreateStyledComponentIntrinsic<'abbr', {}, Theme>
-  address: CreateStyledComponentIntrinsic<'address', {}, Theme>
-  area: CreateStyledComponentIntrinsic<'area', {}, Theme>
-  article: CreateStyledComponentIntrinsic<'article', {}, Theme>
-  aside: CreateStyledComponentIntrinsic<'aside', {}, Theme>
-  audio: CreateStyledComponentIntrinsic<'audio', {}, Theme>
-  b: CreateStyledComponentIntrinsic<'b', {}, Theme>
-  base: CreateStyledComponentIntrinsic<'base', {}, Theme>
-  bdi: CreateStyledComponentIntrinsic<'bdi', {}, Theme>
-  bdo: CreateStyledComponentIntrinsic<'bdo', {}, Theme>
-  big: CreateStyledComponentIntrinsic<'big', {}, Theme>
-  blockquote: CreateStyledComponentIntrinsic<'blockquote', {}, Theme>
-  body: CreateStyledComponentIntrinsic<'body', {}, Theme>
-  br: CreateStyledComponentIntrinsic<'br', {}, Theme>
-  button: CreateStyledComponentIntrinsic<'button', {}, Theme>
-  canvas: CreateStyledComponentIntrinsic<'canvas', {}, Theme>
-  caption: CreateStyledComponentIntrinsic<'caption', {}, Theme>
-  cite: CreateStyledComponentIntrinsic<'cite', {}, Theme>
-  code: CreateStyledComponentIntrinsic<'code', {}, Theme>
-  col: CreateStyledComponentIntrinsic<'col', {}, Theme>
-  colgroup: CreateStyledComponentIntrinsic<'colgroup', {}, Theme>
-  data: CreateStyledComponentIntrinsic<'data', {}, Theme>
-  datalist: CreateStyledComponentIntrinsic<'datalist', {}, Theme>
-  dd: CreateStyledComponentIntrinsic<'dd', {}, Theme>
-  del: CreateStyledComponentIntrinsic<'del', {}, Theme>
-  details: CreateStyledComponentIntrinsic<'details', {}, Theme>
-  dfn: CreateStyledComponentIntrinsic<'dfn', {}, Theme>
-  dialog: CreateStyledComponentIntrinsic<'dialog', {}, Theme>
-  div: CreateStyledComponentIntrinsic<'div', {}, Theme>
-  dl: CreateStyledComponentIntrinsic<'dl', {}, Theme>
-  dt: CreateStyledComponentIntrinsic<'dt', {}, Theme>
-  em: CreateStyledComponentIntrinsic<'em', {}, Theme>
-  embed: CreateStyledComponentIntrinsic<'embed', {}, Theme>
-  fieldset: CreateStyledComponentIntrinsic<'fieldset', {}, Theme>
-  figcaption: CreateStyledComponentIntrinsic<'figcaption', {}, Theme>
-  figure: CreateStyledComponentIntrinsic<'figure', {}, Theme>
-  footer: CreateStyledComponentIntrinsic<'footer', {}, Theme>
-  form: CreateStyledComponentIntrinsic<'form', {}, Theme>
-  h1: CreateStyledComponentIntrinsic<'h1', {}, Theme>
-  h2: CreateStyledComponentIntrinsic<'h2', {}, Theme>
-  h3: CreateStyledComponentIntrinsic<'h3', {}, Theme>
-  h4: CreateStyledComponentIntrinsic<'h4', {}, Theme>
-  h5: CreateStyledComponentIntrinsic<'h5', {}, Theme>
-  h6: CreateStyledComponentIntrinsic<'h6', {}, Theme>
-  head: CreateStyledComponentIntrinsic<'head', {}, Theme>
-  header: CreateStyledComponentIntrinsic<'header', {}, Theme>
-  hgroup: CreateStyledComponentIntrinsic<'hgroup', {}, Theme>
-  hr: CreateStyledComponentIntrinsic<'hr', {}, Theme>
-  html: CreateStyledComponentIntrinsic<'html', {}, Theme>
-  i: CreateStyledComponentIntrinsic<'i', {}, Theme>
-  iframe: CreateStyledComponentIntrinsic<'iframe', {}, Theme>
-  img: CreateStyledComponentIntrinsic<'img', {}, Theme>
-  input: CreateStyledComponentIntrinsic<'input', {}, Theme>
-  ins: CreateStyledComponentIntrinsic<'ins', {}, Theme>
-  kbd: CreateStyledComponentIntrinsic<'kbd', {}, Theme>
-  keygen: CreateStyledComponentIntrinsic<'keygen', {}, Theme>
-  label: CreateStyledComponentIntrinsic<'label', {}, Theme>
-  legend: CreateStyledComponentIntrinsic<'legend', {}, Theme>
-  li: CreateStyledComponentIntrinsic<'li', {}, Theme>
-  link: CreateStyledComponentIntrinsic<'link', {}, Theme>
-  main: CreateStyledComponentIntrinsic<'main', {}, Theme>
-  map: CreateStyledComponentIntrinsic<'map', {}, Theme>
-  mark: CreateStyledComponentIntrinsic<'mark', {}, Theme>
-  /**
-   * @desc
-   * marquee tag is not supported by @types/react
-   */
-  // 'marquee': CreateStyledComponentIntrinsic<'marquee', {}, Theme>;
-  menu: CreateStyledComponentIntrinsic<'menu', {}, Theme>
-  menuitem: CreateStyledComponentIntrinsic<'menuitem', {}, Theme>
-  meta: CreateStyledComponentIntrinsic<'meta', {}, Theme>
-  meter: CreateStyledComponentIntrinsic<'meter', {}, Theme>
-  nav: CreateStyledComponentIntrinsic<'nav', {}, Theme>
-  noscript: CreateStyledComponentIntrinsic<'noscript', {}, Theme>
-  object: CreateStyledComponentIntrinsic<'object', {}, Theme>
-  ol: CreateStyledComponentIntrinsic<'ol', {}, Theme>
-  optgroup: CreateStyledComponentIntrinsic<'optgroup', {}, Theme>
-  option: CreateStyledComponentIntrinsic<'option', {}, Theme>
-  output: CreateStyledComponentIntrinsic<'output', {}, Theme>
-  p: CreateStyledComponentIntrinsic<'p', {}, Theme>
-  param: CreateStyledComponentIntrinsic<'param', {}, Theme>
-  picture: CreateStyledComponentIntrinsic<'picture', {}, Theme>
-  pre: CreateStyledComponentIntrinsic<'pre', {}, Theme>
-  progress: CreateStyledComponentIntrinsic<'progress', {}, Theme>
-  q: CreateStyledComponentIntrinsic<'q', {}, Theme>
-  rp: CreateStyledComponentIntrinsic<'rp', {}, Theme>
-  rt: CreateStyledComponentIntrinsic<'rt', {}, Theme>
-  ruby: CreateStyledComponentIntrinsic<'ruby', {}, Theme>
-  s: CreateStyledComponentIntrinsic<'s', {}, Theme>
-  samp: CreateStyledComponentIntrinsic<'samp', {}, Theme>
-  script: CreateStyledComponentIntrinsic<'script', {}, Theme>
-  section: CreateStyledComponentIntrinsic<'section', {}, Theme>
-  select: CreateStyledComponentIntrinsic<'select', {}, Theme>
-  small: CreateStyledComponentIntrinsic<'small', {}, Theme>
-  source: CreateStyledComponentIntrinsic<'source', {}, Theme>
-  span: CreateStyledComponentIntrinsic<'span', {}, Theme>
-  strong: CreateStyledComponentIntrinsic<'strong', {}, Theme>
-  style: CreateStyledComponentIntrinsic<'style', {}, Theme>
-  sub: CreateStyledComponentIntrinsic<'sub', {}, Theme>
-  summary: CreateStyledComponentIntrinsic<'summary', {}, Theme>
-  sup: CreateStyledComponentIntrinsic<'sup', {}, Theme>
-  table: CreateStyledComponentIntrinsic<'table', {}, Theme>
-  tbody: CreateStyledComponentIntrinsic<'tbody', {}, Theme>
-  td: CreateStyledComponentIntrinsic<'td', {}, Theme>
-  textarea: CreateStyledComponentIntrinsic<'textarea', {}, Theme>
-  tfoot: CreateStyledComponentIntrinsic<'tfoot', {}, Theme>
-  th: CreateStyledComponentIntrinsic<'th', {}, Theme>
-  thead: CreateStyledComponentIntrinsic<'thead', {}, Theme>
-  time: CreateStyledComponentIntrinsic<'time', {}, Theme>
-  title: CreateStyledComponentIntrinsic<'title', {}, Theme>
-  tr: CreateStyledComponentIntrinsic<'tr', {}, Theme>
-  track: CreateStyledComponentIntrinsic<'track', {}, Theme>
-  u: CreateStyledComponentIntrinsic<'u', {}, Theme>
-  ul: CreateStyledComponentIntrinsic<'ul', {}, Theme>
-  var: CreateStyledComponentIntrinsic<'var', {}, Theme>
-  video: CreateStyledComponentIntrinsic<'video', {}, Theme>
-  wbr: CreateStyledComponentIntrinsic<'wbr', {}, Theme>
-
-  /**
-   * @desc
-   * SVG tags
-   */
-  circle: CreateStyledComponentIntrinsic<'circle', {}, Theme>
-  clipPath: CreateStyledComponentIntrinsic<'clipPath', {}, Theme>
-  defs: CreateStyledComponentIntrinsic<'defs', {}, Theme>
-  ellipse: CreateStyledComponentIntrinsic<'ellipse', {}, Theme>
-  foreignObject: CreateStyledComponentIntrinsic<'foreignObject', {}, Theme>
-  g: CreateStyledComponentIntrinsic<'g', {}, Theme>
-  image: CreateStyledComponentIntrinsic<'image', {}, Theme>
-  line: CreateStyledComponentIntrinsic<'line', {}, Theme>
-  linearGradient: CreateStyledComponentIntrinsic<'linearGradient', {}, Theme>
-  mask: CreateStyledComponentIntrinsic<'mask', {}, Theme>
-  path: CreateStyledComponentIntrinsic<'path', {}, Theme>
-  pattern: CreateStyledComponentIntrinsic<'pattern', {}, Theme>
-  polygon: CreateStyledComponentIntrinsic<'polygon', {}, Theme>
-  polyline: CreateStyledComponentIntrinsic<'polyline', {}, Theme>
-  radialGradient: CreateStyledComponentIntrinsic<'radialGradient', {}, Theme>
-  rect: CreateStyledComponentIntrinsic<'rect', {}, Theme>
-  stop: CreateStyledComponentIntrinsic<'stop', {}, Theme>
-  svg: CreateStyledComponentIntrinsic<'svg', {}, Theme>
-  text: CreateStyledComponentIntrinsic<'text', {}, Theme>
-  tspan: CreateStyledComponentIntrinsic<'tspan', {}, Theme>
+export type StyledTags<Theme extends {} = any> = {
+  [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<
+    { theme?: Theme },
+    JSX.IntrinsicElements[Tag],
+    { theme: Theme }
+  >
 }
 
-export interface CreateStyled<Theme extends object = any>
+export interface CreateStyled<Theme extends {} = any>
   extends BaseCreateStyled<Theme>,
@@ -178,0 +33,0 @@ StyledTags<Theme> {}

types/tslint.json

@@ -9,5 +9,16 @@ {
         "semicolon": false,
-
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-module",
+            "check-rest-spread",
+            "check-type",
+            "check-typecast",
+            "check-type-operator",
+            "check-preblock"
+        ],
         "no-unnecessary-generics": false
     }
-}
+}

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

Worsened metrics

Total package byte prevSize

72944

decreased by-5.07%

Lines of code

398

decreased by-22.72%

Dependency changes

• Updated@emotion/styled-base@^11.0.0-next.1

• Updatedbabel-plugin-emotion@^11.0.0-next.1