Merge pull request #58 from cssinjs/feature/fix-classname

Fix #50, escape Components name

Author: lttb

src/tests/__snapshots__/functional.spec.jsx.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`functional tests Compose React Components should escape name 1`] = `
+".\\\\(Comp\\\\.name\\\\)-1-id {
+  color: red;
+}"
+`;
+
 exports[`functional tests Compose React Components should pass props 1`] = `
 <Component>
   <StyledElement

src/tests/functional.spec.jsx

@@ -4,6 +4,8 @@ import Observable from 'zen-observable'
 import Enzyme, {mount} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
+import escapeClassName from '../utils/escapeClassName'
+
 import {
   getCss,
   removeWhitespace
@@ -25,8 +27,8 @@ const mockNameGenerators = () => {
   const generateTagName = require('../utils/generateTagName').default
   const createGenerateClassName = require('jss/lib/utils/createGenerateClassName').default
 
-  // $FlowIgnore
-  generateTagName.mockImplementation((tagName: string) => `${tagName}-${++styledCounter}`)
+  // $FlowIgnore there is now mockImplementation in declaration
+  generateTagName.mockImplementation((tagName: string) => `${escapeClassName(tagName)}-${++styledCounter}`)
   createGenerateClassName.mockImplementation(() => rule => `${rule.key}-id`)
 }
 
@@ -188,6 +190,26 @@ describe('functional tests', () => {
       assertSheet(styled.sheet)
     })
 
+    it('should escape name', () => {
+      const Comp = ({className}: {className: string}) => (
+        <div className={className}>Container</div>
+      )
+
+      Comp.displayName = '(Comp.name)'
+
+      const Container = styled(Comp)({
+        color: 'red',
+      })
+
+      const wrapper = mount(<Container />)
+      const {sheet} = styled
+
+      expect(sheet.rules.index[0].selectorText).toBe('.\\(Comp\\.name\\)-1-id')
+      assertSheet(sheet)
+
+      wrapper.unmount()
+    })
+
     it('should use .name', () => {
       const StyledTest = styled(props => <h1 {...props}>test</h1>)({
         padding: 10,

src/utils/escapeClassName.js

@@ -0,0 +1,3 @@
+const re = /([.()])/g
+
+export default (className: string) => className.replace(re, '\\$&')

src/utils/generateTagName.js

@@ -1,3 +1,5 @@
+import escapeClassName from './escapeClassName'
+
 let tagNameCounter = 0
 
-export default (tagName: string) => `${tagName}-${++tagNameCounter}`
+export default (tagName: string) => `${escapeClassName(tagName)}-${++tagNameCounter}`