Add cssobj test cases

Author: PhiLhoSoft

Diff for: README.md

@@ -156,14 +156,18 @@ Fastest is: styletron
 Launch with `npm run bundle`.
 
 ```
-Size styletron 2.652KB
-Size cxs 9.766KB
+Size cssobj 10.375KB
+Size cssobj-server 7.181KB
+Size free-style 8.3KB
+Size styletron 2.667KB
+Size jss-without-preset 26.183KB
+Size glamor 31.421KB
+Size cxs 9.366KB
 Size fela 13.161KB
-Size cxs-optimized 12.668KB
-Size jss-without-preset 24.654KB
-Size jss 37.04KB
-Size glamor 35.436KB
-Size aphrodite 18.919KB
+Size cxs-optimized 12.268KB
+Size jss 37.185KB
+Size aphrodite 19.711KB
+Size aphrodite-no-important 19.744KB
 ```
 
 ### View generated code
@@ -183,10 +187,17 @@ For all of them, class name is stable between generations if same content. Unles
 (classes overload) Doesn't detect identical classes that remain duplicate.
 (nested) Manages pseudo-classes and media queries.
 
+#### cssobj
+
+(simple) Doesn't remove a non-used class. Generates class names like `original-name_13otckp1_` (customizable suffix).
+(style overload) Different classes with a common style are kept as is.
+(classes overload) Doesn't detect identical classes that remain duplicate.
+(nested) Manages pseudo-classes and media queries.
+
 #### cxs and cxs-optimized
 
 (simple) Doesn't remove a non-used class. Generates class names like `cxs-4211614354`.
-(style overload) Different classes with a common style are kept as is. Minimized CSS.
+(style overload) Different classes with a common style are kept as is.
 (classes overload) Detects identical classes that are merged.
 (nested) Manages pseudo-classes and media queries.
 

Diff for: package.json

@@ -33,6 +33,10 @@
     "babel-loader": "^6.2.7",
     "beautify-benchmark": "^0.2.4",
     "benchmark": "^2.1.2",
+    "cssobj": "^1.0.1",
+    "cssobj-core": "^1.0.0",
+    "cssobj-plugin-localize": "^3.0.1",
+    "cssobj-plugin-gencss": "^2.0.3",
     "cxs": "^2.1.0",
     "fela": "^4.1.0",
     "free-style": "^2.0.0",

Diff for: src/classes-overload-test/cases/cssobj.js

@@ -0,0 +1,25 @@
+// See simple-test for details
+import cssobjCore from 'cssobj-core';
+import cssobjPluginLocalize from 'cssobj-plugin-localize';
+import cssobjPluginGencss from 'cssobj-plugin-gencss';
+
+import { stylesheet, buttonClassNames } from '../styles';
+import { renderHtml, renderBody } from '../render';
+import { toClasses } from '../../utilities';
+
+export const cssobjCase = (caseName) => {
+    const cssobj = cssobjCore({
+        local: true,
+        plugins: [
+            cssobjPluginLocalize(),
+            cssobjPluginGencss({ indent: '', newLine: '' }),
+        ]
+    });
+    const cssObject = cssobj(toClasses(stylesheet));
+
+    const getButtonClassName = i => cssObject.mapClass(buttonClassNames[i]);
+
+    const html = renderBody(caseName, cssObject.mapClass('container'), getButtonClassName);
+
+    return renderHtml(cssObject.css, html);
+};

Diff for: src/classes-overload-test/cases/index.js

@@ -1,5 +1,6 @@
 export * from './aphrodite';
 export * from './aphrodite-no-important';
+export * from './cssobj';
 export * from './cxs';
 export * from './cxs-optimized';
 export * from './fela';

Diff for: src/nested-test/cases/cssobj.js

@@ -0,0 +1,24 @@
+// See simple-test for details
+import cssobjCore from 'cssobj-core';
+import cssobjPluginLocalize from 'cssobj-plugin-localize';
+import cssobjPluginGencss from 'cssobj-plugin-gencss';
+
+import { createStylesheet } from '../styles';
+import { renderHtml, renderBody } from '../render';
+import { toClasses } from '../../utilities';
+
+export const cssobjCase = (caseName) => {
+    const cssobj = cssobjCore({
+        local: true,
+        plugins: [
+            cssobjPluginLocalize(),
+            cssobjPluginGencss({ indent: '\t', newLine: '\n' }),
+        ]
+    });
+    const options = { prefixPseudo: true };
+    const cssObject = cssobj(toClasses(createStylesheet(options)));
+
+    const html = renderBody(caseName, cssObject.mapClass('container'), cssObject.mapClass('button'));
+
+    return renderHtml(cssObject.css, html);
+};

