Merge branch 'master' into dependabot/add-v2-config-file

Author: Igorbek

CHANGELOG.md

@@ -3,6 +3,8 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- namespace prefix to help multiple instances of library not clash (fix #381 in #395)
+
 ## [1.5.0]
 
 - transform anonymous default exports (fix #371 in #367)

README.md

@@ -225,6 +225,7 @@ interface Options {
     ssr: boolean;
     displayName: boolean;
     minify: boolean;
+    componentIdPrefix: string;
 }
 ```
 
@@ -275,6 +276,12 @@ The minification is not exactly the same and may produce slightly different resu
 
 Default value is `false` which means the minification is not being performed.
 
+### `componentIdPrefix`
+
+To avoid colisions when running more than one insance of typescript-plugin-styled-components at a time, you can add a componentIdPrefix by providing an arbitrary string to this option.
+
+Default value is `''` which means that no namespacing will happen.
+
 ### `identifiers`
 
 This option allows to customize identifiers used by `styled-components` API functions.

example/yarn.lock

@@ -516,10 +516,10 @@ bluebird@^3.5.1:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
   integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==
 
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
 body-parser@1.18.3:
   version "1.18.3"
@@ -561,7 +561,7 @@ braces@^2.3.0, braces@^2.3.1:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-brorand@^1.0.1:
+brorand@^1.0.1, brorand@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
@@ -1093,17 +1093,17 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 elliptic@^6.0.0:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
-  integrity sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
   dependencies:
-    bn.js "^4.4.0"
-    brorand "^1.0.1"
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
     hash.js "^1.0.0"
-    hmac-drbg "^1.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
 
 emojis-list@^2.0.0:
   version "2.1.0"
@@ -1569,9 +1569,9 @@ hash-base@^3.0.0:
     safe-buffer "^5.0.1"
 
 hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.5.tgz#e38ab4b85dfb1e0c40fe9265c0e9b54854c23812"
-  integrity sha512-eWI5HG9Np+eHV1KQhisXWwM+4EPPYe5dFX1UZZH7k/E3JzDEazVH+VGlZi6R94ZqImq+A3D1mCEtrFIfg/E7sA==
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
   dependencies:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
@@ -1587,7 +1587,7 @@ history@^4.7.2:
     value-equal "^0.4.0"
     warning "^3.0.0"
 
-hmac-drbg@^1.0.0:
+hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
   integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
@@ -1673,16 +1673,21 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
   integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
 
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
 ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
@@ -2114,7 +2119,7 @@ minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`issue33.ts 1`] = `
+
+File: issue33.ts
+Source code:
+
+  declare const styled: any;
+  declare const $: any;
+  declare const jQuery: any;
+  declare const _: any;
+  
+  declare const Button: any;
+  
+  const Button1 = Button.extend\` color: red \`;
+  
+  const Button2 = $.extend\` color: red \`;
+  const Button3 = jQuery.extend\` color: red \`;
+  const Button4 = _.extend\` color: red \`;
+  
+
+TypeScript before transform:
+
+  declare const styled: any;
+  declare const $: any;
+  declare const jQuery: any;
+  declare const _: any;
+  declare const Button: any;
+  const Button1 = Button.extend \` color: red \`;
+  const Button2 = $.extend \` color: red \`;
+  const Button3 = jQuery.extend \` color: red \`;
+  const Button4 = _.extend \` color: red \`;
+  
+
+TypeScript after transform:
+
+  declare const styled: any;
+  declare const $: any;
+  declare const jQuery: any;
+  declare const _: any;
+  declare const Button: any;
+  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/componentIdPrefix/multiple-components.tsx.baseline

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`multiple-components.tsx 1`] = `
+
+File: multiple-components.tsx
+Source code:
+
+  import styled from 'styled-components';
+  
+  export function createButtons() {
+      const A = styled.button\` color: red; \`;
+      const B = styled(A)\` color: blue; \`;
+  
+      return { A, B };
+  }
+  
+  export function createDivs() {
+      const A = styled.div\` color: green; \`;
+      const B = styled(A)\` color: yellow; \`;
+  
+      return { A, B };
+  }
+  
+
+TypeScript before transform:
+
+  import styled from "styled-components";
+  export function createButtons() {
+      const A = styled.button \` color: red; \`;
+      const B = styled(A) \` color: blue; \`;
+      return { A, B };
+  }
+  export function createDivs() {
+      const A = styled.div \` color: green; \`;
+      const B = styled(A) \` color: yellow; \`;
+      return { A, B };
+  }
+  
+
+TypeScript after transform:
+
+  import styled from 'styled-components';
+  export function createButtons() {
+      const A = styled.button.withConfig({ displayName: "test-A", componentId: "test-hana72" }) \` color: red; \`;
+      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-ke4nds" }) \` color: blue; \`;
+      return { A, B };
+  }
+  export function createDivs() {
+      const A = styled.div.withConfig({ displayName: "test-A", componentId: "test-1q7vmnt" }) \` color: green; \`;
+      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-7q8oop" }) \` color: yellow; \`;
+      return { A, B };
+  }
+  
+
+
+`;

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

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`sample1.ts 1`] = `
+
+File: sample1.ts
+Source code:
+
+  import styled from 'styled-components';
+  
+  const Button = styled.button\`
+    color: red;
+  \`;
+  
+  declare const nonStyled: any;
+  
+  const NonButton = nonStyled.button\`
+    yo
+  \`;
+  
+  const OtherButton = styled(Button)\`
+    color: blue;
+  \`;
+  
+  const SuperButton = Button.extend\`
+    color: super;
+  \`;
+  
+  export default styled.link\`
+    color: black;
+  \`;
+  
+  export const SmallButton = Button.extend\`
+    font-size: .7em;
+  \`;
+  
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' })\`
+    font-size: .1em;
+  \`;
+  
+
+TypeScript before transform:
+
+  import styled from "styled-components";
+  const Button = styled.button \`
+    color: red;
+  \`;
+  declare const nonStyled: any;
+  const NonButton = nonStyled.button \`
+    yo
+  \`;
+  const OtherButton = styled(Button) \`
+    color: blue;
+  \`;
+  const SuperButton = Button.extend \`
+    color: super;
+  \`;
+  export default styled.link \`
+    color: black;
+  \`;
+  export const SmallButton = Button.extend \`
+    font-size: .7em;
+  \`;
+  const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`
+    font-size: .1em;
+  \`;
+  
+
+TypeScript after transform:
+
+  import styled from 'styled-components';
+  const Button = styled.button.withConfig({ displayName: "test-Button", componentId: "test-1okqsxw" }) \`
+    color: red;
+  \`;
+  declare const nonStyled: any;
+  const NonButton = nonStyled.button \`
+    yo
+  \`;
+  const OtherButton = styled(Button).withConfig({ displayName: "test-OtherButton", componentId: "test-ce0fkl" }) \`
+    color: blue;
+  \`;
+  const SuperButton = Button.extend \`
+    color: super;
+  \`;
+  export default styled.link.withConfig({ componentId: "test-vba0dl" }) \`
+    color: black;
+  \`;
+  export const SmallButton = Button.extend \`
+    font-size: .7em;
+  \`;
+  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "test-MiniButton", componentId: "test-ndnumj" }) \`
+    font-size: .1em;
+  \`;
+  
+
+
+`;

src/__tests__/baselines/componentIdPrefix/sample2.ts.baseline

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`sample2.ts 1`] = `
+
+File: sample2.ts
+Source code:
+
+  import styled from 'styled-components';
+  
+  const styled2 = styled;
+  const NonButton = styled.button;
+  const NonStyled = styled\`  color: red; \`;
+  const Link = styled(NonStyled)\` color: red; \`;
+  
+
+TypeScript before transform:
+
+  import styled from "styled-components";
+  const styled2 = styled;
+  const NonButton = styled.button;
+  const NonStyled = styled \`  color: red; \`;
+  const Link = styled(NonStyled) \` color: red; \`;
+  
+
+TypeScript after transform:
+
+  import styled from 'styled-components';
+  const styled2 = styled;
+  const NonButton = styled.button;
+  const NonStyled = styled \`  color: red; \`;
+  const Link = styled(NonStyled).withConfig({ displayName: "test-Link", componentId: "test-1xlc242" }) \` color: red; \`;
+  
+
+
+`;