fix(postcss-reduce-idents): fix line names grid templates

Handle grid and column names enclosed in square brackets.
Cover both the case where the brackets contain a single grid line name
and the case where the brackets contain multiple separate grid line names.

Fix #529 (again)

Author: ludofischer

packages/postcss-reduce-idents/src/lib/grid-template.js

@@ -14,6 +14,8 @@ const RESERVED_KEYWORDS = new Set([
 const gridTemplateProperties = new Set([
   'grid-template',
   'grid-template-areas',
+  'grid-template-columns',
+  'grid-template-rows',
 ]);
 
 const gridChildProperties = new Set([
@@ -53,6 +55,20 @@ module.exports = function () {
               }
             });
           }
+          /* handle gridline name lists like [name1 name2] */
+          if (child.type === 'word') {
+            const word = child.value;
+            if (word.startsWith('[') && word.endsWith(']')) {
+              const gridLine = word.slice(1, -1);
+              addToCache(gridLine, encoder, cache);
+            } else if (word.startsWith('[')) {
+              const gridLine = word.slice(1);
+              addToCache(gridLine, encoder, cache);
+            } else if (word.endsWith(']')) {
+              const gridLine = word.slice(0, -1);
+              addToCache(gridLine, encoder, cache);
+            }
+          }
         });
 
         declCache.push(node);
@@ -79,6 +95,30 @@ module.exports = function () {
                 if (word in cache) {
                   node.value = node.value.replace(word, cache[word].ident);
                 }
+                /* replace gridline names inside lists like [name] */
+                if (
+                  word.startsWith('[') &&
+                  word.endsWith(']') &&
+                  word.slice(1, -1) in cache
+                ) {
+                  const gridLine = word.slice(1, -1);
+                  node.value = node.value.replace(
+                    gridLine,
+                    cache[gridLine].ident
+                  );
+                } else if (word.startsWith('[') && word.slice(1) in cache) {
+                  const gridLine = word.slice(1);
+                  node.value = node.value.replace(
+                    gridLine,
+                    cache[gridLine].ident
+                  );
+                } else if (word.endsWith(']') && word.slice(0, -1) in cache) {
+                  const gridLine = word.slice(0, -1);
+                  node.value = node.value.replace(
+                    gridLine,
+                    cache[gridLine].ident
+                  );
+                }
               });
               node.value = node.value.replace(/\s+/g, ' '); // merge white-spaces
             }

packages/postcss-reduce-idents/test/index.js

@@ -408,6 +408,49 @@ test(
   )
 );
 
+test(
+  'should rename grid-template-columns',
+  processCSS(
+    `.grid {
+  display: grid;
+  grid-template-columns:
+    [kw] 2.5em
+    [day] 3em
+    [description] 10em;
+}
+.grid > .kw {
+  grid-column: kw;
+}
+.grid > .day {
+  grid-column: day;
+}
+.grid > .description {
+  grid-column: description;
+}`,
+    `.grid {
+  display: grid;
+  grid-template-columns:
+    [a] 2.5em [b] 3em [c] 10em;
+}
+.grid > .kw {
+  grid-column: a;
+}
+.grid > .day {
+  grid-column: b;
+}
+.grid > .description {
+  grid-column: c;
+}`
+  )
+);
+
+test(
+  'should rename a list of grid-template-rows',
+  processCSS(
+    '.grid {grid-template-rows: [linename1 linename2] 100px;} .a { grid-row: linename1;}',
+    '.grid {grid-template-rows: [a b] 100px;} .a { grid-row: a;}'
+  )
+);
 test(
   'should not rename uppercase reserved keywords in grid-row, grid-row-start and grid-row-end',
   processCSS(