@savvywombat/tailwindcss-grid-areas - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

CHANGELOG.md

 # Changelog
 
+## 2.1.0 - 2022-04-21
+ * Allow arbitrary values for `grid-areas-[]` and `grid-in-[]`
+
 ## 2.0.1 - 2022-02-04
@@ -4,0 +7,0 @@ * Fixed misspelling of Tailwind CSS in documentation

package.json

 {
   "name": "@savvywombat/tailwindcss-grid-areas",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A plugin to provide Tailwind CSS utilities for grid areas.",
@@ -34,16 +34,17 @@ "keywords": [
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/node": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "babel-jest": "^27.4.4",
-    "clean-css": "^5.2.2",
-    "eslint": "^8.4.1",
-    "eslint-config-prettier": "^8.3.0",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.9",
+    "@babel/node": "^7.16.8",
+    "@babel/preset-env": "^7.16.11",
+    "babel-jest": "^27.5.1",
+    "clean-css": "^5.3.0",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^27.4.4",
+    "jest": "^27.5.1",
     "jest-matcher-css": "^1.1.0",
-    "postcss": "^8.4.5",
-    "prettier": "^2.5.1",
-    "tailwindcss": "^3.0.1"
+    "postcss": "^8.4.12",
+    "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.8",
+    "tailwindcss": "^3.0.24"
   },
@@ -56,3 +57,3 @@ "babel": {
           "targets": {
-            "node": "12.22.0"
+            "node": "12.13.0"
           }
@@ -62,3 +63,15 @@ }
     ]
+  },
+  "engines": {
+    "node": ">=12.13.0"
+  },
+  "jest": {
+    "testTimeout": 30000,
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest/customMatchers.js"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/"
+    ]
   }
 }

src/plugin.js

@@ -1,9 +0,9 @@
-const _ = require("lodash");
-const extractGridAreaNames = require("./util/extractGridAreaNames");
+const _ = require('lodash')
+const extractGridAreaNames = require('./util/extractGridAreaNames')
 
-module.exports = function ({ addUtilities, theme, variants }) {
-  const gridAreaNames = extractGridAreaNames(theme("gridTemplateAreas"));
+module.exports = function ({ addUtilities, matchUtilities, theme, variants }) {
+  const gridAreaNames = extractGridAreaNames(theme('gridTemplateAreas'))
 
   const templateAreas = _.reduce(
-    theme("gridTemplateAreas"),
+    theme('gridTemplateAreas'),
     (templates, area, name) => {
@@ -13,14 +13,14 @@ return {
         [`.grid-areas-${name}`]: {
-          "grid-template-areas": area
+          'grid-template-areas': area
             .map((row) => {
-              return `"${row}"`;
+              return `"${row}"`
             })
-            .join("\n"),
+            .join('\n'),
         },
-      };
+      }
     },
     {}
-  );
+  )
 
-  addUtilities([templateAreas], variants("gridTemplateAreas"));
+  addUtilities([templateAreas], variants('gridTemplateAreas'))
 
@@ -31,8 +31,8 @@ const namedAreas = gridAreaNames.reduce((areas, name) => {
       [`.grid-in-${name}`]: {
-        "grid-area": name,
+        'grid-area': name,
       },
-    };
-  }, {});
+    }
+  }, {})
 
-  addUtilities([namedAreas], []);
+  addUtilities([namedAreas], [])
 
@@ -43,17 +43,33 @@ const namedLines = gridAreaNames.reduce((lines, name) => {
       [`.row-start-${name}`]: {
-        "grid-row-start": `${name}-start`,
+        'grid-row-start': `${name}-start`,
       },
       [`.row-end-${name}`]: {
-        "grid-row-end": `${name}-end`,
+        'grid-row-end': `${name}-end`,
       },
       [`.col-start-${name}`]: {
-        "grid-column-start": `${name}-start`,
+        'grid-column-start': `${name}-start`,
       },
       [`.col-end-${name}`]: {
-        "grid-column-end": `${name}-end`,
+        'grid-column-end': `${name}-end`,
       },
-    };
-  }, {});
+    }
+  }, {})
 
-  addUtilities([namedLines], []);
-};
+  addUtilities([namedLines], [])
+
+  // allow arbitrary values
+  matchUtilities({
+    'grid-areas': (value) => {
+      value = `"${value}"`
+      value = value.replace(/ *, */g, '" "')
+      return {
+        'grid-template-areas': `${value}`,
+      }
+    },
+    'grid-in': (value) => {
+      return {
+        'grid-area': `${value}`,
+      }
+    },
+  })
+}

src/util/extractGridAreaNames.js

@@ -1,2 +0,2 @@
-const _ = require("lodash");
+const _ = require('lodash')
 
@@ -9,10 +9,10 @@ module.exports = function (gridTemplateAreas) {
         return _.flatMap(area.match(/[^\s]+/g), (match) => {
-          if (match !== ".") {
-            return match;
+          if (match !== '.') {
+            return match
           }
-          return [];
-        });
-      });
+          return []
+        })
+      })
     })
-  );
-};
+  )
+}

No alert changes

Improved metrics

Total package byte prevSize

6925

increased by10.78%

Lines of code

80

increased by23.08%

Worsened metrics

Dev dependency count

15

increased by7.14%

No dependency changes