feat(tailwind): Allow passing an array of shades for Tailwind

.circleci/config.yml

@@ -3,12 +3,12 @@ version: 2.1
 orbs:
   package:
     executors:
-      node-11:
+      node:
         docker:
-          - image: 'circleci/node:11-stretch'
+          - image: "circleci/node:12-stretch"
     jobs:
       build-node:
-        executor: node-11
+        executor: node
         steps:
           - run: yarn versions
           - checkout

README.md

@@ -138,7 +138,7 @@ mix.palette(options);
 |      `pretty`     	| `{Boolean}` 	|               `false`              	| Use pretty formatting when writing the JSON file.                                                    	|
 |     `tailwind`    	|  `{Object}` 	|              `{ ... }`             	| Set Tailwind options. (See below)                                                                    	|
 | `tailwind.config` 	|  `{String}` 	|      `'./tailwind.config.js'`      	| Path to the Tailwind configuration file relative to the project root path.                           	|
-| `tailwind.shades` 	| `{Boolean}` 	|               `false`              	| While set to `true`, every color shade (`100-900`) will be generated. Otherwise, only `500` is used. 	|
+| `tailwind.shades` 	| `{Array|Boolean}` 	|               `false`              	| While set to `true`, every color shade (`100-900`) will be generated. Optionally, you may pass an array of shades. When set to `false`, only `500` is used. 	|
 | `tailwind.path` 	| `{String}` 	|               `'colors'`              	| Path to Tailwind config values for palette colors in dot notation. Uses Tailwind's color palette `theme('colors')` per default. 	|
 |       `sass`      	|  `{Object}` 	|              `{ ... }`             	| Set Sass options. (See below)                                                                        	|
 |    `sass.path`    	|  `{String}` 	| `'resources/assets/styles/config'` 	| Path to Sass variable files relative to the project root path.                                       	|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "palette-webpack-plugin",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Generate a JSON file containing your color palette from existing Sass maps and/or Tailwind.",
   "author": "Brandon Nifong <brandon@tendency.me>",
   "contributors": [
@@ -20,22 +20,22 @@
   ],
   "main": "src/index.js",
   "engines": {
-    "node": ">=11.0.0"
+    "node": ">=12.0.0"
   },
   "scripts": {
     "test": "eslint src/ --max-warnings=0"
   },
   "dependencies": {
-    "d3-color": "^1.4.0",
+    "d3-color": "^2.0.0",
     "d3-hsv": "^0.1.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
     "sass-export": "^1.0.6"
   },
   "peerDependencies": {
     "webpack": "^4.0.0 || ^5.0.0"
   },
   "devDependencies": {
-    "eslint": "^6.8.0",
-    "husky": "^4.0.10"
+    "eslint": "^7.7.0",
+    "husky": "^4.2.5"
   }
 }

src/index.js

@@ -152,7 +152,7 @@ class PaletteWebpackPlugin {
           return;
         }
 
-        if (typeof this.tailwind[key] === 'string') {
+        if (_.isString(this.tailwind[key])) {
           return this.transform(key);
         }
 
@@ -162,10 +162,14 @@ class PaletteWebpackPlugin {
         ) {
           return this.transform(key, '500');
         }
+
+        if (_.isArray(this.options.tailwind.shades)) {
+          return Object.keys(this.tailwind[key])
+            .filter(value => this.options.tailwind.shades.includes(value))
+            .map(value => this.transform(key, value));
+        }
 
-        return Object.keys(this.tailwind[key]).map(value => {
-          return this.transform(key, value);
-        });
+        return Object.keys(this.tailwind[key]).map(value => this.transform(key, value));
       })
       .filter(value => !!value);
   }