Update to [email protected]

.travis.yml

@@ -3,6 +3,8 @@ node_js:
   - "8"
   - "10"
   - "12"
+  - "14"
+  - "15"
 
 cache:
   directories:

index.js

@@ -1,16 +1,11 @@
-var _ = require('lodash')
-var flatten = require('flat')
-
+const _ = require('lodash')
+const flatten = require('flat').flatten
 
 const FLATTEN_CONFIG = { delimiter: '-', maxDepth: 2 }
 const getName = name => name.split('-default').join('')
 
-
 module.exports = function () {
-  return function ({
-    addUtilities, addComponents, addBase, addVariant,
-    e, prefix, theme, variants, config,
-  }) {
+  return function ({ addUtilities, e, theme, variants }) {
     const buildConfig = (themeKey, ...fallbackKeys) => {
       return buildConfigFromTheme(themeKey, ...fallbackKeys) || buildConfigFromArray(themeKey)
     }
@@ -45,18 +40,18 @@ module.exports = function () {
     }
 
     const pluginUtilities = {
-      'col-count': buildConfig('columnCount'),
-      'col-gap': buildConfig('columnGap', 'gap', 'gridGap'),
-      'col-w': buildConfig('columnWidth'),
-      'col-rule-color': buildConfig('columnRuleColor', 'borderColor'),
-      'col-rule-width': buildConfig('columnRuleWidth', 'borderWidth'),
-      'col-rule-style': buildConfig('columnRuleStyle'),
-      'col-fill': buildConfig('columnFill'),
-      'col-span': buildConfig('columnSpan'),
+      'column-count': buildConfig('columnCount'),
+      'column-gap': buildConfig('columnGap', 'gap', 'gridGap'),
+      'column-width': buildConfig('columnWidth', 'gap', 'gridGap'),
+      'column-rule-color': buildConfig('columnRuleColor', 'borderColor'),
+      'column-rule-width': buildConfig('columnRuleWidth', 'borderWidth'),
+      'column-rule-style': buildConfig('columnRuleStyle'),
+      'column-fill': buildConfig('columnFill'),
+      'column-span': buildConfig('columnSpan'),
     }
 
     Object.entries(pluginUtilities)
-      .filter(([ modifier, values ]) => !_.isEmpty(values))
+      .filter(([ values ]) => !_.isEmpty(values))
       .forEach(([ modifier, values ]) => {
         const className = _.kebabCase(modifier).split('-').slice(0, 2).join('-')
         const variantName = Object.keys(Object.entries(values)[0][1])[0]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-multi-column",
-  "version": "1.0.2",
+  "version": "2.0.2",
   "description": "Multi-Column utilities for Tailwind CSS.",
   "keywords": [
     "plugin",
@@ -29,13 +29,13 @@
     "test": "jest"
   },
   "dependencies": {
-    "flat": "^5.0.0",
-    "lodash": "^4.17.11"
+    "flat": "^5.0.2",
+    "lodash": "^4.17.20"
   },
   "devDependencies": {
-    "jest": "^26.4.1",
-    "jest-matcher-css": "^1.0.3",
-    "postcss": "^8.0.9",
-    "tailwindcss": "^1.0.1"
+    "jest": "^26.6.3",
+    "jest-matcher-css": "^1.1.0",
+    "postcss": "^8.1.14",
+    "tailwindcss": "^2.0.1"
   }
 }

readme.md

@@ -66,43 +66,43 @@ This means you won't be able to use `@apply` with those classes. Let me know if
 ```
 
 ```css
-.col-count-1 { column-count: 1; }
-.col-count-2 { column-count: 2; }
-.col-count-3 { column-count: 3; }
-
-.col-gap-sm { column-gap: 1rem; }
-.col-gap-md { column-gap: 1.5rem; }
-.col-gap-lg { column-gap: 2rem; }
-
-.col-w-sm { column-width: 120px; }
-.col-w-md { column-width: 240px; }
-.col-w-lg { column-width: 360px; }
-
-.col-rule-red { column-rule-color: red; }
-.col-rule-lime { column-rule-color: lime; }
-.col-rule-blue { column-rule-color: blue; }
-
-.col-rule { column-rule-width: 1px; }
-.col-rule-sm { column-rule-width: 2px; }
-.col-rule-md { column-rule-width: 4px; }
-
-.col-rule-none { column-rule-style: none; }
-.col-rule-hidden { column-rule-style: hidden; }
-.col-rule-dotted { column-rule-style: dotted; }
-.col-rule-dashed { column-rule-style: dashed; }
-.col-rule-solid { column-rule-style: solid; }
-.col-rule-double { column-rule-style: double; }
-.col-rule-groove { column-rule-style: groove; }
-.col-rule-ridge { column-rule-style: ridge; }
-.col-rule-inset { column-rule-style: inset; }
-.col-rule-outset { column-rule-style: outset; }
-
-.col-fill-auto { column-fill: auto; }
-.col-fill-balance { column-fill: balance; }
-.col-fill-balance-all { column-fill: balance-all; }
-
-.col-span-none { column-span: none; }
-.col-span-all { column-span: all; }
+.column-count-1 { column-count: 1; }
+.column-count-2 { column-count: 2; }
+.column-count-3 { column-count: 3; }
+
+.column-gap-sm { column-gap: 1rem; }
+.column-gap-md { column-gap: 1.5rem; }
+.column-gap-lg { column-gap: 2rem; }
+
+.column-w-sm { column-width: 120px; }
+.column-w-md { column-width: 240px; }
+.column-w-lg { column-width: 360px; }
+
+.column-rule-red { column-rule-color: red; }
+.column-rule-lime { column-rule-color: lime; }
+.column-rule-blue { column-rule-color: blue; }
+
+.column-rule { column-rule-width: 1px; }
+.column-rule-sm { column-rule-width: 2px; }
+.column-rule-md { column-rule-width: 4px; }
+
+.column-rule-none { column-rule-style: none; }
+.column-rule-hidden { column-rule-style: hidden; }
+.column-rule-dotted { column-rule-style: dotted; }
+.column-rule-dashed { column-rule-style: dashed; }
+.column-rule-solid { column-rule-style: solid; }
+.column-rule-double { column-rule-style: double; }
+.column-rule-groove { column-rule-style: groove; }
+.column-rule-ridge { column-rule-style: ridge; }
+.column-rule-inset { column-rule-style: inset; }
+.column-rule-outset { column-rule-style: outset; }
+
+.column-fill-auto { column-fill: auto; }
+.column-fill-balance { column-fill: balance; }
+.column-fill-balance-all { column-fill: balance-all; }
+
+.column-span-none { column-span: none; }
+.column-span-all { column-span: all; }
 ```
 
 ## Credits