Merge branch 'master' into patch-1

Author: Igorbek

CHANGELOG.md

@@ -0,0 +1,79 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+## [Unreleased]
+
+## [1.5.0]
+
+- transform anonymous default exports (fix #371 in #367)
+- remove deprecated `.extend` transformation pattern (fix #48 in #370)
+
+## [1.4.4]
+
+- bugfix in minification of tabs (fix #142 in #152)
+
+## [1.4.3]
+
+- bugfix in minification (fix #44 in #45)
+
+## [1.4.2]
+
+- another important bugfix in minification (#40 by @Ky6uk, #41)
+
+## [1.4.1]
+
+- important bugfix in minification (#36, #39)
+
+## [1.4.0]
+
+- add experimental support of minification (#14, #35)
+- skip emitting empty `withConfig` (#37)
+
+## [1.4.0-rc]
+
+- add experimental support of minification (#14, #35)
+
+## [1.3.0]
+
+- improved detection of component names which fixes issues with jQuery and lodash (#33, #34)
+
+## [1.2.0]
+
+- add support of [style objects](https://www.styled-components.com/docs/advanced#style-objects) (#30, #32)
+
+## [1.1.0]
+
+- component id generation that helps with SSR (great contribution #21 by @fabyo82)
+- customizable identifiers of styled-components functions
+- display name generation can be turned off
+
+## [1.1.0-rc]
+
+- component id generation that helps with SSR (great contribution #21 by @fabyo82)
+- customizable identifiers of `styled-components` functions
+- display name generation can be turned off
+
+## [1.0.0]
+
+- The first official release!
+- updated `typescript` dependency to support TS 3.0+ (#17, fixed #15)
+- remove `ts-is-kind` dependency (#17, fixed #16)
+
+## [0.0.7]
+
+- updated `typescript` dependency to support TS 3.0+ (#17, fixed #15)
+- remove `ts-is-kind` dependency (#17, fixed #16)
+
+[Unreleased]: https://github.com/igorbek/typescript-plugin-styled-components/compare/1.4.4...HEAD
+[1.4.4]: https://github.com/igorbek/typescript-plugin-styled-components/compare/1.4.3...1.4.4
+[1.4.3]: https://github.com/igorbek/typescript-plugin-styled-components/compare/1.4.2...1.4.3
+[1.4.2]: https://github.com/igorbek/typescript-plugin-styled-components/compare/1.4.1...1.4.2
+[1.4.1]: https://github.com/igorbek/typescript-plugin-styled-components/compare/1.4.0...1.4.1
+[1.4.0]: https://github.com/igorbek/typescript-plugin-styled-components/compare/1.3.0...1.4.0
+[1.4.0-rc]: https://github.com/igorbek/typescript-plugin-styled-components/compare/1.3.0...1.4.0-rc
+[1.3.0]: https://github.com/igorbek/typescript-plugin-styled-components/compare/1.2.0...1.3.0
+[1.2.0]: https://github.com/igorbek/typescript-plugin-styled-components/compare/1.1.0...1.2.0
+[1.1.0]: https://github.com/igorbek/typescript-plugin-styled-components/compare/v1.0.0...1.1.0
+[1.1.0-rc]: https://github.com/igorbek/typescript-plugin-styled-components/compare/v1.0.0...1.1.0-rc
+[1.0.0]: https://github.com/igorbek/typescript-plugin-styled-components/compare/v0.0.7...v1.0.0
+[0.0.7]: https://github.com/igorbek/typescript-plugin-styled-components/compare/v0.0.6...v0.0.7

README.md

@@ -289,6 +289,7 @@ interface CustomStyledIdentifiers {
     keyframes: string[];
     css: string[];
     createGlobalStyle: string[];
+    extend: string[];
 }
 ```
 
@@ -297,6 +298,7 @@ interface CustomStyledIdentifiers {
 - `keyframes` - list of identifiers of `keyframes` API (default `['keyframes']`)
 - `css` - list of identifiers of `css` API (default `['css']`)
 - `createGlobalStyle` - list of identifiers of `createGlobalStyle` API (default `['createGlobalStyle']`)
+- `extend` - list of identifiers of `extend` API (default `[]`). Note this API has been deprecated in `styled-components` so starting from `1.5` this option by default has empty set, which means it does not recognize this API by default.
 
 Example
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "typescript-plugin-styled-components",
-    "version": "1.4.4",
+    "version": "1.5.0",
     "description": "TypeScript transformer for improving the debugging experience of styled-components",
     "main": "dist/index.js",
     "homepage": "https://github.com/Igorbek/typescript-plugin-styled-components",
@@ -21,7 +21,7 @@
     },
     "typings": "dist/index.d.ts",
     "peerDependencies": {
-        "typescript": "^2.5.2 || ^3.0"
+        "typescript": "^2.5.2 || ^3.0 || ^4.0"
     },
     "devDependencies": {
         "@types/jest": "^25.2.1",

src/__tests__/baselines/base/issue33.ts.baseline

@@ -39,7 +39,7 @@ TypeScript after transform:
   declare const jQuery: any;
   declare const _: any;
   declare const Button: any;
-  const Button1 = Button.extend.withConfig({ displayName: "Button1" }) \` color: red \`;
+  const Button1 = Button.extend \` color: red \`;
   const Button2 = $.extend \` color: red \`;
   const Button3 = jQuery.extend \` color: red \`;
   const Button4 = _.extend \` color: red \`;

src/__tests__/baselines/base/sample1.ts.baseline

@@ -78,13 +78,13 @@ TypeScript after transform:
   const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" }) \`
     color: blue;
   \`;
-  const SuperButton = Button.extend.withConfig({ displayName: "SuperButton" }) \`
+  const SuperButton = Button.extend \`
     color: super;
   \`;
   export default styled.link \`
     color: black;
   \`;
-  export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton" }) \`
+  export const SmallButton = Button.extend \`
     font-size: .7em;
   \`;
   const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" }) \`

src/__tests__/baselines/base/style-objects.ts.baseline

@@ -78,13 +78,13 @@ TypeScript after transform:
   const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" })({
       color: 'blue'
   });
-  const SuperButton = Button.extend.withConfig({ displayName: "SuperButton" })({
+  const SuperButton = Button.extend({
       color: 'super'
   });
   export default styled.link({
       color: 'black'
   });
-  export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton" })({
+  export const SmallButton = Button.extend({
       fontSize: '.7em'
   });
   const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" })({

src/__tests__/baselines/ssr/issue33.ts.baseline

@@ -39,7 +39,7 @@ TypeScript after transform:
   declare const jQuery: any;
   declare const _: any;
   declare const Button: any;
-  const Button1 = Button.extend.withConfig({ displayName: "Button1", componentId: "sc-1iinolv" }) \` color: red \`;
+  const Button1 = Button.extend \` color: red \`;
   const Button2 = $.extend \` color: red \`;
   const Button3 = jQuery.extend \` color: red \`;
   const Button4 = _.extend \` color: red \`;

src/__tests__/baselines/ssr/sample1.ts.baseline

@@ -78,16 +78,16 @@ TypeScript after transform:
   const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-ce0fkl" }) \`
     color: blue;
   \`;
-  const SuperButton = Button.extend.withConfig({ displayName: "SuperButton", componentId: "sc-10xv1bi" }) \`
+  const SuperButton = Button.extend \`
     color: super;
   \`;
-  export default styled.link \`
+  export default styled.link.withConfig({ componentId: "sc-vba0dl" }) \`
     color: black;
   \`;
-  export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton", componentId: "sc-8sh5f7" }) \`
+  export const SmallButton = Button.extend \`
     font-size: .7em;
   \`;
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-v7haos" }) \`
+  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-ndnumj" }) \`
     font-size: .1em;
   \`;
 

src/__tests__/baselines/ssr/style-objects.ts.baseline

@@ -78,16 +78,16 @@ TypeScript after transform:
   const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-14ah7t" })({
       color: 'blue'
   });
-  const SuperButton = Button.extend.withConfig({ displayName: "SuperButton", componentId: "sc-1t5v351" })({
+  const SuperButton = Button.extend({
       color: 'super'
   });
-  export default styled.link({
+  export default styled.link.withConfig({ componentId: "sc-8xjslt" })({
       color: 'black'
   });
-  export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton", componentId: "sc-ftk9hu" })({
+  export const SmallButton = Button.extend({
       fontSize: '.7em'
   });
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-15rszef" })({
+  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-ad4g7l" })({
       fontSize: '.1em'
   });
 

src/createTransformer.ts

@@ -28,9 +28,8 @@ function isStyledFunction(node: ts.Node, identifiers: CustomStyledIdentifiers):
             return true;
         }
 
-        if (node.name.text === 'extend'
+        if (isStyledExtendIdentifier(node.name.text, identifiers)
             && isValidComponent(node.expression)) {
-
             return true;
         }
 
@@ -97,6 +96,10 @@ function isStyledCreateGlobalStyleIdentifier(name: string, { createGlobalStyle =
     return createGlobalStyle.indexOf(name) >= 0;
 }
 
+function isStyledExtendIdentifier(name: string, { extend = [] }: CustomStyledIdentifiers) {
+    return extend.indexOf(name) >= 0;
+}
+
 function isMinifyableStyledFunction(node: ts.Node, identifiers: CustomStyledIdentifiers) {
     return isStyledFunction(node, identifiers)
         || (
@@ -177,7 +180,7 @@ export function createTransformer({
                         || isCallExpression(node.parent)
                     )
                     && node.parent.parent
-                    && isVariableDeclaration(node.parent.parent)
+                    && (isVariableDeclaration(node.parent.parent) || isExportAssignment(node.parent.parent))
                     && isStyledFunction(node, identifiers)
                 ) {