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

We now use our style-loader fork to be able to `prepend` a component `<style>` instead of appending it to the `<head>`. So that we can now override component style from a stylesheet in the html page.
algolia · Sep 15, 2015 · a1e87dd · a1e87dd
1 parent 6c346c4
commit a1e87dd
Show file tree

Hide file tree

Showing 6 changed files with 4 additions and 10 deletions.
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: {