diff --git a/package.json b/package.json index 17cd774..6b66a88 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@types/jest-specific-snapshot": "^0.5.4", "@types/node": "^13.1.2", "@types/react": "^16.7.22", - "@types/styled-components": "^4.1.6", + "@types/styled-components": "^4.4.2", "jest": "^24.1.0", "jest-specific-snapshot": "^2.0.0", "ts-jest": "24.2.0", diff --git a/src/__tests__/baselines/base/sample3.tsx.baseline b/src/__tests__/baselines/base/sample3.tsx.baseline index 3cbcdf4..a9f9d60 100644 --- a/src/__tests__/baselines/base/sample3.tsx.baseline +++ b/src/__tests__/baselines/base/sample3.tsx.baseline @@ -6,15 +6,16 @@ File: sample3.tsx Source code: import * as React from 'react'; - import styled from '../themed-styled'; + import styled from '../../themed-styled'; import { SmallButton } from './sample1'; interface LabelProps { size: number; } - const CustomLabel = styled.label\` - font-size: \${(props: LabelProps) => props.size + 'px'} + const CustomLabel = styled.label\` + font-size: \${props => props.size}px; + color: \${props => props.theme.color}; \`; const LabeledLink = () => ; @@ -25,13 +26,14 @@ Source code: TypeScript before transform: import * as React from "react"; - import styled from "../themed-styled"; + import styled from "../../themed-styled"; import { SmallButton } from "./sample1"; interface LabelProps { size: number; } - const CustomLabel = styled.label \` - font-size: \${(props: LabelProps) => props.size + "px"} + const CustomLabel = styled.label \` + font-size: \${props => props.size}px; + color: \${props => props.theme.color}; \`; const LabeledLink = () => ; export default CustomLabel; @@ -40,13 +42,14 @@ TypeScript before transform: TypeScript after transform: import * as React from 'react'; - import styled from '../themed-styled'; + import styled from '../../themed-styled'; import { SmallButton } from './sample1'; interface LabelProps { size: number; } - const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel" }) \` - font-size: \${(props: LabelProps) => props.size + 'px'} + const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel" }) \` + font-size: \${props => props.size}px; + color: \${props => props.theme.color}; \`; const LabeledLink = () => ; export default CustomLabel; diff --git a/src/__tests__/baselines/ssr/sample3.tsx.baseline b/src/__tests__/baselines/ssr/sample3.tsx.baseline index 1292317..8a95195 100644 --- a/src/__tests__/baselines/ssr/sample3.tsx.baseline +++ b/src/__tests__/baselines/ssr/sample3.tsx.baseline @@ -6,15 +6,16 @@ File: sample3.tsx Source code: import * as React from 'react'; - import styled from '../themed-styled'; + import styled from '../../themed-styled'; import { SmallButton } from './sample1'; interface LabelProps { size: number; } - const CustomLabel = styled.label\` - font-size: \${(props: LabelProps) => props.size + 'px'} + const CustomLabel = styled.label\` + font-size: \${props => props.size}px; + color: \${props => props.theme.color}; \`; const LabeledLink = () => ; @@ -25,13 +26,14 @@ Source code: TypeScript before transform: import * as React from "react"; - import styled from "../themed-styled"; + import styled from "../../themed-styled"; import { SmallButton } from "./sample1"; interface LabelProps { size: number; } - const CustomLabel = styled.label \` - font-size: \${(props: LabelProps) => props.size + "px"} + const CustomLabel = styled.label \` + font-size: \${props => props.size}px; + color: \${props => props.theme.color}; \`; const LabeledLink = () => ; export default CustomLabel; @@ -40,13 +42,14 @@ TypeScript before transform: TypeScript after transform: import * as React from 'react'; - import styled from '../themed-styled'; + import styled from '../../themed-styled'; import { SmallButton } from './sample1'; interface LabelProps { size: number; } - const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "sc-1ydgk9x" }) \` - font-size: \${(props: LabelProps) => props.size + 'px'} + const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "sc-1ydgk9x" }) \` + font-size: \${props => props.size}px; + color: \${props => props.theme.color}; \`; const LabeledLink = () => ; export default CustomLabel; diff --git a/src/__tests__/fixtures/base/sample3.tsx b/src/__tests__/fixtures/base/sample3.tsx index 2d1a7aa..07df147 100644 --- a/src/__tests__/fixtures/base/sample3.tsx +++ b/src/__tests__/fixtures/base/sample3.tsx @@ -1,13 +1,14 @@ import * as React from 'react'; -import styled from '../themed-styled'; +import styled from '../../themed-styled'; import { SmallButton } from './sample1'; interface LabelProps { size: number; } -const CustomLabel = styled.label` - font-size: ${(props: LabelProps) => props.size + 'px'} +const CustomLabel = styled.label` + font-size: ${props => props.size}px; + color: ${props => props.theme.color}; `; const LabeledLink = () => ; diff --git a/src/__tests__/themed-styled.ts b/src/__tests__/themed-styled.ts index 1a236fb..db2d5dd 100644 --- a/src/__tests__/themed-styled.ts +++ b/src/__tests__/themed-styled.ts @@ -1,10 +1,10 @@ -/* Role: styled-component re-export with builder theme support */ +/* Role: styled-component re-export with theme support */ // tslint:disable-next-line:import-blacklist import * as StyledComponentModule from 'styled-components'; // tslint:disable-next-line:no-duplicate-imports // tslint:disable-next-line:import-blacklist -import { ThemedStyledComponentsModule, ThemedStyledProps, SimpleInterpolation } from 'styled-components'; +import { ThemedStyledComponentsModule, ThemedStyledProps } from 'styled-components'; interface Theme { color: string; @@ -13,17 +13,12 @@ interface Theme { const { default: styled, css, - injectGlobal, - keyframes: keyframesOriginal, + createGlobalStyle, + keyframes, ThemeProvider, withTheme -} = StyledComponentModule as ThemedStyledComponentsModule as ThemedStyledComponentsModule; - -function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): () => string { - let value: string | undefined; - return () => value || (value = keyframesOriginal(strings, ...interpolations)); -} +} = StyledComponentModule as ThemedStyledComponentsModule as ThemedStyledComponentsModule; export type StyledProps

