refactor(breaking): rm values for gridRow and gridColumn utilities

chakra-ui · Nov 13, 2024 · cff19aa · cff19aa
1 parent 8cd0e89
commit cff19aa
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 78 deletions.
diff --git a/.changeset/dry-zoos-return.md b/.changeset/dry-zoos-return.md
@@ -0,0 +1,90 @@
+---
+'@pandacss/preset-base': minor
+---
+
+[Breaking] Remove default utility values for `gridTemplateColumns`, `gridTemplateRows`, `gridColumn` and `gridRow` to
+prevent interference with native css values.
+
+For example `1` or `2` is a valid native value for `gridColumn` or `gridRow`, and should not be overridden by the
+utility.
+
+Find the previous default values below, you can add them back to your config if you need them.
+
+```ts
+const utilities = {
+  gridTemplateColumns: {
+    className: 'grid-tc',
+    group: 'Grid Layout',
+    values: {
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+      '7': 'repeat(7, minmax(0, 1fr))',
+      '8': 'repeat(8, minmax(0, 1fr))',
+      '9': 'repeat(9, minmax(0, 1fr))',
+      '10': 'repeat(10, minmax(0, 1fr))',
+      '11': 'repeat(11, minmax(0, 1fr))',
+      '12': 'repeat(12, minmax(0, 1fr))',
+    },
+  },
+  gridTemplateRows: {
+    className: 'grid-tr',
+    group: 'Grid Layout',
+    values: {
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+      '7': 'repeat(7, minmax(0, 1fr))',
+      '8': 'repeat(8, minmax(0, 1fr))',
+      '9': 'repeat(9, minmax(0, 1fr))',
+      '10': 'repeat(10, minmax(0, 1fr))',
+      '11': 'repeat(11, minmax(0, 1fr))',
+      '12': 'repeat(12, minmax(0, 1fr))',
+    },
+  },
+  gridColumn: {
+    className: 'grid-c',
+    group: 'Grid Layout',
+    values: {
+      full: '1 / -1',
+      '1': 'span 1 / span 1',
+      '2': 'span 2 / span 2',
+      '3': 'span 3 / span 3',
+      '4': 'span 4 / span 4',
+      '5': 'span 5 / span 5',
+      '6': 'span 6 / span 6',
+      '7': 'span 7 / span 7',
+      '8': 'span 8 / span 8',
+      '9': 'span 9 / span 9',
+      '10': 'span 10 / span 10',
+      '11': 'span 11 / span 11',
+      '12': 'span 12 / span 12',
+    },
+  },
+  gridRow: {
+    className: 'grid-r',
+    group: 'Grid Layout',
+    values: {
+      full: '1 / -1',
+      '1': 'span 1 / span 1',
+      '2': 'span 2 / span 2',
+      '3': 'span 3 / span 3',
+      '4': 'span 4 / span 4',
+      '5': 'span 5 / span 5',
+      '6': 'span 6 / span 6',
+      '7': 'span 7 / span 7',
+      '8': 'span 8 / span 8',
+      '9': 'span 9 / span 9',
+      '10': 'span 10 / span 10',
+      '11': 'span 11 / span 11',
+      '12': 'span 12 / span 12',
+    },
+  },
+}
+```
diff --git a/packages/generator/__tests__/generate-prop-types.test.ts b/packages/generator/__tests__/generate-prop-types.test.ts
@@ -27,10 +27,6 @@ describe('generate property types', () => {
       	hideBelow: Tokens["breakpoints"];
       	flexBasis: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full";
       	flex: "1" | "auto" | "initial" | "none";
-      	gridTemplateColumns: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
-      	gridTemplateRows: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
-      	gridColumn: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
-      	gridRow: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
       	gridAutoColumns: "min" | "max" | "fr";
       	gridAutoRows: "min" | "max" | "fr";
       	gap: Tokens["spacing"];

diff --git a/packages/generator/__tests__/generate-style-props.test.ts b/packages/generator/__tests__/generate-style-props.test.ts
@@ -2799,7 +2799,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/grid-column
          */
-      gridColumn?: ConditionalValue<UtilityValues["gridColumn"] | CssVars | CssProperties["gridColumn"] | AnyString>
+      gridColumn?: ConditionalValue<CssProperties["gridColumn"] | AnyString>
        /**
          * The **\`grid-column-end\`** CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
          *
@@ -2841,7 +2841,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/grid-row
          */
-      gridRow?: ConditionalValue<UtilityValues["gridRow"] | CssVars | CssProperties["gridRow"] | AnyString>
+      gridRow?: ConditionalValue<CssProperties["gridRow"] | AnyString>
        /**
          * The **\`grid-row-end\`** CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.
          *
@@ -2910,7 +2910,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/grid-template-columns
          */
-      gridTemplateColumns?: ConditionalValue<UtilityValues["gridTemplateColumns"] | CssVars | CssProperties["gridTemplateColumns"] | AnyString>
+      gridTemplateColumns?: ConditionalValue<CssProperties["gridTemplateColumns"] | AnyString>
        /**
          * The **\`grid-template-rows\`** CSS property defines the line names and track sizing functions of the grid rows.
          *
@@ -2924,7 +2924,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/grid-template-rows
          */
-      gridTemplateRows?: ConditionalValue<UtilityValues["gridTemplateRows"] | CssVars | CssProperties["gridTemplateRows"] | AnyString>
+      gridTemplateRows?: ConditionalValue<CssProperties["gridTemplateRows"] | AnyString>
        /**
          * The **\`hanging-punctuation\`** CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.
          *
@@ -10271,7 +10271,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/grid-column
          */
-      gridColumn?: ConditionalValue<WithEscapeHatch<UtilityValues["gridColumn"] | CssVars>>
+      gridColumn?: ConditionalValue<WithEscapeHatch<CssProperties["gridColumn"]>>
        /**
          * The **\`grid-column-end\`** CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
          *
@@ -10313,7 +10313,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/grid-row
          */
-      gridRow?: ConditionalValue<WithEscapeHatch<UtilityValues["gridRow"] | CssVars>>
+      gridRow?: ConditionalValue<WithEscapeHatch<CssProperties["gridRow"]>>
        /**
          * The **\`grid-row-end\`** CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.
          *
@@ -10382,7 +10382,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/grid-template-columns
          */
-      gridTemplateColumns?: ConditionalValue<WithEscapeHatch<UtilityValues["gridTemplateColumns"] | CssVars>>
+      gridTemplateColumns?: ConditionalValue<WithEscapeHatch<CssProperties["gridTemplateColumns"]>>
        /**
          * The **\`grid-template-rows\`** CSS property defines the line names and track sizing functions of the grid rows.
          *
@@ -10396,7 +10396,7 @@ describe('generate property types', () => {
          *
          * @see https://developer.mozilla.org/docs/Web/CSS/grid-template-rows
          */
-      gridTemplateRows?: ConditionalValue<WithEscapeHatch<UtilityValues["gridTemplateRows"] | CssVars>>
+      gridTemplateRows?: ConditionalValue<WithEscapeHatch<CssProperties["gridTemplateRows"]>>
        /**
          * The **\`hanging-punctuation\`** CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.
          *

diff --git a/packages/preset-base/src/utilities/flex-and-grid.ts b/packages/preset-base/src/utilities/flex-and-grid.ts
@@ -64,76 +64,18 @@ export const flexGrid: UtilityConfig = {
   gridTemplateColumns: {
     className: 'grid-tc',
     group: 'Grid Layout',
-    values: {
-      '1': 'repeat(1, minmax(0, 1fr))',
-      '2': 'repeat(2, minmax(0, 1fr))',
-      '3': 'repeat(3, minmax(0, 1fr))',
-      '4': 'repeat(4, minmax(0, 1fr))',
-      '5': 'repeat(5, minmax(0, 1fr))',
-      '6': 'repeat(6, minmax(0, 1fr))',
-      '7': 'repeat(7, minmax(0, 1fr))',
-      '8': 'repeat(8, minmax(0, 1fr))',
-      '9': 'repeat(9, minmax(0, 1fr))',
-      '10': 'repeat(10, minmax(0, 1fr))',
-      '11': 'repeat(11, minmax(0, 1fr))',
-      '12': 'repeat(12, minmax(0, 1fr))',
-    },
   },
   gridTemplateRows: {
     className: 'grid-tr',
     group: 'Grid Layout',
-    values: {
-      '1': 'repeat(1, minmax(0, 1fr))',
-      '2': 'repeat(2, minmax(0, 1fr))',
-      '3': 'repeat(3, minmax(0, 1fr))',
-      '4': 'repeat(4, minmax(0, 1fr))',
-      '5': 'repeat(5, minmax(0, 1fr))',
-      '6': 'repeat(6, minmax(0, 1fr))',
-      '7': 'repeat(7, minmax(0, 1fr))',
-      '8': 'repeat(8, minmax(0, 1fr))',
-      '9': 'repeat(9, minmax(0, 1fr))',
-      '10': 'repeat(10, minmax(0, 1fr))',
-      '11': 'repeat(11, minmax(0, 1fr))',
-      '12': 'repeat(12, minmax(0, 1fr))',
-    },
   },
   gridColumn: {
     className: 'grid-c',
     group: 'Grid Layout',
-    values: {
-      full: '1 / -1',
-      '1': 'span 1 / span 1',
-      '2': 'span 2 / span 2',
-      '3': 'span 3 / span 3',
-      '4': 'span 4 / span 4',
-      '5': 'span 5 / span 5',
-      '6': 'span 6 / span 6',
-      '7': 'span 7 / span 7',
-      '8': 'span 8 / span 8',
-      '9': 'span 9 / span 9',
-      '10': 'span 10 / span 10',
-      '11': 'span 11 / span 11',
-      '12': 'span 12 / span 12',
-    },
   },
   gridRow: {
     className: 'grid-r',
     group: 'Grid Layout',
-    values: {
-      full: '1 / -1',
-      '1': 'span 1 / span 1',
-      '2': 'span 2 / span 2',
-      '3': 'span 3 / span 3',
-      '4': 'span 4 / span 4',
-      '5': 'span 5 / span 5',
-      '6': 'span 6 / span 6',
-      '7': 'span 7 / span 7',
-      '8': 'span 8 / span 8',
-      '9': 'span 9 / span 9',
-      '10': 'span 10 / span 10',
-      '11': 'span 11 / span 11',
-      '12': 'span 12 / span 12',
-    },
   },
   gridColumnStart: {
     className: 'grid-cs',

diff --git a/packages/studio/styled-system/types/prop-type.d.ts b/packages/studio/styled-system/types/prop-type.d.ts
@@ -21,10 +21,6 @@ export interface UtilityValues {
 	hideBelow: Tokens["breakpoints"];
 	flexBasis: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full";
 	flex: "1" | "auto" | "initial" | "none";
-	gridTemplateColumns: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
-	gridTemplateRows: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
-	gridColumn: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
-	gridRow: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
 	gridAutoColumns: "min" | "max" | "fr";
 	gridAutoRows: "min" | "max" | "fr";
 	gap: Tokens["spacing"];

diff --git a/packages/studio/styled-system/types/style-props.d.ts b/packages/studio/styled-system/types/style-props.d.ts
@@ -2793,7 +2793,7 @@ gridAutoRows?: ConditionalValue<UtilityValues["gridAutoRows"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-column
    */
-gridColumn?: ConditionalValue<UtilityValues["gridColumn"] | CssVars | CssProperties["gridColumn"] | AnyString>
+gridColumn?: ConditionalValue<CssProperties["gridColumn"] | AnyString>
  /**
    * The **`grid-column-end`** CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
    *
@@ -2835,7 +2835,7 @@ gridColumnStart?: ConditionalValue<CssProperties["gridColumnStart"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-row
    */
-gridRow?: ConditionalValue<UtilityValues["gridRow"] | CssVars | CssProperties["gridRow"] | AnyString>
+gridRow?: ConditionalValue<CssProperties["gridRow"] | AnyString>
  /**
    * The **`grid-row-end`** CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.
    *
@@ -2904,7 +2904,7 @@ gridTemplateAreas?: ConditionalValue<CssProperties["gridTemplateAreas"] | AnyStr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-template-columns
    */
-gridTemplateColumns?: ConditionalValue<UtilityValues["gridTemplateColumns"] | CssVars | CssProperties["gridTemplateColumns"] | AnyString>
+gridTemplateColumns?: ConditionalValue<CssProperties["gridTemplateColumns"] | AnyString>
  /**
    * The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.
    *
@@ -2918,7 +2918,7 @@ gridTemplateColumns?: ConditionalValue<UtilityValues["gridTemplateColumns"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/grid-template-rows
    */
-gridTemplateRows?: ConditionalValue<UtilityValues["gridTemplateRows"] | CssVars | CssProperties["gridTemplateRows"] | AnyString>
+gridTemplateRows?: ConditionalValue<CssProperties["gridTemplateRows"] | AnyString>
  /**
    * The **`hanging-punctuation`** CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.
    *