feat(slider): allow overriding css classes from a user stylesheet

vvo · vvo · commit a1e87dd1396f · 2015-09-15T10:40:51.000+02:00
We now use our style-loader fork to be able to `prepend` a component
`&lt;style&gt;` instead of appending it to the `&lt;head&gt;`.

So that we can now override component style from a stylesheet in the
html page.
diff --git a/components/Slider/index.js b/components/Slider/index.js
@@ -2,7 +2,7 @@ var React = require('react');
 
 var Nouislider = require('react-nouislider');
 
-require('./index.css');
+require('style?prepend!raw!./index.css');
 
 var cssPrefix = 'as-range-slider--';
 
diff --git a/example/app.js b/example/app.js
@@ -1,5 +1,3 @@
-require('./style.css');
-
 var instantsearch = require('../');
 
 var search = instantsearch({
diff --git a/example/index.html b/example/index.html
@@ -5,6 +5,7 @@
   <title>Instant search demo built with instantsearch.js</title>
   <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+  <link rel="stylesheet" href="./style.css">
 </head>
 <body>
   <div class="container">
diff --git a/package.json b/package.json
@@ -27,8 +27,6 @@
     "babel-eslint": "4.1.1",
     "babel-loader": "5.3.2",
     "babel-tape-runner": "1.2.0",
-    "css-loader": "0.16.0",
-    "raw-loader": "0.5.1",
     "doctoc": "0.15.0",
     "eslint": "1.4.1",
     "eslint-config-airbnb": "0.0.8",
@@ -39,8 +37,9 @@
     "onchange": "2.0.0",
     "pretty-bytes": "2.0.1",
     "proxyquire": "1.7.1",
+    "raw-loader": "0.5.1",
     "sinon": "1.16.1",
-    "style-loader": "0.12.3",
+    "style-loader": "algolia/style-loader#3ec5a83b23607339e25fe65d51ae823ba9a8e7df",
     "tap-spec": "4.1.0",
     "tape": "4.2.0",
     "uglifyjs": "2.4.10",
diff --git a/webpack.config.js b/webpack.config.js
@@ -11,8 +11,6 @@ module.exports = {
       test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'
     }, {
       test: /\.html$/, exclude: /node_modules/, loader: 'raw'
-    }, {
-      test: /\.css$/, loader: 'style-loader!css-loader'
     }]
   }
 };
diff --git a/webpack.example.config.js b/webpack.example.config.js
@@ -10,8 +10,6 @@ module.exports = {
       test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'
     }, {
       test: /\.html$/, exclude: /node_modules/, loader: 'raw'
-    }, {
-      test: /\.css$/, loader: 'style-loader!css-loader'
     }]
   },
   devServer: {

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-require('./style.css');`
`2`		`-`
`3`	`1`	`var instantsearch = require('../');`
`4`	`2`
`5`	`3`	`var search = instantsearch({`
Original file line number	Diff line number	Diff line change
`@@ -11,8 +11,6 @@ module.exports = {`
`11`	`11`	`test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'`
`12`	`12`	`}, {`
`13`	`13`	`test: /\.html$/, exclude: /node_modules/, loader: 'raw'`
`14`		`- }, {`
`15`		`- test: /\.css$/, loader: 'style-loader!css-loader'`
`16`	`14`	`}]`
`17`	`15`	`}`
`18`	`16`	`};`