[WIP] Docs

.eslintrc.js

@@ -9,5 +9,13 @@ module.exports = {
     benchmark: true,
     __VERSION__: true,
     CSS: true
-  }
+  },
+  overrides: [
+    {
+      files: ['docs/*.md', 'docs/**/*.md'],
+      rules: {
+        'no-console': 'off'
+      }
+    }
+  ]
 }

LICENSE

@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright (c) 2014-present Oleg Isonen/Slobodskoi & contributors
+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:
 

changelog.md

@@ -30,14 +30,14 @@ You can find all of the old changelogs here:
 - [jss-plugin-cache](https://github.com/cssinjs/jss-cache/blob/master/changelog.md)
 - [jss-plugin-isolate](https://github.com/cssinjs/jss-isolate/blob/master/changelog.md)
 - [jss-plugin-props-sort](https://github.com/cssinjs/jss-props-sort/blob/master/changelog.md)
-- [jss-plugin-syntax-camel-case](https://github.com/cssinjs/jss-camel-case/blob/master/changelog.md)
-- [jss-plugin-syntax-compose](https://github.com/cssinjs/jss-compose/blob/master/changelog.md)
-- [jss-plugin-syntax-default-unit](https://github.com/cssinjs/jss-default-unit/blob/master/changelog.md)
-- [jss-plugin-syntax-expand](https://github.com/cssinjs/jss-expand/blob/master/changelog.md)
-- [jss-plugin-syntax-extend](https://github.com/cssinjs/jss-extend/blob/master/changelog.md)
-- [jss-plugin-syntax-global](https://github.com/cssinjs/jss-global/blob/master/changelog.md)
-- [jss-plugin-syntax-nested](https://github.com/cssinjs/jss-nested/blob/master/changelog.md)
-- [jss-plugin-syntax-template](https://github.com/cssinjs/jss-template/blob/master/changelog.md)
+- [jss-plugin-camel-case](https://github.com/cssinjs/jss-camel-case/blob/master/changelog.md)
+- [jss-plugin-compose](https://github.com/cssinjs/jss-compose/blob/master/changelog.md)
+- [jss-plugin-default-unit](https://github.com/cssinjs/jss-default-unit/blob/master/changelog.md)
+- [jss-plugin-expand](https://github.com/cssinjs/jss-expand/blob/master/changelog.md)
+- [jss-plugin-extend](https://github.com/cssinjs/jss-extend/blob/master/changelog.md)
+- [jss-plugin-global](https://github.com/cssinjs/jss-global/blob/master/changelog.md)
+- [jss-plugin-nested](https://github.com/cssinjs/jss-nested/blob/master/changelog.md)
+- [jss-plugin-template](https://github.com/cssinjs/jss-template/blob/master/changelog.md)
 - [jss-plugin-vendor-prefixer](https://github.com/cssinjs/jss-vendor-prefixer/blob/master/changelog.md)
 - [jss-preset-default](https://github.com/cssinjs/jss-preset-default/blob/master/changelog.md)
 - [react-jss](https://github.com/cssinjs/react-jss/blob/master/changelog.md)

docs/benefits.md

@@ -8,7 +8,7 @@
 
 1.  **True rules isolation.**
 
-    Scoped selectors are not enough. CSS has properties which are inherited automatically from the parent element, if not explicitly defined. Thanks to [jss-isolate](https://github.com/cssinjs/jss-isolate) plugin, JSS rules will not inherit properties.
+    Scoped selectors are not enough. CSS has properties which are inherited automatically from the parent element, if not explicitly defined. Thanks to [jss-plugin-isolate](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-isolate) plugin, JSS rules will not inherit properties.
 
 1.  **Avoids slow selectors.**
 
@@ -29,7 +29,7 @@
 
 1.  **Vendor Prefixing.**
 
-    Using JSS [vendor-prefixer](https://github.com/cssinjs/jss-vendor-prefixer) plugin, prefixes added at runtime very efficiently, only for the required browser and do _not_ increase download size.
+    Using JSS [vendor-prefixer](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-vendor-prefixer) plugin, prefixes added at runtime very efficiently, only for the required browser and do _not_ increase download size.
 
 1.  **Download size.**
 

docs/js-api.md → docs/jss-api.md

@@ -2,8 +2,19 @@
 
 ## Access the global JSS instance
 
+There is a global Jss instance which is the default export of the package. You can also create your own local Jss instance.
+
+```javascript
+import jss from 'jss'
+```
+
+## Quick setup with preset
+
 ```javascript
+import preset from 'jss-preset-default'
 import jss from 'jss'
+
+jss.setup(preset())
 ```
 
 ## Create an own JSS instance
@@ -16,7 +27,7 @@ See `jss.setup()` below for `options` object description.
 
 ```javascript
 import {create} from 'jss'
-import camelCase from 'jss-camel-case'
+import camelCase from 'jss-plugin-camel-case'
 import somePlugin from 'jss-some-plugin'
 
 const jss = create()
@@ -43,21 +54,12 @@ Options:
 
 See [setup examples](./setup.md#specify-dom-insertion-point).
 
-## Quick setup with preset
-
-```javascript
-import preset from 'jss-preset-default'
-import jss from 'jss'
-
-jss.setup(preset())
-```
-
 ## Add a plugin
 
 `jss.use(plugin)`
 
 ```javascript
-import global from 'jss-global'
+import global from 'jss-plugin-global'
 import jss from 'jss'
 
 jss.use(global())
@@ -100,7 +102,7 @@ console.log(sheet.classes.button) // button-d4f43g
 
 ```html
 <style media="print">
-  .button-d4f43g {
+  .button-0 {
     width: 100px;
     height: 100px;
   }
@@ -109,7 +111,7 @@ console.log(sheet.classes.button) // button-d4f43g
 
 ## Create a Style Sheet with global selectors
 
-You need to have the [jss-global](https://github.com/cssinjs/jss-global) plugin installed.
+You need to have the [jss-plugin-global](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-global) plugin installed.
 
 ## Style Sheets registry
 
@@ -379,7 +381,7 @@ console.log(sheet.toString())
 ```
 
 ```css
-.button-d4f43g {
+.button-0 {
   float: left;
 }
 ```
@@ -388,7 +390,7 @@ console.log(sheet.toString())
 
 `createGenerateId`
 
-Option `createGenerateId` allows you to specify a function which returns a class name generator function `generateId(rule, sheet)`. This pattern is used to allow JSS reset the counter upon factory invocation, when needed. For example, it is used in [React-JSS](https://github.com/cssinjs/react-jss) to reset the counter on each request for server-side rendering.
+Option `createGenerateId` allows you to specify a function which returns a class name generator function `generateId(rule, sheet)`. This pattern is used to allow JSS reset the counter upon factory invocation, when needed. For example, it is used in [React-JSS](https://github.com/cssinjs/jss/tree/master/packages/react-jss) to reset the counter on each request for server-side rendering.
 
 By default class names generator uses a simple counter to ensure uniqueness of the class names. It consists of `classNamePrefix` Style Sheet option + rule name + counter. **Note**: in production (`NODE_ENV=production`) it uses just the `c` + rules counter.
 

packages/jss-plugin-cache/readme.md → docs/jss-plugin-cache.md

@@ -1,38 +1,17 @@
-# JSS plugin that caches the rules.
+## Enables caching JSS rules
 
-This plugin will cache virtual rules by checking if a past style object has been already passed.
+This plugin will cache JSS rules by comparing a reference from the object.
 
 It should be used as a **first** plugin, to bail out before any unnecessary work is done!!!
 
-Make sure you read [how to use
-plugins](https://github.com/cssinjs/jss/blob/master/docs/setup.md#setup-with-plugins)
-in general.
-
-[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
-
-## Polyfills
+### Polyfills
 
 1. This plugin is using a `WeakMap`. If you support browsers which do not support WeakMap, you will have to include a polyfill.
 
-## Caveats
+### Caveats
 
 1.  Don't use it if you mutate your `styles`.
 
 1.  Don't use it if you generate an huge amount of different rules. For e.g. if you generate for every request or for every user different styles. The cache memory footprint will grow proportionally to the amount of unique styles.
 
 1.  If your `styles` objects are not static, they won't be cached. It adds a flag to the object in order to identify it and reuses the virtual rule for it then.
-
-## Issues
-
-File a bug against [cssinjs/jss prefixed with \[jss-cache\]](https://github.com/cssinjs/jss/issues/new?title=[jss-cache]%20).
-
-## Run tests
-
-```bash
-yarn
-yarn test
-```
-
-## License
-
-MIT

docs/jss-plugin-camel-case.md

@@ -0,0 +1,21 @@
+## Camel case syntax
+
+Once plugin is used, we can write CSS properties in camel case syntax.
+
+```javascript
+const styles = {
+  button: {
+    color: 'red',
+    fontSize: '12px'
+  }
+}
+```
+
+Compiles to:
+
+```css
+.button-0 {
+  color: red;
+  font-size: 12px;
+}
+```

packages/jss-plugin-syntax-compose/readme.md → docs/jss-plugin-compose.md

@@ -1,14 +1,8 @@
-# JSS plugin for classes composition
+## Enables classes composition
 
 This plugin allows you to use CSS frameworks and legacy code together with JSS as well as reuse Rules more granularly.
 
-Make sure you read [how to use
-plugins](https://github.com/cssinjs/jss/blob/master/docs/setup.md#setup-with-plugins)
-in general.
-
-[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
-
-## Compose with global classes.
+### Compose with global classes.
 
 To combine JSS with CSS framework like [Material Design Lite](https://getmdl.io/) or [Bootstrap](http://getbootstrap.com/) and others.
 
@@ -59,7 +53,7 @@ It renders to:
 <button class="buttonActive-123456 btn btn-primary">Active Button</button>
 ```
 
-## Compose with local classes.
+### Compose with local classes.
 
 Manage element states without rules duplication.
 To reference a local rule, prefix the rule name with `$` symbol.
@@ -137,7 +131,7 @@ It renders to:
 <button class="buttonDisabled-123456 button-123456 active-123456 disabled-123456">Disabled Button with active state</button>
 ```
 
-## Mix global and local classes.
+### Mix global and local classes.
 
 You can compose both local and global classes at the same time.
 
@@ -180,23 +174,8 @@ It renders to:
 <button class="button-123456 active-123456 btn btn-primary">Button</button>
 ```
 
-## Caveats
+### Caveats
 
-- Doesn't work within [global Style Sheets](https://github.com/cssinjs/jss-global).
-- Does not work inside of [nested rules](https://github.com/cssinjs/jss-nested).
+- Doesn't work within [global Style Sheets](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-global).
+- Does not work inside of [nested rules](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-nested).
 - When composing local rules, they need to be defined first. Otherwise you get wrong css selector order and specificity.
-
-## Issues
-
-File a bug against [cssinjs/jss prefixed with \[jss-compose\]](https://github.com/cssinjs/jss/issues/new?title=[jss-compose]%20).
-
-## Run tests
-
-```bash
-yarn
-yarn test
-```
-
-## License
-
-MIT

docs/jss-plugin-default-unit.md

@@ -0,0 +1,59 @@
+## Default units for numeric values
+
+Provide numeric values in your style definitions, and the plugin will insert the corresponding units. Defaults to px for sizes, ms for durations, and % for transform origins, and these can be customized.
+
+```javascript
+const styles = {
+  button: {
+    'line-height': 3,
+    'font-size': 1.7,
+    height: 200,
+    'z-index': 1
+  }
+}
+```
+
+Compiles to:
+
+```css
+.button-0 {
+  line-height: 3;
+  font-size: 1.7px;
+  height: 200px;
+  z-index: 1;
+}
+```
+
+### Customizing defaults
+
+```javascript
+import jss from 'jss'
+import defaultUnit from 'jss-plugin-default-unit'
+
+const options = {
+  'line-height': 'rem',
+  'font-size': 'rem'
+}
+
+jss.use(defaultUnit(options))
+
+const styles = {
+  container: {
+    'line-height': 3,
+    'font-size': 1.7,
+    height: 200,
+    'z-index': 1
+  }
+}
+```
+
+Compiles to:
+
+```css
+.container-jss-0 {
+  line-height: 3rem;
+  font-size: 1.7rem;
+  height: 200px;
+  z-index: 1;
+}
+```