Implements nesting in template string parser

docs/jss-plugin-template.md

@@ -1,10 +1,9 @@
 ## Enables string templates
 
-Allows you to use string templates to declare CSS rules. It implements a **very naive** but **very fast (~42000 ops/sec)** runtime CSS parser, with certain limitations:
+Allows you to use string templates to declare CSS rules. It implements a **simplified** but **very fast** runtime CSS parser, with certain limitations:
 
-- Supports only rule body (no selectors)
-- Requires semicolon and a new line after the value (except the last line)
-- No nested rules support
+- Requires new lines at the end of each declaration.
+- Requires a closing curly brace of a nested rule to be on a separate line.
 
 ```js
 const styles = {
@@ -14,6 +13,9 @@ const styles = {
     color: red;
     margin: 20px 40px;
     padding: 10px;
+    &:hover span {
+      color: green;
+    }
   `,
   '@media print': {
     button: `color: black`

karma.conf.js

@@ -44,7 +44,7 @@ module.exports = config => {
       frameworks: ['benchmark'],
       // Using a fixed position for a file name, m.b. should use an args parser later.
       files: [process.argv[4] || 'packages/jss/benchmark/**/*.js'],
-      preprocessors: {'packages/jss/benchmark/**/*.js': ['webpack']},
+      preprocessors: {'packages/**/benchmark/**/*.js': ['webpack']},
       reporters: ['benchmark'],
       // Some tests are slow.
       browserNoActivityTimeout: 20000

packages/jss-plugin-template/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-template.js": {
-    "bundled": 1777,
-    "minified": 730,
-    "gzipped": 453
+    "bundled": 3019,
+    "minified": 1136,
+    "gzipped": 604
   },
   "dist/jss-plugin-template.min.js": {
-    "bundled": 1418,
-    "minified": 564,
-    "gzipped": 355
+    "bundled": 2485,
+    "minified": 859,
+    "gzipped": 487
   },
   "dist/jss-plugin-template.cjs.js": {
-    "bundled": 1341,
-    "minified": 686,
-    "gzipped": 423
+    "bundled": 2611,
+    "minified": 1165,
+    "gzipped": 575
   },
   "dist/jss-plugin-template.esm.js": {
-    "bundled": 1123,
-    "minified": 518,
-    "gzipped": 341,
+    "bundled": 2388,
+    "minified": 991,
+    "gzipped": 496,
     "treeshaked": {
       "rollup": {
         "code": 21,

packages/jss-plugin-template/benchmark/tests/createSheet.js

@@ -4,7 +4,7 @@ import template from '../../src/index'
 import parse from '../../src/parse'
 
 const options = {Renderer: null}
-const jss = create(options).use(template())
+const jss = create(options).use(template({cache: false}))
 
 const css = `
   color: rgb(77, 77, 77);

packages/jss-plugin-template/benchmark/tests/parse.js

@@ -1,3 +1,4 @@
+import stylis from 'stylis'
 import parse from '../../src/parse'
 
 const css = `
@@ -37,8 +38,21 @@ const css = `
   font-variant: normal normal;
   border-spacing: 0px;
 `
+
+stylis.set({
+  global: false,
+  keyframe: false,
+  prefix: false,
+  compress: false,
+  semicolon: true
+})
+
 suite('Parse', () => {
   benchmark('parse()', () => {
     parse(css)
   })
+
+  benchmark('stylis()', () => {
+    stylis('#id', css)
+  })
 })

packages/jss-plugin-template/package.json

@@ -40,5 +40,9 @@
     "@babel/runtime": "^7.3.1",
     "jss": "10.0.0-alpha.16",
     "tiny-warning": "^1.0.2"
+  },
+  "devDependencies": {
+    "jss-plugin-nested": "^10.0.0-alpha.16",
+    "stylis": "^3.5.4"
   }
 }

packages/jss-plugin-template/src/index.js

@@ -2,13 +2,27 @@
 import {type Plugin} from 'jss'
 import parse from './parse'
 
-const onProcessRule = rule => {
-  if (typeof rule.style === 'string') {
-    // $FlowFixMe: We can safely assume that rule has the style property
-    rule.style = parse(rule.style)
+export const cache = {}
+
+type Options = {|cache: boolean|}
+
+export default function templatePlugin(options: Options = {cache: true}): Plugin {
+  const onProcessStyle = style => {
+    if (typeof style !== 'string') {
+      return style
+    }
+
+    if (style in cache) {
+      return cache[style]
+    }
+
+    if (options.cache) {
+      cache[style] = parse(style)
+      return cache[style]
+    }
+
+    return parse(style)
   }
-}
 
-export default function templatePlugin(): Plugin {
-  return {onProcessRule}
+  return {onProcessStyle}
 }