Merge pull request #9 from yuri-scarbaci-lenio/feature/allow-custom-m…

…iniCssExtractOptions

address Issue #7

CHANGELOG.md

@@ -0,0 +1,5 @@
+# version 1.0.7
+
+## Changes:
+  - can now specify miniCssExtractOptions configuration inside next.config.js
+  - updated outdated dependencies and fixed `npm audit` warnings for `acorn`, `kind-of` and `node-sass`

README.md

@@ -35,7 +35,8 @@ module.exports = withStyles({
     },
   },
   cssLoaderOptions: {...},
-  postcssLoaderOptions: {...}
+  postcssLoaderOptions: {...},
+  miniCssExtractOptions: {...} // ignoreOrder:true for https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-544898772
 })
 ```
 
@@ -55,6 +56,18 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
+## How to contribute
+
+1. fork the project `~master`
+1. locally clone the project in your machine ( `git clone https/ssh github link to your fork` )
+1. create a new branch in your fork ( `git checkout -b your/branch/name` )
+1. run `npm install` in your local clone of the repo
+1. apply your code changes ( keep `CHANGELOG.md` and the `README.md` file up to date, also modify `package.json` `version` as fit!)
+1. run `npm pack` in your local clone of the repo
+1. test your changes against a next.js project that uses your local repo ( use `npm install --save path/to/local/repo/{version}.tgz` to test your locally changed code)
+1. if your code work as expected, remove the packed tgz file from the repo and commit to your fork
+1. create a PR to apply your fork in this repository
+
 ## Credits
 
 Most of the code was taken from the official `next-css` & `next-sass` package.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webdeb/next-styles",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "CSS / SASS / CssModules in Next.js",
   "main": "index.js",
   "scripts": {
@@ -18,12 +18,12 @@
   "author": "Boris Kotov <[email protected]> (http://www.webdeb.de/)",
   "license": "MIT",
   "dependencies": {
-    "extracted-loader": "^1.0.7",
     "css-loader": "^3.4.0",
+    "extracted-loader": "^1.0.7",
     "find-up": "^4.1.0",
     "ignore-loader": "~0.1.2",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^8.0.0"

withStyles.js

@@ -18,6 +18,7 @@ module.exports = (nextConfig = {}) => {
         sassLoaderOptions,
         cssLoaderOptions,
         postcssLoaderOptions,
+        miniCssExtractOptions
       } = nextConfig
 
       const issuer = issuer => {
@@ -33,13 +34,14 @@ module.exports = (nextConfig = {}) => {
         typeof modules === "object"
           ? modules
           : !!modules && {
-              localIdentName: dev ? "[path][name]__[local]" : "[hash:base64:8]",
-            }
+            localIdentName: dev ? "[path][name]__[local]" : "[hash:base64:8]",
+          }
 
       options.defaultLoaders.css = getStyleLoaders(config, {
         extensions: ["css"],
         cssLoaderOptions,
         postcssLoaderOptions,
+        miniCssExtractOptions,
         dev,
         isServer,
       })
@@ -56,6 +58,7 @@ module.exports = (nextConfig = {}) => {
           cssModules,
           cssLoaderOptions,
           postcssLoaderOptions,
+          miniCssExtractOptions,
           dev,
           isServer,
         })
@@ -77,6 +80,7 @@ module.exports = (nextConfig = {}) => {
           loaders: [sassLoader],
           cssLoaderOptions,
           postcssLoaderOptions,
+          miniCssExtractOptions,
           dev,
           isServer,
         })
@@ -95,6 +99,7 @@ module.exports = (nextConfig = {}) => {
           cssModules,
           cssLoaderOptions,
           postcssLoaderOptions,
+          miniCssExtractOptions,
           dev,
           isServer,
         })
@@ -126,6 +131,7 @@ const getStyleLoaders = (
     extensions = [],
     postcssLoaderOptions = {},
     cssLoaderOptions,
+    miniCssExtractOptions,
     loaders = [],
   }
 ) => {
@@ -155,6 +161,7 @@ const getStyleLoaders = (
           ? "static/chunks/[name].chunk.css"
           : "static/chunks/[name].[contenthash:8].chunk.css",
         hot: dev,
+        ...miniCssExtractOptions
       })
     )
     extractCssInitialized = true