New css interface

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

@@ -0,0 +1,31 @@
+{
+  "dist/css-jss.js": {
+    "bundled": 56349,
+    "minified": 20060,
+    "gzipped": 6697
+  },
+  "dist/css-jss.min.js": {
+    "bundled": 55595,
+    "minified": 19601,
+    "gzipped": 6480
+  },
+  "dist/css-jss.cjs.js": {
+    "bundled": 1951,
+    "minified": 934,
+    "gzipped": 499
+  },
+  "dist/css-jss.esm.js": {
+    "bundled": 1740,
+    "minified": 770,
+    "gzipped": 424,
+    "treeshaked": {
+      "rollup": {
+        "code": 98,
+        "import_statements": 63
+      },
+      "webpack": {
+        "code": 1382
+      }
+    }
+  }
+}

packages/css-jss/LICENSE

@@ -0,0 +1,8 @@
+The MIT License (MIT)
+Copyright (c) 2014-present Oleg Isonen (Slobodskoi) & contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/css-jss/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "css-jss",
+  "description": "Implements css() interface on top of JSS",
+  "version": "10.0.0-alpha.17",
+  "license": "MIT",
+  "homepage": "https://cssinjs.org/",
+  "main": "dist/css-jss.cjs.js",
+  "module": "dist/css-jss.esm.js",
+  "unpkg": "dist/css-jss.bundle.js",
+  "typings": "./src/index.d.ts",
+  "author": "JSS Team",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cssinjs/jss"
+  },
+  "bugs": {
+    "url": "https://github.com/cssinjs/jss/issues/new"
+  },
+  "files": [
+    "dist",
+    "src",
+    "LICENSE"
+  ],
+  "keywords": [
+    "jss",
+    "style",
+    "sheet",
+    "stylesheet",
+    "css",
+    "components",
+    "composable",
+    "css in js",
+    "css-in-js"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "check-snapshot": "node ../../scripts/match-snapshot.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.3.1",
+    "jss": "10.0.0-alpha.17",
+    "jss-preset-default": "10.0.0-alpha.17"
+  }
+}

packages/css-jss/readme.md