= ThemedStyledProps; export default styled; -export { css, injectGlobal, keyframes, withTheme, ThemeProvider }; +export { css, createGlobalStyle, keyframes, withTheme, ThemeProvider }; diff --git a/src/__tests__/tsconfig.json b/src/__tests__/tsconfig.json new file mode 100644 index 0000000..30db607 --- /dev/null +++ b/src/__tests__/tsconfig.json @@ -0,0 +1,57 @@ +{ + "compilerOptions": { + /* Basic Options */ + "target": "esnext", + /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ + "module": "ESNext", + /* 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": "./dist", /* 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. */ + } +} diff --git a/yarn.lock b/yarn.lock index 29cfc36..fc4db8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -325,6 +325,14 @@ dependencies: "@babel/types" "^7.3.0" +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff" @@ -359,7 +367,7 @@ dependencies: jest-diff "^24.3.0" -"@types/node@*", "@types/node@^13.1.2": +"@types/node@^13.1.2": version "13.1.2" resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.2.tgz#fe94285bf5e0782e1a9e5a8c482b1c34465fa385" integrity sha512-B8emQA1qeKerqd1dmIsQYnXi+mmAzTB7flExjmy5X1aVAKFNNNDubkavwR13kR6JnpeLp3aLoJhwn9trWPAyFQ== @@ -369,6 +377,13 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.8.tgz#8ae4e0ea205fe95c3901a5a1df7f66495e3a56ce" integrity sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw== +"@types/react-native@*": + version "0.61.4" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.61.4.tgz#dfd323579c98a447ca7d152e94fb1507e84de7d2" + integrity sha512-RWU51dCIEjvgT0QuclgAha/P9fdAvnDzilhatx85LcTKTH2S3PSOUNZlbxwyZLMrqpCek5xsBOjSA5nOIFYq4A== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^16.7.22": version "16.9.17" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e" @@ -382,13 +397,14 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== -"@types/styled-components@^4.1.6": - version "4.1.6" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.6.tgz#9aa1d47dbc6bae540083869bcc6c639c6e9af0fe" - integrity sha512-w/ra/Tk9oPMvWpWId7esZNY1MOa6E9BYUPLl4scVJdYnrYuy5ITLbku8dGDCVH/vjjuegrHBCRYvFLQOYJ+uHg== +"@types/styled-components@^4.4.2": + version "4.4.2" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.2.tgz#709fa7afd7dc0963b8316a0159240f0fe19a026d" + integrity sha512-dngFx2PuGoy0MGE68eHayAmJvLSqWrnTe9w+DnQruu8PS+waWEsKmoBRhkzL2h2pK1OJhzJhVfuiz+oZa4etpA== dependencies: - "@types/node" "*" + "@types/hoist-non-react-statics" "*" "@types/react" "*" + "@types/react-native" "*" csstype "^2.2.0" "@types/yargs-parser@*": @@ -1438,6 +1454,13 @@ has@^1.0.1, has@^1.0.3: dependencies: function-bind "^1.1.1" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^2.1.4: version "2.4.2" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.4.2.tgz#0076b9f46a270506ddbaaea56496897460612a67" @@ -2902,6 +2925,11 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-is@^16.7.0: + version "16.12.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" + integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== + react-is@^16.8.4: version "16.9.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"