fix: from css files to style attributes

This fix also supports react 0.14.0-rc1
Fixes #11 and #15.
 Remove all references to webpack's style-loader and css-loader.
 Remove extract-text-webpack-plugin.

Author: aulizko

examples/babel-plugin-react-hot/webpack.config.js

@@ -33,9 +33,6 @@ module.exports = {
         test: /\.js?$/,
         exclude: /node_modules/,
         loader: 'babel'
-      }, {
-        test: /\.css?$/,
-        loader: 'style-loader!css-loader?sourceMap&modules&localIdentName=[path][name]---[local]---[hash:base64:5]'
       }
     ]
   }

examples/react-hot-loader-example/package.json

@@ -24,9 +24,6 @@
   "devDependencies": {
     "babel-core": "^5.6.18",
     "babel-loader": "^5.1.4",
-    "css-loader": "^0.15.5",
-    "csslint": "^0.10.0",
-    "csslint-loader": "^0.2.0",
     "node-libs-browser": "^0.5.2",
     "react-hot-loader": "davidpfahler/react-hot-loader#error-reporter",
     "webpack": "^1.9.11",

package.json

@@ -11,7 +11,7 @@
     "build:prod": "NODE_ENV=production webpack src/index.js dist/redbox.min.js",
     "build:test": "TEST=true webpack src/index.js tmp/redbox.js",
     "build": "npm run build:dev && npm run build:prod",
-    "lint": "standard ./src && csslint ./src/redbox.css --quiet",
+    "lint": "standard ./src",
     "prepublish": "npm run clean && npm run build",
     "test": "npm run lint -s && npm run build:test -s && babel-node ./tests | tap-spec",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"
@@ -37,21 +37,16 @@
     "babel-core": "^5.6.18",
     "babel-eslint": "^3.1.15",
     "babel-loader": "^5.1.4",
-    "css-loader": "^0.15.5",
-    "csslint": "^0.10.0",
-    "csslint-loader": "^0.2.0",
-    "extract-text-webpack-plugin": "^0.8.2",
     "rimraf": "^2.3.4",
     "standard": "^5.0.0-2",
-    "style-loader": "^0.12.3",
     "tap-spec": "^4.0.2",
     "tape": "^4.0.1",
     "webpack": "^1.9.6",
     "webpack-dev-server": "^1.8.2",
     "semantic-release": "^4.0.0"
   },
   "peerDependencies": {
-    "react": ">=0.13.2 || ^0.14.0-beta3"
+    "react": ">=0.13.2 || ^0.14.0-rc1"
   },
   "dependencies": {
     "error-stack-parser": "^1.2.0"

src/index.js

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react'
-import {redbox, message, stack, frame, file} from './redbox.css'
+import {redbox, message, stack, frame, file, linkToFile} from './style.js'
 import ErrorStackParser from 'error-stack-parser'
 
 export default class RedBox extends Component {
@@ -12,18 +12,18 @@ export default class RedBox extends Component {
     const frames = ErrorStackParser.parse(error).map((f, index) => {
       const link = `${f.fileName}:${f.lineNumber}:${f.columnNumber}`
       return (
-        <div className={frame} key={index}>
+        <div style={frame} key={index}>
           <div>{f.functionName}</div>
-          <div className={file}>
-            <a href={link}>{link}</a>
+          <div style={file}>
+            <a href={link} style={linkToFile}>{link}</a>
           </div>
         </div>
       )
     })
     return (
-      <div className={redbox}>
-        <div className={message}>{error.name}: {error.message}</div>
-        <div className={stack}>{frames}</div>
+      <div style={redbox}>
+        <div style={message}>{error.name}: {error.message}</div>
+        <div style={stack}>{frames}</div>
       </div>
     )
   }

src/style.js

@@ -0,0 +1,35 @@
+export default {
+  redbox: {
+    boxSizing: 'border-box',
+    fontFamily: 'sans-serif',
+    fontSize: '1em',
+    position: 'fixed',
+    padding: 10,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    width: '100%',
+    background: 'rgb(204, 0, 0)',
+    color: 'white',
+    zIndex: 9999
+  },
+  message: {
+    fontWeight: 'bold'
+  },
+  stack: {
+    fontFamily: 'monospace',
+    marginTop: '2em'
+  },
+  frame: {
+    marginTop: '1em'
+  },
+  file: {
+    fontSize: '0.8em',
+    color: 'rgba(255, 255, 255, 0.7)'
+  },
+  linkToFile: {
+    textDecoration: 'none',
+    color: 'rgba(255, 255, 255, 0.7)'
+  }
+};

webpack.config.js

@@ -2,13 +2,10 @@
 
 // imports
 var webpack = require('webpack')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 // configurations
-var TEST, PROD
-if (process.env.TEST) {
-  TEST = true
-} else if (process.env.NODE_ENV === 'production') {
+var PROD
+if (process.env.NODE_ENV === 'production') {
   PROD = true
 }
 
@@ -22,11 +19,6 @@ var plugins = [
 
 let config = {
   module: {
-    preLoaders: [{
-      test: /\.css?$/,
-      loader: 'csslint',
-      include: /stylesheets/
-    }],
     loaders: [{
       test: /\.js$/,
       loaders: ['babel-loader'],
@@ -46,20 +38,7 @@ let config = {
   }
 }
 
-// Mutates config to use the ExtractTextPlugin to extract
-// css instead of inlining it.
-function extractCSS (config) {
-  config.plugins.push(new ExtractTextPlugin('redbox.css', {allChunks: true}))
-
-  config.module.loaders.push({
-    test: /\.css?$/,
-    loader: ExtractTextPlugin.extract('css-loader?modules&localIdentName=[hash:base64:5]')
-  })
-}
-
-if (TEST) {
-  extractCSS(config)
-} else if (PROD) {
+if (PROD) {
   config.plugins.push(
     new webpack.optimize.UglifyJsPlugin({
       compressor: {
@@ -68,12 +47,6 @@ if (TEST) {
       }
     })
   )
-  extractCSS(config)
-} else {
-  config.module.loaders.push({
-    test: /\.css?$/,
-    loader: 'style-loader!css-loader?sourceMap&modules&localIdentName=[path][name]---[local]---[hash:base64:5]'
-  })
 }
 
 module.exports = config