Added minify option to createGenerateId

changelog.md

@@ -1,3 +1,9 @@
+## Next
+
+### Breaking Changes
+
+- [jss] Add option for opt-in minification of class names. ([#1075](https://github.com/cssinjs/jss/pull/1075))
+
 ## 10.0.0-alpha.16 (2019-3-24)
 
 ### Bug fixes

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/jss.js": {
-    "bundled": 58906,
-    "minified": 21842,
-    "gzipped": 6572
+    "bundled": 59218,
+    "minified": 22038,
+    "gzipped": 6624
   },
   "dist/jss.min.js": {
-    "bundled": 57740,
-    "minified": 20925,
-    "gzipped": 6130
+    "bundled": 57972,
+    "minified": 21139,
+    "gzipped": 6197
   },
   "dist/jss.cjs.js": {
-    "bundled": 54364,
-    "minified": 23753,
-    "gzipped": 6620
+    "bundled": 54493,
+    "minified": 23853,
+    "gzipped": 6647
   },
   "dist/jss.esm.js": {
-    "bundled": 53868,
-    "minified": 23349,
-    "gzipped": 6537,
+    "bundled": 53977,
+    "minified": 23429,
+    "gzipped": 6559,
     "treeshaked": {
       "rollup": {
-        "code": 18985,
+        "code": 19199,
         "import_statements": 281
       },
       "webpack": {
-        "code": 20400
+        "code": 20617
       }
     }
   }

packages/jss/src/Jss.js

@@ -15,9 +15,9 @@ import type {
   Plugin,
   JssOptions,
   InternalJssOptions,
-  JssStyle,
-  GenerateId
+  JssStyle
 } from './types'
+import type {GenerateId} from './utils/createGenerateId'
 
 let instanceCounter = 0
 
@@ -29,12 +29,13 @@ export default class Jss {
   plugins = new PluginsRegistry()
 
   options: InternalJssOptions = {
+    id: {minify: false},
     createGenerateId: createGenerateIdDefault,
     Renderer: isInBrowser ? DomRenderer : null,
     plugins: []
   }
 
-  generateId: GenerateId = createGenerateIdDefault()
+  generateId: GenerateId = createGenerateIdDefault({minify: false})
 
   constructor(options?: JssOptions) {
     for (let i = 0; i < internalPlugins.length; i++) {
@@ -49,10 +50,19 @@ export default class Jss {
    * deduplication logic.
    */
   setup(options?: JssOptions = {}): this {
-    const {createGenerateId} = options
-    if (createGenerateId) {
-      this.options.createGenerateId = createGenerateId
-      this.generateId = createGenerateId()
+    if (options.createGenerateId) {
+      this.options.createGenerateId = options.createGenerateId
+    }
+
+    if (options.id) {
+      this.options.id = {
+        ...this.options.id,
+        ...options.id
+      }
+    }
+
+    if (options.createGenerateId || options.id) {
+      this.generateId = this.options.createGenerateId(this.options.id)
     }
 
     if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint

packages/jss/src/index.d.ts

@@ -3,6 +3,12 @@ export type Styles<Name extends string = string> = Record<Name, Style>
 export type Classes<Name extends string = string> = Record<Name, string>
 export type Keyframes<Name extends string = string> = Record<Name, string>
 
+export interface CreateGenerateIdOptions {
+  minify?: boolean
+}
+
+export type CreateGenerateId = (options?: CreateGenerateIdOptions) => GenerateId
+
 export type GenerateId = (rule: Rule, sheet?: StyleSheet<string>) => string
 
 export type JssValue =
@@ -12,8 +18,6 @@ export type JssValue =
   | null
   | false
 
-export type CreateGenerateId = () => GenerateId
-
 export type InsertionPoint = string | HTMLElement
 
 export interface UpdateOptions {
@@ -215,13 +219,14 @@ export interface Jss {
   createRule(style: Style, options?: RuleFactoryOptions): Rule
   createRule<Name extends string>(name: Name, style: Style, options?: RuleFactoryOptions): Rule
 }
+
 /**
  * Creates a new instance of JSS.
  */
 declare const sheets: SheetsRegistry
 export {sheets, SheetsManager, SheetsRegistry, RuleList}
 export function create(options?: Partial<JssOptions>): Jss
-export function createGenerateId(): GenerateId
+export const createGenerateId: CreateGenerateId
 export function createRule(name: string, decl: Style, options: RuleOptions): Rule
 export function toCssValue(value: JssValue, ignoreImportant: boolean): string
 export function getDynamicStyles(styles: Styles): Styles | null

packages/jss/src/index.js

@@ -27,7 +27,6 @@ export type {
   JssOptions,
   JssStyle,
   Plugin,
-  GenerateId,
   RuleListOptions,
   Rule,
   Renderer,
@@ -37,6 +36,7 @@ export type {
   BaseRule,
   ContainerRule
 } from './types'
+export type {GenerateId, CreateGenerateId, CreateGenerateIdOptions} from './utils/createGenerateId'
 
 export type {
   Jss,

packages/jss/src/types/jss.js

@@ -10,6 +10,7 @@ import type {FontFaceRule} from '../plugins/fontFaceRule'
 import type {CSSStyleRule, AnyCSSRule} from './cssom'
 import type {HTMLElementWithStyleMap} from './dom'
 import type RuleList from '../RuleList'
+import type {CreateGenerateId, CreateGenerateIdOptions, GenerateId} from '../utils/createGenerateId'
 
 export type {RuleList, StyleSheet}
 
@@ -55,8 +56,6 @@ export type Rule =
   | ViewportRule
   | BaseRule
 
-export type GenerateId = (rule: Rule, sheet?: StyleSheet) => string
-
 // TODO
 // Find a way to declare all types: Object|string|Array<Object>
 export type JssStyle = Object
@@ -151,10 +150,9 @@ export type Plugin = {|
 
 export type InsertionPoint = string | HTMLElementWithStyleMap
 
-type CreateGenerateId = () => GenerateId
-
 export type JssOptions = {
   createGenerateId?: CreateGenerateId,
+  id?: CreateGenerateIdOptions,
   plugins?: Array<Plugin>,
   insertionPoint?: InsertionPoint,
   Renderer?: Class<Renderer> | null
@@ -163,6 +161,7 @@ export type JssOptions = {
 export type InternalJssOptions = {|
   createGenerateId: CreateGenerateId,
   plugins: Array<Plugin>,
+  id: CreateGenerateIdOptions,
   insertionPoint?: InsertionPoint,
   Renderer?: Class<Renderer> | null
 |}

packages/jss/src/utils/createGenerateId.js

@@ -1,20 +1,26 @@
 /* @flow */
 import warning from 'tiny-warning'
-import type {Rule, GenerateId} from '../types'
+import type {Rule} from '../types'
 import StyleSheet from '../StyleSheet'
 import moduleId from './moduleId'
 
 const maxRules = 1e10
 
+export type CreateGenerateIdOptions = {|
+  minify: boolean
+|}
+export type GenerateId = (rule: Rule, sheet?: StyleSheet) => string
+
+export type CreateGenerateId = (options: CreateGenerateIdOptions) => GenerateId
+
 /**
  * Returns a function which generates unique class names based on counters.
  * When new generator function is created, rule counter is reseted.
  * We need to reset the rule counter for SSR for each request.
  */
-export default (): GenerateId => {
+const createGenerateId: CreateGenerateId = options => {
   let ruleCounter = 0
-  const env = process.env.NODE_ENV
-  const defaultPrefix = env === 'production' ? 'c' : ''
+  const defaultPrefix = options.minify ? 'c' : ''
 
   return (rule: Rule, sheet?: StyleSheet): string => {
     ruleCounter += 1
@@ -31,10 +37,12 @@ export default (): GenerateId => {
       if (sheet.options.jss.id != null) jssId += sheet.options.jss.id
     }
 
-    if (env === 'production') {
+    if (options.minify) {
       return `${prefix}${moduleId}${jssId}${ruleCounter}`
     }
 
     return `${prefix + rule.key}-${moduleId}${jssId && `-${jssId}`}-${ruleCounter}`
   }
 }
+
+export default createGenerateId

packages/react-jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/react-jss.js": {
-    "bundled": 109281,
-    "minified": 37011,
-    "gzipped": 12000
+    "bundled": 109430,
+    "minified": 37081,
+    "gzipped": 12033
   },
   "dist/react-jss.min.js": {
-    "bundled": 84722,
-    "minified": 29746,
-    "gzipped": 9811
+    "bundled": 84871,
+    "minified": 29816,
+    "gzipped": 9843
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 15499,
-    "minified": 7158,
-    "gzipped": 2476
+    "bundled": 15632,
+    "minified": 7254,
+    "gzipped": 2508
   },
   "dist/react-jss.esm.js": {
-    "bundled": 14818,
-    "minified": 6578,
-    "gzipped": 2359,
+    "bundled": 14951,
+    "minified": 6674,
+    "gzipped": 2394,
     "treeshaked": {
       "rollup": {
-        "code": 1946,
+        "code": 2018,
         "import_statements": 457
       },
       "webpack": {
-        "code": 3346
+        "code": 3422
       }
     }
   }

packages/react-jss/src/JssProvider.js

@@ -1,22 +1,29 @@
 // @flow
 import React, {Component, type Node} from 'react'
 import PropTypes from 'prop-types'
-import defaultJss, {createGenerateId, type Jss, type GenerateId, SheetsRegistry} from 'jss'
+import defaultJss, {
+  createGenerateId,
+  type Jss,
+  type GenerateId,
+  SheetsRegistry,
+  type CreateGenerateIdOptions
+} from 'jss'
 import type {Context, Managers} from './types'
 import JssContext from './JssContext'
 import memoize from './memoize-one'
 
 /* eslint-disable react/require-default-props, react/no-unused-prop-types */
 
-type Props = {
+type Props = {|
   jss?: Jss,
   registry?: SheetsRegistry,
   generateId?: GenerateId,
   classNamePrefix?: string,
   disableStylesGeneration?: boolean,
   media?: string,
-  children: Node
-}
+  children: Node,
+  id: CreateGenerateIdOptions
+|}
 
 export default class JssProvider extends Component<Props> {
   static propTypes = {
@@ -26,9 +33,12 @@ export default class JssProvider extends Component<Props> {
     classNamePrefix: PropTypes.string,
     disableStylesGeneration: PropTypes.bool,
     children: PropTypes.node.isRequired,
-    media: PropTypes.string
+    media: PropTypes.string,
+    id: PropTypes.shape({minify: PropTypes.bool})
   }
 
+  static defaultProps = {id: {minify: false}}
+
   managers: Managers = {}
 
   createContext = memoize(
@@ -55,7 +65,7 @@ export default class JssProvider extends Component<Props> {
         context.sheetOptions.generateId = generateId
       } else if (!context.sheetOptions.generateId) {
         if (!this.generateId) {
-          this.generateId = createGenerateId()
+          this.generateId = createGenerateId(this.props.id)
         }
         context.sheetOptions.generateId = this.generateId
       }

packages/react-jss/src/index.d.ts

@@ -5,7 +5,8 @@ import {
   Jss,
   SheetsRegistry,
   Styles,
-  StyleSheetFactoryOptions
+  StyleSheetFactoryOptions,
+  CreateGenerateIdOptions
 } from 'jss'
 import {ThemeProvider, withTheme, createTheming, Theming} from 'theming'
 
@@ -18,6 +19,7 @@ declare const JssProvider: ComponentType<{
   classNamePrefix?: string
   disableStylesGeneration?: boolean
   children: ReactNode
+  id?: CreateGenerateIdOptions
 }>
 interface Managers {
   [key: number]: StyleSheet