enable keyword/global utilities for grid-template-areas and grid-area

SavvyWombat · May 30, 2023 · 56e4de2 · 56e4de2
1 parent 0583cc3
commit 56e4de2
Show file tree

Hide file tree

Showing 3 changed files with 303 additions and 192 deletions.
diff --git a/jest/customMatchers.js b/jest/customMatchers.js
@@ -95,9 +95,6 @@ expect.extend({
 
     return { actual: received, message, pass }
   },
-})
-
-expect.extend({
   // Compare two CSS strings with all whitespace removed
   // This is probably naive but it's fast and works well enough.
   toMatchFormattedCss(received, argument) {
@@ -116,7 +113,7 @@ expect.extend({
     let formattedReceived = format(received)
     let formattedArgument = format(argument)
 
-    const pass = formattedReceived === formattedArgument
+    const pass = formattedReceived.includes(formattedArgument)
 
     const message = pass
       ? () => {

diff --git a/src/plugin.js b/src/plugin.js
@@ -21,7 +21,16 @@ module.exports = function ({ addUtilities, matchUtilities, theme, variants }) {
     {}
   )
 
-  addUtilities([templateAreas], variants('gridTemplateAreas'))
+  const specialTemplateAreas = {
+    '.grid-areas-none': { 'grid-template-areas': 'none' },
+    '.grid-areas-inherit': { 'grid-template-areas': 'inherit' },
+    '.grid-areas-initial': { 'grid-template-areas': 'initial' },
+    '.grid-areas-revert': { 'grid-template-areas': 'revert' },
+    '.grid-areas-revert-layer': { 'grid-template-areas': 'revert-layer' },
+    '.grid-areas-unset': { 'grid-template-areas': 'unset' },
+  }
+
+  addUtilities([templateAreas, specialTemplateAreas], variants('gridTemplateAreas'))
 
   const namedAreas = gridAreaNames.reduce((areas, name) => {
     return {
@@ -32,7 +41,16 @@ module.exports = function ({ addUtilities, matchUtilities, theme, variants }) {
     }
   }, {})
 
-  addUtilities([namedAreas], [])
+  const specialNamedAreas = {
+    '.grid-in-auto': { 'grid-area': 'auto' },
+    '.grid-in-inherit': { 'grid-area': 'inherit' },
+    '.grid-in-initial': { 'grid-area': 'initial' },
+    '.grid-in-revert': { 'grid-area': 'revert' },
+    '.grid-in-revert-layer': { 'grid-area': 'revert-layer' },
+    '.grid-in-unset': { 'grid-area': 'unset' },
+  }
+
+  addUtilities([namedAreas, specialNamedAreas], [])
 
   const namedLines = gridAreaNames.reduce((lines, name) => {
     return {