Merge branch 'master' of github.com:raphaelfabeni/css-loader

Author: raphaelfabeni

README.md

@@ -387,17 +387,15 @@ This loader differs from the other because we have to pass an attribute to it, a
 ## Contributing
 
 1. Clone this repository.
-2. `yarn install` and `yarn serve`
-3. Open => `http://localhost:3000` (if it didn't open automatically)
+2. Run `yarn install` and `yarn start`
+3. Open `http://localhost:3000`.
 4. Make your magic contribution.
-  4.1. Choose a special name for your loader (`loaders-name-you-want`) and add to `loaders.json`. 
-  4.2. Creates the example file inside the `examples` folder (uses the loader name you chose). You can copy one of the examples and make the necessary changes.
-  4.3. Creates the `.sass` files. The first one inside `src` folder which is the root style file for the loader and it will import the other files. And the other one, inside `loaders` folder with the specific style for the loader (both must have the same name you chose  - _loader-name-you-chose_).
+  * Choose a special name for your loader (`loaders-name-you-want`) and add to `loaders.json`. 
+  * Create the example file inside the `examples` folder (uses the loader name you chose). You can copy one of the examples and make the necessary changes.
+  * Create the `.sass` files. The first one inside `src` folder which is the root style file for the loader and it will import the other files. And the other one, inside `loaders` folder with the specific style for the loader (both must have the same name you chose  - _loader-name-you-chose_).
 5. Run `yarn build` to create/update the dist files.
 6. Open a _PR_ with a new branch describing your changes. <o/
 
-## Browser Support
-
 All examples use CSS _animation_ which is supported by [most current browsers](http://caniuse.com/#search=animation).
 
 | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_128x128.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_128x128.png?raw=true" width="48px" height="48px" alt="Firefox logo"> | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/40.2.1/archive/internet-explorer_9-11/internet-explorer_9-11_128x128.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://github.com/alrra/browser-logos/blob/master/src/opera/opera_128x128.png?raw=true" width="48px" height="48px" alt="Opera logo"> | <img src="https://github.com/alrra/browser-logos/blob/master/src/safari/safari_128x128.png?raw=true" width="48px" height="48px" alt="Safari logo"> | <img src="https://github.com/alrra/browser-logos/blob/master/src/android/android_128x128.png?raw=true" width="48px" height="48px" alt="Android Browser Logo" >

package.json

@@ -6,22 +6,22 @@
   "main": "index.js",
   "scripts": {
     "build": "rimraf dist && webpack && rimraf dist/*.js",
-    "serve": "webpack-dev-server"
+    "start": "webpack-dev-server --mode=development"
   },
   "author": "Raphael Fabeni",
   "license": "MIT",
-  "dependencies": {},
   "devDependencies": {
     "css-loader": "^0.28.5",
-    "extract-text-webpack-plugin": "^3.0.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.5.3",
     "rimraf": "^2.6.1",
     "sass-lint": "^1.8.0",
     "sass-loader": "^6.0.6",
-    "sasslint-webpack-plugin": "^1.0.4",
     "style-loader": "^0.18.2",
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.7.1",
+    "stylelint-webpack-plugin": "^0.10.5",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14",
     "webpack-livereload-plugin": "^0.11.0"
   }
 }

webpack.config.js

@@ -1,6 +1,6 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const LiveReloadPlugin = require('webpack-livereload-plugin')
-const SassLintPlugin = require('sasslint-webpack-plugin')
+// const StyleLintPlugin = require('stylelint-webpack-plugin');
 const path = require('path')
 const loaders = require('./loaders.json').loaders
 
@@ -25,24 +25,17 @@ module.exports = {
     rules: [
       {
         test: /\.sass$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            { loader: 'css-loader', options: { minimize: true } },
-            { loader: 'sass-loader' }
-          ]
-        })
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader', options: { minimize: true } },
+          'sass-loader',
+        ]
       }
     ]
   },
   plugins: [
-    new SassLintPlugin({
-      configFile: '.sass-lint.yml',
-      glob: 'src/**/*.s?(a|c)ss',
-      failOnWarning: true,
-      failOnError: true
-    }),
-    new ExtractTextPlugin('[name].css'),
+    // new StyleLintPlugin(options),
+    new MiniCssExtractPlugin('[name].css'),
     new LiveReloadPlugin()
   ],
   devServer: {