Merge pull request #395 from TomGrundy/master

Added namespace option to allow for namespacing, when running multiple instances of typescript-plugin-styled-components (fixes #381)

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.

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; \`;
+  
+
+
+`;

src/__tests__/baselines/componentIdPrefix/sample3.tsx.baseline

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`sample3.tsx 1`] = `
+
+File: sample3.tsx
+Source code:
+
+  import * as React from 'react';
+  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 LabeledLink = () => <SmallButton />;
+  
+  export default CustomLabel;
+  
+
+TypeScript before transform:
+
+  import * as React from "react";
+  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 LabeledLink = () => <SmallButton />;
+  export default CustomLabel;
+  
+
+TypeScript after transform:
+
+  import * as React from 'react';
+  import styled from '../themed-styled';
+  import { SmallButton } from './sample1';
+  interface LabelProps {
+      size: number;
+  }
+  const CustomLabel = styled.label.withConfig({ displayName: "test-CustomLabel", componentId: "test-1ydgk9x" }) \`
+      font-size: \${(props: LabelProps) => props.size + 'px'}
+  \`;
+  const LabeledLink = () => <SmallButton />;
+  export default CustomLabel;
+  
+
+
+`;