@@ -0,0 +1,26 @@
+# css-jss
+
+[![Version](https://img.shields.io/npm/v/css-jss.svg?style=flat)](https://npmjs.org/package/css-jss)
+[![License](https://img.shields.io/npm/l/css-jss.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/css-jss.svg?style=flat)](https://npmjs.org/package/css-jss)
+[![Size](https://img.shields.io/bundlephobia/minzip/css-jss.svg?style=flat)](https://npmjs.org/package/css-jss)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fcss-jss&style=flat)](https://npmjs.org/package/css-jss)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
+> Implements css() interface on top of JSS
+
+See our website [css-jss](https://cssinjs.org/css-jss?v=v10.0.0-alpha.17) for more information.
+
+## Install
+
+Using npm:
+
+```sh
+npm install css-jss
+```
+
+or using yarn:
+
+```sh
+yarn add css-jss
+```

packages/css-jss/src/createCache.js

@@ -0,0 +1,29 @@
+// @flow
+
+// A reference based cache.
+// Will only work if the same style object refereces have been passed.
+
+const createCache = () => {
+  const cache = new WeakMap()
+
+  return {
+    get(args) {
+      const cached = cache.get(args[0])
+      if (!cached) return undefined
+      // Check if all arguments are equal.
+      for (const i in args) {
+        if (args[i] !== cached.args[i]) {
+          return undefined
+        }
+      }
+      return cached.className
+    },
+    set(args, className) {
+      if (!args[0]) return className
+      cache.set(args[0], {className, args})
+      return className
+    }
+  }
+}
+
+export default createCache

packages/css-jss/src/createCss.js

@@ -0,0 +1,31 @@
+// @flow
+const createCss = (sheet, cache) => {
+  let ruleIndex = 0
+
+  function css() {
+    // eslint-disable-next-line prefer-rest-params
+    const args = arguments
+    const className = cache.get(args)
+
+    if (className) return className
+
+    const style = {}
+    let label = 'css'
+
+    for (const i in args) {
+      const arg = args[i]
+      if (arg) Object.assign(style, arg)
+    }
+    if ('label' in style) {
+      label = style.label
+      delete style.label
+    }
+    const key = `${label}${ruleIndex++}`
+    sheet.addRule(key, style)
+    return cache.set(args, sheet.classes[key])
+  }
+
+  return css
+}
+
+export default createCss

packages/css-jss/src/createCss.test.js

@@ -0,0 +1,106 @@
+// @flow
+import expect from 'expect.js'
+import {stripIndent} from 'common-tags'
+import {create as createJss} from 'jss'
+import {createGenerateId} from '../../../tests/utils'
+import {create as createCss} from './index'
+
+describe('css-jss', () => {
+  let sheet
+  let css
+
+  beforeEach(() => {
+    sheet = createJss({createGenerateId}).createStyleSheet()
+    css = createCss(sheet)
+  })
+
+  it('should accept style object argument', () => {
+    const result = css({color: 'red'})
+    expect(result).to.be('css0-id')
+    expect(sheet.toString()).to.be(stripIndent`
+      .css0-id {
+        color: red;
+      }
+    `)
+  })
+
+  it('should accept multiple style object arguments', () => {
+    const result = css({color: 'red'}, {background: 'green'})
+    expect(result).to.be('css0-id')
+    expect(sheet.toString()).to.be(stripIndent`
+      .css0-id {
+        color: red;
+        background: green;
+      }
+    `)
+  })
+
+  it('should ignore empty values', () => {
+    const result = css(null, {color: 'red'}, '', {background: 'green'}, undefined)
+    expect(result).to.be('css0-id')
+    expect(sheet.toString()).to.be(stripIndent`
+      .css0-id {
+        color: red;
+        background: green;
+      }
+    `)
+  })
+
+  it('should accept label', () => {
+    const result = css({color: 'red', label: 'xxx'}, {background: 'green'})
+    expect(result).to.be('xxx0-id')
+    expect(sheet.toString()).to.be(stripIndent`
+      .xxx0-id {
+        color: red;
+        background: green;
+      }
+    `)
+  })
+
+  describe('cache', () => {
+    it('should cache a single style by ref', () => {
+      const style = {color: 'red'}
+      const result1 = css(style)
+      const result2 = css(style)
+      expect(result1).to.be('css0-id')
+      expect(result2).to.be('css0-id')
+      expect(sheet.toString()).to.be(stripIndent`
+        .css0-id {
+          color: red;
+        }
+      `)
+    })
+    it('should cache multiple styles by ref', () => {
+      const style1 = {color: 'red'}
+      const style2 = {background: 'green'}
+      const result1 = css(style1, style2)
+      const result2 = css(style1, style2)
+      expect(result1).to.be('css0-id')
+      expect(result2).to.be('css0-id')
+      expect(sheet.toString()).to.be(stripIndent`
+        .css0-id {
+          color: red;
+          background: green;
+        }
+      `)
+    })
+
+    it('should not cache by ref if any of the styles refs changes', () => {
+      const style1 = {color: 'red'}
+      const result1 = css(style1, {background: 'green'})
+      const result2 = css(style1, {background: 'purpule'})
+      expect(result1).to.be('css0-id')
+      expect(result2).to.be('css1-id')
+      expect(sheet.toString()).to.be(stripIndent`
+        .css0-id {
+          color: red;
+          background: green;
+        }
+        .css1-id {
+          color: red;
+          background: purpule;
+        }
+      `)
+    })
+  })
+})

packages/css-jss/src/index.js

@@ -0,0 +1,16 @@
+// @flow
+import {create as createJss} from 'jss'
+import preset from 'jss-preset-default'
+import createCss from './createCss'
+import createCache from './createCache'
+
+const jss = createJss(preset())
+const defaultSheet = jss.createStyleSheet().attach()
+
+export const create = sheet => {
+  // Since user decided to create own  style sheet, we can detach the default one.
+  defaultSheet.detach()
+  return createCss(sheet, createCache())
+}
+
+export default createCss(defaultSheet)

packages/css-jss/src/index.test.js

@@ -0,0 +1,10 @@
+// @flow
+import expect from 'expect.js'
+import css, {create} from './index'
+
+describe('css-jss: exports', () => {
+  it('should have correct exports', () => {
+    expect(css).to.be.a(Function)
+    expect(create).to.be.a(Function)
+  })
+})

packages/jss-starter-kit/package.json

@@ -41,6 +41,7 @@
     "jss-plugin-cache": "10.0.0-alpha.17",
     "jss-plugin-isolate": "10.0.0-alpha.17",
     "jss-preset-default": "10.0.0-alpha.17",
-    "react-jss": "10.0.0-alpha.17"
+    "react-jss": "10.0.0-alpha.17",
+    "css-jss": "10.0.0-alpha.17"
   }
 }