Igorbek · Igorbek · Jan 24, 2020
diff --git 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
@@ -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<LabelProps>\`
+      font-size: \${props => props.size}px;
+      color: \${props => props.theme.color};
   \`;
 
   const LabeledLink = () => <SmallButton />;
@@ -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<LabelProps> \`
+      font-size: \${props => props.size}px;
+      color: \${props => props.theme.color};
   \`;
   const LabeledLink = () => <SmallButton />;
   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" })<LabelProps> \`
+      font-size: \${props => props.size}px;
+      color: \${props => props.theme.color};
   \`;
   const LabeledLink = () => <SmallButton />;
   export default CustomLabel;

diff --git 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<LabelProps>\`
+      font-size: \${props => props.size}px;
+      color: \${props => props.theme.color};
   \`;
 
   const LabeledLink = () => <SmallButton />;
@@ -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<LabelProps> \`
+      font-size: \${props => props.size}px;
+      color: \${props => props.theme.color};
   \`;
   const LabeledLink = () => <SmallButton />;
   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" })<LabelProps> \`
+      font-size: \${props => props.size}px;
+      color: \${props => props.theme.color};
   \`;
   const LabeledLink = () => <SmallButton />;
   export default CustomLabel;

diff --git 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<LabelProps>`
+    font-size: ${props => props.size}px;
+    color: ${props => props.theme.color};
 `;
 
 const LabeledLink = () => <SmallButton />;

diff --git 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<any> as ThemedStyledComponentsModule<Theme>;
-
-function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): () => string {
-    let value: string | undefined;
-    return () => value || (value = keyframesOriginal(strings, ...interpolations));
-}
+} = StyledComponentModule  as ThemedStyledComponentsModule<object> as ThemedStyledComponentsModule<Theme>;
 
 export type StyledProps<P> = ThemedStyledProps<P, Theme>;
 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
@@ -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
@@ -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"