From cd972155dc47714e23c03ee0831a502b77f310e7 Mon Sep 17 00:00:00 2001
From: nvanselow <nick@nickvanselow.com>
Date: Fri, 20 Oct 2017 19:20:22 -0400
Subject: [PATCH] Add option to increase specificity of class for styled
 components

---
 src/index.js                                      |  4 ++--
 src/utils/options.js                              |  5 +++--
 ...yNameAndId.js => displayNameIdAndNamespace.js} | 15 +++++++++++----
 3 files changed, 16 insertions(+), 8 deletions(-)
 rename src/visitors/{displayNameAndId.js => displayNameIdAndNamespace.js} (83%)

diff --git a/src/index.js b/src/index.js
index df812a2..7d96ed5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
 import minify from './visitors/minify'
-import displayNameAndId from './visitors/displayNameAndId'
+import displayNameIdAndNamespace from './visitors/displayNameIdAndNamespace'
 import templateLiterals from './visitors/templateLiterals'
 import assignStyledRequired from './visitors/assignStyledRequired'
 import { noParserImportDeclaration, noParserRequireCallExpression } from './visitors/noParserImport'
@@ -15,7 +15,7 @@ export default function({ types: t }) {
       },
       TaggedTemplateExpression(path, state) {
         minify(path, state)
-        displayNameAndId(path, state)
+        displayNameIdAndNamespace(path, state)
         templateLiterals(path, state)
       },
       VariableDeclarator(path, state) {
diff --git a/src/utils/options.js b/src/utils/options.js
index 03ecd30..f67d60c 100644
--- a/src/utils/options.js
+++ b/src/utils/options.js
@@ -3,8 +3,9 @@ function getOption({ opts }, name, defaultValue = true) {
 }
 
 export const useDisplayName = (state) => getOption(state, 'displayName')
-export const useSSR = (state) =>  getOption(state, 'ssr', false)
-export const useFileName = (state) =>getOption(state, 'fileName')
+export const useSSR = (state) => getOption(state, 'ssr', false)
+export const useFileName = (state) => getOption(state, 'fileName')
 export const useMinify = (state) => getOption(state, 'minify')
 export const useCSSPreprocessor = (state) => getOption(state, 'preprocess', false) // EXPERIMENTAL
 export const useTranspileTemplateLiterals = (state) => getOption(state, 'transpileTemplateLiterals')
+export const useNamespaceClasses = state => getOption(state, 'namespaceClasses', null);
diff --git a/src/visitors/displayNameAndId.js b/src/visitors/displayNameIdAndNamespace.js
similarity index 83%
rename from src/visitors/displayNameAndId.js
rename to src/visitors/displayNameIdAndNamespace.js
index 33ffc75..34dded5 100644
--- a/src/visitors/displayNameAndId.js
+++ b/src/visitors/displayNameIdAndNamespace.js
@@ -1,12 +1,12 @@
 import * as t from 'babel-types'
-import { useFileName, useDisplayName, useSSR } from '../utils/options'
+import { useFileName, useDisplayName, useSSR, useNamespaceClasses } from '../utils/options'
 import getName from '../utils/getName'
 import path from 'path'
 import fs from 'fs'
 import hash from '../utils/hash'
 import { isStyled } from '../utils/detectors'
 
-const addConfig = (path, displayName, componentId) => {
+const addConfig = (path, displayName, componentId, namespaceClasses) => {
   if (!displayName && !componentId) {
     return
   }
@@ -18,11 +18,17 @@ const addConfig = (path, displayName, componentId) => {
   if (componentId) {
     withConfigProps.push(t.objectProperty(t.identifier('componentId'), t.stringLiteral(componentId)))
   }
+  if (namespaceClasses) {
+    const namespaceClassOption = Array.isArray(namespaceClasses) ?
+      t.arrayExpression(namespaceClasses.map(value => t.stringLiteral(value)))
+      : t.stringLiteral(namespaceClasses);
+    withConfigProps.push(t.objectProperty(t.identifier('namespaceClasses'), namespaceClassOption))
+  }
 
   // Replace x`...` with x.withConfig({ })`...`
   path.node.tag = t.callExpression(
     t.memberExpression(path.node.tag, t.identifier('withConfig')),
-    [ t.objectExpression(withConfigProps) ]
+    [t.objectExpression(withConfigProps)]
   )
 }
 
@@ -99,7 +105,8 @@ export default (path, state) => {
     addConfig(
       path,
       displayName && displayName.replace(/[^_a-zA-Z0-9-]/g, ''),
-      useSSR(state) && getComponentId(state)
+      useSSR(state) && getComponentId(state),
+      useNamespaceClasses(state)
     )
   }
 }