From bf7aa285a87be3abfe5727fafebc9325a919bf46 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Fri, 26 May 2017 05:20:15 +0100 Subject: [PATCH 01/63] Add initial server side typings --- typings/styled-components-server-test.tsx | 12 ++++++++++++ typings/styled-components.d.ts | 7 +++++++ 2 files changed, 19 insertions(+) create mode 100644 typings/styled-components-server-test.tsx diff --git a/typings/styled-components-server-test.tsx b/typings/styled-components-server-test.tsx new file mode 100644 index 000000000..d47c1bee9 --- /dev/null +++ b/typings/styled-components-server-test.tsx @@ -0,0 +1,12 @@ +import { renderToString } from "react-dom/server"; +import styled, { ServerStyleSheet } from ".."; + +const Title = styled.h1` + font-size: 1.5em; + text-align: center; + color: palevioletred; +`; + +const sheet = new ServerStyleSheet(); +const html = renderToString(sheet.collectStyles(Hello world)); +const css = sheet.getStyleTags(); diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 09a045c7e..63038eadc 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -207,4 +207,11 @@ export function injectGlobal(strings: TemplateStringsArray, ...interpolations: S export const ThemeProvider: ThemeProviderComponent; +export interface StyleSheetManager extends ComponentClass<{sheet: any}> {} + +export class ServerStyleSheet { + collectStyles(tree: any): StyleSheetManager; + getStyleTags(): string; +} + export default styled; From d0342845621771bd0965eead47eac160017402fd Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Fri, 26 May 2017 05:27:51 +0100 Subject: [PATCH 02/63] Add typings for StyleSheetManager --- typings/styled-components-server-test.tsx | 11 ++++++++++- typings/styled-components.d.ts | 3 ++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/typings/styled-components-server-test.tsx b/typings/styled-components-server-test.tsx index d47c1bee9..bde6cacb4 100644 --- a/typings/styled-components-server-test.tsx +++ b/typings/styled-components-server-test.tsx @@ -1,5 +1,5 @@ import { renderToString } from "react-dom/server"; -import styled, { ServerStyleSheet } from ".."; +import styled, { ServerStyleSheet, StyleSheetManager } from ".."; const Title = styled.h1` font-size: 1.5em; @@ -10,3 +10,12 @@ const Title = styled.h1` const sheet = new ServerStyleSheet(); const html = renderToString(sheet.collectStyles(Hello world)); const css = sheet.getStyleTags(); + +const sheet2 = new ServerStyleSheet() +const html2 = renderToString( + + Hello world + +) + +const css2 = sheet2.getStyleElement(); diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 63038eadc..d8f1d0405 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -207,11 +207,12 @@ export function injectGlobal(strings: TemplateStringsArray, ...interpolations: S export const ThemeProvider: ThemeProviderComponent; -export interface StyleSheetManager extends ComponentClass<{sheet: any}> {} +export class StyleSheetManager extends React.Component<{sheet: ServerStyleSheet}, any> {} export class ServerStyleSheet { collectStyles(tree: any): StyleSheetManager; getStyleTags(): string; + getStyleElement(): Component; } export default styled; From a82516a815dc9b53abde8c822429a10c2cbd1d05 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Fri, 26 May 2017 05:45:13 +0100 Subject: [PATCH 03/63] Add typings for extend --- typings/styled-components-extend-test.tsx | 18 ++++++++++++++++++ typings/styled-components.d.ts | 8 ++++++-- .../mytheme-styled-components-test.tsx | 5 +++++ 3 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 typings/styled-components-extend-test.tsx diff --git a/typings/styled-components-extend-test.tsx b/typings/styled-components-extend-test.tsx new file mode 100644 index 000000000..99177ff03 --- /dev/null +++ b/typings/styled-components-extend-test.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; + +import styled from ".."; + +const Button = styled.button` + color: palevioletred; + font-size: 1em; + margin: 1em; + padding: 0.25em 1em; + border: 2px solid palevioletred; + border-radius: 3px; +`; + +// We're extending Button with some extra styles +const TomatoButton = Button.extend` + color: tomato; + border-color: tomato; +`; diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index d8f1d0405..fcbe3ef94 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -24,9 +24,13 @@ export interface InterpolationFunction

{ (props: P): Interpolation

; } +export interface StyledComponentClass extends ComponentClass

{ + extend: ThemedStyledFunction; +} + export interface ThemedStyledFunction { - (strings: TemplateStringsArray, ...interpolations: Interpolation>[]): ComponentClass>; - (strings: TemplateStringsArray, ...interpolations: Interpolation>[]): ComponentClass>; + (strings: TemplateStringsArray, ...interpolations: Interpolation>[]): StyledComponentClass, T>; + (strings: TemplateStringsArray, ...interpolations: Interpolation>[]): StyledComponentClass, T>; } export type StyledFunction

= ThemedStyledFunction; diff --git a/typings/themed-tests/mytheme-styled-components-test.tsx b/typings/themed-tests/mytheme-styled-components-test.tsx index c70904b23..7d144001e 100644 --- a/typings/themed-tests/mytheme-styled-components-test.tsx +++ b/typings/themed-tests/mytheme-styled-components-test.tsx @@ -10,6 +10,11 @@ const Title = styled.h1` color: ${p => p.theme.primaryColor}; `; +const RedTitle = Title.extend` + color: red; + border-color: ${p => p.theme.primaryColor}; +`; + // Create a react component that renders a

with // some padding and a papayawhip background const Wrapper = styled.section` From fb85770dbc0965e072b68a7ffa80c1243b8eb087 Mon Sep 17 00:00:00 2001 From: Jesse Hallett Date: Fri, 26 May 2017 12:05:32 -0400 Subject: [PATCH 04/63] Fixes for Flow v0.47.0 As of v0.47.0 Flow strictly checks function arity. That means you will get an error if you call a function with more arguments than are listed in the function signature. For details see https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/ There are also some changes to checking React component prop types. The latest Flow will report some errors that previous versions missed. The full changelog is here: https://github.com/facebook/flow/blob/master/Changelog.md#0470 --- package.json | 2 +- src/models/StyleSheetManager.js | 6 ++++-- src/test/theme.test.js | 2 +- src/utils/create-broadcast.js | 2 +- yarn.lock | 6 +++--- 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 20643fb67..a7e750468 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "eslint-plugin-jsx-a11y": "^2.0.2", "eslint-plugin-react": "^6.8.0", "express": "^4.14.1", - "flow-bin": "^0.43.1", + "flow-bin": "^0.47.0", "flow-copy-source": "^1.1.0", "flow-watch": "^1.1.1", "jest": "^19.0.2", diff --git a/src/models/StyleSheetManager.js b/src/models/StyleSheetManager.js index b6b76469f..56834b6ec 100644 --- a/src/models/StyleSheetManager.js +++ b/src/models/StyleSheetManager.js @@ -10,8 +10,10 @@ class StyleSheetManager extends Component { render() { /* eslint-disable react/prop-types */ - // $FlowFixMe - return React.Children.only(this.props.children) + // Flow v0.43.1 will report an error accessing the `children` property, + // but v0.47.0 will not. It is necessary to use a type cast instead of + // a "fixme" comment to satisfy both Flow versions. + return React.Children.only((this.props: any).children) } } diff --git a/src/test/theme.test.js b/src/test/theme.test.js index af042bfa7..499f72101 100644 --- a/src/test/theme.test.js +++ b/src/test/theme.test.js @@ -356,7 +356,7 @@ describe('theming', () => { }, } - const Theme = ({ props }) => ( + const Theme = props => ( diff --git a/src/utils/create-broadcast.js b/src/utils/create-broadcast.js index e83609e27..28c38c897 100644 --- a/src/utils/create-broadcast.js +++ b/src/utils/create-broadcast.js @@ -7,7 +7,7 @@ export type Broadcast = { publish: (value: mixed) => void, - subscribe: (listener: () => void) => () => void + subscribe: (listener: (currentValue: mixed) => void) => () => void } const createBroadcast = (initialValue: mixed): Broadcast => { diff --git a/yarn.lock b/yarn.lock index 87feef57f..54a5ad403 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2499,9 +2499,9 @@ flat-cache@^1.2.1: graceful-fs "^4.1.2" write "^0.2.1" -flow-bin@^0.43.1: - version "0.43.1" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.43.1.tgz#0733958b448fb8ad4b1576add7e87c31794c81bc" +flow-bin@^0.47.0: + version "0.47.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.47.0.tgz#a2a08ab3e0d1f1cb57d17e27b30b118b62fda367" flow-copy-source@^1.1.0: version "1.1.0" From 6c72ab5efee488a8884355bbc68fb2704a4340c8 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Sat, 27 May 2017 16:03:46 +0200 Subject: [PATCH 05/63] Add withComponent typings --- typings/styled-components-with-component.tsx | 40 +++++++++ typings/styled-components.d.ts | 89 +++++++++++++++++++- 2 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 typings/styled-components-with-component.tsx diff --git a/typings/styled-components-with-component.tsx b/typings/styled-components-with-component.tsx new file mode 100644 index 000000000..e6fe20e78 --- /dev/null +++ b/typings/styled-components-with-component.tsx @@ -0,0 +1,40 @@ +import * as React from "react"; + +import styled from ".."; + +const H1 = styled.h1` + color: palevioletred; + font-size: 1em; +`; + +function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; +} + +class Random extends React.Component { + render() { + const i = getRandomInt(1, 6); + + switch (i) { + case 1: + return

Hello World

; + case 2: + return

Hello World

; + case 3: + return

Hello World

; + case 4: + return

Hello World

; + case 5: + return
Hello World
; + case 6: + return
Hello World
; + } + } +} + +// We're extending Button with some extra styles +const H2 = H1.withComponent("h2"); + +const RandomHeading = H1.withComponent(Random); diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index a20f866d0..a202748ad 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -26,6 +26,93 @@ export interface InterpolationFunction

