add css generating script and package.json hook

Author: Philip Weiss

.storybook/config.js

@@ -1,12 +1,11 @@
 import { configure } from '@kadira/storybook';
 import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
 import aphroditeInterface from 'react-with-styles-interface-aphrodite';
-
 import DefaultTheme from '../src/themes/DefaultTheme';
 
-import '../css/slider.css';
-import '../css/slider-horizontal.css';
-import '../css/slider-vertical.css';
+/* Register react with styles interface */
+ThemedStyleSheet.registerTheme(DefaultTheme);
+ThemedStyleSheet.registerInterface(aphroditeInterface);
 
 /* Register react with styles interface */
 ThemedStyleSheet.registerTheme(DefaultTheme);

css/slider-horizontal.css

@@ -5,7 +5,11 @@
   "main": "lib/Slider",
   "jsnext:main": "src/Slider.jsx",
   "scripts": {
+    "prebuild": "npm run clean",
     "build": "npm run clean && babel src -d lib",
+    "postbuild": "npm run build:css",
+    "prebuild:css": "rimraf lib/css && mkdir -p lib/css",
+    "build:css": "node scripts/buildCSS.js",
     "clean": "rimraf lib",
     "prepublish": "npm run build",
     "lint": "eslint --ext .js,.jsx src test stories",
@@ -54,6 +58,7 @@
     "react-addons-pure-render-mixin": "^15.6.2",
     "react-dom": "^15.6.2",
     "react-with-styles-interface-aphrodite": "^5.0.0",
+    "react-with-styles-interface-css-compiler": "^1.1.2",
     "rimraf": "^2.6.2",
     "sinon": "^5.0.7",
     "style-loader": "^0.17.0"
@@ -63,9 +68,11 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.10.0",
+    "clean-css": "^4.1.11",
     "object.assign": "^4.1.0",
     "prop-types": "^15.6.2",
-    "react-with-styles": "^3.2.0"
+    "react-with-styles": "^3.2.0",
+    "react-with-styles-interface-css": "^4.0.2",
   },
   "jest": {
     "testMatch": [

css/slider-vertical.css

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": [2, {
+      "devDependencies": true
+    }],
+  }
+}

css/slider.css

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const CleanCSS = require('clean-css');
+const compileCSS = require('react-with-styles-interface-css-compiler');
+const registerMaxSpecificity = require('react-with-styles-interface-css/dist/utils/registerMaxSpecificity').default;
+const registerCSSInterfaceWithDefaultTheme = require('./utils/registerCSSInterfaceWithDefaultTheme').default;
+
+const args = process.argv.slice(2);
+const optimizeForProduction = args.includes('-o') || args.includes('--optimize');
+
+registerMaxSpecificity(0);
+registerCSSInterfaceWithDefaultTheme();
+
+const format = new CleanCSS({
+  level: optimizeForProduction ? 2 : 0,
+  format: 'beautify',
+  inline: ['none'],
+});
+const CSS = compileCSS('./scripts/renderAllComponents.jsx');
+const formattedCSS = format.minify(CSS).styles;
+
+const outputFilePath = optimizeForProduction ? './lib/css/_slider.css' : './css/styles.css';
+fs.writeFileSync(outputFilePath, formattedCSS, 'utf8');

css/styles.css

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import LabeledSlider from '../stories/ExampleSlider';
+
+ReactDOM.render(<LabeledSlider />, document.querySelector('#root'));

package.json

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": [2, {
+      "devDependencies": true
+    }],
+  }
+}

scripts/.eslintrc

@@ -0,0 +1,7 @@
+import CSSInterface from 'react-with-styles-interface-css';
+
+import registerInterfaceWithDefaultTheme from './registerInterfaceWithDefaultTheme';
+
+export default function registerCSSInterfaceWithDefaultTheme() {
+  registerInterfaceWithDefaultTheme(CSSInterface);
+}

scripts/buildCSS.js

@@ -0,0 +1,7 @@
+import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
+import DefaultTheme from '../../lib/themes/DefaultTheme';
+
+export default function registerInterfaceWithDefaultTheme(reactWithStylesInterface) {
+  ThemedStyleSheet.registerInterface(reactWithStylesInterface);
+  ThemedStyleSheet.registerTheme(DefaultTheme);
+}

scripts/renderAllComponents.jsx

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import Rheostat from '../src/Slider';
 import log10 from '../src/algorithms/log10';
 
-
-class LabeledSlider extends React.Component {
+export default class LabeledSlider extends React.Component {
   constructor(props) {
     super(props);