feat: 🎸 warn user on clashing block names

Author: streamich

.storybook/put.stories.js

@@ -17,6 +17,9 @@ put('.red-border', {
     }
 });
 
+put('.check-same-name-warning', {color: 'red'});
+put('.check-same-name-warning', {color: 'red'});
+
 storiesOf('Addons/put()', module)
     .add('Default', () =>
         h('div', {className: 'red-border'}, 'Hello world')

.storybook/rule.stories.js

@@ -13,6 +13,14 @@ const className1 = rule({
   border: '1px solid red'
 }, 'RedBorder');
 
+// Chech if generating multiple times same styles result in clash of CSS selector.
+rule({
+  border: '1px solid red'
+}, 'Rule');
+rule({
+  border: '1px solid red'
+}, 'Rule');
+
 storiesOf('Addons/rule()', module)
   .add('Default', () =>
     h('div', {className: className1}, 'Hello world')

README.md

@@ -36,7 +36,7 @@ __Motto of `nano-css` is simple__: *create the smallest possible CSS-in-JS libra
   - [`atoms`](./docs/atoms.md) — [*demo!*](https://codesandbox.io/s/rlkxl6o9v4)
   - [`nesting`](./docs/nesting.md)
   - [`keyframes()`](./docs/keyframes.md)
-  - [`hydrate`](./docs/hydrate.md)
+  - [`hydrate()`](./docs/hydrate.md)
   - [`prefixer`](./docs/prefixer.md)
   - [`stylis`](./docs/stylis.md)
   - [`unitless`](./docs/unitless.md)

addon/rule.js

@@ -5,7 +5,31 @@ exports.addon = function (renderer) {
         require('./__dev__/warnOnMissingDependencies')('rule', renderer, ['put']);
     }
 
+    var blocks;
+
+    if (process.env.NODE_ENV !== 'production') {
+        blocks = {};
+    }
+
     renderer.rule = function (css, block) {
+        // Warn user if CSS selectors clash.
+        if (process.env.NODE_ENV !== 'production') {
+            if (block) {
+                if (typeof block !== 'string') {
+                    throw new TypeError(
+                        'nano-css block name must be a string. ' +
+                        'For example, use nano.rule({color: "red", "RedText").'
+                    );
+                }
+
+                if (blocks[block]) {
+                    console.error('Block name "' + block + '" used more than once.');
+                }
+
+                blocks[block] = 1;
+            }
+        }
+
         block = block || renderer.hash(css);
         block = renderer.pfx + block;
         renderer.put('.' + block, css);

docs/Addons.md

@@ -20,7 +20,7 @@ plenty more to chose from. Below is a list of addons shipped with `nano-css`.
 - [`atoms`](./atoms.md) — CSS shorthands for better DX
 - [`nesting`](./nesting.md) — better nesting features
 - [`keyframes()`](./keyframes.md) — adds `@keyframes` support
-- [`hydrate`](./hydrate.md) — adds support for re-hydration on client side
+- [`hydrate()`](./hydrate.md) — adds support for re-hydration on client side
 - [`prefixer`](./prefixer.md) — auto-prefixes your styles with correct vendor prefixes
 - [`stylis`](./stylis.md) — write CSS as strings
 - [`unitless`](./unitless.md) — automatically adds `px` to styles

docs/keyframes.md

@@ -38,7 +38,7 @@ const className = rule({
 
 As a second argument, `keyframes` addon can accept a configuration object with the following keys:
 
-- `prefixes` — optional, array of prefixes to add to `@keyframes` at-rule, defaults to `['-webkit-', '-moz-', '-o-', '']`.
+- `prefixes` — optional, array of prefixes, defaults to `['-webkit-', '-moz-', '-o-', '']`.
 
 
 ## Installation

docs/virtual.md

@@ -17,6 +17,9 @@ const classNames2 = nano.rule({
     border: '1px solid red',
 });
 // _b
+
+<div className={classNames1} /> // <div class="_a _b _c" />
+<div className={classNames2} /> // <div class="_b" />
 ```
 
 ## Installation

index.js

@@ -13,7 +13,6 @@ var hash = function (str) {
 exports.create = function (config) {
     config = config || {};
     var assign = config.assign || Object.assign;
-
     var client = typeof window === 'object';
 
     // Check if we are really in browser environment.