Merge remote-tracking branch 'origin/feat/themed-styles-misuse-warnin…

…g' into feat/themed-styles-misuse-warning * origin/feat/themed-styles-misuse-warning: [react-jss] Export the context as __Context from react-jss (#1014) [jss-plugin-camel-case] Support css vars better (#1017) [docs] Add badges to readmes (#1016) Revert "Add tests for css variables in camel case plugins" Revert "Fix css variables being hyphenated" Revert "Run prettier" Run prettier Fix css variables being hyphenated Add tests for css variables in camel case plugins
cssinjs · Feb 2, 2019 · 794b21c · 794b21c
2 parents 9eaa13c + 08054bd
commit 794b21c
Show file tree

Hide file tree

Showing 27 changed files with 226 additions and 25 deletions.
diff --git a/changelog.md b/changelog.md
@@ -9,6 +9,7 @@
 ### Bug fixes
 
 - [jss-starter-kit] Fix react-jss exports and add missing jss exports ([#1001](https://github.com/cssinjs/jss/pull/1001))
+- [jss-plugin-camel-case] Fix hyphenating css variables ([#1017](https://github.com/cssinjs/jss/pull/1017))
 
 ## 10.0.0-alpha.9 (2019-1-25)
 

diff --git a/packages/jss-plugin-cache/readme.md b/packages/jss-plugin-cache/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-cache
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-cache.svg?style=flat)](https://npmjs.org/package/jss-plugin-cache)
+[![License](https://img.shields.io/npm/l/jss-plugin-cache.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-cache.svg?style=flat)](https://npmjs.org/package/jss-plugin-cache)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-cache.svg?style=flat)](https://npmjs.org/package/jss-plugin-cache)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-cache&style=flat)](https://npmjs.org/package/jss-plugin-cache)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin that caches the rules and delivers insane performance.
 
 See our website [jss-plugin-cache](https://cssinjs.org/jss-plugin-cache?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-camel-case/.size-snapshot.json b/packages/jss-plugin-camel-case/.size-snapshot.json
@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-camel-case.js": {
-    "bundled": 2277,
-    "minified": 747,
-    "gzipped": 433
+    "bundled": 2403,
+    "minified": 800,
+    "gzipped": 458
   },
   "dist/jss-plugin-camel-case.min.js": {
-    "bundled": 2277,
-    "minified": 747,
-    "gzipped": 433
+    "bundled": 2403,
+    "minified": 800,
+    "gzipped": 458
   },
   "dist/jss-plugin-camel-case.cjs.js": {
-    "bundled": 1593,
-    "minified": 682,
-    "gzipped": 371
+    "bundled": 1703,
+    "minified": 735,
+    "gzipped": 393
   },
   "dist/jss-plugin-camel-case.esm.js": {
-    "bundled": 1375,
-    "minified": 510,
-    "gzipped": 283,
+    "bundled": 1485,
+    "minified": 563,
+    "gzipped": 307,
     "treeshaked": {
       "rollup": {
         "code": 29,

diff --git a/packages/jss-plugin-camel-case/readme.md b/packages/jss-plugin-camel-case/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-camel-case
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-camel-case.svg?style=flat)](https://npmjs.org/package/jss-plugin-camel-case)
+[![License](https://img.shields.io/npm/l/jss-plugin-camel-case.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-camel-case.svg?style=flat)](https://npmjs.org/package/jss-plugin-camel-case)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-camel-case.svg?style=flat)](https://npmjs.org/package/jss-plugin-camel-case)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-camel-case&style=flat)](https://npmjs.org/package/jss-plugin-camel-case)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin that allows to write camel cased rule properties
 
 See our website [jss-plugin-camel-case](https://cssinjs.org/jss-plugin-camel-case?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-camel-case/src/index.js b/packages/jss-plugin-camel-case/src/index.js
@@ -12,7 +12,9 @@ function convertCase(style) {
   const converted = {}
 
   for (const prop in style) {
-    converted[hyphenate(prop)] = style[prop]
+    const key = prop.startsWith('--') ? prop : hyphenate(prop)
+
+    converted[key] = style[prop]
   }
 
   if (style.fallbacks) {
@@ -42,6 +44,10 @@ export default function camelCase(): Plugin {
   }
 
   function onChangeValue(value, prop, rule) {
+    if (prop.startsWith('--')) {
+      return value
+    }
+
     const hyphenatedProp = hyphenate(prop)
 
     // There was no camel case in place

diff --git a/packages/jss-plugin-camel-case/src/index.test.js b/packages/jss-plugin-camel-case/src/index.test.js
@@ -161,4 +161,48 @@ describe('jss-plugin-camel-case', () => {
       `)
     })
   })
+
+  describe('css variables', () => {
+    let localJss
+    beforeEach(() => {
+      localJss = create(settings).use(functionPlugin(), camelCase())
+    })
+
+    it('with static css variable', () => {
+      const sheet = localJss.createStyleSheet({
+        a: {
+          '--fontSize': 12
+        }
+      })
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          --fontSize: 12;
+        }
+      `)
+    })
+
+    it('with dynamic css variable', () => {
+      const sheet = localJss.createStyleSheet({
+        a: {
+          '--fontSize': size => size
+        }
+      })
+
+      sheet.update(12)
+
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          --fontSize: 12;
+        }
+      `)
+
+      sheet.update(16)
+
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          --fontSize: 16;
+        }
+      `)
+    })
+  })
 })
diff --git a/packages/jss-plugin-compose/readme.md b/packages/jss-plugin-compose/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-compose
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-compose.svg?style=flat)](https://npmjs.org/package/jss-plugin-compose)
+[![License](https://img.shields.io/npm/l/jss-plugin-compose.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-compose.svg?style=flat)](https://npmjs.org/package/jss-plugin-compose)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-compose.svg?style=flat)](https://npmjs.org/package/jss-plugin-compose)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-compose&style=flat)](https://npmjs.org/package/jss-plugin-compose)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin for classes composition
 
 See our website [jss-plugin-compose](https://cssinjs.org/jss-plugin-compose?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-default-unit/readme.md b/packages/jss-plugin-default-unit/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-default-unit
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-default-unit.svg?style=flat)](https://npmjs.org/package/jss-plugin-default-unit)
+[![License](https://img.shields.io/npm/l/jss-plugin-default-unit.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-default-unit.svg?style=flat)](https://npmjs.org/package/jss-plugin-default-unit)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-default-unit.svg?style=flat)](https://npmjs.org/package/jss-plugin-default-unit)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-default-unit&style=flat)](https://npmjs.org/package/jss-plugin-default-unit)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin that adds default custom unit to numeric values where needed
 
 See our website [jss-plugin-default-unit](https://cssinjs.org/jss-plugin-default-unit?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-expand/readme.md b/packages/jss-plugin-expand/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-expand
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-expand.svg?style=flat)](https://npmjs.org/package/jss-plugin-expand)
+[![License](https://img.shields.io/npm/l/jss-plugin-expand.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-expand.svg?style=flat)](https://npmjs.org/package/jss-plugin-expand)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-expand.svg?style=flat)](https://npmjs.org/package/jss-plugin-expand)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-expand&style=flat)](https://npmjs.org/package/jss-plugin-expand)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin that gives you a better syntax than CSS.
 
 See our website [jss-plugin-expand](https://cssinjs.org/jss-plugin-expand?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-extend/readme.md b/packages/jss-plugin-extend/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-extend
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-extend.svg?style=flat)](https://npmjs.org/package/jss-plugin-extend)
+[![License](https://img.shields.io/npm/l/jss-plugin-extend.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-extend.svg?style=flat)](https://npmjs.org/package/jss-plugin-extend)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-extend.svg?style=flat)](https://npmjs.org/package/jss-plugin-extend)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-extend&style=flat)](https://npmjs.org/package/jss-plugin-extend)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin that enables mixing in styles.
 
 See our website [jss-plugin-extend](https://cssinjs.org/jss-plugin-extend?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-global/readme.md b/packages/jss-plugin-global/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-global
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-global.svg?style=flat)](https://npmjs.org/package/jss-plugin-global)
+[![License](https://img.shields.io/npm/l/jss-plugin-global.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-global.svg?style=flat)](https://npmjs.org/package/jss-plugin-global)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-global.svg?style=flat)](https://npmjs.org/package/jss-plugin-global)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-global&style=flat)](https://npmjs.org/package/jss-plugin-global)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > Global styles for JSS
 
 See our website [jss-plugin-global](https://cssinjs.org/jss-plugin-global?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-isolate/readme.md b/packages/jss-plugin-isolate/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-isolate
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-isolate.svg?style=flat)](https://npmjs.org/package/jss-plugin-isolate)
+[![License](https://img.shields.io/npm/l/jss-plugin-isolate.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-isolate.svg?style=flat)](https://npmjs.org/package/jss-plugin-isolate)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-isolate.svg?style=flat)](https://npmjs.org/package/jss-plugin-isolate)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-isolate&style=flat)](https://npmjs.org/package/jss-plugin-isolate)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > True rules isolation through automatic properties reset.
 
 See our website [jss-plugin-isolate](https://cssinjs.org/jss-plugin-isolate?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-nested/readme.md b/packages/jss-plugin-nested/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-nested
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-nested.svg?style=flat)](https://npmjs.org/package/jss-plugin-nested)
+[![License](https://img.shields.io/npm/l/jss-plugin-nested.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-nested.svg?style=flat)](https://npmjs.org/package/jss-plugin-nested)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-nested.svg?style=flat)](https://npmjs.org/package/jss-plugin-nested)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-nested&style=flat)](https://npmjs.org/package/jss-plugin-nested)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin that enables support for nested selectors
 
 See our website [jss-plugin-nested](https://cssinjs.org/jss-plugin-nested?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-props-sort/readme.md b/packages/jss-plugin-props-sort/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-props-sort
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-props-sort.svg?style=flat)](https://npmjs.org/package/jss-plugin-props-sort)
+[![License](https://img.shields.io/npm/l/jss-plugin-props-sort.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-props-sort.svg?style=flat)](https://npmjs.org/package/jss-plugin-props-sort)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-props-sort.svg?style=flat)](https://npmjs.org/package/jss-plugin-props-sort)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-props-sort&style=flat)](https://npmjs.org/package/jss-plugin-props-sort)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin that ensures style properties extend each other instead of override
 
 See our website [jss-plugin-props-sort](https://cssinjs.org/jss-plugin-props-sort?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-rule-value-function/readme.md b/packages/jss-plugin-rule-value-function/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-rule-value-function
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-rule-value-function.svg?style=flat)](https://npmjs.org/package/jss-plugin-rule-value-function)
+[![License](https://img.shields.io/npm/l/jss-plugin-rule-value-function.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-rule-value-function.svg?style=flat)](https://npmjs.org/package/jss-plugin-rule-value-function)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-rule-value-function.svg?style=flat)](https://npmjs.org/package/jss-plugin-rule-value-function)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-rule-value-function&style=flat)](https://npmjs.org/package/jss-plugin-rule-value-function)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin for function value and rule syntax
 
 See our website [jss-plugin-rule-value-function](https://cssinjs.org/jss-plugin-rule-value-function?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-rule-value-observable/readme.md b/packages/jss-plugin-rule-value-observable/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-rule-value-observable
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-rule-value-observable.svg?style=flat)](https://npmjs.org/package/jss-plugin-rule-value-observable)
+[![License](https://img.shields.io/npm/l/jss-plugin-rule-value-observable.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-rule-value-observable.svg?style=flat)](https://npmjs.org/package/jss-plugin-rule-value-observable)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-rule-value-observable.svg?style=flat)](https://npmjs.org/package/jss-plugin-rule-value-observable)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-rule-value-observable&style=flat)](https://npmjs.org/package/jss-plugin-rule-value-observable)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin for TC39 Observables support
 
 See our website [jss-plugin-rule-value-observable](https://cssinjs.org/jss-plugin-rule-value-observable?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-template/readme.md b/packages/jss-plugin-template/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-template
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-template.svg?style=flat)](https://npmjs.org/package/jss-plugin-template)
+[![License](https://img.shields.io/npm/l/jss-plugin-template.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-template.svg?style=flat)](https://npmjs.org/package/jss-plugin-template)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-template.svg?style=flat)](https://npmjs.org/package/jss-plugin-template)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-template&style=flat)](https://npmjs.org/package/jss-plugin-template)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin enables string templates
 
 See our website [jss-plugin-template](https://cssinjs.org/jss-plugin-template?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-plugin-vendor-prefixer/readme.md b/packages/jss-plugin-vendor-prefixer/readme.md
@@ -1,5 +1,12 @@
 # jss-plugin-vendor-prefixer
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-vendor-prefixer.svg?style=flat)](https://npmjs.org/package/jss-plugin-vendor-prefixer)
+[![License](https://img.shields.io/npm/l/jss-plugin-vendor-prefixer.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-vendor-prefixer.svg?style=flat)](https://npmjs.org/package/jss-plugin-vendor-prefixer)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-vendor-prefixer.svg?style=flat)](https://npmjs.org/package/jss-plugin-vendor-prefixer)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-vendor-prefixer&style=flat)](https://npmjs.org/package/jss-plugin-vendor-prefixer)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin that handles vendor prefixes in the browser
 
 See our website [jss-plugin-vendor-prefixer](https://cssinjs.org/jss-plugin-vendor-prefixer?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-preset-default/.size-snapshot.json b/packages/jss-preset-default/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "dist/jss-preset-default.js": {
-    "bundled": 65798,
-    "minified": 22853,
-    "gzipped": 6771
+    "bundled": 65916,
+    "minified": 22906,
+    "gzipped": 6792
   },
   "dist/jss-preset-default.min.js": {
-    "bundled": 65044,
-    "minified": 22390,
-    "gzipped": 6561
+    "bundled": 65162,
+    "minified": 22443,
+    "gzipped": 6582
   },
   "dist/jss-preset-default.cjs.js": {
     "bundled": 1329,

diff --git a/packages/jss-preset-default/readme.md b/packages/jss-preset-default/readme.md
@@ -1,5 +1,12 @@
 # jss-preset-default
 
+[![Version](https://img.shields.io/npm/v/jss-preset-default.svg?style=flat)](https://npmjs.org/package/jss-preset-default)
+[![License](https://img.shields.io/npm/l/jss-preset-default.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-preset-default.svg?style=flat)](https://npmjs.org/package/jss-preset-default)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-preset-default.svg?style=flat)](https://npmjs.org/package/jss-preset-default)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-preset-default&style=flat)](https://npmjs.org/package/jss-preset-default)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > Default preset for JSS with selected plugins.
 
 See our website [jss-preset-default](https://cssinjs.org/jss-preset-default?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss-starter-kit/.size-snapshot.json b/packages/jss-starter-kit/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "dist/jss-starter-kit.js": {
-    "bundled": 81292,
-    "minified": 33042,
-    "gzipped": 9420
+    "bundled": 81410,
+    "minified": 33095,
+    "gzipped": 9439
   },
   "dist/jss-starter-kit.min.js": {
-    "bundled": 80538,
-    "minified": 32564,
-    "gzipped": 9209
+    "bundled": 80656,
+    "minified": 32617,
+    "gzipped": 9227
   },
   "dist/jss-starter-kit.cjs.js": {
     "bundled": 2583,

diff --git a/packages/jss-starter-kit/readme.md b/packages/jss-starter-kit/readme.md
@@ -1,5 +1,12 @@
 # jss-starter-kit
 
+[![Version](https://img.shields.io/npm/v/jss-starter-kit.svg?style=flat)](https://npmjs.org/package/jss-starter-kit)
+[![License](https://img.shields.io/npm/l/jss-starter-kit.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-starter-kit.svg?style=flat)](https://npmjs.org/package/jss-starter-kit)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-starter-kit.svg?style=flat)](https://npmjs.org/package/jss-starter-kit)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-starter-kit&style=flat)](https://npmjs.org/package/jss-starter-kit)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > A bundle to get you started playing with JSS. Not optimized for production deployment.
 
 See our website [jss-starter-kit](https://cssinjs.org/jss-starter-kit?v=v10.0.0-alpha.9) for more information.

diff --git a/packages/jss/readme.md b/packages/jss/readme.md
@@ -1,5 +1,12 @@
 # jss
 
+[![Version](https://img.shields.io/npm/v/jss.svg?style=flat)](https://npmjs.org/package/jss)
+[![License](https://img.shields.io/npm/l/jss.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss.svg?style=flat)](https://npmjs.org/package/jss)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss.svg?style=flat)](https://npmjs.org/package/jss)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss&style=flat)](https://npmjs.org/package/jss)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > A lib for generating Style Sheets with JavaScript.
 
 See our website [jss](https://cssinjs.org/setup?v=v10.0.0-alpha.9) for more information.