Diff for: src/nested-test/cases/index.js

@@ -1,5 +1,6 @@
 export * from './aphrodite';
 export * from './aphrodite-no-important';
+export * from './cssobj';
 export * from './cxs';
 export * from './cxs-optimized';
 export * from './fela';

Diff for: src/simple-test/cases/cssobj.js

@@ -0,0 +1,25 @@
+//import cssobj from 'cssobj'; // In client
+// For server-side rendering
+import cssobjCore from 'cssobj-core';
+import cssobjPluginLocalize from 'cssobj-plugin-localize';
+import cssobjPluginGencss from 'cssobj-plugin-gencss';
+
+import { stylesheet } from '../styles';
+import { renderHtml, renderBody } from '../render';
+import { toClasses } from '../../utilities';
+
+export const cssobjCase = (caseName) => {
+    const cssobj = cssobjCore({
+        local: true, // Add suffix to given class names
+        plugins: [
+            // order is important
+            cssobjPluginLocalize({ /*space: '_custom_', localNames: {}*/ }), // Don't customize the output, defaults to random suffix
+            cssobjPluginGencss({ indent: '\t', newLine: '\n' }),
+        ]
+    });
+    const cssObject = cssobj(toClasses(stylesheet));
+
+    const html = renderBody(caseName, cssObject.mapClass('container'), cssObject.mapClass('button'));
+
+    return renderHtml(cssObject.css, html);
+};

Diff for: src/simple-test/cases/index.js

@@ -1,5 +1,6 @@
 export * from './aphrodite';
 export * from './aphrodite-no-important';
+export * from './cssobj';
 export * from './cxs';
 export * from './cxs-optimized';
 export * from './fela';

Diff for: src/size-test/cssobj-server.js

@@ -0,0 +1,3 @@
+import cssobjCore from 'cssobj-core';
+import cssobjPluginLocalize from 'cssobj-plugin-localize';
+import cssobjPluginGencss from 'cssobj-plugin-gencss';

Diff for: src/size-test/cssobj.js

@@ -0,0 +1 @@
+import cssobj from 'cssobj';

Diff for: src/size-test/index.js

@@ -57,6 +57,8 @@ const testBundle = (name) => new Promise((resolve, reject) => {
 Promise.all([
     testBundle('aphrodite'),
     testBundle('aphrodite-no-important'),
+    testBundle('cssobj'),
+    testBundle('cssobj-server'),
     testBundle('cxs'),
     testBundle('cxs-optimized'),
     testBundle('fela'),

Diff for: src/style-overload-test/cases/cssobj.js

@@ -0,0 +1,25 @@
+// See simple-test for details
+import cssobjCore from 'cssobj-core';
+import cssobjPluginLocalize from 'cssobj-plugin-localize';
+import cssobjPluginGencss from 'cssobj-plugin-gencss';
+
+import { stylesheet, buttonClassNames } from '../styles';
+import { renderHtml, renderBody } from '../render';
+import { toClasses } from '../../utilities';
+
+export const cssobjCase = (caseName) => {
+    const cssobj = cssobjCore({
+        local: true,
+        plugins: [
+            cssobjPluginLocalize(),
+            cssobjPluginGencss({ indent: '', newLine: '' }), // To be fair, reduce size of generated code; still add space after colon and class name.
+        ]
+    });
+    const cssObject = cssobj(toClasses(stylesheet));
+
+    const getButtonClassName = i => cssObject.mapClass(buttonClassNames[i]);
+
+    const html = renderBody(caseName, cssObject.mapClass('container'), getButtonClassName);
+
+    return renderHtml(cssObject.css, html);
+};

Diff for: src/style-overload-test/cases/index.js

@@ -1,5 +1,6 @@
 export * from './aphrodite';
 export * from './aphrodite-no-important';
+export * from './cssobj';
 export * from './cxs';
 export * from './cxs-optimized';
 export * from './fela';

Diff for: src/utilities.js

@@ -23,3 +23,11 @@ export const createOutputDir = (testName) => {
     }
     return outputDir;
 };
+
+export const toClasses = (css) => {
+    const newCss = {};
+    Object.keys(css).forEach((className) => {
+        newCss[`.${className}`] = css[className];
+    });
+    return newCss;
+};