{ export interface StyledComponentClass extends ComponentClass

{ extend: ThemedStyledFunction; + + withComponent( + tag: "abbr" | "address" | "article" | "aside" | "b" | "bdi" | "bdo" | + "big" | "blockquote" | "caption" | "cite" | "code" | "data" | "dd" | + "del" | "details" | "dfn" | "dialog" | "dt" | "em" | "figcaption" | + "figure" | "footer" | "header" | "hgroup" | "l" | "i" | "kbd" | + "keygen" | "main" | "mark" | "menu" | "menuitem" | "meter" | "nav" | + "noscript" | "output" | "picture" | "rp" | "rt" | "ruby" | "s" | + "samp" | "script" | "section" | "small" | "strong" | "sub" | + "summary" | "sup" | "time" | "u" | "var" | "wbr" + ): StyledComponentClass, T>; + withComponent(tag: "a"): StyledComponentClass, T>; + withComponent(tag: "area"): StyledComponentClass, T>; + withComponent(tag: "audio"): StyledComponentClass, T>; + withComponent(tag: "base"): StyledComponentClass, T>; + withComponent(tag: "body"): StyledComponentClass, T>; + withComponent(tag: "br"): StyledComponentClass, T>; + withComponent(tag: "button"): StyledComponentClass, T>; + withComponent(tag: "canvas"): StyledComponentClass, T>; + withComponent(tag: "col" | "colgroup"): StyledComponentClass, T>; + withComponent(tag: "datalist"): StyledComponentClass, T>; + withComponent(tag: "div"): StyledComponentClass, T>; + withComponent(tag: "dl"): StyledComponentClass, T>; + withComponent(tag: "embed"): StyledComponentClass, T>; + withComponent(tag: "fieldset"): StyledComponentClass, T>; + withComponent(tag: "form"): StyledComponentClass, T>; + withComponent(tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"): StyledComponentClass, T>; + withComponent(tag: "head"): StyledComponentClass, T>; + withComponent(tag: "hr"): StyledComponentClass, T>; + withComponent(tag: "iframe"): StyledComponentClass, T>; + withComponent(tag: "img"): StyledComponentClass, T>; + withComponent(tag: "input"): StyledComponentClass, T>; + withComponent(tag: "ins"): StyledComponentClass, T>; + withComponent(tag: "label"): StyledComponentClass, T>; + withComponent(tag: "legend"): StyledComponentClass, T>; + withComponent(tag: "li"): StyledComponentClass, T>; + withComponent(tag: "link"): StyledComponentClass, T>; + withComponent(tag: "map"): StyledComponentClass, T>; + withComponent(tag: "meta"): StyledComponentClass, T>; + withComponent(tag: "object"): StyledComponentClass, T>; + withComponent(tag: "ol"): StyledComponentClass, T>; + withComponent(tag: "optgroup"): StyledComponentClass, T>; + withComponent(tag: "option"): StyledComponentClass, T>; + withComponent(tag: "p"): StyledComponentClass, T>; + withComponent(tag: "param"): StyledComponentClass, T>; + withComponent(tag: "pre"): StyledComponentClass, T>; + withComponent(tag: "progress"): StyledComponentClass, T>; + withComponent(tag: "q"): StyledComponentClass, T>; + withComponent(tag: "select"): StyledComponentClass, T>; + withComponent(tag: "source"): StyledComponentClass, T>; + withComponent(tag: "span"): StyledComponentClass, T>; + withComponent(tag: "style"): StyledComponentClass, T>; + withComponent(tag: "table"): StyledComponentClass, T>; + withComponent(tag: "tbody"): StyledComponentClass, T>; + withComponent(tag: "td"): StyledComponentClass, T>; + withComponent(tag: "textarea"): StyledComponentClass, T>; + withComponent(tag: "tfoot"): StyledComponentClass, T>; + withComponent(tag: "th"): StyledComponentClass, T>; + withComponent(tag: "thead"): StyledComponentClass, T>; + withComponent(tag: "title"): StyledComponentClass, T>; + withComponent(tag: "tr"): StyledComponentClass, T>; + withComponent(tag: "track"): StyledComponentClass, T>; + withComponent(tag: "ul"): StyledComponentClass, T>; + withComponent(tag: "video"): StyledComponentClass, T>; + + // SVG + withComponent(tag: "circle"): StyledComponentClass, T>; + withComponent(tag: "clipPath"): StyledComponentClass, T>; + withComponent(tag: "defs"): StyledComponentClass, T>; + withComponent(tag: "ellipse"): StyledComponentClass, T>; + withComponent(tag: "g"): StyledComponentClass, T>; + withComponent(tag: "image"): StyledComponentClass, T>; + withComponent(tag: "line"): StyledComponentClass, T>; + withComponent(tag: "linearGradient"): StyledComponentClass, T>; + withComponent(tag: "mask"): StyledComponentClass, T>; + withComponent(tag: "path"): StyledComponentClass, T>; + withComponent(tag: "pattern"): StyledComponentClass, T>; + withComponent(tag: "polygon"): StyledComponentClass, T>; + withComponent(tag: "polyline"): StyledComponentClass, T>; + withComponent(tag: "radialGradient"): StyledComponentClass, T>; + withComponent(tag: "rect"): StyledComponentClass, T>; + withComponent(tag: "stop"): StyledComponentClass, T>; + withComponent(tag: "svg"): StyledComponentClass, T>; + withComponent(tag: "text"): StyledComponentClass, T>; + withComponent(tag: "tspan"): StyledComponentClass, T>; + + withComponent(element: ComponentClass

): StyledComponentClass, T>, T>; } export interface ThemedStyledFunction { @@ -211,7 +298,7 @@ export function injectGlobal(strings: TemplateStringsArray, ...interpolations: S export const ThemeProvider: ThemeProviderComponent; -export class StyleSheetManager extends React.Component<{sheet: ServerStyleSheet}, any> {} +export class StyleSheetManager extends React.Component<{ sheet: ServerStyleSheet }, any> { } export class ServerStyleSheet { collectStyles(children: ReactElement): StyleSheetManager From e7dad01e139158060980d0b9fe516d2c30e1104e Mon Sep 17 00:00:00 2001 From: Jesse Hallett Date: Sat, 27 May 2017 15:56:58 -0400 Subject: [PATCH 06/63] Note changes to Flow type signatures in changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 32e545201..d7fe66ae1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ All notable changes to this project will be documented in this file. If a contri - Restore `setNativeProps` in StyledNativeComponent, thanks to [@MatthieuLemoine](https://github.com/MatthieuLemoine). (see [#764](https://github.com/styled-components/styled-components/pull/764)) - Fix `ref` being passed to Stateless Functional Components in StyledNativeComponent. (see [#828](https://github.com/styled-components/styled-components/pull/828)) - Add `displayName` to `componentId` when both are present (see [#821](https://github.com/styled-components/styled-components/pull/821)) +- Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840)) ## [v1.4.6] - 2017-05-02 From b196467e34b8c8715d51f25890d67098b22165fb Mon Sep 17 00:00:00 2001 From: Brandon Mills Date: Mon, 29 May 2017 11:48:04 -0400 Subject: [PATCH 07/63] Fix typo in contributing docs clone URL --- CONTRIBUTING.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 25b832364..5ee22c382 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,7 +10,7 @@ Please also give the code of conduct a read. Also make sure that no one else is already working on it. We don't want you to be disappointed. -2. Fork, then clone: `git clone httpsL://github.com/YOUR_USERNAME/styled-components.git` +2. Fork, then clone: `git clone https://github.com/YOUR_USERNAME/styled-components.git` 3. Create a branch with a meaningful name for the issue: `git checkout -b fix-something` @@ -35,4 +35,3 @@ Run `npm install` and edit code in the `src/` folder. It's luckily very simple! When you commit our pre-commit hook will run, which executes `lint-staged`. It will run the linter automatically and warn you, if the code you've written doesn't comply with our code style. - From 0c58b5850684b9c6c9c29b3ea19262094a75c989 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Mon, 29 May 2017 21:25:23 +0100 Subject: [PATCH 08/63] Less verbose declarations --- typings/styled-components.d.ts | 154 ++++++++++++++++----------------- 1 file changed, 77 insertions(+), 77 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index a202748ad..6a470518b 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -24,7 +24,7 @@ export interface InterpolationFunction

{ (props: P): Interpolation

; } -export interface StyledComponentClass extends ComponentClass

{ +export interface StyledComponentClass extends ComponentClass> { extend: ThemedStyledFunction; withComponent( @@ -36,88 +36,88 @@ export interface StyledComponentClass extends ComponentClass

{ "noscript" | "output" | "picture" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "small" | "strong" | "sub" | "summary" | "sup" | "time" | "u" | "var" | "wbr" - ): StyledComponentClass, T>; - withComponent(tag: "a"): StyledComponentClass, T>; - withComponent(tag: "area"): StyledComponentClass, T>; - withComponent(tag: "audio"): StyledComponentClass, T>; - withComponent(tag: "base"): StyledComponentClass, T>; - withComponent(tag: "body"): StyledComponentClass, T>; - withComponent(tag: "br"): StyledComponentClass, T>; - withComponent(tag: "button"): StyledComponentClass, T>; - withComponent(tag: "canvas"): StyledComponentClass, T>; - withComponent(tag: "col" | "colgroup"): StyledComponentClass, T>; - withComponent(tag: "datalist"): StyledComponentClass, T>; - withComponent(tag: "div"): StyledComponentClass, T>; - withComponent(tag: "dl"): StyledComponentClass, T>; - withComponent(tag: "embed"): StyledComponentClass, T>; - withComponent(tag: "fieldset"): StyledComponentClass, T>; - withComponent(tag: "form"): StyledComponentClass, T>; - withComponent(tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"): StyledComponentClass, T>; - withComponent(tag: "head"): StyledComponentClass, T>; - withComponent(tag: "hr"): StyledComponentClass, T>; - withComponent(tag: "iframe"): StyledComponentClass, T>; - withComponent(tag: "img"): StyledComponentClass, T>; - withComponent(tag: "input"): StyledComponentClass, T>; - withComponent(tag: "ins"): StyledComponentClass, T>; - withComponent(tag: "label"): StyledComponentClass, T>; - withComponent(tag: "legend"): StyledComponentClass, T>; - withComponent(tag: "li"): StyledComponentClass, T>; - withComponent(tag: "link"): StyledComponentClass, T>; - withComponent(tag: "map"): StyledComponentClass, T>; - withComponent(tag: "meta"): StyledComponentClass, T>; - withComponent(tag: "object"): StyledComponentClass, T>; - withComponent(tag: "ol"): StyledComponentClass, T>; - withComponent(tag: "optgroup"): StyledComponentClass, T>; - withComponent(tag: "option"): StyledComponentClass, T>; - withComponent(tag: "p"): StyledComponentClass, T>; - withComponent(tag: "param"): StyledComponentClass, T>; - withComponent(tag: "pre"): StyledComponentClass, T>; - withComponent(tag: "progress"): StyledComponentClass, T>; - withComponent(tag: "q"): StyledComponentClass, T>; - withComponent(tag: "select"): StyledComponentClass, T>; - withComponent(tag: "source"): StyledComponentClass, T>; - withComponent(tag: "span"): StyledComponentClass, T>; - withComponent(tag: "style"): StyledComponentClass, T>; - withComponent(tag: "table"): StyledComponentClass, T>; - withComponent(tag: "tbody"): StyledComponentClass, T>; - withComponent(tag: "td"): StyledComponentClass, T>; - withComponent(tag: "textarea"): StyledComponentClass, T>; - withComponent(tag: "tfoot"): StyledComponentClass, T>; - withComponent(tag: "th"): StyledComponentClass, T>; - withComponent(tag: "thead"): StyledComponentClass, T>; - withComponent(tag: "title"): StyledComponentClass, T>; - withComponent(tag: "tr"): StyledComponentClass, T>; - withComponent(tag: "track"): StyledComponentClass, T>; - withComponent(tag: "ul"): StyledComponentClass, T>; - withComponent(tag: "video"): StyledComponentClass, T>; + ): StyledComponentClass; + withComponent(tag: "a"): StyledComponentClass; + withComponent(tag: "area"): StyledComponentClass; + withComponent(tag: "audio"): StyledComponentClass; + withComponent(tag: "base"): StyledComponentClass; + withComponent(tag: "body"): StyledComponentClass; + withComponent(tag: "br"): StyledComponentClass; + withComponent(tag: "button"): StyledComponentClass; + withComponent(tag: "canvas"): StyledComponentClass; + withComponent(tag: "col" | "colgroup"): StyledComponentClass; + withComponent(tag: "datalist"): StyledComponentClass; + withComponent(tag: "div"): StyledComponentClass; + withComponent(tag: "dl"): StyledComponentClass; + withComponent(tag: "embed"): StyledComponentClass; + withComponent(tag: "fieldset"): StyledComponentClass; + withComponent(tag: "form"): StyledComponentClass; + withComponent(tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"): StyledComponentClass; + withComponent(tag: "head"): StyledComponentClass; + withComponent(tag: "hr"): StyledComponentClass; + withComponent(tag: "iframe"): StyledComponentClass; + withComponent(tag: "img"): StyledComponentClass; + withComponent(tag: "input"): StyledComponentClass; + withComponent(tag: "ins"): StyledComponentClass; + withComponent(tag: "label"): StyledComponentClass; + withComponent(tag: "legend"): StyledComponentClass; + withComponent(tag: "li"): StyledComponentClass; + withComponent(tag: "link"): StyledComponentClass; + withComponent(tag: "map"): StyledComponentClass; + withComponent(tag: "meta"): StyledComponentClass; + withComponent(tag: "object"): StyledComponentClass; + withComponent(tag: "ol"): StyledComponentClass; + withComponent(tag: "optgroup"): StyledComponentClass; + withComponent(tag: "option"): StyledComponentClass; + withComponent(tag: "p"): StyledComponentClass; + withComponent(tag: "param"): StyledComponentClass; + withComponent(tag: "pre"): StyledComponentClass; + withComponent(tag: "progress"): StyledComponentClass; + withComponent(tag: "q"): StyledComponentClass; + withComponent(tag: "select"): StyledComponentClass; + withComponent(tag: "source"): StyledComponentClass; + withComponent(tag: "span"): StyledComponentClass; + withComponent(tag: "style"): StyledComponentClass; + withComponent(tag: "table"): StyledComponentClass; + withComponent(tag: "tbody"): StyledComponentClass; + withComponent(tag: "td"): StyledComponentClass; + withComponent(tag: "textarea"): StyledComponentClass; + withComponent(tag: "tfoot"): StyledComponentClass; + withComponent(tag: "th"): StyledComponentClass; + withComponent(tag: "thead"): StyledComponentClass; + withComponent(tag: "title"): StyledComponentClass; + withComponent(tag: "tr"): StyledComponentClass; + withComponent(tag: "track"): StyledComponentClass; + withComponent(tag: "ul"): StyledComponentClass; + withComponent(tag: "video"): StyledComponentClass; // SVG - withComponent(tag: "circle"): StyledComponentClass, T>; - withComponent(tag: "clipPath"): StyledComponentClass, T>; - withComponent(tag: "defs"): StyledComponentClass, T>; - withComponent(tag: "ellipse"): StyledComponentClass, T>; - withComponent(tag: "g"): StyledComponentClass, T>; - withComponent(tag: "image"): StyledComponentClass, T>; - withComponent(tag: "line"): StyledComponentClass, T>; - withComponent(tag: "linearGradient"): StyledComponentClass, T>; - withComponent(tag: "mask"): StyledComponentClass, T>; - withComponent(tag: "path"): StyledComponentClass, T>; - withComponent(tag: "pattern"): StyledComponentClass, T>; - withComponent(tag: "polygon"): StyledComponentClass, T>; - withComponent(tag: "polyline"): StyledComponentClass, T>; - withComponent(tag: "radialGradient"): StyledComponentClass, T>; - withComponent(tag: "rect"): StyledComponentClass, T>; - withComponent(tag: "stop"): StyledComponentClass, T>; - withComponent(tag: "svg"): StyledComponentClass, T>; - withComponent(tag: "text"): StyledComponentClass, T>; - withComponent(tag: "tspan"): StyledComponentClass, T>; + withComponent(tag: "circle"): StyledComponentClass; + withComponent(tag: "clipPath"): StyledComponentClass; + withComponent(tag: "defs"): StyledComponentClass; + withComponent(tag: "ellipse"): StyledComponentClass; + withComponent(tag: "g"): StyledComponentClass; + withComponent(tag: "image"): StyledComponentClass; + withComponent(tag: "line"): StyledComponentClass; + withComponent(tag: "linearGradient"): StyledComponentClass; + withComponent(tag: "mask"): StyledComponentClass; + withComponent(tag: "path"): StyledComponentClass; + withComponent(tag: "pattern"): StyledComponentClass; + withComponent(tag: "polygon"): StyledComponentClass; + withComponent(tag: "polyline"): StyledComponentClass; + withComponent(tag: "radialGradient"): StyledComponentClass; + withComponent(tag: "rect"): StyledComponentClass; + withComponent(tag: "stop"): StyledComponentClass; + withComponent(tag: "svg"): StyledComponentClass; + withComponent(tag: "text"): StyledComponentClass; + withComponent(tag: "tspan"): StyledComponentClass; - withComponent(element: ComponentClass

): StyledComponentClass, T>, T>; + withComponent(element: ComponentClass

): StyledComponentClass, T>; } export interface ThemedStyledFunction { - (strings: TemplateStringsArray, ...interpolations: Interpolation>[]): StyledComponentClass, T>; - (strings: TemplateStringsArray, ...interpolations: Interpolation>[]): StyledComponentClass, T>; + (strings: TemplateStringsArray, ...interpolations: Interpolation>[]): StyledComponentClass; + (strings: TemplateStringsArray, ...interpolations: Interpolation>[]): StyledComponentClass; } export type StyledFunction

= ThemedStyledFunction; From badbf6e86b29e58bfb74b78d840c60a9d9cb640c Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Mon, 29 May 2017 21:57:31 +0100 Subject: [PATCH 09/63] Simplify extend typings using keyof --- typings/styled-components-with-component.tsx | 3 +- typings/styled-components.d.ts | 230 ++++++++++++------- 2 files changed, 147 insertions(+), 86 deletions(-) diff --git a/typings/styled-components-with-component.tsx b/typings/styled-components-with-component.tsx index e6fe20e78..e3e5d67b3 100644 --- a/typings/styled-components-with-component.tsx +++ b/typings/styled-components-with-component.tsx @@ -34,7 +34,8 @@ class Random extends React.Component { } } -// We're extending Button with some extra styles const H2 = H1.withComponent("h2"); +const a = H1.withComponent("a"); +const abbr = H1.withComponent("abbr"); const RandomHeading = H1.withComponent(Random); diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 6a470518b..71b3eec10 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -24,94 +24,154 @@ export interface InterpolationFunction

{ (props: P): Interpolation

; } -export interface StyledComponentClass extends ComponentClass> { - extend: ThemedStyledFunction; - withComponent( - tag: "abbr" | "address" | "article" | "aside" | "b" | "bdi" | "bdo" | - "big" | "blockquote" | "caption" | "cite" | "code" | "data" | "dd" | - "del" | "details" | "dfn" | "dialog" | "dt" | "em" | "figcaption" | - "figure" | "footer" | "header" | "hgroup" | "l" | "i" | "kbd" | - "keygen" | "main" | "mark" | "menu" | "menuitem" | "meter" | "nav" | - "noscript" | "output" | "picture" | "rp" | "rt" | "ruby" | "s" | - "samp" | "script" | "section" | "small" | "strong" | "sub" | - "summary" | "sup" | "time" | "u" | "var" | "wbr" - ): StyledComponentClass; - withComponent(tag: "a"): StyledComponentClass; - withComponent(tag: "area"): StyledComponentClass; - withComponent(tag: "audio"): StyledComponentClass; - withComponent(tag: "base"): StyledComponentClass; - withComponent(tag: "body"): StyledComponentClass; - withComponent(tag: "br"): StyledComponentClass; - withComponent(tag: "button"): StyledComponentClass; - withComponent(tag: "canvas"): StyledComponentClass; - withComponent(tag: "col" | "colgroup"): StyledComponentClass; - withComponent(tag: "datalist"): StyledComponentClass; - withComponent(tag: "div"): StyledComponentClass; - withComponent(tag: "dl"): StyledComponentClass; - withComponent(tag: "embed"): StyledComponentClass; - withComponent(tag: "fieldset"): StyledComponentClass; - withComponent(tag: "form"): StyledComponentClass; - withComponent(tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"): StyledComponentClass; - withComponent(tag: "head"): StyledComponentClass; - withComponent(tag: "hr"): StyledComponentClass; - withComponent(tag: "iframe"): StyledComponentClass; - withComponent(tag: "img"): StyledComponentClass; - withComponent(tag: "input"): StyledComponentClass; - withComponent(tag: "ins"): StyledComponentClass; - withComponent(tag: "label"): StyledComponentClass; - withComponent(tag: "legend"): StyledComponentClass; - withComponent(tag: "li"): StyledComponentClass; - withComponent(tag: "link"): StyledComponentClass; - withComponent(tag: "map"): StyledComponentClass; - withComponent(tag: "meta"): StyledComponentClass; - withComponent(tag: "object"): StyledComponentClass; - withComponent(tag: "ol"): StyledComponentClass; - withComponent(tag: "optgroup"): StyledComponentClass; - withComponent(tag: "option"): StyledComponentClass; - withComponent(tag: "p"): StyledComponentClass; - withComponent(tag: "param"): StyledComponentClass; - withComponent(tag: "pre"): StyledComponentClass; - withComponent(tag: "progress"): StyledComponentClass; - withComponent(tag: "q"): StyledComponentClass; - withComponent(tag: "select"): StyledComponentClass; - withComponent(tag: "source"): StyledComponentClass; - withComponent(tag: "span"): StyledComponentClass; - withComponent(tag: "style"): StyledComponentClass; - withComponent(tag: "table"): StyledComponentClass; - withComponent(tag: "tbody"): StyledComponentClass; - withComponent(tag: "td"): StyledComponentClass; - withComponent(tag: "textarea"): StyledComponentClass; - withComponent(tag: "tfoot"): StyledComponentClass; - withComponent(tag: "th"): StyledComponentClass; - withComponent(tag: "thead"): StyledComponentClass; - withComponent(tag: "title"): StyledComponentClass; - withComponent(tag: "tr"): StyledComponentClass; - withComponent(tag: "track"): StyledComponentClass; - withComponent(tag: "ul"): StyledComponentClass; - withComponent(tag: "video"): StyledComponentClass; +interface HtmlTags { + a: HTMLAnchorElement; + abbr: HTMLElement; + address: HTMLElement; + area: HTMLAreaElement; + article: HTMLElement; + aside: HTMLElement; + audio: HTMLAudioElement; + b: HTMLElement; + base: HTMLBaseElement; + bdi: HTMLElement; + bdo: HTMLElement; + big: HTMLElement; + blockquote: HTMLElement; + body: HTMLBodyElement; + br: HTMLBRElement; + button: HTMLButtonElement; + canvas: HTMLCanvasElement; + caption: HTMLElement; + cite: HTMLElement; + code: HTMLElement; + col: HTMLTableColElement; + colgroup: HTMLTableColElement; + data: HTMLElement; + datalist: HTMLDataListElement; + dd: HTMLElement; + del: HTMLElement; + details: HTMLElement; + dfn: HTMLElement; + dialog: HTMLElement; + div: HTMLDivElement; + dl: HTMLDListElement; + dt: HTMLElement; + em: HTMLElement; + embed: HTMLEmbedElement; + fieldset: HTMLFieldSetElement; + figcaption: HTMLElement; + figure: HTMLElement; + footer: HTMLElement; + form: HTMLFormElement; + h1: HTMLHeadingElement; + h2: HTMLHeadingElement; + h3: HTMLHeadingElement; + h4: HTMLHeadingElement; + h5: HTMLHeadingElement; + h6: HTMLHeadingElement; + head: HTMLHeadElement; + header: HTMLElement; + hgroup: HTMLElement; + hr: HTMLHRElement; + html: HTMLHtmlElement; + i: HTMLElement; + iframe: HTMLIFrameElement; + img: HTMLImageElement; + input: HTMLInputElement; + ins: HTMLModElement; + kbd: HTMLElement; + keygen: HTMLElement; + label: HTMLLabelElement; + legend: HTMLLegendElement; + li: HTMLLIElement; + link: HTMLLinkElement; + main: HTMLElement; + map: HTMLMapElement; + mark: HTMLElement; + menu: HTMLElement; + menuitem: HTMLElement; + meta: HTMLMetaElement; + meter: HTMLElement; + nav: HTMLElement; + noscript: HTMLElement; + object: HTMLObjectElement; + ol: HTMLOListElement; + optgroup: HTMLOptGroupElement; + option: HTMLOptionElement; + output: HTMLElement; + p: HTMLParagraphElement; + param: HTMLParamElement; + picture: HTMLElement; + pre: HTMLPreElement; + progress: HTMLProgressElement; + q: HTMLQuoteElement; + rp: HTMLElement; + rt: HTMLElement; + ruby: HTMLElement; + s: HTMLElement; + samp: HTMLElement; + script: HTMLElement; + section: HTMLElement; + select: HTMLSelectElement; + small: HTMLElement; + source: HTMLSourceElement; + span: HTMLSpanElement; + strong: HTMLElement; + style: HTMLStyleElement; + sub: HTMLElement; + summary: HTMLElement; + sup: HTMLElement; + table: HTMLTableElement; + tbody: HTMLTableSectionElement; + td: HTMLTableDataCellElement; + textarea: HTMLTextAreaElement; + tfoot: HTMLTableSectionElement; + th: HTMLTableHeaderCellElement; + thead: HTMLTableSectionElement; + time: HTMLElement; + title: HTMLTitleElement; + tr: HTMLTableRowElement; + track: HTMLTrackElement; + u: HTMLElement; + ul: HTMLUListElement; + "var": HTMLElement; + video: HTMLVideoElement; + wbr: HTMLElement; +} - // SVG - withComponent(tag: "circle"): StyledComponentClass; - withComponent(tag: "clipPath"): StyledComponentClass; - withComponent(tag: "defs"): StyledComponentClass; - withComponent(tag: "ellipse"): StyledComponentClass; - withComponent(tag: "g"): StyledComponentClass; - withComponent(tag: "image"): StyledComponentClass; - withComponent(tag: "line"): StyledComponentClass; - withComponent(tag: "linearGradient"): StyledComponentClass; - withComponent(tag: "mask"): StyledComponentClass; - withComponent(tag: "path"): StyledComponentClass; - withComponent(tag: "pattern"): StyledComponentClass; - withComponent(tag: "polygon"): StyledComponentClass; - withComponent(tag: "polyline"): StyledComponentClass; - withComponent(tag: "radialGradient"): StyledComponentClass; - withComponent(tag: "rect"): StyledComponentClass; - withComponent(tag: "stop"): StyledComponentClass; - withComponent(tag: "svg"): StyledComponentClass; - withComponent(tag: "text"): StyledComponentClass; - withComponent(tag: "tspan"): StyledComponentClass; +interface SVGTags { + circle: SVGCircleElement; + clipPath: SVGClipPathElement; + defs: SVGDefsElement; + ellipse: SVGEllipseElement; + g: SVGGElement; + image: SVGImageElement; + line: SVGLineElement; + linearGradient: SVGLinearGradientElement; + mask: SVGMaskElement; + path: SVGPathElement; + pattern: SVGPatternElement; + polygon: SVGPolygonElement; + polyline: SVGPolylineElement; + radialGradient: SVGRadialGradientElement; + rect: SVGRectElement; + stop: SVGStopElement; + svg: SVGSVGElement; + text: SVGTextElement; + tspan: SVGTSpanElement; +} + +type WithComponentOverloads = { + [K in keyof Tags]: StyledComponentClass; +}; + +export interface StyledComponentClass extends ComponentClass> { + extend: ThemedStyledFunction; + withComponent(tag: K): WithComponentOverloads[K]; + withComponent(tag: K): WithComponentOverloads[K]; withComponent(element: ComponentClass

): StyledComponentClass, T>; } From f21daa5d4c84d6cf3d2f3b903b5d4cea3e80d02e Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Mon, 29 May 2017 22:13:44 +0100 Subject: [PATCH 10/63] Refactor folders --- typings/{ => tests}/styled-components-extend-test.tsx | 2 +- typings/{ => tests}/styled-components-hoc-test.tsx | 4 ++-- typings/{ => tests}/styled-components-native-test.tsx | 2 +- typings/{ => tests}/styled-components-server-test.tsx | 2 +- typings/{ => tests}/styled-components-test.tsx | 4 ++-- .../themed-tests/mytheme-styled-components-test.tsx | 0 .../{ => tests}/themed-tests/mytheme-styled-components.tsx | 4 ++-- typings/{ => tests}/themed-tests/with-theme-test.tsx | 0 8 files changed, 9 insertions(+), 9 deletions(-) rename typings/{ => tests}/styled-components-extend-test.tsx (92%) rename typings/{ => tests}/styled-components-hoc-test.tsx (85%) rename typings/{ => tests}/styled-components-native-test.tsx (90%) rename typings/{ => tests}/styled-components-server-test.tsx (89%) rename typings/{ => tests}/styled-components-test.tsx (98%) rename typings/{ => tests}/themed-tests/mytheme-styled-components-test.tsx (100%) rename typings/{ => tests}/themed-tests/mytheme-styled-components.tsx (80%) rename typings/{ => tests}/themed-tests/with-theme-test.tsx (100%) diff --git a/typings/styled-components-extend-test.tsx b/typings/tests/styled-components-extend-test.tsx similarity index 92% rename from typings/styled-components-extend-test.tsx rename to typings/tests/styled-components-extend-test.tsx index 99177ff03..01deafc91 100644 --- a/typings/styled-components-extend-test.tsx +++ b/typings/tests/styled-components-extend-test.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import styled from ".."; +import styled from "../.."; const Button = styled.button` color: palevioletred; diff --git a/typings/styled-components-hoc-test.tsx b/typings/tests/styled-components-hoc-test.tsx similarity index 85% rename from typings/styled-components-hoc-test.tsx rename to typings/tests/styled-components-hoc-test.tsx index 5a1ea1396..edde5ab6a 100644 --- a/typings/styled-components-hoc-test.tsx +++ b/typings/tests/styled-components-hoc-test.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import styled from ".."; -import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ThemeProps } from ".."; +import styled from "../.."; +import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ThemeProps } from "../.."; class MyComponent extends React.Component, {}> { diff --git a/typings/styled-components-native-test.tsx b/typings/tests/styled-components-native-test.tsx similarity index 90% rename from typings/styled-components-native-test.tsx rename to typings/tests/styled-components-native-test.tsx index 91ceea57b..67add36db 100644 --- a/typings/styled-components-native-test.tsx +++ b/typings/tests/styled-components-native-test.tsx @@ -1,5 +1,5 @@ import * as React from "react-native"; -import styled from "../native"; +import styled from "../../native"; const StyledView = styled.View` background-color: papayawhip; diff --git a/typings/styled-components-server-test.tsx b/typings/tests/styled-components-server-test.tsx similarity index 89% rename from typings/styled-components-server-test.tsx rename to typings/tests/styled-components-server-test.tsx index 9f120f83b..039d7f380 100644 --- a/typings/styled-components-server-test.tsx +++ b/typings/tests/styled-components-server-test.tsx @@ -1,5 +1,5 @@ import { renderToString } from "react-dom/server"; -import styled, { ServerStyleSheet, StyleSheetManager } from ".."; +import styled, { ServerStyleSheet, StyleSheetManager } from "../.."; const Title = styled.h1` font-size: 1.5em; diff --git a/typings/styled-components-test.tsx b/typings/tests/styled-components-test.tsx similarity index 98% rename from typings/styled-components-test.tsx rename to typings/tests/styled-components-test.tsx index 483bd9f3e..7beba89e8 100644 --- a/typings/styled-components-test.tsx +++ b/typings/tests/styled-components-test.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import styled from ".."; -import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ServerStyleSheet } from ".."; +import styled from "../.."; +import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ServerStyleSheet } from "../.."; // Create a react component that renders an <h1> which is // centered, palevioletred and sized at 1.5em diff --git a/typings/themed-tests/mytheme-styled-components-test.tsx b/typings/tests/themed-tests/mytheme-styled-components-test.tsx similarity index 100% rename from typings/themed-tests/mytheme-styled-components-test.tsx rename to typings/tests/themed-tests/mytheme-styled-components-test.tsx diff --git a/typings/themed-tests/mytheme-styled-components.tsx b/typings/tests/themed-tests/mytheme-styled-components.tsx similarity index 80% rename from typings/themed-tests/mytheme-styled-components.tsx rename to typings/tests/themed-tests/mytheme-styled-components.tsx index 69c4863d9..386907ea0 100644 --- a/typings/themed-tests/mytheme-styled-components.tsx +++ b/typings/tests/themed-tests/mytheme-styled-components.tsx @@ -1,5 +1,5 @@ -import * as styledComponents from "../.."; -import { ThemedStyledComponentsModule } from "../.."; +import * as styledComponents from "../../.."; +import { ThemedStyledComponentsModule } from "../../.."; export interface MyTheme { primaryColor: string; diff --git a/typings/themed-tests/with-theme-test.tsx b/typings/tests/themed-tests/with-theme-test.tsx similarity index 100% rename from typings/themed-tests/with-theme-test.tsx rename to typings/tests/themed-tests/with-theme-test.tsx From c61311b3c8cac76124fd3d3b1a2a1992b5734dde Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Mon, 29 May 2017 22:18:09 +0100 Subject: [PATCH 11/63] Refactor namings and files --- typings/styled-components.d.ts | 143 +----------------- typings/tags.d.ts | 137 +++++++++++++++++ ...onents-extend-test.tsx => extend-test.tsx} | 0 ...d-components-hoc-test.tsx => hoc-test.tsx} | 0 ...yled-components-test.tsx => main-test.tsx} | 0 ...onents-native-test.tsx => native-test.tsx} | 0 ...onents-server-test.tsx => server-test.tsx} | 0 ...d-components-test.tsx => mytheme-test.tsx} | 0 .../with-component-test.tsx} | 0 9 files changed, 140 insertions(+), 140 deletions(-) create mode 100644 typings/tags.d.ts rename typings/tests/{styled-components-extend-test.tsx => extend-test.tsx} (100%) rename typings/tests/{styled-components-hoc-test.tsx => hoc-test.tsx} (100%) rename typings/tests/{styled-components-test.tsx => main-test.tsx} (100%) rename typings/tests/{styled-components-native-test.tsx => native-test.tsx} (100%) rename typings/tests/{styled-components-server-test.tsx => server-test.tsx} (100%) rename typings/tests/themed-tests/{mytheme-styled-components-test.tsx => mytheme-test.tsx} (100%) rename typings/{styled-components-with-component.tsx => tests/with-component-test.tsx} (100%) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 71b3eec10..24f34630d 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -1,6 +1,8 @@ import * as React from "react"; import { StatelessComponent, ComponentClass, PureComponent, ReactElement } from "react"; +import { HTMLTags, SVGTags } from "./tags"; + type Component<P> = ComponentClass<P> | StatelessComponent<P>; export interface ThemeProps<T> { @@ -24,145 +26,6 @@ export interface InterpolationFunction<P> { (props: P): Interpolation<P>; } - -interface HtmlTags { - a: HTMLAnchorElement; - abbr: HTMLElement; - address: HTMLElement; - area: HTMLAreaElement; - article: HTMLElement; - aside: HTMLElement; - audio: HTMLAudioElement; - b: HTMLElement; - base: HTMLBaseElement; - bdi: HTMLElement; - bdo: HTMLElement; - big: HTMLElement; - blockquote: HTMLElement; - body: HTMLBodyElement; - br: HTMLBRElement; - button: HTMLButtonElement; - canvas: HTMLCanvasElement; - caption: HTMLElement; - cite: HTMLElement; - code: HTMLElement; - col: HTMLTableColElement; - colgroup: HTMLTableColElement; - data: HTMLElement; - datalist: HTMLDataListElement; - dd: HTMLElement; - del: HTMLElement; - details: HTMLElement; - dfn: HTMLElement; - dialog: HTMLElement; - div: HTMLDivElement; - dl: HTMLDListElement; - dt: HTMLElement; - em: HTMLElement; - embed: HTMLEmbedElement; - fieldset: HTMLFieldSetElement; - figcaption: HTMLElement; - figure: HTMLElement; - footer: HTMLElement; - form: HTMLFormElement; - h1: HTMLHeadingElement; - h2: HTMLHeadingElement; - h3: HTMLHeadingElement; - h4: HTMLHeadingElement; - h5: HTMLHeadingElement; - h6: HTMLHeadingElement; - head: HTMLHeadElement; - header: HTMLElement; - hgroup: HTMLElement; - hr: HTMLHRElement; - html: HTMLHtmlElement; - i: HTMLElement; - iframe: HTMLIFrameElement; - img: HTMLImageElement; - input: HTMLInputElement; - ins: HTMLModElement; - kbd: HTMLElement; - keygen: HTMLElement; - label: HTMLLabelElement; - legend: HTMLLegendElement; - li: HTMLLIElement; - link: HTMLLinkElement; - main: HTMLElement; - map: HTMLMapElement; - mark: HTMLElement; - menu: HTMLElement; - menuitem: HTMLElement; - meta: HTMLMetaElement; - meter: HTMLElement; - nav: HTMLElement; - noscript: HTMLElement; - object: HTMLObjectElement; - ol: HTMLOListElement; - optgroup: HTMLOptGroupElement; - option: HTMLOptionElement; - output: HTMLElement; - p: HTMLParagraphElement; - param: HTMLParamElement; - picture: HTMLElement; - pre: HTMLPreElement; - progress: HTMLProgressElement; - q: HTMLQuoteElement; - rp: HTMLElement; - rt: HTMLElement; - ruby: HTMLElement; - s: HTMLElement; - samp: HTMLElement; - script: HTMLElement; - section: HTMLElement; - select: HTMLSelectElement; - small: HTMLElement; - source: HTMLSourceElement; - span: HTMLSpanElement; - strong: HTMLElement; - style: HTMLStyleElement; - sub: HTMLElement; - summary: HTMLElement; - sup: HTMLElement; - table: HTMLTableElement; - tbody: HTMLTableSectionElement; - td: HTMLTableDataCellElement; - textarea: HTMLTextAreaElement; - tfoot: HTMLTableSectionElement; - th: HTMLTableHeaderCellElement; - thead: HTMLTableSectionElement; - time: HTMLElement; - title: HTMLTitleElement; - tr: HTMLTableRowElement; - track: HTMLTrackElement; - u: HTMLElement; - ul: HTMLUListElement; - "var": HTMLElement; - video: HTMLVideoElement; - wbr: HTMLElement; -} - -interface SVGTags { - circle: SVGCircleElement; - clipPath: SVGClipPathElement; - defs: SVGDefsElement; - ellipse: SVGEllipseElement; - g: SVGGElement; - image: SVGImageElement; - line: SVGLineElement; - linearGradient: SVGLinearGradientElement; - mask: SVGMaskElement; - path: SVGPathElement; - pattern: SVGPatternElement; - polygon: SVGPolygonElement; - polyline: SVGPolylineElement; - radialGradient: SVGRadialGradientElement; - rect: SVGRectElement; - stop: SVGStopElement; - svg: SVGSVGElement; - text: SVGTextElement; - tspan: SVGTSpanElement; -} - type WithComponentOverloads<Tags, T> = { [K in keyof Tags]: StyledComponentClass<Tags[K], T>; }; @@ -170,7 +33,7 @@ type WithComponentOverloads<Tags, T> = { export interface StyledComponentClass<P, T> extends ComponentClass<ThemedOuterStyledProps<P, T>> { extend: ThemedStyledFunction<P, T>; - withComponent<K extends keyof HtmlTags>(tag: K): WithComponentOverloads<HtmlTags, T>[K]; + withComponent<K extends keyof HTMLTags>(tag: K): WithComponentOverloads<HTMLTags, T>[K]; withComponent<K extends keyof SVGTags>(tag: K): WithComponentOverloads<SVGTags, T>[K]; withComponent(element: ComponentClass<P>): StyledComponentClass<ComponentClass<P>, T>; } diff --git a/typings/tags.d.ts b/typings/tags.d.ts new file mode 100644 index 000000000..296b06e06 --- /dev/null +++ b/typings/tags.d.ts @@ -0,0 +1,137 @@ +export interface HTMLTags { + a: HTMLAnchorElement; + abbr: HTMLElement; + address: HTMLElement; + area: HTMLAreaElement; + article: HTMLElement; + aside: HTMLElement; + audio: HTMLAudioElement; + b: HTMLElement; + base: HTMLBaseElement; + bdi: HTMLElement; + bdo: HTMLElement; + big: HTMLElement; + blockquote: HTMLElement; + body: HTMLBodyElement; + br: HTMLBRElement; + button: HTMLButtonElement; + canvas: HTMLCanvasElement; + caption: HTMLElement; + cite: HTMLElement; + code: HTMLElement; + col: HTMLTableColElement; + colgroup: HTMLTableColElement; + data: HTMLElement; + datalist: HTMLDataListElement; + dd: HTMLElement; + del: HTMLElement; + details: HTMLElement; + dfn: HTMLElement; + dialog: HTMLElement; + div: HTMLDivElement; + dl: HTMLDListElement; + dt: HTMLElement; + em: HTMLElement; + embed: HTMLEmbedElement; + fieldset: HTMLFieldSetElement; + figcaption: HTMLElement; + figure: HTMLElement; + footer: HTMLElement; + form: HTMLFormElement; + h1: HTMLHeadingElement; + h2: HTMLHeadingElement; + h3: HTMLHeadingElement; + h4: HTMLHeadingElement; + h5: HTMLHeadingElement; + h6: HTMLHeadingElement; + head: HTMLHeadElement; + header: HTMLElement; + hgroup: HTMLElement; + hr: HTMLHRElement; + html: HTMLHtmlElement; + i: HTMLElement; + iframe: HTMLIFrameElement; + img: HTMLImageElement; + input: HTMLInputElement; + ins: HTMLModElement; + kbd: HTMLElement; + keygen: HTMLElement; + label: HTMLLabelElement; + legend: HTMLLegendElement; + li: HTMLLIElement; + link: HTMLLinkElement; + main: HTMLElement; + map: HTMLMapElement; + mark: HTMLElement; + menu: HTMLElement; + menuitem: HTMLElement; + meta: HTMLMetaElement; + meter: HTMLElement; + nav: HTMLElement; + noscript: HTMLElement; + object: HTMLObjectElement; + ol: HTMLOListElement; + optgroup: HTMLOptGroupElement; + option: HTMLOptionElement; + output: HTMLElement; + p: HTMLParagraphElement; + param: HTMLParamElement; + picture: HTMLElement; + pre: HTMLPreElement; + progress: HTMLProgressElement; + q: HTMLQuoteElement; + rp: HTMLElement; + rt: HTMLElement; + ruby: HTMLElement; + s: HTMLElement; + samp: HTMLElement; + script: HTMLElement; + section: HTMLElement; + select: HTMLSelectElement; + small: HTMLElement; + source: HTMLSourceElement; + span: HTMLSpanElement; + strong: HTMLElement; + style: HTMLStyleElement; + sub: HTMLElement; + summary: HTMLElement; + sup: HTMLElement; + table: HTMLTableElement; + tbody: HTMLTableSectionElement; + td: HTMLTableDataCellElement; + textarea: HTMLTextAreaElement; + tfoot: HTMLTableSectionElement; + th: HTMLTableHeaderCellElement; + thead: HTMLTableSectionElement; + time: HTMLElement; + title: HTMLTitleElement; + tr: HTMLTableRowElement; + track: HTMLTrackElement; + u: HTMLElement; + ul: HTMLUListElement; + "var": HTMLElement; + video: HTMLVideoElement; + wbr: HTMLElement; +} + +export interface SVGTags { + circle: SVGCircleElement; + clipPath: SVGClipPathElement; + defs: SVGDefsElement; + ellipse: SVGEllipseElement; + g: SVGGElement; + image: SVGImageElement; + line: SVGLineElement; + linearGradient: SVGLinearGradientElement; + mask: SVGMaskElement; + path: SVGPathElement; + pattern: SVGPatternElement; + polygon: SVGPolygonElement; + polyline: SVGPolylineElement; + radialGradient: SVGRadialGradientElement; + rect: SVGRectElement; + stop: SVGStopElement; + svg: SVGSVGElement; + text: SVGTextElement; + tspan: SVGTSpanElement; +} diff --git a/typings/tests/styled-components-extend-test.tsx b/typings/tests/extend-test.tsx similarity index 100% rename from typings/tests/styled-components-extend-test.tsx rename to typings/tests/extend-test.tsx diff --git a/typings/tests/styled-components-hoc-test.tsx b/typings/tests/hoc-test.tsx similarity index 100% rename from typings/tests/styled-components-hoc-test.tsx rename to typings/tests/hoc-test.tsx diff --git a/typings/tests/styled-components-test.tsx b/typings/tests/main-test.tsx similarity index 100% rename from typings/tests/styled-components-test.tsx rename to typings/tests/main-test.tsx diff --git a/typings/tests/styled-components-native-test.tsx b/typings/tests/native-test.tsx similarity index 100% rename from typings/tests/styled-components-native-test.tsx rename to typings/tests/native-test.tsx diff --git a/typings/tests/styled-components-server-test.tsx b/typings/tests/server-test.tsx similarity index 100% rename from typings/tests/styled-components-server-test.tsx rename to typings/tests/server-test.tsx diff --git a/typings/tests/themed-tests/mytheme-styled-components-test.tsx b/typings/tests/themed-tests/mytheme-test.tsx similarity index 100% rename from typings/tests/themed-tests/mytheme-styled-components-test.tsx rename to typings/tests/themed-tests/mytheme-test.tsx diff --git a/typings/styled-components-with-component.tsx b/typings/tests/with-component-test.tsx similarity index 100% rename from typings/styled-components-with-component.tsx rename to typings/tests/with-component-test.tsx From bda9b483beaa7ba2dfbcd22c1680188308eeaf1d Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Mon, 29 May 2017 22:52:55 +0100 Subject: [PATCH 12/63] Improve typings declaration --- typings/styled-components.d.ts | 143 ++------------------------------- 1 file changed, 6 insertions(+), 137 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 24f34630d..08e28d55d 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -50,148 +50,17 @@ export type HtmlStyledFunction<E> = ThemedHtmlStyledFunction<E, any>; export type ThemedSvgStyledFunction<E extends SVGElement, T> = ThemedStyledFunction<React.SVGAttributes<E>, T>; export type SvgStyledFunction<E extends SVGElement> = ThemedSvgStyledFunction<E, any>; -export interface ThemedBaseStyledInterface<T> { +type Base<T> = { + [K in keyof HTMLTags]: ThemedHtmlStyledFunction<HTMLTags[K], T>; +} + +export interface ThemedBaseStyledInterface<T> extends Base<T> { <P>(component: Component<P>): ThemedStyledFunction<P, T>; } export type BaseStyledInterface = ThemedBaseStyledInterface<any>; +export type ThemedStyledInterface<T> = ThemedBaseStyledInterface<T>; export type StyledInterface = ThemedStyledInterface<any>; -export interface ThemedStyledInterface<T> extends ThemedBaseStyledInterface<T> { - a: ThemedHtmlStyledFunction<HTMLAnchorElement, T>; - abbr: ThemedHtmlStyledFunction<HTMLElement, T>; - address: ThemedHtmlStyledFunction<HTMLElement, T>; - area: ThemedHtmlStyledFunction<HTMLAreaElement, T>; - article: ThemedHtmlStyledFunction<HTMLElement, T>; - aside: ThemedHtmlStyledFunction<HTMLElement, T>; - audio: ThemedHtmlStyledFunction<HTMLAudioElement, T>; - b: ThemedHtmlStyledFunction<HTMLElement, T>; - base: ThemedHtmlStyledFunction<HTMLBaseElement, T>; - bdi: ThemedHtmlStyledFunction<HTMLElement, T>; - bdo: ThemedHtmlStyledFunction<HTMLElement, T>; - big: ThemedHtmlStyledFunction<HTMLElement, T>; - blockquote: ThemedHtmlStyledFunction<HTMLElement, T>; - body: ThemedHtmlStyledFunction<HTMLBodyElement, T>; - br: ThemedHtmlStyledFunction<HTMLBRElement, T>; - button: ThemedHtmlStyledFunction<HTMLButtonElement, T>; - canvas: ThemedHtmlStyledFunction<HTMLCanvasElement, T>; - caption: ThemedHtmlStyledFunction<HTMLElement, T>; - cite: ThemedHtmlStyledFunction<HTMLElement, T>; - code: ThemedHtmlStyledFunction<HTMLElement, T>; - col: ThemedHtmlStyledFunction<HTMLTableColElement, T>; - colgroup: ThemedHtmlStyledFunction<HTMLTableColElement, T>; - data: ThemedHtmlStyledFunction<HTMLElement, T>; - datalist: ThemedHtmlStyledFunction<HTMLDataListElement, T>; - dd: ThemedHtmlStyledFunction<HTMLElement, T>; - del: ThemedHtmlStyledFunction<HTMLElement, T>; - details: ThemedHtmlStyledFunction<HTMLElement, T>; - dfn: ThemedHtmlStyledFunction<HTMLElement, T>; - dialog: ThemedHtmlStyledFunction<HTMLElement, T>; - div: ThemedHtmlStyledFunction<HTMLDivElement, T>; - dl: ThemedHtmlStyledFunction<HTMLDListElement, T>; - dt: ThemedHtmlStyledFunction<HTMLElement, T>; - em: ThemedHtmlStyledFunction<HTMLElement, T>; - embed: ThemedHtmlStyledFunction<HTMLEmbedElement, T>; - fieldset: ThemedHtmlStyledFunction<HTMLFieldSetElement, T>; - figcaption: ThemedHtmlStyledFunction<HTMLElement, T>; - figure: ThemedHtmlStyledFunction<HTMLElement, T>; - footer: ThemedHtmlStyledFunction<HTMLElement, T>; - form: ThemedHtmlStyledFunction<HTMLFormElement, T>; - h1: ThemedHtmlStyledFunction<HTMLHeadingElement, T>; - h2: ThemedHtmlStyledFunction<HTMLHeadingElement, T>; - h3: ThemedHtmlStyledFunction<HTMLHeadingElement, T>; - h4: ThemedHtmlStyledFunction<HTMLHeadingElement, T>; - h5: ThemedHtmlStyledFunction<HTMLHeadingElement, T>; - h6: ThemedHtmlStyledFunction<HTMLHeadingElement, T>; - head: ThemedHtmlStyledFunction<HTMLHeadElement, T>; - header: ThemedHtmlStyledFunction<HTMLElement, T>; - hgroup: ThemedHtmlStyledFunction<HTMLElement, T>; - hr: ThemedHtmlStyledFunction<HTMLHRElement, T>; - html: ThemedHtmlStyledFunction<HTMLHtmlElement, T>; - i: ThemedHtmlStyledFunction<HTMLElement, T>; - iframe: ThemedHtmlStyledFunction<HTMLIFrameElement, T>; - img: ThemedHtmlStyledFunction<HTMLImageElement, T>; - input: ThemedHtmlStyledFunction<HTMLInputElement, T>; - ins: ThemedHtmlStyledFunction<HTMLModElement, T>; - kbd: ThemedHtmlStyledFunction<HTMLElement, T>; - keygen: ThemedHtmlStyledFunction<HTMLElement, T>; - label: ThemedHtmlStyledFunction<HTMLLabelElement, T>; - legend: ThemedHtmlStyledFunction<HTMLLegendElement, T>; - li: ThemedHtmlStyledFunction<HTMLLIElement, T>; - link: ThemedHtmlStyledFunction<HTMLLinkElement, T>; - main: ThemedHtmlStyledFunction<HTMLElement, T>; - map: ThemedHtmlStyledFunction<HTMLMapElement, T>; - mark: ThemedHtmlStyledFunction<HTMLElement, T>; - menu: ThemedHtmlStyledFunction<HTMLElement, T>; - menuitem: ThemedHtmlStyledFunction<HTMLElement, T>; - meta: ThemedHtmlStyledFunction<HTMLMetaElement, T>; - meter: ThemedHtmlStyledFunction<HTMLElement, T>; - nav: ThemedHtmlStyledFunction<HTMLElement, T>; - noscript: ThemedHtmlStyledFunction<HTMLElement, T>; - object: ThemedHtmlStyledFunction<HTMLObjectElement, T>; - ol: ThemedHtmlStyledFunction<HTMLOListElement, T>; - optgroup: ThemedHtmlStyledFunction<HTMLOptGroupElement, T>; - option: ThemedHtmlStyledFunction<HTMLOptionElement, T>; - output: ThemedHtmlStyledFunction<HTMLElement, T>; - p: ThemedHtmlStyledFunction<HTMLParagraphElement, T>; - param: ThemedHtmlStyledFunction<HTMLParamElement, T>; - picture: ThemedHtmlStyledFunction<HTMLElement, T>; - pre: ThemedHtmlStyledFunction<HTMLPreElement, T>; - progress: ThemedHtmlStyledFunction<HTMLProgressElement, T>; - q: ThemedHtmlStyledFunction<HTMLQuoteElement, T>; - rp: ThemedHtmlStyledFunction<HTMLElement, T>; - rt: ThemedHtmlStyledFunction<HTMLElement, T>; - ruby: ThemedHtmlStyledFunction<HTMLElement, T>; - s: ThemedHtmlStyledFunction<HTMLElement, T>; - samp: ThemedHtmlStyledFunction<HTMLElement, T>; - script: ThemedHtmlStyledFunction<HTMLElement, T>; - section: ThemedHtmlStyledFunction<HTMLElement, T>; - select: ThemedHtmlStyledFunction<HTMLSelectElement, T>; - small: ThemedHtmlStyledFunction<HTMLElement, T>; - source: ThemedHtmlStyledFunction<HTMLSourceElement, T>; - span: ThemedHtmlStyledFunction<HTMLSpanElement, T>; - strong: ThemedHtmlStyledFunction<HTMLElement, T>; - style: ThemedHtmlStyledFunction<HTMLStyleElement, T>; - sub: ThemedHtmlStyledFunction<HTMLElement, T>; - summary: ThemedHtmlStyledFunction<HTMLElement, T>; - sup: ThemedHtmlStyledFunction<HTMLElement, T>; - table: ThemedHtmlStyledFunction<HTMLTableElement, T>; - tbody: ThemedHtmlStyledFunction<HTMLTableSectionElement, T>; - td: ThemedHtmlStyledFunction<HTMLTableDataCellElement, T>; - textarea: ThemedHtmlStyledFunction<HTMLTextAreaElement, T>; - tfoot: ThemedHtmlStyledFunction<HTMLTableSectionElement, T>; - th: ThemedHtmlStyledFunction<HTMLTableHeaderCellElement, T>; - thead: ThemedHtmlStyledFunction<HTMLTableSectionElement, T>; - time: ThemedHtmlStyledFunction<HTMLElement, T>; - title: ThemedHtmlStyledFunction<HTMLTitleElement, T>; - tr: ThemedHtmlStyledFunction<HTMLTableRowElement, T>; - track: ThemedHtmlStyledFunction<HTMLTrackElement, T>; - u: ThemedHtmlStyledFunction<HTMLElement, T>; - ul: ThemedHtmlStyledFunction<HTMLUListElement, T>; - "var": ThemedHtmlStyledFunction<HTMLElement, T>; - video: ThemedHtmlStyledFunction<HTMLVideoElement, T>; - wbr: ThemedHtmlStyledFunction<HTMLElement, T>; - - // SVG - circle: ThemedSvgStyledFunction<SVGCircleElement, T>; - clipPath: ThemedSvgStyledFunction<SVGClipPathElement, T>; - defs: ThemedSvgStyledFunction<SVGDefsElement, T>; - ellipse: ThemedSvgStyledFunction<SVGEllipseElement, T>; - g: ThemedSvgStyledFunction<SVGGElement, T>; - image: ThemedSvgStyledFunction<SVGImageElement, T>; - line: ThemedSvgStyledFunction<SVGLineElement, T>; - linearGradient: ThemedSvgStyledFunction<SVGLinearGradientElement, T>; - mask: ThemedSvgStyledFunction<SVGMaskElement, T>; - path: ThemedSvgStyledFunction<SVGPathElement, T>; - pattern: ThemedSvgStyledFunction<SVGPatternElement, T>; - polygon: ThemedSvgStyledFunction<SVGPolygonElement, T>; - polyline: ThemedSvgStyledFunction<SVGPolylineElement, T>; - radialGradient: ThemedSvgStyledFunction<SVGRadialGradientElement, T>; - rect: ThemedSvgStyledFunction<SVGRectElement, T>; - stop: ThemedSvgStyledFunction<SVGStopElement, T>; - svg: ThemedSvgStyledFunction<SVGSVGElement, T>; - text: ThemedSvgStyledFunction<SVGTextElement, T>; - tspan: ThemedSvgStyledFunction<SVGTSpanElement, T>; -} export type ThemeProviderComponent<T> = ComponentClass<ThemeProps<T>>; From 42c6cf79d3f461803cbda83b8ee3bba126ab48bc Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Tue, 30 May 2017 09:48:21 +0100 Subject: [PATCH 13/63] Update typings and typescript --- package.json | 6 +++--- yarn.lock | 18 +++++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 616498314..ad9d7a140 100644 --- a/package.json +++ b/package.json @@ -70,8 +70,8 @@ "supports-color": "^3.2.3" }, "devDependencies": { - "@types/react": "^0.14.55", - "@types/react-native": "^0.37.5", + "@types/react": "^15.0.25", + "@types/react-native": "^0.44.4", "babel-cli": "^6.22.2", "babel-core": "^6.17.0", "babel-eslint": "^7.1.1", @@ -120,7 +120,7 @@ "rollup-plugin-uglify": "^1.0.1", "rollup-plugin-visualizer": "^0.1.5", "tslint": "^4.3.1", - "typescript": "^2.1.5" + "typescript": "^2.3.3" }, "peerDependencies": { "react": "^0.14.0 || ^15.0.0-0" diff --git a/yarn.lock b/yarn.lock index f83891f8b..69ce87909 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,15 +2,15 @@ # yarn lockfile v1 -"@types/react-native@^0.37.5": - version "0.37.13" - resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.37.13.tgz#65548f892ed6e55ef87add1ffeec72275b4152b7" +"@types/react-native@^0.44.4": + version "0.44.4" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.44.4.tgz#91ff838293f87f5b27827164fc1efe5e528b6f5a" dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^0.14.55": - version "0.14.57" - resolved "https://registry.yarnpkg.com/@types/react/-/react-0.14.57.tgz#1878a8654fafdd1d381b8457292b6433498c5b62" +"@types/react@*", "@types/react@^15.0.25": + version "15.0.25" + resolved "https://registry.yarnpkg.com/@types/react/-/react-15.0.25.tgz#d396949cccc9a90b61755def9781e5aced9b2261" abab@^1.0.3: version "1.0.3" @@ -5840,9 +5840,9 @@ typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" -typescript@^2.1.5: - version "2.3.0" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.0.tgz#2e63e09284392bc8158a2444c33e2093795c0418" +typescript@^2.3.3: + version "2.3.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.3.tgz#9639f3c3b40148e8ca97fe08a51dd1891bb6be22" ua-parser-js@^0.7.9: version "0.7.12" From 42928c060f465435dce0cfe7a02d8d0bec148462 Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Tue, 30 May 2017 20:43:50 +0100 Subject: [PATCH 14/63] Add missing svg tags --- typings/styled-components.d.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 08e28d55d..03997526b 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -50,11 +50,17 @@ export type HtmlStyledFunction<E> = ThemedHtmlStyledFunction<E, any>; export type ThemedSvgStyledFunction<E extends SVGElement, T> = ThemedStyledFunction<React.SVGAttributes<E>, T>; export type SvgStyledFunction<E extends SVGElement> = ThemedSvgStyledFunction<E, any>; -type Base<T> = { +type ThemedStyledComponentFactoriesHTML<T> = { [K in keyof HTMLTags]: ThemedHtmlStyledFunction<HTMLTags[K], T>; } -export interface ThemedBaseStyledInterface<T> extends Base<T> { +type ThemedStyledComponentFactoriesSVG<T> = { + [K in keyof SVGTags]: ThemedSvgStyledFunction<SVGTags[K], T>; +} + +type ThemedStyledComponentFactories<T> = ThemedStyledComponentFactoriesHTML<T> & ThemedStyledComponentFactoriesHTML<T>; + +export interface ThemedBaseStyledInterface<T> extends ThemedStyledComponentFactories<T> { <P>(component: Component<P>): ThemedStyledFunction<P, T>; } export type BaseStyledInterface = ThemedBaseStyledInterface<any>; From 4a62d5d541f8338144d054e19eccf7298612c65f Mon Sep 17 00:00:00 2001 From: Brandon Mills <mills.brandont@gmail.com> Date: Mon, 29 May 2017 12:06:03 -0400 Subject: [PATCH 15/63] Failing test: withComponent(...).attrs is not a function Should it be possible to add `attrs` after overriding `withComponent`? I found a test for `withComponent` followed by `extend`, but none for `attrs`, so I added one: ```js const Parent = styled.button` color: red; ` const Child = Parent.withComponent('a').attrs({ href: '/test' })`` ``` Currently this throws `TypeError: Parent.withComponent(...).attrs is not a function`. --- src/test/extending.test.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/test/extending.test.js b/src/test/extending.test.js index 1769cb178..36caafe28 100644 --- a/src/test/extending.test.js +++ b/src/test/extending.test.js @@ -158,4 +158,15 @@ describe('extending', () => { .sc-c {} .d { color: red; color: green; } `) }) + + it('should allow changing component and adding attributes', () => { + const Parent = styled.button` + color: red; + ` + const Child = Parent.withComponent('a').attrs({ + href: '/test' + })`` + + expect(shallow(<Child />).html()).toEqual('<a class="sc-b c" href="/test"></a>') + }) }) From a7e47c318ac6c12f0149d4d1f5e5fe38bb8d4e54 Mon Sep 17 00:00:00 2001 From: Brandon Mills <mills.brandont@gmail.com> Date: Fri, 2 Jun 2017 01:47:59 -0400 Subject: [PATCH 16/63] Insert extend in withComponenet attrs test --- src/test/extending.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/test/extending.test.js b/src/test/extending.test.js index 36caafe28..88eb5d457 100644 --- a/src/test/extending.test.js +++ b/src/test/extending.test.js @@ -163,10 +163,10 @@ describe('extending', () => { const Parent = styled.button` color: red; ` - const Child = Parent.withComponent('a').attrs({ + const Child = Parent.withComponent('a').extend.attrs({ href: '/test' })`` - expect(shallow(<Child />).html()).toEqual('<a class="sc-b c" href="/test"></a>') + expect(shallow(<Child />).html()).toEqual('<a href="/test" class="sc-c d"></a>') }) }) From 3d455b67aaaf9f8e88e5d539a93a8bbb9afd63c0 Mon Sep 17 00:00:00 2001 From: Brandon Mills <mills.brandont@gmail.com> Date: Fri, 2 Jun 2017 02:33:39 -0400 Subject: [PATCH 17/63] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e6f7e2949..5f4802f7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file. If a contri ## [Unreleased] +- Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851)) - Upgrade stylis to v3.0.4. (see [#829](https://github.com/styled-components/styled-components/pull/829)) ## [v2.0.0] - 2017-05-25 From bb7f11ac08e99d85e3c70a6b894feee5d627aa44 Mon Sep 17 00:00:00 2001 From: Rolf Erik Lekang <me@rolflekang.com> Date: Fri, 2 Jun 2017 20:25:11 +0200 Subject: [PATCH 18/63] Remove the flow copy logic from build process These should not be used anymore as we have written in the docs lately libdef is now the easiest way to use flow with styled-components. Using the sources as we did earlier generates a lot of errors that is hard to avoid. --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 616498314..028da4348 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,9 @@ "jsnext:main": "dist/styled-components.es.js", "module": "dist/styled-components.es.js", "scripts": { - "build": "npm run build:lib && npm run build:dist && npm run build:flow", + "build": "npm run build:lib && npm run build:dist", "prebuild:lib": "rimraf lib/*", "build:lib": "babel --out-dir lib src", - "build:flow": "flow-copy-source -v -i '{**/test/*.js,**/*.test.js}' src lib", "prebuild:dist": "rimraf dist/*", "build:dist": "rollup -c && rollup -c --environment ESBUNDLE && rollup -c --environment PRODUCTION", "build:watch": "npm run build:lib -- --watch", From ad471b85f7fa810f92ea09c6f5da19033d51fb43 Mon Sep 17 00:00:00 2001 From: Erik Rasmussen <rasmussenerik@gmail.com> Date: Fri, 2 Jun 2017 21:06:30 +0200 Subject: [PATCH 19/63] Added reference to styled-components-theme lib --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2478c8119..662202386 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,7 @@ We could use your help to get syntax highlighting support to other editors! If y #### Helpers - [styled-props](https://github.com/RafalFilipek/styled-props): Simple lib that allows you to set styled props in your styled-components without stress ([demo](http://www.webpackbin.com/N1EKUqgvG)) - [styled-components-breakpoint](https://github.com/jameslnewell/styled-components-breakpoint): Utility function for using breakpoints with `styled-components`. +- [styled-components-theme](https://github.com/erikras/styled-components-theme): A library for refering to theme colors and modifying them inline. e.g. `color: ${primary.lighten(0.3)};` - [styled-theme](https://github.com/diegohaz/styled-theme): Extensible theming system for styled-components. - [styled-tools](https://github.com/diegohaz/styled-tools): Useful interpolated functions for styled-components. - [styled-ax](https://github.com/Lokua/styled-ax): Functional theme property accessor(s) From 871bcfaf19b606769042bd7426b4dfd258a97e71 Mon Sep 17 00:00:00 2001 From: Erik Rasmussen <rasmussenerik@gmail.com> Date: Fri, 2 Jun 2017 21:11:40 +0200 Subject: [PATCH 20/63] Placed at end of list. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 662202386..36ff14bb9 100644 --- a/README.md +++ b/README.md @@ -106,11 +106,11 @@ We could use your help to get syntax highlighting support to other editors! If y #### Helpers - [styled-props](https://github.com/RafalFilipek/styled-props): Simple lib that allows you to set styled props in your styled-components without stress ([demo](http://www.webpackbin.com/N1EKUqgvG)) - [styled-components-breakpoint](https://github.com/jameslnewell/styled-components-breakpoint): Utility function for using breakpoints with `styled-components`. -- [styled-components-theme](https://github.com/erikras/styled-components-theme): A library for refering to theme colors and modifying them inline. e.g. `color: ${primary.lighten(0.3)};` - [styled-theme](https://github.com/diegohaz/styled-theme): Extensible theming system for styled-components. - [styled-tools](https://github.com/diegohaz/styled-tools): Useful interpolated functions for styled-components. - [styled-ax](https://github.com/Lokua/styled-ax): Functional theme property accessor(s) - [react-create-component-from-tag-prop](https://github.com/jameslnewell/react-create-component-from-tag-prop): Create a react component from a tag prop. Lets your users to choose which HTML elements get styled by your 💅 styled-components. +- [styled-components-theme](https://github.com/erikras/styled-components-theme): A library for refering to theme colors and modifying them inline. e.g. `color: ${primary.lighten(0.3)};` ### Boilerplates - [react-redux-styled-hot-universal](https://github.com/krasevych/react-redux-styled-hot-universal) (SSR, Universal Webpack, Redux, React-router, Webpack 2, Babel, Styled Components and more...) From 67295657204d0c76bad5b521a35ae998099745c4 Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Fri, 2 Jun 2017 20:12:50 +0100 Subject: [PATCH 21/63] Fix with component type def --- typings/styled-components.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 03997526b..d4d620718 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -35,7 +35,7 @@ export interface StyledComponentClass<P, T> extends ComponentClass<ThemedOuterSt withComponent<K extends keyof HTMLTags>(tag: K): WithComponentOverloads<HTMLTags, T>[K]; withComponent<K extends keyof SVGTags>(tag: K): WithComponentOverloads<SVGTags, T>[K]; - withComponent(element: ComponentClass<P>): StyledComponentClass<ComponentClass<P>, T>; + withComponent(element: ComponentClass<P>): StyledComponentClass<P, T>; } export interface ThemedStyledFunction<P, T> { From de74116a1d0bf109c59e02226af8e565e751289c Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Fri, 2 Jun 2017 20:13:16 +0100 Subject: [PATCH 22/63] Fix collectStyling typing --- typings/styled-components.d.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index d4d620718..acf80aae3 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -96,11 +96,17 @@ export function injectGlobal(strings: TemplateStringsArray, ...interpolations: S export const ThemeProvider: ThemeProviderComponent<any>; -export class StyleSheetManager extends React.Component<{ sheet: ServerStyleSheet }, any> { } +interface StylesheetComponentProps { + sheet: ServerStyleSheet; +} + +export class StyleSheetManager extends React.Component<StylesheetComponentProps, any> { } export class ServerStyleSheet { collectStyles(children: ReactElement<any>): StyleSheetManager - collectStyles(tree: any): StyleSheetManager; + collectStyles(tree: React.ReactNode): StyleSheetManager; + collectStyles(tree: React.ReactNode): ReactElement<{ sheet: ServerStyleSheet; }>; + getStyleTags(): string; getStyleElement(): ReactElement<any>[] static create(): StyleSheet From 99474e5a1c15e92a75adfc6da2f721075e0b4e6b Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Fri, 2 Jun 2017 20:34:17 +0100 Subject: [PATCH 23/63] Add basic attrs type definition --- typings/styled-components.d.ts | 7 +++++++ typings/tests/attrs-test.tsx | 35 ++++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 typings/tests/attrs-test.tsx diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index acf80aae3..316cce1c4 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -30,18 +30,25 @@ type WithComponentOverloads<Tags, T> = { [K in keyof Tags]: StyledComponentClass<Tags[K], T>; }; +type PropsToFunctions<P, T> = { + // [K in keyof P]: (props: ThemedOuterStyledProps<P, T>) => any; +} + export interface StyledComponentClass<P, T> extends ComponentClass<ThemedOuterStyledProps<P, T>> { extend: ThemedStyledFunction<P, T>; withComponent<K extends keyof HTMLTags>(tag: K): WithComponentOverloads<HTMLTags, T>[K]; withComponent<K extends keyof SVGTags>(tag: K): WithComponentOverloads<SVGTags, T>[K]; withComponent(element: ComponentClass<P>): StyledComponentClass<P, T>; + attrs(attrs: P | PropsToFunctions<ThemedOuterStyledProps<P, T>, T>): ThemedStyledFunction<P, T>; } export interface ThemedStyledFunction<P, T> { (strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): StyledComponentClass<P, T>; <U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P, T>; + attrs(attrs: P | PropsToFunctions<ThemedOuterStyledProps<P, T>, T>): ThemedStyledFunction<P, T>; } + export type StyledFunction<P> = ThemedStyledFunction<P, any>; export type ThemedHtmlStyledFunction<E, T> = ThemedStyledFunction<React.HTMLProps<E>, T>; diff --git a/typings/tests/attrs-test.tsx b/typings/tests/attrs-test.tsx new file mode 100644 index 000000000..429baebc0 --- /dev/null +++ b/typings/tests/attrs-test.tsx @@ -0,0 +1,35 @@ + +import styled from "../.."; + +const Input = styled.input.attrs({ + // we can define static props + type: "password", + + // or we can define dynamic ones + margin: props => props.size || "1em", + padding: props => props.size || "1em" +})` + color: palevioletred; + font-size: 1em; + border: 2px solid palevioletred; + border-radius: 3px; + + /* here we use the dynamically computed props */ + margin: ${(props: any) => props.margin}; + padding: ${(props: any) => props.padding}; +`; + +const Button = styled.button` + color: palevioletred; + font-size: 1em; + margin: 1em; + padding: 0.25em 1em; + border: 2px solid palevioletred; + border-radius: 3px; +`; + +const TomatoButton = Button.attrs({ + title: (props) => "title" +})` + color: red; +`; From 23d5a6790c257c34b1b93cf953bbe90a8a015586 Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Fri, 2 Jun 2017 23:35:56 +0100 Subject: [PATCH 24/63] Improve attrs typings --- typings/styled-components.d.ts | 12 ++++++------ typings/tests/attrs-test.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 316cce1c4..450a79421 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -30,9 +30,9 @@ type WithComponentOverloads<Tags, T> = { [K in keyof Tags]: StyledComponentClass<Tags[K], T>; }; -type PropsToFunctions<P, T> = { - // [K in keyof P]: (props: ThemedOuterStyledProps<P, T>) => any; -} +type Attrs<P, A extends Partial<P>, T> = { + [K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K]; +}; export interface StyledComponentClass<P, T> extends ComponentClass<ThemedOuterStyledProps<P, T>> { extend: ThemedStyledFunction<P, T>; @@ -40,13 +40,13 @@ export interface StyledComponentClass<P, T> extends ComponentClass<ThemedOuterSt withComponent<K extends keyof HTMLTags>(tag: K): WithComponentOverloads<HTMLTags, T>[K]; withComponent<K extends keyof SVGTags>(tag: K): WithComponentOverloads<SVGTags, T>[K]; withComponent(element: ComponentClass<P>): StyledComponentClass<P, T>; - attrs(attrs: P | PropsToFunctions<ThemedOuterStyledProps<P, T>, T>): ThemedStyledFunction<P, T>; + attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; } -export interface ThemedStyledFunction<P, T> { +export interface ThemedStyledFunction<P, T, O = P> { (strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): StyledComponentClass<P, T>; <U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P, T>; - attrs(attrs: P | PropsToFunctions<ThemedOuterStyledProps<P, T>, T>): ThemedStyledFunction<P, T>; + attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; } export type StyledFunction<P> = ThemedStyledFunction<P, any>; diff --git a/typings/tests/attrs-test.tsx b/typings/tests/attrs-test.tsx index 429baebc0..fa1e487c4 100644 --- a/typings/tests/attrs-test.tsx +++ b/typings/tests/attrs-test.tsx @@ -15,8 +15,8 @@ const Input = styled.input.attrs({ border-radius: 3px; /* here we use the dynamically computed props */ - margin: ${(props: any) => props.margin}; - padding: ${(props: any) => props.padding}; + margin: ${(props) => props.margin}; + padding: ${(props) => props.padding}; `; const Button = styled.button` From 046538aa654f65bd69ce7d7d39b4edf502ded560 Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Fri, 2 Jun 2017 23:41:13 +0100 Subject: [PATCH 25/63] Removing space --- typings/tests/attrs-test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/typings/tests/attrs-test.tsx b/typings/tests/attrs-test.tsx index fa1e487c4..a1996ea0f 100644 --- a/typings/tests/attrs-test.tsx +++ b/typings/tests/attrs-test.tsx @@ -1,4 +1,3 @@ - import styled from "../.."; const Input = styled.input.attrs({ From 8ec3c7a080118beea360138e15cdc91429a6a083 Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Fri, 2 Jun 2017 23:55:37 +0100 Subject: [PATCH 26/63] Support for theme functions --- typings/styled-components.d.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 450a79421..e98fce4a0 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -5,8 +5,11 @@ import { HTMLTags, SVGTags } from "./tags"; type Component<P> = ComponentClass<P> | StatelessComponent<P>; +type ThemeFunction<T> = (theme: any | T) => any | T; +type Theme<T> = any | ThemeFunction<T>; + export interface ThemeProps<T> { - theme: T; + theme: Theme<T>; } export type ThemedStyledProps<P, T> = P & ThemeProps<T>; From 3c1cd836adb5c0a9c21eded3c59da913e752a6ad Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Fri, 2 Jun 2017 23:57:38 +0100 Subject: [PATCH 27/63] Fix missing generic --- typings/styled-components.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index e98fce4a0..120e8380b 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -37,7 +37,7 @@ type Attrs<P, A extends Partial<P>, T> = { [K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K]; }; -export interface StyledComponentClass<P, T> extends ComponentClass<ThemedOuterStyledProps<P, T>> { +export interface StyledComponentClass<P, T, O = P> extends ComponentClass<ThemedOuterStyledProps<P, T>> { extend: ThemedStyledFunction<P, T>; withComponent<K extends keyof HTMLTags>(tag: K): WithComponentOverloads<HTMLTags, T>[K]; @@ -49,7 +49,7 @@ export interface StyledComponentClass<P, T> extends ComponentClass<ThemedOuterSt export interface ThemedStyledFunction<P, T, O = P> { (strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): StyledComponentClass<P, T>; <U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P, T>; - attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; + attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; } export type StyledFunction<P> = ThemedStyledFunction<P, any>; From 58ed0276db6d34450bc0430647a1907ffe8693b4 Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Sat, 3 Jun 2017 00:05:43 +0100 Subject: [PATCH 28/63] Fix union --- typings/styled-components.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 120e8380b..da57f7be3 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -43,13 +43,13 @@ export interface StyledComponentClass<P, T, O = P> extends ComponentClass<Themed withComponent<K extends keyof HTMLTags>(tag: K): WithComponentOverloads<HTMLTags, T>[K]; withComponent<K extends keyof SVGTags>(tag: K): WithComponentOverloads<SVGTags, T>[K]; withComponent(element: ComponentClass<P>): StyledComponentClass<P, T>; - attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; + attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P | U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; } export interface ThemedStyledFunction<P, T, O = P> { (strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): StyledComponentClass<P, T>; <U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P, T>; - attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; + attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P | U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; } export type StyledFunction<P> = ThemedStyledFunction<P, any>; From 9d5b9383043b8c9d220b622ba3a409f2634df1ae Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Sat, 3 Jun 2017 12:45:04 +0100 Subject: [PATCH 29/63] Simplify with component typings --- typings/styled-components.d.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index da57f7be3..73a0e7883 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -29,10 +29,6 @@ export interface InterpolationFunction<P> { (props: P): Interpolation<P>; } -type WithComponentOverloads<Tags, T> = { - [K in keyof Tags]: StyledComponentClass<Tags[K], T>; -}; - type Attrs<P, A extends Partial<P>, T> = { [K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K]; }; @@ -40,8 +36,8 @@ type Attrs<P, A extends Partial<P>, T> = { export interface StyledComponentClass<P, T, O = P> extends ComponentClass<ThemedOuterStyledProps<P, T>> { extend: ThemedStyledFunction<P, T>; - withComponent<K extends keyof HTMLTags>(tag: K): WithComponentOverloads<HTMLTags, T>[K]; - withComponent<K extends keyof SVGTags>(tag: K): WithComponentOverloads<SVGTags, T>[K]; + withComponent<K extends keyof HTMLTags>(tag: K): StyledComponentClass<HTMLTags[K], T>; + withComponent<K extends keyof SVGTags>(tag: K): StyledComponentClass<SVGTags[K], T>; withComponent(element: ComponentClass<P>): StyledComponentClass<P, T>; attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P | U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; } From 957a75037709fe39fe50d25488517c746f9e798d Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Sat, 3 Jun 2017 12:45:50 +0100 Subject: [PATCH 30/63] Remove unsupported attrs typing --- typings/styled-components.d.ts | 1 - typings/tests/attrs-test.tsx | 15 --------------- 2 files changed, 16 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 73a0e7883..322a42383 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -39,7 +39,6 @@ export interface StyledComponentClass<P, T, O = P> extends ComponentClass<Themed withComponent<K extends keyof HTMLTags>(tag: K): StyledComponentClass<HTMLTags[K], T>; withComponent<K extends keyof SVGTags>(tag: K): StyledComponentClass<SVGTags[K], T>; withComponent(element: ComponentClass<P>): StyledComponentClass<P, T>; - attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P | U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; } export interface ThemedStyledFunction<P, T, O = P> { diff --git a/typings/tests/attrs-test.tsx b/typings/tests/attrs-test.tsx index a1996ea0f..341ae22e9 100644 --- a/typings/tests/attrs-test.tsx +++ b/typings/tests/attrs-test.tsx @@ -17,18 +17,3 @@ const Input = styled.input.attrs({ margin: ${(props) => props.margin}; padding: ${(props) => props.padding}; `; - -const Button = styled.button` - color: palevioletred; - font-size: 1em; - margin: 1em; - padding: 0.25em 1em; - border: 2px solid palevioletred; - border-radius: 3px; -`; - -const TomatoButton = Button.attrs({ - title: (props) => "title" -})` - color: red; -`; From fcbc7859d812b2151ae953bac7b31a73ca52262c Mon Sep 17 00:00:00 2001 From: Patrick Arminio <patrick.arminio@gmail.com> Date: Sat, 3 Jun 2017 15:31:50 +0100 Subject: [PATCH 31/63] Fix react native test --- typings/tests/native-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typings/tests/native-test.tsx b/typings/tests/native-test.tsx index 67add36db..8315267c5 100644 --- a/typings/tests/native-test.tsx +++ b/typings/tests/native-test.tsx @@ -1,4 +1,4 @@ -import * as React from "react-native"; +import * as React from "react"; import styled from "../../native"; const StyledView = styled.View` From 6d9a0a5d5e7de7b1d531f7deed46d31478a7ca37 Mon Sep 17 00:00:00 2001 From: Bruno Lemos <brunohplemos@gmail.com> Date: Sun, 4 Jun 2017 21:53:37 -0300 Subject: [PATCH 32/63] Fix extend for 3 or more inheritances (Fix #780) --- CHANGELOG.md | 1 + src/models/StyledComponent.js | 19 +++++++++-- src/models/StyledNativeComponent.js | 25 +++++++++++++-- src/native/test/native.test.js | 49 +++++++++++++++++++++++++++++ src/test/extending.test.js | 34 ++++++++++++++++++++ 5 files changed, 123 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f4802f7a..83471e8f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file. If a contri ## [Unreleased] +- Fixed `extend` not working with 3 or more inheritances, thanks to [@brunolemos](https://twitter.com/brunolemos). (see [#871](https://github.com/styled-components/styled-components/pull/871)) - Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851)) - Upgrade stylis to v3.0.4. (see [#829](https://github.com/styled-components/styled-components/pull/829)) diff --git a/src/models/StyledComponent.js b/src/models/StyledComponent.js index 3d93d404f..238471cac 100644 --- a/src/models/StyledComponent.js +++ b/src/models/StyledComponent.js @@ -214,8 +214,23 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => { } static get extend() { - const { displayName: _, componentId: __, ...optionsToCopy } = options - const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledComponent } + const { + displayName: _, + componentId: __, + rules: rulesFromOptions, + ...optionsToCopy + } = options + + const newRules = rulesFromOptions === undefined + ? rules + : rulesFromOptions.concat(rules) + + const newOptions = { + ...optionsToCopy, + rules: newRules, + ParentComponent: StyledComponent, + } + return constructWithOptions(createStyledComponent, target, newOptions) } } diff --git a/src/models/StyledNativeComponent.js b/src/models/StyledNativeComponent.js index 4f03f20be..0b0a1de01 100644 --- a/src/models/StyledNativeComponent.js +++ b/src/models/StyledNativeComponent.js @@ -182,9 +182,28 @@ export default (constructWithOptions: Function) => { } static get extend() { - const { displayName: _, componentId: __, ...optionsToCopy } = options - const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledNativeComponent } - return constructWithOptions(createStyledNativeComponent, target, newOptions) + const { + displayName: _, + componentId: __, + rules: rulesFromOptions, + ...optionsToCopy + } = options + + const newRules = rulesFromOptions === undefined + ? rules + : rulesFromOptions.concat(rules) + + const newOptions = { + ...optionsToCopy, + rules: newRules, + ParentComponent: StyledNativeComponent, + } + + return constructWithOptions( + createStyledNativeComponent, + target, + newOptions, + ) } } diff --git a/src/native/test/native.test.js b/src/native/test/native.test.js index d7ee1e180..775f5cbf9 100644 --- a/src/native/test/native.test.js +++ b/src/native/test/native.test.js @@ -55,6 +55,55 @@ describe('native', () => { }, undefined ]) }) + + it('should combine styles of extending components in >= 3 inheritances', () => { + const GrandGrandParent = styled.View`background-color: red;` + const GrandParent = GrandGrandParent.extend`borderWidth: 10;` + const Parent = GrandParent.extend`opacity: 0.9;` + const Child = Parent.extend`padding: 10px;` + + const grandGrandParent = shallow(<GrandGrandParent />) + const grandParent = shallow(<GrandParent />) + const parent = shallow(<Parent />) + const child = shallow(<Child />) + + expect(grandGrandParent.find('View').prop('style')).toEqual([ + { + backgroundColor: 'red', + }, + undefined, + ]) + + expect(grandParent.find('View').prop('style')).toEqual([ + { + backgroundColor: 'red', + borderWidth: 10, + }, + undefined, + ]) + + expect(parent.find('View').prop('style')).toEqual([ + { + backgroundColor: 'red', + borderWidth: 10, + opacity: 0.9, + }, + undefined, + ]) + + expect(child.find('View').prop('style')).toEqual([ + { + backgroundColor: 'red', + borderWidth: 10, + opacity: 0.9, + paddingTop: 10, + paddingRight: 10, + paddingBottom: 10, + paddingLeft: 10, + }, + undefined, + ]) + }) }) describe('attrs', () => { diff --git a/src/test/extending.test.js b/src/test/extending.test.js index 88eb5d457..e22a70bc9 100644 --- a/src/test/extending.test.js +++ b/src/test/extending.test.js @@ -138,6 +138,40 @@ describe('extending', () => { expect(Child.fetchData()).toEqual(1) }) + it('should keep styles in >= 3 inheritances', () => { + const GrandGrandParent = styled.div` + background-color: red; + ` + + const GrandParent = GrandGrandParent.extend` + color: blue; + ` + + const Parent = GrandParent.extend` + border: 2px solid black; + ` + + const Child = Parent.extend` + border-width: 10; + ` + + shallow(<GrandGrandParent />) + shallow(<GrandParent />) + shallow(<Parent />) + shallow(<Child />) + + expectCSSMatches(` + .sc-a { } + .e { background-color: red; } + .sc-b { } + .f { background-color: red; color: blue; } + .sc-c { } + .g { background-color: red; color: blue; border: 2px solid black; } + .sc-d { } + .h { background-color: red; color: blue; border: 2px solid black; border-width: 10; } + `) + }) + it('should allow changing component', () => { const Parent = styled.div`color: red;` const Child = Parent.withComponent('span') From 07c83172edaa7f99d46ed892b09caa68fac567b2 Mon Sep 17 00:00:00 2001 From: Max Stoiber <contact@mxstbr.com> Date: Mon, 5 Jun 2017 12:52:14 +0200 Subject: [PATCH 33/63] Update badges - Link to new [Spectrum community forum](https://spectrum.chat/styled-components) - Remove build status badges (they aren't necessary at all since they don't correspond to what people install) - Remove "Supported by Thinkmill"-badge (I no longer work there) --- README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index 36ff14bb9..73d549c22 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,7 @@ npm install --save styled-components ``` [![npm](https://img.shields.io/npm/v/styled-components.svg)](https://www.npmjs.com/package/styled-components) -[![Travis Build Status](https://travis-ci.org/styled-components/styled-components.svg?branch=master)](https://travis-ci.org/styled-components/styled-components) -[![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/github/gruntjs/grunt?branch=master&svg=true)](https://ci.appveyor.com/project/mxstbr/styled-components) -[![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=styled-components) -[![gitter](https://camo.githubusercontent.com/54dc79dc7da6b76b17bc8013342da9b4266d993c/68747470733a2f2f6261646765732e6769747465722e696d2f6d78737462722f72656163742d626f696c6572706c6174652e737667)](https://gitter.im/styled-components/styled-components) +[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/styled-components) ![gzip size](http://img.badgesize.io/https://unpkg.com/styled-components/dist/styled-components.min.js?compression=gzip&label=gzip%20size) ![size](http://img.badgesize.io/https://unpkg.com/styled-components/dist/styled-components.min.js?label=size) From f9e8cc3e95ceea124596eb459450af22d7569066 Mon Sep 17 00:00:00 2001 From: Igor Oleinikov <igor@oleinikov.ru> Date: Mon, 5 Jun 2017 15:31:41 -0700 Subject: [PATCH 34/63] Fix minor typings issues: - removed any from theme - outer theme prop can be a theme selector - properly carry on outer props `O` in StyledComponentClass and ThemedStyledFunction - fix attrs - correct collectStyles - remove ServerStyleManager.create - minor fixes to tests - introduce tsconfig for tests --- package.json | 3 +- typings/styled-components.d.ts | 30 ++++++--------- typings/tests/attrs-test.tsx | 4 +- typings/tests/hoc-test.tsx | 1 - typings/tests/main-test.tsx | 2 +- typings/tests/server-test.tsx | 6 +-- typings/tests/tsconfig.json | 53 +++++++++++++++++++++++++++ typings/tests/with-component-test.tsx | 6 ++- yarn.lock | 6 +++ 9 files changed, 83 insertions(+), 28 deletions(-) create mode 100644 typings/tests/tsconfig.json diff --git a/package.json b/package.json index ad9d7a140..4ec84bbda 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "flow:watch": "flow-watch", "lint": "eslint src", "tslint": "tslint typings/*.ts native/*.ts", - "typescript": "tsc ./typings/styled-components-test.tsx ./typings/styled-components-native-test.tsx ./typings/themed-tests/mytheme-styled-components-test.tsx --noEmit --jsx react --target es6 --module es2015 --moduleResolution node", + "typescript": "tsc --project ./typings/tests", "prepublish": "npm run build", "lint-staged": "lint-staged", "dev": "babel-node example/devServer.js" @@ -71,6 +71,7 @@ }, "devDependencies": { "@types/react": "^15.0.25", + "@types/react-dom": "^15.5.0", "@types/react-native": "^0.44.4", "babel-cli": "^6.22.2", "babel-core": "^6.17.0", diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 322a42383..29706a538 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -5,18 +5,15 @@ import { HTMLTags, SVGTags } from "./tags"; type Component<P> = ComponentClass<P> | StatelessComponent<P>; -type ThemeFunction<T> = (theme: any | T) => any | T; -type Theme<T> = any | ThemeFunction<T>; - export interface ThemeProps<T> { - theme: Theme<T>; + theme: T; } export type ThemedStyledProps<P, T> = P & ThemeProps<T>; export type StyledProps<P> = ThemedStyledProps<P, any>; export type ThemedOuterStyledProps<P, T> = P & { - theme?: T; + theme?: T | ((theme: T) => T); innerRef?: (instance: any) => void; }; export type OuterStyledProps<P> = ThemedOuterStyledProps<P, any>; @@ -33,18 +30,18 @@ type Attrs<P, A extends Partial<P>, T> = { [K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K]; }; -export interface StyledComponentClass<P, T, O = P> extends ComponentClass<ThemedOuterStyledProps<P, T>> { - extend: ThemedStyledFunction<P, T>; +export interface StyledComponentClass<P, T, O = P> extends ComponentClass<ThemedOuterStyledProps<O, T>> { + extend: ThemedStyledFunction<P, T, O>; - withComponent<K extends keyof HTMLTags>(tag: K): StyledComponentClass<HTMLTags[K], T>; - withComponent<K extends keyof SVGTags>(tag: K): StyledComponentClass<SVGTags[K], T>; - withComponent(element: ComponentClass<P>): StyledComponentClass<P, T>; + withComponent<K extends keyof HTMLTags>(tag: K): StyledComponentClass<React.HTMLProps<HTMLTags[K]>, T, O>; + withComponent<K extends keyof SVGTags>(tag: K): StyledComponentClass<React.SVGAttributes<SVGTags[K]>, T, O>; + withComponent(element: ComponentClass<P>): StyledComponentClass<P, T, O>; } export interface ThemedStyledFunction<P, T, O = P> { - (strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): StyledComponentClass<P, T>; - <U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P, T>; - attrs<U, A extends Partial<P> = {}>(attrs: Attrs<P | U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; + (strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): StyledComponentClass<P, T, O>; + <U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P & U, T, O & U>; + attrs<U, A extends Partial<P & U> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>; } export type StyledFunction<P> = ThemedStyledFunction<P, any>; @@ -108,13 +105,10 @@ interface StylesheetComponentProps { export class StyleSheetManager extends React.Component<StylesheetComponentProps, any> { } export class ServerStyleSheet { - collectStyles(children: ReactElement<any>): StyleSheetManager - collectStyles(tree: React.ReactNode): StyleSheetManager; - collectStyles(tree: React.ReactNode): ReactElement<{ sheet: ServerStyleSheet; }>; + collectStyles(tree: React.ReactNode): ReactElement<StylesheetComponentProps>; getStyleTags(): string; - getStyleElement(): ReactElement<any>[] - static create(): StyleSheet + getStyleElement(): ReactElement<any>[]; } export default styled; diff --git a/typings/tests/attrs-test.tsx b/typings/tests/attrs-test.tsx index 341ae22e9..b7d38a11b 100644 --- a/typings/tests/attrs-test.tsx +++ b/typings/tests/attrs-test.tsx @@ -5,8 +5,8 @@ const Input = styled.input.attrs({ type: "password", // or we can define dynamic ones - margin: props => props.size || "1em", - padding: props => props.size || "1em" + margin: (props: any) => props.size as string || "1em", + padding: (props: any) => props.size as string || "1em" })` color: palevioletred; font-size: 1em; diff --git a/typings/tests/hoc-test.tsx b/typings/tests/hoc-test.tsx index edde5ab6a..1b0c94c25 100644 --- a/typings/tests/hoc-test.tsx +++ b/typings/tests/hoc-test.tsx @@ -3,7 +3,6 @@ import * as React from "react"; import styled from "../.."; import { css, keyframes, ThemeProvider, injectGlobal, withTheme, ThemeProps } from "../.."; - class MyComponent extends React.Component<ThemeProps<{}>, {}> { render() { const { theme } = this.props; diff --git a/typings/tests/main-test.tsx b/typings/tests/main-test.tsx index 7beba89e8..78e57af87 100644 --- a/typings/tests/main-test.tsx +++ b/typings/tests/main-test.tsx @@ -134,7 +134,7 @@ const cssWithFunc1 = css` `; const cssWithFunc2 = css` ${cssWithFunc1} - ${props => cssWithFunc2} + ${props => cssWithFunc1} ${[cssWithFunc1, cssWithValues1]} `; // such css can be used in styled components diff --git a/typings/tests/server-test.tsx b/typings/tests/server-test.tsx index 039d7f380..a177e3e92 100644 --- a/typings/tests/server-test.tsx +++ b/typings/tests/server-test.tsx @@ -1,3 +1,4 @@ +import * as React from "react"; import { renderToString } from "react-dom/server"; import styled, { ServerStyleSheet, StyleSheetManager } from "../.."; @@ -11,13 +12,12 @@ const sheet = new ServerStyleSheet(); const html = renderToString(sheet.collectStyles(<Title>Hello world)); const css = sheet.getStyleTags(); const styleElement = sheet.getStyleElement(); -ServerStyleSheet.create(); -const sheet2 = new ServerStyleSheet() +const sheet2 = new ServerStyleSheet(); const html2 = renderToString( Hello world -) +); const css2 = sheet2.getStyleElement(); diff --git a/typings/tests/tsconfig.json b/typings/tests/tsconfig.json new file mode 100644 index 000000000..f7c1edff4 --- /dev/null +++ b/typings/tests/tsconfig.json @@ -0,0 +1,53 @@ +{ + "compilerOptions": { + /* Basic Options */ + "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ + "module": "es2015" , /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */ + // "lib": [], /* Specify library files to be included in the compilation: */ + // "allowJs": true, /* Allow javascript files to be compiled. */ + // "checkJs": true, /* Report errors in .js files. */ + "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ + // "declaration": true, /* Generates corresponding '.d.ts' file. */ + // "sourceMap": true, /* Generates corresponding '.map' file. */ + // "outFile": "./", /* Concatenate and emit output to single file. */ + // "outDir": "./", /* Redirect output structure to the directory. */ + // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ + // "removeComments": true, /* Do not emit comments to output. */ + "noEmit": true, /* Do not emit outputs. */ + // "importHelpers": true, /* Import emit helpers from 'tslib'. */ + // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ + // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ + + /* Strict Type-Checking Options */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* Enable strict null checks. */ + // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ + + /* Additional Checks */ + // "noUnusedLocals": true, /* Report errors on unused locals. */ + // "noUnusedParameters": true, /* Report errors on unused parameters. */ + // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ + // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ + + /* Module Resolution Options */ + "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ + // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ + // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ + // "typeRoots": [], /* List of folders to include type definitions from. */ + // "types": [], /* Type declaration files to be included in compilation. */ + // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ + + /* Source Map Options */ + // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ + // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ + // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ + + /* Experimental Options */ + // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ + // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ + } +} \ No newline at end of file diff --git a/typings/tests/with-component-test.tsx b/typings/tests/with-component-test.tsx index e3e5d67b3..f39adabed 100644 --- a/typings/tests/with-component-test.tsx +++ b/typings/tests/with-component-test.tsx @@ -1,13 +1,13 @@ import * as React from "react"; -import styled from ".."; +import styled from "../.."; const H1 = styled.h1` color: palevioletred; font-size: 1em; `; -function getRandomInt(min, max) { +function getRandomInt(min: number, max: number) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; @@ -30,6 +30,8 @@ class Random extends React.Component { return

