add namespace option. (#281)

Co-authored-by: Silhan Jan <[email protected]>
Co-authored-by: Evan Jacobs <[email protected]>

Author: rajzik

src/utils/options.js

@@ -11,6 +11,14 @@ export const useMinify = state => getOption(state, 'minify')
 export const useTranspileTemplateLiterals = state =>
   getOption(state, 'transpileTemplateLiterals')
 
+export const useNamespace = state => {
+  const namespace = getOption(state, 'namespace', '')
+  if (namespace) {
+    return `${namespace}__`
+  }
+  return ''
+}
+
 export const usePureAnnotation = state => getOption(state, 'pure', false)
 
 export const useCssProp = state => getOption(state, 'cssProp', true)

src/visitors/displayNameAndId.js

@@ -1,6 +1,11 @@
 import path from 'path'
 import fs from 'fs'
-import { useFileName, useDisplayName, useSSR } from '../utils/options'
+import {
+  useFileName,
+  useDisplayName,
+  useSSR,
+  useNamespace,
+} from '../utils/options'
 import getName from '../utils/getName'
 import prefixLeadingDigit from '../utils/prefixDigit'
 import hash from '../utils/hash'
@@ -130,7 +135,9 @@ const getNextId = state => {
 
 const getComponentId = state => {
   // Prefix the identifier with a character because CSS classes cannot start with a number
-  return `${prefixLeadingDigit(getFileHash(state))}-${getNextId(state)}`
+  return `${useNamespace(state)}${prefixLeadingDigit(
+    getFileHash(state)
+  )}-${getNextId(state)}`
 }
 
 export default t => (path, state) => {

test/fixtures/use-namespace/.babelrc

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "namespace": "test-namespace"
+      }
+    ]
+  ]
+}

test/fixtures/use-namespace/code.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+const Test = styled.div`
+  color: red;
+`
+
+const before = styled.div`
+  color: blue;
+`
+
+styled.div``
+
+export default styled.button``

test/fixtures/use-namespace/output.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+const Test = styled.div.withConfig({
+  displayName: "code__Test",
+  componentId: "test-namespace__sc-3rfj0a-0"
+})(["color:red;"]);
+const before = styled.div.withConfig({
+  displayName: "code__before",
+  componentId: "test-namespace__sc-3rfj0a-1"
+})(["color:blue;"]);
+styled.div.withConfig({
+  displayName: "code",
+  componentId: "test-namespace__sc-3rfj0a-2"
+})([""]);
+export default styled.button.withConfig({
+  displayName: "code",
+  componentId: "test-namespace__sc-3rfj0a-3"
+})([""]);