Move generateTagName to utils, use camelCase for filename

Author: lttb

src/index.js

@@ -2,8 +2,9 @@ import {PureComponent, createElement} from 'react'
 import {create as createJss, getDynamicStyles} from 'jss'
 import preset from 'jss-preset-default'
 
-import filterProps from './utils/filter-props'
-import composeClasses from './utils/compose-classes'
+import filterProps from './utils/filterProps'
+import composeClasses from './utils/composeClasses'
+import generateTagName from './utils/generateTagName'
 import type {
   BaseStylesType,
   ComponentStyleType,
@@ -23,9 +24,6 @@ const createStyled = (
   baseStyles: BaseStylesType = {}
 ): StyledType => {
   const sheets = {}
-  let counter = 0
-
-  const getScopedTagName = (tagName: string) => `${tagName}-${++counter}`
 
   const mountSheets = () => {
     if (!sheets.staticSheet) {
@@ -50,7 +48,7 @@ const createStyled = (
 
     const elementStyle = {...style, ...ownStyle}
     const dynamicStyle = getDynamicStyles(elementStyle)
-    const staticTagName = getScopedTagName(tagName)
+    const staticTagName = generateTagName(tagName)
 
     return class StyledElement extends PureComponent {
       static tagName: string = tagName
@@ -62,7 +60,7 @@ const createStyled = (
 
       constructor(props) {
         super(props)
-        this.dynamicTagName = getScopedTagName(tagName)
+        this.dynamicTagName = generateTagName(tagName)
       }
 
       componentWillMount() {

src/injectStyled.js

@@ -1,6 +1,6 @@
 import {createElement} from 'react'
 
-import composeClasses from './utils/compose-classes'
+import composeClasses from './utils/composeClasses'
 import type {StyledType} from './types'
 
 const injectStyled = (styled: StyledType) => (InnerComponent: ReactClass<any>) => {

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

@@ -1,26 +1,26 @@
 exports[`test renders correctly App with default Styled 1`] = `
 <div
-  className="div-1-0-9">
+  className="div-14-0-9">
   <header
-    className="header-2-0-10">
+    className="header-15-0-10">
     <h1
-      className="h1-5-0-11">
+      className="h1-18-0-11">
       Title
     </h1>
   </header>
   <section
-    className="section-3-0-12">
+    className="section-16-0-12">
     <button
-      className="button-6-0-13 button-11-0-14">
+      className="button-19-0-13 button-24-0-14">
       primitive test
     </button>
     <button
-      className="button-6-0-13 button-12-0-15">
+      className="button-19-0-13 button-25-0-15">
       dynamic primitive test
     </button>
   </section>
   <section
-    className="section-4-0-16">
+    className="section-17-0-16">
     Another section
   </section>
 </div>
@@ -58,27 +58,27 @@ exports[`test renders correctly App with injectStyled 1`] = `
 <div
   className="root-0-17">
   <div
-    className="div-1-0-19">
+    className="div-27-0-19">
     <header
-      className="header-2-0-20">
+      className="header-28-0-20">
       <h1
-        className="h1-5-0-21">
+        className="h1-31-0-21">
         Title
       </h1>
     </header>
     <section
-      className="section-3-0-22">
+      className="section-29-0-22">
       <button
-        className="button-6-0-23 button-11-0-24">
+        className="button-32-0-23 button-37-0-24">
         primitive test
       </button>
       <button
-        className="button-6-0-23 button-12-0-25">
+        className="button-32-0-23 button-38-0-25">
         dynamic primitive test
       </button>
     </section>
     <section
-      className="section-4-0-26">
+      className="section-30-0-26">
       Another section
     </section>
   </div>

src/utils/compose-classes.js src/utils/composeClasses.jssrc/utils/compose-classes.js renamed to src/utils/composeClasses.js

@@ -0,0 +1,3 @@
+let tagNameCounter = 0
+
+export default (tagName: string) => `${tagName}-${++tagNameCounter}`