Hello World
; case 6: return
Hello World
; + default: + return null; } } } diff --git a/yarn.lock b/yarn.lock index 69ce87909..d419989c8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,12 @@ # yarn lockfile v1 +"@types/react-dom@^15.5.0": + version "15.5.0" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.0.tgz#7f4fb9613d4051141773242f7b6b5f1a46b34bd9" + dependencies: + "@types/react" "*" + "@types/react-native@^0.44.4": version "0.44.4" resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.44.4.tgz#91ff838293f87f5b27827164fc1efe5e528b6f5a" From 1880dfa3ae167dc3d09ad52bf19e39d1ab78f43b Mon Sep 17 00:00:00 2001 From: Igor Oleinikov Date: Mon, 5 Jun 2017 16:11:31 -0700 Subject: [PATCH 35/63] Move theme functions into ThemeProvider --- typings/styled-components.d.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 29706a538..2a9ce934e 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -13,7 +13,7 @@ export type ThemedStyledProps = P & ThemeProps; export type StyledProps

= ThemedStyledProps; export type ThemedOuterStyledProps = P & { - theme?: T | ((theme: T) => T); + theme?: T; innerRef?: (instance: any) => void; }; export type OuterStyledProps

= ThemedOuterStyledProps; @@ -70,7 +70,10 @@ export type BaseStyledInterface = ThemedBaseStyledInterface; export type ThemedStyledInterface = ThemedBaseStyledInterface; export type StyledInterface = ThemedStyledInterface; -export type ThemeProviderComponent = ComponentClass>; +export interface ThemeProviderProps { + theme?: T | ((theme: T) => T); +} +export type ThemeProviderComponent = ComponentClass>; export interface ThemedCssFunction { (strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): InterpolationValue[]; From ff9f83dc0e2d99f25b686ad1e6f5bf7aa4f3f748 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Tue, 6 Jun 2017 12:20:42 +0100 Subject: [PATCH 36/63] Only allow objects as theme --- typings/styled-components.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 2a9ce934e..f89ba567d 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -99,7 +99,7 @@ export function withTheme

(component: Component

): export function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string; export function injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void; -export const ThemeProvider: ThemeProviderComponent; +export const ThemeProvider: ThemeProviderComponent; interface StylesheetComponentProps { sheet: ServerStyleSheet; From a9c67082654c43da7a8f5c47d2c1c0d165d74daf Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Tue, 6 Jun 2017 12:21:50 +0100 Subject: [PATCH 37/63] Add function theme tests --- typings/tests/function-themes-test.tsx | 39 ++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 typings/tests/function-themes-test.tsx diff --git a/typings/tests/function-themes-test.tsx b/typings/tests/function-themes-test.tsx new file mode 100644 index 000000000..c29a89af5 --- /dev/null +++ b/typings/tests/function-themes-test.tsx @@ -0,0 +1,39 @@ +import * as React from "react"; + +import styled, { ThemeProvider } from "../.."; + +// Define our button, but with the use of props.theme this time +const Button = styled.button` + color: ${props => props.theme.fg}; + border: 2px solid ${props => props.theme.fg}; + background: ${props => props.theme.bg}; + + font-size: 1em; + margin: 1em; + padding: 0.25em 1em; + border-radius: 3px; +`; + +// Define our `fg` and `bg` on the theme +const theme = { + fg: "palevioletred", + bg: "white" +}; + +// This theme swaps `fg` and `bg` +const invertTheme = ({ fg, bg }: { fg: string, bg: string }) => ({ + fg: bg, + bg: fg +}); + +const MyApp = + +
+ + + + + +
+ + ; From bd432d3eac32999d47632d34748159e2575fa585 Mon Sep 17 00:00:00 2001 From: Patrick Arminio Date: Tue, 6 Jun 2017 16:32:56 +0100 Subject: [PATCH 38/63] =?UTF-8?q?Add=20missing=20semicolon=20=F0=9F=92=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- typings/styled-components.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index f89ba567d..8b98f2186 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -54,11 +54,11 @@ export type SvgStyledFunction = ThemedSvgStyledFunction = { [K in keyof HTMLTags]: ThemedHtmlStyledFunction; -} +}; type ThemedStyledComponentFactoriesSVG = { [K in keyof SVGTags]: ThemedSvgStyledFunction; -} +}; type ThemedStyledComponentFactories = ThemedStyledComponentFactoriesHTML & ThemedStyledComponentFactoriesHTML; From 958f5e42540797f9ff0cd3f0a7451283be7c9545 Mon Sep 17 00:00:00 2001 From: Konstantin Pschera Date: Tue, 6 Jun 2017 18:05:26 +0200 Subject: [PATCH 39/63] Fix changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b9d5e6ec..ee3ebd881 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file. If a contri - Fixed `extend` not working with 3 or more inheritances, thanks to [@brunolemos](https://twitter.com/brunolemos). (see [#871](https://github.com/styled-components/styled-components/pull/871)) - Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851)) - Upgrade stylis to v3.0.4. (see [#829](https://github.com/styled-components/styled-components/pull/829)) +- Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840)) ## [v2.0.0] - 2017-05-25 @@ -35,7 +36,6 @@ All notable changes to this project will be documented in this file. If a contri - Restore `setNativeProps` in StyledNativeComponent, thanks to [@MatthieuLemoine](https://github.com/MatthieuLemoine). (see [#764](https://github.com/styled-components/styled-components/pull/764)) - Fix `ref` being passed to Stateless Functional Components in StyledNativeComponent. (see [#828](https://github.com/styled-components/styled-components/pull/828)) - Add `displayName` to `componentId` when both are present (see [#821](https://github.com/styled-components/styled-components/pull/821)) -- Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840)) ## [v1.4.6] - 2017-05-02 From 6854486c6c791bed3cc62a7e98235f1f167a267b Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Tue, 6 Jun 2017 17:43:28 -0300 Subject: [PATCH 40/63] Upgrade stylis from 3.0.4 to 3.0.17 to fix a crash Fix ReferenceError: escade is not defined See https://github.com/thysultan/stylis.js/issues/30 --- CHANGELOG.md | 3 +-- package.json | 2 +- src/test/css.test.js | 2 +- yarn.lock | 6 +++--- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ee3ebd881..b25e45b9c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,7 @@ All notable changes to this project will be documented in this file. If a contri - Fixed `extend` not working with 3 or more inheritances, thanks to [@brunolemos](https://twitter.com/brunolemos). (see [#871](https://github.com/styled-components/styled-components/pull/871)) - Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851)) -- Upgrade stylis to v3.0.4. (see [#829](https://github.com/styled-components/styled-components/pull/829)) -- Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840)) +- Upgraded stylis to v3.0. (see [#829](https://github.com/styled-components/styled-components/pull/829) and [#876](https://github.com/styled-components/styled-components/pull/876)) ## [v2.0.0] - 2017-05-25 diff --git a/package.json b/package.json index 2a6259ad0..569a1b284 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "is-function": "^1.0.1", "is-plain-object": "^2.0.1", "prop-types": "^15.5.4", - "stylis": "^3.0.4", + "stylis": "^3.0.17", "supports-color": "^3.2.3" }, "devDependencies": { diff --git a/src/test/css.test.js b/src/test/css.test.js index 0a0a77dec..9a22cc0ab 100644 --- a/src/test/css.test.js +++ b/src/test/css.test.js @@ -29,7 +29,7 @@ describe('css features', () => { expectCSSMatches(` .sc-a {} .b { - display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } `) }) diff --git a/yarn.lock b/yarn.lock index e7977ad74..06a71dbdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5651,9 +5651,9 @@ strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" -stylis@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.4.tgz#fd7a0f6c10c09903704cc362bc23449afda33458" +stylis@^3.0.17: + version "3.0.17" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.17.tgz#978643aed384f2138c54af9c02adeb61f1aa75f6" supports-color@^2.0.0: version "2.0.0" From 819bca18ea1cc0054cd3aa127852e99069c1fbeb Mon Sep 17 00:00:00 2001 From: Bruno Lemos Date: Wed, 7 Jun 2017 11:22:24 -0300 Subject: [PATCH 41/63] Fix CHANGELOG from last 2 merges Apparently my ide merged it wrong and removed [this change](https://github.com/styled-components/styled-components/pull/874/files) in my [pr](https://github.com/styled-components/styled-components/commit/6854486c6c791bed3cc62a7e98235f1f167a267b) --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b25e45b9c..f995ac64b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file. If a contri - Fixed `extend` not working with 3 or more inheritances, thanks to [@brunolemos](https://twitter.com/brunolemos). (see [#871](https://github.com/styled-components/styled-components/pull/871)) - Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851)) +- Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840)) - Upgraded stylis to v3.0. (see [#829](https://github.com/styled-components/styled-components/pull/829) and [#876](https://github.com/styled-components/styled-components/pull/876)) ## [v2.0.0] - 2017-05-25 From 51fbfa0ccb10404b4b3ef539726fb37181f60f4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Phil=20Pl=C3=BCckthun?= Date: Wed, 7 Jun 2017 16:24:04 +0100 Subject: [PATCH 42/63] Remove unused autoprefixing code and inline-style-prefixer --- CHANGELOG.md | 1 + flow-typed/inline-style-prefixer_vx.x.x.js | 256 --------------------- package.json | 1 - src/utils/autoprefix.js | 28 --- yarn.lock | 15 -- 5 files changed, 1 insertion(+), 300 deletions(-) delete mode 100644 flow-typed/inline-style-prefixer_vx.x.x.js delete mode 100644 src/utils/autoprefix.js diff --git a/CHANGELOG.md b/CHANGELOG.md index f995ac64b..28e481250 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ All notable changes to this project will be documented in this file. If a contri - Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851)) - Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840)) - Upgraded stylis to v3.0. (see [#829](https://github.com/styled-components/styled-components/pull/829) and [#876](https://github.com/styled-components/styled-components/pull/876)) +- Remove dead code used previously for auto-prefixing. (see [#881](https://github.com/styled-components/styled-components/pull/881)) ## [v2.0.0] - 2017-05-25 diff --git a/flow-typed/inline-style-prefixer_vx.x.x.js b/flow-typed/inline-style-prefixer_vx.x.x.js deleted file mode 100644 index 428e4b5d2..000000000 --- a/flow-typed/inline-style-prefixer_vx.x.x.js +++ /dev/null @@ -1,256 +0,0 @@ -// flow-typed signature: 2ab55e903767f1d4cde6a118971f3c19 -// flow-typed version: <>/inline-style-prefixer_v2.0.4/flow_v0.34.0 - -/** - * This is an autogenerated libdef stub for: - * - * 'inline-style-prefixer' - * - * Fill this stub out by replacing all the `any` types. - * - * Once filled out, we encourage you to share your work with the - * community by sending a pull request to: - * https://github.com/flowtype/flow-typed - */ - -declare module 'inline-style-prefixer' { - declare module.exports: any; -} - -/** - * We include stubs for each file inside this npm package in case you need to - * require those files directly. Feel free to delete any files that aren't - * needed. - */ -declare module 'inline-style-prefixer/dist/inline-style-prefix-all' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/dist/inline-style-prefix-all.min' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/dist/inline-style-prefixer' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/dist/inline-style-prefixer.min' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/plugins/calc' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/plugins/flex' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/plugins/flexboxIE' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/plugins/flexboxOld' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/plugins/grabCursor' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/plugins/gradient' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/plugins/sizing' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/plugins/transition' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/plugins/zoomCursor' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/Prefixer' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/prefixProps' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/plugins/calc' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/plugins/cursor' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/plugins/flex' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/plugins/flexboxIE' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/plugins/flexboxOld' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/plugins/gradient' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/plugins/sizing' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/plugins/transition' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/prefixAll' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/static/prefixProps' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/utils/capitalizeString' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/utils/getBrowserInformation' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/utils/getPrefixedKeyframes' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/utils/getPrefixedValue' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/utils/isPrefixedValue' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/utils/joinPrefixedValue' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/lib/utils/unprefixProperty' { - declare module.exports: any; -} - -declare module 'inline-style-prefixer/static' { - declare module.exports: any; -} - -// Filename aliases -declare module 'inline-style-prefixer/dist/inline-style-prefix-all.js' { - declare module.exports: $Exports<'inline-style-prefixer/dist/inline-style-prefix-all'>; -} -declare module 'inline-style-prefixer/dist/inline-style-prefix-all.min.js' { - declare module.exports: $Exports<'inline-style-prefixer/dist/inline-style-prefix-all.min'>; -} -declare module 'inline-style-prefixer/dist/inline-style-prefixer.js' { - declare module.exports: $Exports<'inline-style-prefixer/dist/inline-style-prefixer'>; -} -declare module 'inline-style-prefixer/dist/inline-style-prefixer.min.js' { - declare module.exports: $Exports<'inline-style-prefixer/dist/inline-style-prefixer.min'>; -} -declare module 'inline-style-prefixer/lib/plugins/calc.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/calc'>; -} -declare module 'inline-style-prefixer/lib/plugins/flex.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/flex'>; -} -declare module 'inline-style-prefixer/lib/plugins/flexboxIE.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/flexboxIE'>; -} -declare module 'inline-style-prefixer/lib/plugins/flexboxOld.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/flexboxOld'>; -} -declare module 'inline-style-prefixer/lib/plugins/grabCursor.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/grabCursor'>; -} -declare module 'inline-style-prefixer/lib/plugins/gradient.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/gradient'>; -} -declare module 'inline-style-prefixer/lib/plugins/sizing.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/sizing'>; -} -declare module 'inline-style-prefixer/lib/plugins/transition.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/transition'>; -} -declare module 'inline-style-prefixer/lib/plugins/zoomCursor.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/plugins/zoomCursor'>; -} -declare module 'inline-style-prefixer/lib/Prefixer.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/Prefixer'>; -} -declare module 'inline-style-prefixer/lib/prefixProps.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/prefixProps'>; -} -declare module 'inline-style-prefixer/lib/static/plugins/calc.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/calc'>; -} -declare module 'inline-style-prefixer/lib/static/plugins/cursor.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/cursor'>; -} -declare module 'inline-style-prefixer/lib/static/plugins/flex.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/flex'>; -} -declare module 'inline-style-prefixer/lib/static/plugins/flexboxIE.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/flexboxIE'>; -} -declare module 'inline-style-prefixer/lib/static/plugins/flexboxOld.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/flexboxOld'>; -} -declare module 'inline-style-prefixer/lib/static/plugins/gradient.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/gradient'>; -} -declare module 'inline-style-prefixer/lib/static/plugins/sizing.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/sizing'>; -} -declare module 'inline-style-prefixer/lib/static/plugins/transition.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/plugins/transition'>; -} -declare module 'inline-style-prefixer/lib/static/prefixAll.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/prefixAll'>; -} -declare module 'inline-style-prefixer/lib/static/prefixProps.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/static/prefixProps'>; -} -declare module 'inline-style-prefixer/lib/utils/capitalizeString.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/utils/capitalizeString'>; -} -declare module 'inline-style-prefixer/lib/utils/getBrowserInformation.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/utils/getBrowserInformation'>; -} -declare module 'inline-style-prefixer/lib/utils/getPrefixedKeyframes.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/utils/getPrefixedKeyframes'>; -} -declare module 'inline-style-prefixer/lib/utils/getPrefixedValue.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/utils/getPrefixedValue'>; -} -declare module 'inline-style-prefixer/lib/utils/isPrefixedValue.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/utils/isPrefixedValue'>; -} -declare module 'inline-style-prefixer/lib/utils/joinPrefixedValue.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/utils/joinPrefixedValue'>; -} -declare module 'inline-style-prefixer/lib/utils/unprefixProperty.js' { - declare module.exports: $Exports<'inline-style-prefixer/lib/utils/unprefixProperty'>; -} -declare module 'inline-style-prefixer/static.js' { - declare module.exports: $Exports<'inline-style-prefixer/static'>; -} diff --git a/package.json b/package.json index 569a1b284..0f99bff48 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,6 @@ "css-to-react-native": "^2.0.3", "fbjs": "^0.8.9", "hoist-non-react-statics": "^1.2.0", - "inline-style-prefixer": "^2.0.5", "is-function": "^1.0.1", "is-plain-object": "^2.0.1", "prop-types": "^15.5.4", diff --git a/src/utils/autoprefix.js b/src/utils/autoprefix.js deleted file mode 100644 index ec8259c94..000000000 --- a/src/utils/autoprefix.js +++ /dev/null @@ -1,28 +0,0 @@ -// @flow -import camelizeStyleName from 'fbjs/lib/camelizeStyleName' -import hyphenateStyleName from 'fbjs/lib/hyphenateStyleName' - -// eslint-disable-next-line -import prefixAll from 'inline-style-prefixer/static' -import type Container from '../vendor/postcss/container' - -export default (root: Container) => { - root.walkDecls(decl => { - /* No point even checking custom props */ - if (/^--/.test(decl.prop)) return - - const objStyle = { [camelizeStyleName(decl.prop)]: decl.value } - const prefixed = prefixAll(objStyle) - Object.keys(prefixed).forEach(newProp => { - const newVals = prefixed[newProp] - const newValArray = Array.isArray(newVals) ? newVals : [newVals] - newValArray.forEach(newVal => { - decl.cloneBefore({ - prop: hyphenateStyleName(newProp), - value: newVal, - }) - }) - }) - decl.remove() - }) -} diff --git a/yarn.lock b/yarn.lock index 06a71dbdf..e19608ae2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1120,10 +1120,6 @@ boom@2.x.x: dependencies: hoek "2.x.x" -bowser@^1.0.0: - version "1.6.1" - resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.1.tgz#9157e9498f456e937173a2918f3b2161e5353eb3" - boxen@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.0.0.tgz#b2694baf1f605f708ff0177c12193b22f29aaaab" @@ -2924,10 +2920,6 @@ http-signature@~1.1.0: jsprim "^1.2.2" sshpk "^1.7.0" -hyphenate-style-name@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b" - iconv-lite@0.4.11: version "0.4.11" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.11.tgz#2ecb42fd294744922209a2e7c404dac8793d8ade" @@ -2989,13 +2981,6 @@ ini@~1.3.0: version "1.3.4" resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e" -inline-style-prefixer@^2.0.5: - version "2.0.5" - resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7" - dependencies: - bowser "^1.0.0" - hyphenate-style-name "^1.0.1" - inquirer@^0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e" From 6d1d475847c1f5a56d8cd72be05580c7ff7fd47e Mon Sep 17 00:00:00 2001 From: Igor Oleinikov Date: Wed, 7 Jun 2017 09:24:24 -0700 Subject: [PATCH 43/63] Add TypeScript support of using other styled components in selectors --- typings/styled-components.d.ts | 6 +++--- typings/tests/nested-test.tsx | 21 +++++++++++++++++++++ 2 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 typings/tests/nested-test.tsx diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 8b98f2186..8ac9bbe21 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -20,7 +20,7 @@ export type OuterStyledProps

= ThemedOuterStyledProps; export type Interpolation

= FlattenInterpolation

| ReadonlyArray | ReadonlyArray>>; export type FlattenInterpolation

= InterpolationValue | InterpolationFunction

; -export type InterpolationValue = string | number; +export type InterpolationValue = string | number | StyledComponentClass; export type SimpleInterpolation = InterpolationValue | ReadonlyArray>; export interface InterpolationFunction

{ (props: P): Interpolation

; @@ -105,13 +105,13 @@ interface StylesheetComponentProps { sheet: ServerStyleSheet; } -export class StyleSheetManager extends React.Component { } +export class StyleSheetManager extends React.Component { } export class ServerStyleSheet { collectStyles(tree: React.ReactNode): ReactElement; getStyleTags(): string; - getStyleElement(): ReactElement[]; + getStyleElement(): ReactElement<{}>[]; } export default styled; diff --git a/typings/tests/nested-test.tsx b/typings/tests/nested-test.tsx new file mode 100644 index 000000000..d1fc89250 --- /dev/null +++ b/typings/tests/nested-test.tsx @@ -0,0 +1,21 @@ +import * as React from "react"; + +import styled from "../.."; + +const Link = styled.a` + color: red; +`; + +const OtherLink = styled.a` + color: blue; +`; + +const Article = styled.section` + color: red; + & > ${Link} { + color: green; + } + ${p => p.alt ? OtherLink : Link} { + color: black + } +`; From da8e4b7d8fff370c8fbf7b61f11869f667447c82 Mon Sep 17 00:00:00 2001 From: Igor Oleinikov Date: Wed, 7 Jun 2017 10:19:05 -0700 Subject: [PATCH 44/63] Minor test update --- typings/tests/nested-test.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/typings/tests/nested-test.tsx b/typings/tests/nested-test.tsx index d1fc89250..de982b780 100644 --- a/typings/tests/nested-test.tsx +++ b/typings/tests/nested-test.tsx @@ -1,21 +1,30 @@ import * as React from "react"; -import styled from "../.."; +import styled, { css } from "../.."; const Link = styled.a` color: red; `; -const OtherLink = styled.a` +const AlternativeLink = styled.a` color: blue; `; +const freeStyles = css` + background-color: black; + color: white; + ${Link} { + color: blue; + } +`; + const Article = styled.section` color: red; + ${freeStyles} & > ${Link} { color: green; } - ${p => p.alt ? OtherLink : Link} { + ${p => p.theme.useAlternativeLink ? AlternativeLink : Link} { color: black } `; From 0037e305ba82fa83be842df63b3d6b926a2647c7 Mon Sep 17 00:00:00 2001 From: Igor Oleinikov Date: Wed, 7 Jun 2017 10:23:10 -0700 Subject: [PATCH 45/63] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f995ac64b..adc887a6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ All notable changes to this project will be documented in this file. If a contri - Added a test for `withComponent` followed by `attrs`, thanks to [@btmills](https://github.com/btmills). (see [#851](https://github.com/styled-components/styled-components/pull/851)) - Fix Flow type signatures for compatibility with Flow v0.47.0 (see [#840](https://github.com/styled-components/styled-components/pull/840)) - Upgraded stylis to v3.0. (see [#829](https://github.com/styled-components/styled-components/pull/829) and [#876](https://github.com/styled-components/styled-components/pull/876)) +- Added missing v2.0 APIs to TypeScript typings, thanks to [@patrick91](https://github.com/patrick91), [@igorbek](https://github.com/igorbek) (see [#837](https://github.com/styled-components/styled-components/pull/837), [#882](https://github.com/styled-components/styled-components/pull/882)) ## [v2.0.0] - 2017-05-25 From 2452c57e82976aadb70af9e19a5d389afa0d2f03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Phil=20Pl=C3=BCckthun?= Date: Wed, 7 Jun 2017 21:52:49 +0100 Subject: [PATCH 46/63] Upgrade stylis to 3.0.19 --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 0f99bff48..9190b2027 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "is-function": "^1.0.1", "is-plain-object": "^2.0.1", "prop-types": "^15.5.4", - "stylis": "^3.0.17", + "stylis": "^3.0.19", "supports-color": "^3.2.3" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index e19608ae2..58bb8e5bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5636,9 +5636,9 @@ strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" -stylis@^3.0.17: - version "3.0.17" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.17.tgz#978643aed384f2138c54af9c02adeb61f1aa75f6" +stylis@^3.0.19: + version "3.0.19" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.19.tgz#36013520bb19c209d374c629e97f190e8797a287" supports-color@^2.0.0: version "2.0.0" From 26b77afdb1e61056a9f63cc26cfeb1cfacbc6d0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Phil=20Pl=C3=BCckthun?= Date: Wed, 7 Jun 2017 21:56:11 +0100 Subject: [PATCH 47/63] v2.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9190b2027..257eb3062 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "styled-components", - "version": "2.0.0", + "version": "2.0.1", "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅", "main": "lib/index.js", "typings": "typings/styled-components.d.ts", From 1194a8669b79a4d655a524751e89d6546aac087a Mon Sep 17 00:00:00 2001 From: exihuatl Date: Thu, 8 Jun 2017 08:42:03 +0200 Subject: [PATCH 48/63] SVG fix --- typings/styled-components.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts index 8ac9bbe21..16e80c677 100644 --- a/typings/styled-components.d.ts +++ b/typings/styled-components.d.ts @@ -60,7 +60,7 @@ type ThemedStyledComponentFactoriesSVG = { [K in keyof SVGTags]: ThemedSvgStyledFunction; }; -type ThemedStyledComponentFactories = ThemedStyledComponentFactoriesHTML & ThemedStyledComponentFactoriesHTML; +type ThemedStyledComponentFactories = ThemedStyledComponentFactoriesHTML & ThemedStyledComponentFactoriesSVG; export interface ThemedBaseStyledInterface extends ThemedStyledComponentFactories {

(component: Component

): ThemedStyledFunction; From d1b8cb29d1cb10eb4fe66bffd71dd2398a414d3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20Mahieu?= Date: Fri, 9 Jun 2017 12:17:59 +0200 Subject: [PATCH 49/63] README: move `react-styled-flexboxgrid` to `Grid Systems` `react-styled-flexboxgrid` is a Grid Systems library, not a Boilerplate ;) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 73d549c22..5f7a73799 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,7 @@ We could use your help to get syntax highlighting support to other editors! If y - [grid-styled](https://github.com/jxnblk/grid-styled): Responsive grid system ([demo](http://jxnblk.com/grid-styled/)) - [Hedron](http://github.com/jsbros/hedron): A no-frills flex-box grid system. - [styled-components-grid](https://github.com/jameslnewell/styled-components-grid): Responsive grid components for `styled-components`. +- [react-styled-flexboxgrid](https://github.com/LoicMahieu/react-styled-flexboxgrid): Grid system based on Flexbox ([demo](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html)) #### Helpers - [styled-props](https://github.com/RafalFilipek/styled-props): Simple lib that allows you to set styled props in your styled-components without stress ([demo](http://www.webpackbin.com/N1EKUqgvG)) @@ -113,7 +114,6 @@ We could use your help to get syntax highlighting support to other editors! If y - [react-redux-styled-hot-universal](https://github.com/krasevych/react-redux-styled-hot-universal) (SSR, Universal Webpack, Redux, React-router, Webpack 2, Babel, Styled Components and more...) - [ARc](https://github.com/diegohaz/arc): Atomic React App boilerplate with styled components ([demo](https://diegohaz.github.io/arc)) - [react-boilerplate](https://github.com/mxstbr/react-boilerplate): A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices -- [react-styled-flexboxgrid](https://github.com/LoicMahieu/react-styled-flexboxgrid): Grid system based on Flexbox ([demo](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html)) - [Scalable React Boilerplate](https://github.com/RyanCCollins/scalable-react-boilerplate) - [Scalable React TypeScript Boilerplate](https://github.com/RyanCCollins/scalable-react-ts-boilerplate) - [Superstylin'](https://github.com/bntzio/gatsby-starter-superstylin): A Gatsby starter with styled-components 💅 ([demo](https://superstylin.netlify.com/)) From 30e64762cf190ae5ba85ce0694b603145fdf97e6 Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Sat, 10 Jun 2017 11:05:19 +0300 Subject: [PATCH 50/63] add primitives target --- package.json | 2 + primitives.js | 2 + primitives/index.d.ts | 33 +++ primitives/index.js | 2 + src/models/InlineStyle.js | 7 +- src/models/StyledNativeComponent.js | 5 +- src/native/index.js | 2 +- src/primitives/index.js | 37 ++++ src/primitives/test/primitives.test.js | 273 +++++++++++++++++++++++++ 9 files changed, 358 insertions(+), 5 deletions(-) create mode 100644 primitives.js create mode 100644 primitives/index.d.ts create mode 100644 primitives/index.js create mode 100644 src/primitives/index.js create mode 100644 src/primitives/test/primitives.test.js diff --git a/package.json b/package.json index 257eb3062..78a8f719d 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "flow-typed", "lib", "native", + "sketch", "src", "typings" ], @@ -107,6 +108,7 @@ "react-addons-test-utils": "^15.4.1", "react-dom": "^15.5.4", "react-native": "^0.39.2", + "react-primitives": "^0.4.2", "rimraf": "^2.6.1", "rollup": "^0.37.0", "rollup-plugin-babel": "^2.7.1", diff --git a/primitives.js b/primitives.js new file mode 100644 index 000000000..e456495e6 --- /dev/null +++ b/primitives.js @@ -0,0 +1,2 @@ +/* eslint-disable flowtype/require-valid-file-annotation */ +module.exports = require('./lib/primitives') diff --git a/primitives/index.d.ts b/primitives/index.d.ts new file mode 100644 index 000000000..bf01343b9 --- /dev/null +++ b/primitives/index.d.ts @@ -0,0 +1,33 @@ +import * as ReactPrimitives from "react-primitives"; +import * as React from "react"; +import { StatelessComponent, ComponentClass } from "react"; + +export { + ThemeProps, + ThemeProvider, + Interpolation, + InterpolationValue, + InterpolationFunction, + OuterStyledProps, + StyledFunction, + BaseStyledInterface, + css, + withTheme, +} from ".."; + +import { StyledFunction, BaseStyledInterface } from ".."; + +type Component

= ComponentClass

| StatelessComponent

; + +export type ReactPrimitivesStyledFunction

= StyledFunction

; + +export interface StyledInterface extends BaseStyledInterface { + Artboard: ReactPrimitivesStyledFunction; + Image: ReactPrimitivesStyledFunction; + Text: ReactPrimitivesStyledFunction; + View: ReactPrimitivesStyledFunction; +} + +declare const styled: StyledInterface; + +export default styled; diff --git a/primitives/index.js b/primitives/index.js new file mode 100644 index 000000000..0908ee1fd --- /dev/null +++ b/primitives/index.js @@ -0,0 +1,2 @@ +/* eslint-disable flowtype/require-valid-file-annotation */ +module.exports = require('../lib/primitives') diff --git a/src/models/InlineStyle.js b/src/models/InlineStyle.js index 81a31cc87..6861619fb 100644 --- a/src/models/InlineStyle.js +++ b/src/models/InlineStyle.js @@ -1,6 +1,5 @@ // @flow /* eslint-disable import/no-unresolved */ -import { StyleSheet } from 'react-native' import transformDeclPairs from 'css-to-react-native' import hashStr from '../vendor/glamor/hash' @@ -19,8 +18,10 @@ export const resetStyleCache = () => { */ export default class InlineStyle { rules: RuleSet + StyleSheet: { create: Function } - constructor(rules: RuleSet) { + constructor(StyleSheet: { create: Function }, rules: RuleSet) { + this.StyleSheet = StyleSheet this.rules = rules } @@ -48,7 +49,7 @@ export default class InlineStyle { 'borderColor', 'borderStyle', ]) - const styles = StyleSheet.create({ + const styles = this.StyleSheet.create({ generated: styleObject, }) generated[hash] = styles.generated diff --git a/src/models/StyledNativeComponent.js b/src/models/StyledNativeComponent.js index 0b0a1de01..b42e3547b 100644 --- a/src/models/StyledNativeComponent.js +++ b/src/models/StyledNativeComponent.js @@ -12,7 +12,9 @@ import { CHANNEL } from './ThemeProvider' import InlineStyle from './InlineStyle' import AbstractStyledComponent from './AbstractStyledComponent' -export default (constructWithOptions: Function) => { +export default (constructWithOptions: Function, StyleSheet: { + create: Function + }) => { class BaseStyledNativeComponent extends AbstractStyledComponent { static target: Target static styledComponentId: string @@ -163,6 +165,7 @@ export default (constructWithOptions: Function) => { } = options const inlineStyle = new InlineStyle( + StyleSheet, extendingRules === undefined ? rules : extendingRules.concat(rules), ) diff --git a/src/native/index.js b/src/native/index.js index ba017faa5..51854ecf3 100644 --- a/src/native/index.js +++ b/src/native/index.js @@ -13,7 +13,7 @@ import withTheme from '../hoc/withTheme' import type { Target } from '../types' const constructWithOptions = _constructWithOptions(css) -const StyledNativeComponent = _StyledNativeComponent(constructWithOptions) +const StyledNativeComponent = _StyledNativeComponent(constructWithOptions, reactNative.StyleSheet) const styled = (tag: Target) => constructWithOptions(StyledNativeComponent, tag) /* React native lazy-requires each of these modules for some reason, so let's diff --git a/src/primitives/index.js b/src/primitives/index.js new file mode 100644 index 000000000..558bd9d7a --- /dev/null +++ b/src/primitives/index.js @@ -0,0 +1,37 @@ +// @flow + +/* eslint-disable import/no-unresolved */ +import reactPrimitives from 'react-primitives' + +import _StyledNativeComponent from '../models/StyledNativeComponent' +import _constructWithOptions from '../constructors/constructWithOptions' + +import css from '../constructors/css' +import ThemeProvider from '../models/ThemeProvider' +import withTheme from '../hoc/withTheme' + +import type { Target } from '../types' + +const constructWithOptions = _constructWithOptions(css) +const StyledNativeComponent = _StyledNativeComponent( + constructWithOptions, + reactPrimitives.StyleSheet, +) +const styled = (tag: Target) => constructWithOptions(StyledNativeComponent, tag) + +/* React native lazy-requires each of these modules for some reason, so let's +* assume it's for a good reason and not eagerly load them all */ +const aliases = 'Artboard Image Text View' + +/* Define a getter for each alias which simply gets the reactNative component + * and passes it to styled */ +aliases.split(/\s+/m).forEach(alias => Object.defineProperty(styled, alias, { + enumerable: true, + configurable: false, + get() { + return styled(reactPrimitives[alias]) + }, +})) + +export { css, ThemeProvider, withTheme } +export default styled diff --git a/src/primitives/test/primitives.test.js b/src/primitives/test/primitives.test.js new file mode 100644 index 000000000..aade8dcd2 --- /dev/null +++ b/src/primitives/test/primitives.test.js @@ -0,0 +1,273 @@ +import 'react-primitives' +import React from 'react' + +import styled from '../index' +import { shallow, mount } from 'enzyme' + +// NOTE: These tests are like the ones for Web but a "light-version" of them +// This is mostly due to the similar logic + +describe('native', () => { + it('should not throw an error when called', () => { + styled.View`` + }) + + it('should generate inline styles', () => { + const Comp = styled.View`` + const wrapper = shallow() + const view = wrapper.find('View').first() + + expect(view.prop('style')).toEqual([ {}, undefined ]) + }) + + it('should combine inline styles and the style prop', () => { + const Comp = styled.View` + padding-top: 10; + ` + + const style = { opacity: 0.9 } + const wrapper = shallow() + const view = wrapper.find('View').first() + + expect(view.prop('style')).toEqual([ { paddingTop: 10 }, style ]) + }) + + describe('extending', () => { + it('should combine styles of extending components', () => { + const Parent = styled.View`opacity: 0.9;` + const Child = Parent.extend`padding: 10px;` + + const parent = shallow() + const child = shallow() + + expect(parent.find('View').prop('style')).toEqual([ + { opacity: 0.9 }, + undefined + ]) + + expect(child.find('View').prop('style')).toEqual([ + { + opacity: 0.9, + paddingTop: 10, + paddingRight: 10, + paddingBottom: 10, + paddingLeft: 10 + }, undefined + ]) + }) + + it('should combine styles of extending components in >= 3 inheritances', () => { + const GrandGrandParent = styled.View`background-color: red;` + const GrandParent = GrandGrandParent.extend`borderWidth: 10;` + const Parent = GrandParent.extend`opacity: 0.9;` + const Child = Parent.extend`padding: 10px;` + + const grandGrandParent = shallow() + const grandParent = shallow() + const parent = shallow() + const child = shallow() + + expect(grandGrandParent.find('View').prop('style')).toEqual([ + { + backgroundColor: 'red', + }, + undefined, + ]) + + expect(grandParent.find('View').prop('style')).toEqual([ + { + backgroundColor: 'red', + borderWidth: 10, + }, + undefined, + ]) + + expect(parent.find('View').prop('style')).toEqual([ + { + backgroundColor: 'red', + borderWidth: 10, + opacity: 0.9, + }, + undefined, + ]) + + expect(child.find('View').prop('style')).toEqual([ + { + backgroundColor: 'red', + borderWidth: 10, + opacity: 0.9, + paddingTop: 10, + paddingRight: 10, + paddingBottom: 10, + paddingLeft: 10, + }, + undefined, + ]) + }) + }) + + describe('attrs', () => { + it('works fine with an empty object', () => { + const Comp = styled.View.attrs({})`` + const wrapper = shallow() + const view = wrapper.find('View').first() + + expect(view.props()).toEqual({ + style: [ {}, undefined ] + }) + }) + + it('passes simple props on', () => { + const Comp = styled.View.attrs({ + test: true + })`` + + const wrapper = shallow() + const view = wrapper.find('View').first() + + expect(view.props()).toEqual({ + style: [ {}, undefined ], + test: true + }) + }) + + it('calls an attr-function with context', () => { + const Comp = styled.View.attrs({ + copy: props => props.test + })`` + + const test = 'Put that cookie down!' + const wrapper = shallow() + const view = wrapper.find('View').first() + + expect(view.props()).toEqual({ + style: [ {}, undefined ], + copy: test, + test, + }) + }) + + it('merges multiple calls', () => { + const Comp = styled.View.attrs({ + first: 'first', + test: '_' + }).attrs({ + second: 'second', + test: 'test' + })`` + + const wrapper = shallow() + const view = wrapper.find('View').first() + + expect(view.props()).toEqual({ + style: [ {}, undefined ], + first: 'first', + second: 'second', + test: 'test', + }) + }) + + it('merges attrs when inheriting SC', () => { + const Parent = styled.View.attrs({ + first: 'first', + })`` + + const Child = Parent.extend.attrs({ + second: 'second' + })`` + + const wrapper = shallow() + const view = wrapper.find('View').first() + + expect(view.props()).toEqual({ + style: [ {}, undefined ], + first: 'first', + second: 'second', + }) + }) + }) + + describe('expanded API', () => { + it('should attach a displayName', () => { + const Comp = styled.View`` + expect(Comp.displayName).toBe('Styled(View)') + + const CompTwo = styled.View.withConfig({ displayName: 'Test' })`` + expect(CompTwo.displayName).toBe('Test') + }) + + it('should allow multiple calls to be chained', () => { + const Comp = styled.View + .withConfig({ displayName: 'Test1' }) + .withConfig({ displayName: 'Test2' }) + `` + + expect(Comp.displayName).toBe('Test2') + }) + }) + + describe('innerRef', () => { + it('should pass the ref to the component', () => { + const Comp = styled.View`` + const ref = jest.fn() + + const wrapper = mount() + const view = wrapper.find('View').first() + const comp = wrapper.find(Comp).first() + + // $FlowFixMe + expect(ref).toHaveBeenCalledWith(view.node) + expect(view.prop('innerRef')).toBeFalsy() + expect(comp.node.root).toBeTruthy() + }) + + class InnerComponent extends React.Component { + render() { + return null + } + } + + it('should not leak the innerRef prop to the wrapped child', () => { + const OuterComponent = styled(InnerComponent)`` + const ref = jest.fn() + + const wrapper = mount() + const innerComponent = wrapper.find(InnerComponent).first() + const outerComponent = wrapper.find(OuterComponent).first() + + // $FlowFixMe + expect(ref).toHaveBeenCalledWith(innerComponent.node) + expect(innerComponent.prop('innerRef')).toBeFalsy() + expect(outerComponent.node.root).toBeTruthy() + }) + + it('should pass the innerRef to the wrapped styled component', () => { + const InnerComponent = styled.View`` + const OuterComponent = styled(InnerComponent)`` + const ref = jest.fn() + + const wrapper = mount() + const view = wrapper.find('View').first() + const innerComponent = wrapper.find(InnerComponent).first() + const outerComponent = wrapper.find(OuterComponent).first() + + // $FlowFixMe + expect(ref).toHaveBeenCalledWith(view.node) + expect(outerComponent.node.root).toBeTruthy() + }) + + it('should pass innerRef instead of ref to a wrapped stateless functional component', () => { + const InnerComponent = () => null + const OuterComponent = styled(InnerComponent)`` + // NOTE: A ref should always be passed, so we don't need to (setNativeProps feature) + + const wrapper = mount() + const outerComponent = wrapper.find(OuterComponent).first() + const innerComponent = wrapper.find(InnerComponent).first() + + expect(innerComponent.prop('ref')).toBeFalsy() + expect(innerComponent.prop('innerRef')).toBeTruthy() + expect(outerComponent.node.root).toBeFalsy() + }) + }) +}) From 6dc717b527d725db2b9a2a65c6d79e4dd102eeb7 Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Sat, 10 Jun 2017 11:13:09 +0300 Subject: [PATCH 51/63] fix files export --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 78a8f719d..c30ccd408 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ }, "files": [ "native.js", + "primitives.js", "no-parser.js", "CONTRIBUTING.md", "CODE_OF_CONDUCT.md", @@ -41,7 +42,7 @@ "flow-typed", "lib", "native", - "sketch", + "primitives", "src", "typings" ], From e17b8c65cbfaf7cb7cfc30c65d039791214df497 Mon Sep 17 00:00:00 2001 From: scott Date: Sat, 10 Jun 2017 20:07:06 +0100 Subject: [PATCH 52/63] added styled-map to helpers list --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5f7a73799..3d800dc3b 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,7 @@ We could use your help to get syntax highlighting support to other editors! If y - [styled-ax](https://github.com/Lokua/styled-ax): Functional theme property accessor(s) - [react-create-component-from-tag-prop](https://github.com/jameslnewell/react-create-component-from-tag-prop): Create a react component from a tag prop. Lets your users to choose which HTML elements get styled by your 💅 styled-components. - [styled-components-theme](https://github.com/erikras/styled-components-theme): A library for refering to theme colors and modifying them inline. e.g. `color: ${primary.lighten(0.3)};` +- [styled-map](https://github.com/scf4/styled-map) - Super simple lib to map props to styles with `styled-components` ### Boilerplates - [react-redux-styled-hot-universal](https://github.com/krasevych/react-redux-styled-hot-universal) (SSR, Universal Webpack, Redux, React-router, Webpack 2, Babel, Styled Components and more...) From 8b3c616f69cad7733c15e927dd52c7025a18a4c3 Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Sun, 11 Jun 2017 19:48:11 +0300 Subject: [PATCH 53/63] create jest config for primitives --- .jest.primitives.json | 10 ++++++++++ package.json | 5 ++++- src/models/InlineStyle.js | 7 ++++--- src/models/StyledNativeComponent.js | 6 ++---- src/primitives/index.js | 2 +- src/primitives/test/primitives.test.js | 2 +- src/types.js | 4 ++++ 7 files changed, 26 insertions(+), 10 deletions(-) create mode 100644 .jest.primitives.json diff --git a/.jest.primitives.json b/.jest.primitives.json new file mode 100644 index 000000000..b25cbc253 --- /dev/null +++ b/.jest.primitives.json @@ -0,0 +1,10 @@ +{ + "rootDir": ".", + "globals": { + "__DEV__": true + }, + "testRegex": "./src/primitives/test/.*.js$", + "moduleFileExtensions": ["ios.js", "js"], + "preset": "react-native", + "testEnvironment": "jsdom" +} diff --git a/package.json b/package.json index c30ccd408..311bc5277 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "test:web:watch": "npm run test:web -- --watch", "test:native": "jest -c .jest.native.json", "test:native:watch": "npm run test:native -- --watch", + "test:primitives": "jest -c .jest.primitives.json", + "test:primitives:watch": "npm run test:primitives -- --watch", "flow": "flow check", "flow:watch": "flow-watch", "lint": "eslint src", @@ -132,7 +134,8 @@ "/src/" ], "testPathIgnorePatterns": [ - "/src/native" + "/src/native", + "/src/primitives" ] }, "lint-staged": { diff --git a/src/models/InlineStyle.js b/src/models/InlineStyle.js index 6861619fb..fec603b52 100644 --- a/src/models/InlineStyle.js +++ b/src/models/InlineStyle.js @@ -3,7 +3,7 @@ import transformDeclPairs from 'css-to-react-native' import hashStr from '../vendor/glamor/hash' -import type { RuleSet } from '../types' +import type { RuleSet, TStyleSheet } from '../types' import flatten from '../utils/flatten' import parse from '../vendor/postcss-safe-parser/parse' @@ -18,9 +18,9 @@ export const resetStyleCache = () => { */ export default class InlineStyle { rules: RuleSet - StyleSheet: { create: Function } + StyleSheet: TStyleSheet - constructor(StyleSheet: { create: Function }, rules: RuleSet) { + constructor(StyleSheet: TStyleSheet, rules: RuleSet) { this.StyleSheet = StyleSheet this.rules = rules } @@ -52,6 +52,7 @@ export default class InlineStyle { const styles = this.StyleSheet.create({ generated: styleObject, }) + console.log(styles) generated[hash] = styles.generated } return generated[hash] diff --git a/src/models/StyledNativeComponent.js b/src/models/StyledNativeComponent.js index b42e3547b..c044ed74f 100644 --- a/src/models/StyledNativeComponent.js +++ b/src/models/StyledNativeComponent.js @@ -6,15 +6,13 @@ import type { Theme } from './ThemeProvider' import isTag from '../utils/isTag' import isStyledComponent from '../utils/isStyledComponent' import getComponentName from '../utils/getComponentName' -import type { RuleSet, Target } from '../types' +import type { RuleSet, Target, TStyleSheet } from '../types' import { CHANNEL } from './ThemeProvider' import InlineStyle from './InlineStyle' import AbstractStyledComponent from './AbstractStyledComponent' -export default (constructWithOptions: Function, StyleSheet: { - create: Function - }) => { +export default (constructWithOptions: Function, StyleSheet: TStyleSheet) => { class BaseStyledNativeComponent extends AbstractStyledComponent { static target: Target static styledComponentId: string diff --git a/src/primitives/index.js b/src/primitives/index.js index 558bd9d7a..6999bec5a 100644 --- a/src/primitives/index.js +++ b/src/primitives/index.js @@ -21,7 +21,7 @@ const styled = (tag: Target) => constructWithOptions(StyledNativeComponent, tag) /* React native lazy-requires each of these modules for some reason, so let's * assume it's for a good reason and not eagerly load them all */ -const aliases = 'Artboard Image Text View' +const aliases = 'Animated Image Text Touchable View ' /* Define a getter for each alias which simply gets the reactNative component * and passes it to styled */ diff --git a/src/primitives/test/primitives.test.js b/src/primitives/test/primitives.test.js index aade8dcd2..18560598f 100644 --- a/src/primitives/test/primitives.test.js +++ b/src/primitives/test/primitives.test.js @@ -7,7 +7,7 @@ import { shallow, mount } from 'enzyme' // NOTE: These tests are like the ones for Web but a "light-version" of them // This is mostly due to the similar logic -describe('native', () => { +describe('primitives', () => { it('should not throw an error when called', () => { styled.View`` }) diff --git a/src/types.js b/src/types.js index df88ab2e1..b5e3853b9 100644 --- a/src/types.js +++ b/src/types.js @@ -22,3 +22,7 @@ export type Stringifier = ( selector: ?string, prefix: ?string ) => string + +export type TStyleSheet = { + create: Function +} From 80eec480abf9589254986a567a1a02dc99f900a1 Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Sun, 11 Jun 2017 19:50:12 +0300 Subject: [PATCH 54/63] fix types --- primitives/index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/primitives/index.d.ts b/primitives/index.d.ts index bf01343b9..01275528d 100644 --- a/primitives/index.d.ts +++ b/primitives/index.d.ts @@ -22,9 +22,10 @@ type Component

= ComponentClass

| StatelessComponent

; export type ReactPrimitivesStyledFunction

= StyledFunction

; export interface StyledInterface extends BaseStyledInterface { - Artboard: ReactPrimitivesStyledFunction; + Animated: ReactPrimitivesStyledFunction; Image: ReactPrimitivesStyledFunction; Text: ReactPrimitivesStyledFunction; + Touchable: ReactPrimitivesStyledFunction; View: ReactPrimitivesStyledFunction; } From 7791a4fc32068d2cd9ac326cd1eee191ce5cca0e Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Sun, 11 Jun 2017 20:49:24 +0300 Subject: [PATCH 55/63] fix flow --- .flowconfig | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.flowconfig b/.flowconfig index d5ac5299b..3a3b01e6e 100644 --- a/.flowconfig +++ b/.flowconfig @@ -2,6 +2,10 @@ .*/node_modules/flow-remove-types/.* .*/node_modules/react-native/.* .*/node_modules/rollup-plugin-flow/.* +.*/node_modules/animated/.* +.*/node_modules/react-sketchapp/.* +.*/node_modules/react-native-web/.* +.*/node_modules/babel-plugin-transform-react-remove-prop-types/.* .*/dist/.* .*/lib/.* .*/node_modules/babel-plugin-flow-react-proptypes/src/__test__/.* From 618efc088f535eefe4db0ef557c210594d15b6cf Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Sun, 11 Jun 2017 20:51:08 +0300 Subject: [PATCH 56/63] add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e5f9838f..7a29c5535 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file. If a contri - Upgraded stylis to v3.0. (see [#829](https://github.com/styled-components/styled-components/pull/829) and [#876](https://github.com/styled-components/styled-components/pull/876)) - Remove dead code used previously for auto-prefixing. (see [#881](https://github.com/styled-components/styled-components/pull/881)) - Added missing v2.0 APIs to TypeScript typings, thanks to [@patrick91](https://github.com/patrick91), [@igorbek](https://github.com/igorbek) (see [#837](https://github.com/styled-components/styled-components/pull/837), [#882](https://github.com/styled-components/styled-components/pull/882)) +- Added [`react-primitives`](https://github.com/lelandrichardson/react-primitives) target, thanks to [@mathieudutour](https://github.com/mathieudutour) (see [#904](https://github.com/styled-components/styled-components/pull/904) ## [v2.0.0] - 2017-05-25 From 7d690429db610db6303a73e573032d0f6764eab7 Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Sun, 11 Jun 2017 21:11:49 +0300 Subject: [PATCH 57/63] remove root export files --- native.js | 2 -- primitives.js | 2 -- 2 files changed, 4 deletions(-) delete mode 100644 native.js delete mode 100644 primitives.js diff --git a/native.js b/native.js deleted file mode 100644 index fc9b051fc..000000000 --- a/native.js +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-disable flowtype/require-valid-file-annotation */ -module.exports = require('./lib/native') diff --git a/primitives.js b/primitives.js deleted file mode 100644 index e456495e6..000000000 --- a/primitives.js +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-disable flowtype/require-valid-file-annotation */ -module.exports = require('./lib/primitives') From d21ef5ef28a07bf6700002f35e723524d62f8f0d Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Sun, 11 Jun 2017 21:22:38 +0300 Subject: [PATCH 58/63] move usage of StyleSheet to function level --- primitives/index.d.ts | 1 - src/models/InlineStyle.js | 11 ++++------- src/models/StyledNativeComponent.js | 7 +++---- src/primitives/index.js | 2 +- src/primitives/test/primitives.test.js | 3 +-- src/types.js | 2 +- 6 files changed, 10 insertions(+), 16 deletions(-) diff --git a/primitives/index.d.ts b/primitives/index.d.ts index 01275528d..e2f567d80 100644 --- a/primitives/index.d.ts +++ b/primitives/index.d.ts @@ -22,7 +22,6 @@ type Component

= ComponentClass

| StatelessComponent

; export type ReactPrimitivesStyledFunction

= StyledFunction

; export interface StyledInterface extends BaseStyledInterface { - Animated: ReactPrimitivesStyledFunction; Image: ReactPrimitivesStyledFunction; Text: ReactPrimitivesStyledFunction; Touchable: ReactPrimitivesStyledFunction; diff --git a/src/models/InlineStyle.js b/src/models/InlineStyle.js index fec603b52..d201300f3 100644 --- a/src/models/InlineStyle.js +++ b/src/models/InlineStyle.js @@ -3,7 +3,7 @@ import transformDeclPairs from 'css-to-react-native' import hashStr from '../vendor/glamor/hash' -import type { RuleSet, TStyleSheet } from '../types' +import type { RuleSet, StyleSheet } from '../types' import flatten from '../utils/flatten' import parse from '../vendor/postcss-safe-parser/parse' @@ -18,14 +18,12 @@ export const resetStyleCache = () => { */ export default class InlineStyle { rules: RuleSet - StyleSheet: TStyleSheet - constructor(StyleSheet: TStyleSheet, rules: RuleSet) { - this.StyleSheet = StyleSheet + constructor(rules: RuleSet) { this.rules = rules } - generateStyleObject(executionContext: Object) { + generateStyleObject(executionContext: Object, styleSheet: StyleSheet) { const flatCSS = flatten(this.rules, executionContext).join('') const hash = hashStr(flatCSS) if (!generated[hash]) { @@ -49,10 +47,9 @@ export default class InlineStyle { 'borderColor', 'borderStyle', ]) - const styles = this.StyleSheet.create({ + const styles = styleSheet.create({ generated: styleObject, }) - console.log(styles) generated[hash] = styles.generated } return generated[hash] diff --git a/src/models/StyledNativeComponent.js b/src/models/StyledNativeComponent.js index c044ed74f..d87e33655 100644 --- a/src/models/StyledNativeComponent.js +++ b/src/models/StyledNativeComponent.js @@ -6,13 +6,13 @@ import type { Theme } from './ThemeProvider' import isTag from '../utils/isTag' import isStyledComponent from '../utils/isStyledComponent' import getComponentName from '../utils/getComponentName' -import type { RuleSet, Target, TStyleSheet } from '../types' +import type { RuleSet, Target, StyleSheet } from '../types' import { CHANNEL } from './ThemeProvider' import InlineStyle from './InlineStyle' import AbstractStyledComponent from './AbstractStyledComponent' -export default (constructWithOptions: Function, StyleSheet: TStyleSheet) => { +export default (constructWithOptions: Function, styleSheet: StyleSheet) => { class BaseStyledNativeComponent extends AbstractStyledComponent { static target: Target static styledComponentId: string @@ -47,7 +47,7 @@ export default (constructWithOptions: Function, StyleSheet: TStyleSheet) => { const { inlineStyle } = this.constructor const executionContext = this.buildExecutionContext(theme, props) - return inlineStyle.generateStyleObject(executionContext) + return inlineStyle.generateStyleObject(executionContext, styleSheet) } componentWillMount() { @@ -163,7 +163,6 @@ export default (constructWithOptions: Function, StyleSheet: TStyleSheet) => { } = options const inlineStyle = new InlineStyle( - StyleSheet, extendingRules === undefined ? rules : extendingRules.concat(rules), ) diff --git a/src/primitives/index.js b/src/primitives/index.js index 6999bec5a..b7755728a 100644 --- a/src/primitives/index.js +++ b/src/primitives/index.js @@ -21,7 +21,7 @@ const styled = (tag: Target) => constructWithOptions(StyledNativeComponent, tag) /* React native lazy-requires each of these modules for some reason, so let's * assume it's for a good reason and not eagerly load them all */ -const aliases = 'Animated Image Text Touchable View ' +const aliases = 'Image Text Touchable View ' /* Define a getter for each alias which simply gets the reactNative component * and passes it to styled */ diff --git a/src/primitives/test/primitives.test.js b/src/primitives/test/primitives.test.js index 18560598f..f8f37d892 100644 --- a/src/primitives/test/primitives.test.js +++ b/src/primitives/test/primitives.test.js @@ -4,8 +4,7 @@ import React from 'react' import styled from '../index' import { shallow, mount } from 'enzyme' -// NOTE: These tests are like the ones for Web but a "light-version" of them -// This is mostly due to the similar logic +// NOTE: These tests are copy pasted from ../native/test/native.test.js describe('primitives', () => { it('should not throw an error when called', () => { diff --git a/src/types.js b/src/types.js index b5e3853b9..718f3f840 100644 --- a/src/types.js +++ b/src/types.js @@ -23,6 +23,6 @@ export type Stringifier = ( prefix: ?string ) => string -export type TStyleSheet = { +export type StyleSheet = { create: Function } From 8fca341fd794b451c28f34c589f75986d1c777bf Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Sun, 11 Jun 2017 22:02:23 +0300 Subject: [PATCH 59/63] transform InlineStyle to a factory --- src/models/InlineStyle.js | 72 +++++++++++++++-------------- src/models/StyledNativeComponent.js | 7 ++- src/native/index.js | 4 +- src/primitives/index.js | 4 +- 4 files changed, 47 insertions(+), 40 deletions(-) diff --git a/src/models/InlineStyle.js b/src/models/InlineStyle.js index d201300f3..62771b2e9 100644 --- a/src/models/InlineStyle.js +++ b/src/models/InlineStyle.js @@ -16,42 +16,46 @@ export const resetStyleCache = () => { /* InlineStyle takes arbitrary CSS and generates a flat object */ -export default class InlineStyle { - rules: RuleSet +export default (styleSheet: StyleSheet) => { + class InlineStyle { + rules: RuleSet - constructor(rules: RuleSet) { - this.rules = rules - } + constructor(rules: RuleSet) { + this.rules = rules + } - generateStyleObject(executionContext: Object, styleSheet: StyleSheet) { - const flatCSS = flatten(this.rules, executionContext).join('') - const hash = hashStr(flatCSS) - if (!generated[hash]) { - const root = parse(flatCSS) - const declPairs = [] - root.each(node => { - if (node.type === 'decl') { - declPairs.push([node.prop, node.value]) - } else { - /* eslint-disable no-console */ - console.warn(`Node of type ${node.type} not supported as an inline style`) - } - }) - // RN currently does not support differing values for the corner radii of Image - // components (but does for View). It is almost impossible to tell whether we'll have - // support, so we'll just disable multiple values here. - // https://github.com/styled-components/css-to-react-native/issues/11 - const styleObject = transformDeclPairs(declPairs, [ - 'borderRadius', - 'borderWidth', - 'borderColor', - 'borderStyle', - ]) - const styles = styleSheet.create({ - generated: styleObject, - }) - generated[hash] = styles.generated + generateStyleObject(executionContext: Object) { + const flatCSS = flatten(this.rules, executionContext).join('') + const hash = hashStr(flatCSS) + if (!generated[hash]) { + const root = parse(flatCSS) + const declPairs = [] + root.each(node => { + if (node.type === 'decl') { + declPairs.push([node.prop, node.value]) + } else { + /* eslint-disable no-console */ + console.warn(`Node of type ${node.type} not supported as an inline style`) + } + }) + // RN currently does not support differing values for the corner radii of Image + // components (but does for View). It is almost impossible to tell whether we'll have + // support, so we'll just disable multiple values here. + // https://github.com/styled-components/css-to-react-native/issues/11 + const styleObject = transformDeclPairs(declPairs, [ + 'borderRadius', + 'borderWidth', + 'borderColor', + 'borderStyle', + ]) + const styles = styleSheet.create({ + generated: styleObject, + }) + generated[hash] = styles.generated + } + return generated[hash] } - return generated[hash] } + + return InlineStyle } diff --git a/src/models/StyledNativeComponent.js b/src/models/StyledNativeComponent.js index d87e33655..1f787d32b 100644 --- a/src/models/StyledNativeComponent.js +++ b/src/models/StyledNativeComponent.js @@ -6,13 +6,12 @@ import type { Theme } from './ThemeProvider' import isTag from '../utils/isTag' import isStyledComponent from '../utils/isStyledComponent' import getComponentName from '../utils/getComponentName' -import type { RuleSet, Target, StyleSheet } from '../types' +import type { RuleSet, Target } from '../types' import { CHANNEL } from './ThemeProvider' -import InlineStyle from './InlineStyle' import AbstractStyledComponent from './AbstractStyledComponent' -export default (constructWithOptions: Function, styleSheet: StyleSheet) => { +export default (constructWithOptions: Function, InlineStyle: Function) => { class BaseStyledNativeComponent extends AbstractStyledComponent { static target: Target static styledComponentId: string @@ -47,7 +46,7 @@ export default (constructWithOptions: Function, styleSheet: StyleSheet) => { const { inlineStyle } = this.constructor const executionContext = this.buildExecutionContext(theme, props) - return inlineStyle.generateStyleObject(executionContext, styleSheet) + return inlineStyle.generateStyleObject(executionContext) } componentWillMount() { diff --git a/src/native/index.js b/src/native/index.js index 51854ecf3..9dcda1735 100644 --- a/src/native/index.js +++ b/src/native/index.js @@ -3,6 +3,7 @@ /* eslint-disable import/no-unresolved */ import reactNative from 'react-native' +import _InlineStyle from '../models/InlineStyle' import _StyledNativeComponent from '../models/StyledNativeComponent' import _constructWithOptions from '../constructors/constructWithOptions' @@ -13,7 +14,8 @@ import withTheme from '../hoc/withTheme' import type { Target } from '../types' const constructWithOptions = _constructWithOptions(css) -const StyledNativeComponent = _StyledNativeComponent(constructWithOptions, reactNative.StyleSheet) +const InlineStyle = _InlineStyle(reactNative.StyleSheet) +const StyledNativeComponent = _StyledNativeComponent(constructWithOptions, InlineStyle) const styled = (tag: Target) => constructWithOptions(StyledNativeComponent, tag) /* React native lazy-requires each of these modules for some reason, so let's diff --git a/src/primitives/index.js b/src/primitives/index.js index b7755728a..5167c9763 100644 --- a/src/primitives/index.js +++ b/src/primitives/index.js @@ -3,6 +3,7 @@ /* eslint-disable import/no-unresolved */ import reactPrimitives from 'react-primitives' +import _InlineStyle from '../models/InlineStyle' import _StyledNativeComponent from '../models/StyledNativeComponent' import _constructWithOptions from '../constructors/constructWithOptions' @@ -13,9 +14,10 @@ import withTheme from '../hoc/withTheme' import type { Target } from '../types' const constructWithOptions = _constructWithOptions(css) +const InlineStyle = _InlineStyle(reactPrimitives.StyleSheet) const StyledNativeComponent = _StyledNativeComponent( constructWithOptions, - reactPrimitives.StyleSheet, + InlineStyle, ) const styled = (tag: Target) => constructWithOptions(StyledNativeComponent, tag) From be953488e60620f36a20aa381ce2b19fdb933e58 Mon Sep 17 00:00:00 2001 From: Aaron Vanston Date: Mon, 12 Jun 2017 14:23:43 +1000 Subject: [PATCH 60/63] Chore: Added react-flexa to grid systems --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3d800dc3b..0f818ded6 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,7 @@ We could use your help to get syntax highlighting support to other editors! If y - [Hedron](http://github.com/jsbros/hedron): A no-frills flex-box grid system. - [styled-components-grid](https://github.com/jameslnewell/styled-components-grid): Responsive grid components for `styled-components`. - [react-styled-flexboxgrid](https://github.com/LoicMahieu/react-styled-flexboxgrid): Grid system based on Flexbox ([demo](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html)) +- [react-flexa](https://github.com/aaronvanston/react-flexa): React grid system implementing the flexbox CSS API responsively. #### Helpers - [styled-props](https://github.com/RafalFilipek/styled-props): Simple lib that allows you to set styled props in your styled-components without stress ([demo](http://www.webpackbin.com/N1EKUqgvG)) From ce77eca4fe97137594ce174d8b9c2b797e97df0e Mon Sep 17 00:00:00 2001 From: Ala Douagi Date: Mon, 12 Jun 2017 22:52:17 +0100 Subject: [PATCH 61/63] Fix for a broken link in a doc file. --- docs/tips-and-tricks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md index a1c7ef5af..b20cc1192 100644 --- a/docs/tips-and-tricks.md +++ b/docs/tips-and-tricks.md @@ -134,7 +134,7 @@ const Box = styled.div` And voila! 💅 -*Not clear on why `css` is needed in the above example? Check the article on [Tagged Template Literals](./tagged-template-literals.md)* +*Not clear on why `css` is needed in the above example? Check the article on [Tagged Template Literals](https://www.styled-components.com/docs/advanced#tagged-template-literals)* ### Media Templates From 488ebd2a41ae8a8e99e539361905f0c0dcbc6812 Mon Sep 17 00:00:00 2001 From: Michael McDermott Date: Tue, 13 Jun 2017 12:45:34 -0400 Subject: [PATCH 62/63] update vscode syntax highlighting documentation --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0f818ded6..7e43a3ecb 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,9 @@ As soon as that PR is merged and a new version released, all you'll have to do i ### Visual Studio Code -The [vscode-styled-components](https://github.com/styled-components/vscode-styled-components) extension provides syntax highlighting inside your Javascript files. You can install it as usual from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components). +[**@gandm**](https://github.com/gandm)'s language-babel has been ported to VSCode under the name [Babel JavaScript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel) by [Michael McDermott](https://twitter.com/_mgmcdermott). It provides the same all-in-one solution for Babel syntax highlighting with styled-components included. + +If you would like to keep your current JavaScript syntax highlighting, you can use the [vscode-styled-components](https://github.com/styled-components/vscode-styled-components) extension to provide styled-components syntax highlighting inside your Javascript files. You can install it as usual from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components). ### VIM / NeoVim The [`vim-styled-components`](https://github.com/fleischie/vim-styled-components) plugin gives you syntax highlighting inside your Javascript files. Install it with your usual plugin manager like [Plug](https://github.com/junegunn/vim-plug), [Vundle](https://github.com/VundleVim/Vundle.vim), [Pathogen](https://github.com/tpope/vim-pathogen), etc. From 0f88e8aa90a4844ecfc71bbe9163fba0be23f2bc Mon Sep 17 00:00:00 2001 From: Mathieu Dutour Date: Wed, 14 Jun 2017 09:50:30 +0200 Subject: [PATCH 63/63] remove root export files from package.json --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index 311bc5277..566ea854c 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,6 @@ "url": "git+https://github.com/styled-components/styled-components.git" }, "files": [ - "native.js", - "primitives.js", "no-parser.js", "CONTRIBUTING.md", "CODE_OF_CONDUCT.md",