Don't use undefined as a selector (#906)

* stringify without a selector

* update snapshots

* fix wording

* fix tests

Author: kof

packages/jss-plugin-syntax-rule-value-function/src/function-values.test.js

@@ -46,8 +46,7 @@ describe('jss-plugin-syntax-rule-value-function: Function values', () => {
 
     it('should render an empty rule', () => {
       expect(sheet.toString()).to.be(stripIndent`
-        .a-id {
-        }
+        .a-id {}
       `)
     })
 
@@ -114,8 +113,7 @@ describe('jss-plugin-syntax-rule-value-function: Function values', () => {
 
     it('should render an empty rule', () => {
       expect(sheet.toString()).to.be(stripIndent`
-        .a-id {
-        }
+        .a-id {}
       `)
     })
 
@@ -207,15 +205,12 @@ describe('jss-plugin-syntax-rule-value-function: Function values', () => {
     describe('.toString()', () => {
       it('should return correct .toString() before .update()', () => {
         expect(sheet.toString()).to.be(stripIndent`
-          .a-id {
-          }
+          .a-id {}
           @media all {
-            .b-id {
-            }
+            .b-id {  }
           }
           @keyframes keyframes-a-id {
-            0% {
-            }
+            0% {  }
           }
         `)
       })
@@ -292,15 +287,12 @@ describe('jss-plugin-syntax-rule-value-function: Function values', () => {
         sheet.update({color: null})
 
         expect(sheet.toString()).to.be(stripIndent`
-          .a-id {
-          }
+          .a-id {}
           @media all {
-            .b-id {
-            }
+            .b-id {  }
           }
           @keyframes keyframes-a-id {
-            0% {
-            }
+            0% {  }
           }
         `)
       })
@@ -309,15 +301,12 @@ describe('jss-plugin-syntax-rule-value-function: Function values', () => {
         sheet.update({color: undefined})
 
         expect(sheet.toString()).to.be(stripIndent`
-          .a-id {
-          }
+          .a-id {}
           @media all {
-            .b-id {
-            }
+            .b-id {  }
           }
           @keyframes keyframes-a-id {
-            0% {
-            }
+            0% {  }
           }
         `)
       })
@@ -326,15 +315,12 @@ describe('jss-plugin-syntax-rule-value-function: Function values', () => {
         sheet.update({color: false})
 
         expect(sheet.toString()).to.be(stripIndent`
-          .a-id {
-          }
+          .a-id {}
           @media all {
-            .b-id {
-            }
+            .b-id {  }
           }
           @keyframes keyframes-a-id {
-            0% {
-            }
+            0% {  }
           }
         `)
       })

packages/jss-plugin-syntax-rule-value-function/src/plugin-nested.test.js

@@ -200,10 +200,8 @@ describe('jss-plugin-syntax-rule-value-function: plugin-nested', () => {
         .b-id {
           background: blue;
         }
-        .c-id {
-        }
-        .c-id.a-id {
-        }
+        .c-id {}
+        .c-id.a-id {}
         .c-id.a-id .b-id {
           margin: 10px;
         }

packages/jss-plugin-syntax-rule-value-observable/src/observable-values.test.js

@@ -38,8 +38,7 @@ describe('jss-plugin-syntax-rule-value-observable: values', () => {
 
     it('should accept an observable', () => {
       expect(sheet.toString()).to.be(stripIndent`
-        .a-id {
-        }
+        .a-id {}
       `)
     })
 

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/jss.js": {
-    "bundled": 60305,
-    "minified": 22658,
-    "gzipped": 6848
+    "bundled": 60552,
+    "minified": 22716,
+    "gzipped": 6861
   },
   "dist/jss.min.js": {
-    "bundled": 59429,
-    "minified": 22037,
-    "gzipped": 6536
+    "bundled": 59676,
+    "minified": 22095,
+    "gzipped": 6550
   },
   "dist/jss.cjs.js": {
-    "bundled": 53496,
-    "minified": 23579,
-    "gzipped": 6611
+    "bundled": 53735,
+    "minified": 23637,
+    "gzipped": 6626
   },
   "dist/jss.esm.js": {
-    "bundled": 52980,
-    "minified": 23160,
-    "gzipped": 6522,
+    "bundled": 53219,
+    "minified": 23218,
+    "gzipped": 6539,
     "treeshaked": {
       "rollup": {
-        "code": 19687,
+        "code": 19745,
         "import_statements": 309
       },
       "webpack": {
-        "code": 21148
+        "code": 21208
       }
     }
   }

packages/jss/src/plugins/styleRule.js

@@ -156,7 +156,7 @@ export class StyleRule extends BaseStyleRule {
     const {sheet} = this.options
     const link = sheet ? sheet.options.link : false
     const opts = link ? {...options, allowEmpty: true} : options
-    return toCss(this.selector, this.style, opts)
+    return toCss(this.selectorText, this.style, opts)
   }
 }
 

packages/jss/src/utils/toCss.js

@@ -16,7 +16,7 @@ function indentStr(str: string, indent: number): string {
  * Converts a Rule to CSS string.
  */
 export default function toCss(
-  selector: string,
+  selector?: string,
   style: JssStyle,
   options: ToCssOptions = {}
 ): string {
@@ -27,7 +27,7 @@ export default function toCss(
   let {indent = 0} = options
   const {fallbacks} = style
 
-  indent++
+  if (selector) indent++
 
   // Apply fallbacks first.
   if (fallbacks) {
@@ -38,7 +38,8 @@ export default function toCss(
         for (const prop in fallback) {
           const value = fallback[prop]
           if (value != null) {
-            result += `\n${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
+            if (result) result += '\n'
+            result += `${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
           }
         }
       }
@@ -47,7 +48,8 @@ export default function toCss(
       for (const prop in fallbacks) {
         const value = fallbacks[prop]
         if (value != null) {
-          result += `\n${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
+          if (result) result += '\n'
+          result += `${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
         }
       }
     }
@@ -56,15 +58,20 @@ export default function toCss(
   for (const prop in style) {
     const value = style[prop]
     if (value != null && prop !== 'fallbacks') {
-      result += `\n${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
+      if (result) result += '\n'
+      result += `${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
     }
   }
 
   // Allow empty style in this case, because properties will be added dynamically.
   if (!result && !options.allowEmpty) return result
 
+  // When rule is being stringified before selector was defined.
+  if (!selector) return result
+
   indent--
-  result = indentStr(`${selector} {${result}\n`, indent) + indentStr('}', indent)
 
-  return result
+  if (result) result = `\n${result}\n`
+
+  return indentStr(`${selector} {${result}`, indent) + indentStr('}', indent)
 }

packages/jss/tests/integration/sheet.js

@@ -62,6 +62,20 @@ describe('Integration: sheet', () => {
       const sheet = jss.createStyleSheet(null, {generateId})
       expect(sheet.options.generateId).to.be(generateId)
     })
+
+    it('should have no selector in stringified rule when id gnerator is called', () => {
+      let css
+      // Simulate cache based id generator.
+      const generateId = rule => {
+        css = rule.toString()
+        return css
+      }
+      jss.createStyleSheet({a: {color: 'red', width: '10px'}}, {generateId})
+      expect(css).to.be(stripIndent`
+        color: red;
+        width: 10px;
+      `)
+    })
   })
 
   describe('sheet.getRule()', () => {