chore: update codemod file for v16

This commit adds word boundaries for border radius values, tailwind theme access for space keyword.
kiwicom · Aug 23, 2024 · 3e1485d · 3e1485d
1 parent e7e27d5
commit 3e1485d
Showing 1 changed file with 62 additions and 60 deletions.
diff --git a/packages/orbit-components/transforms/tokens-v16.mjs b/packages/orbit-components/transforms/tokens-v16.mjs
@@ -5,10 +5,10 @@ import { join } from "path";
 
 const borderRadiusTransformations = [
   // tailwind classes
-  { from: /rounded(-[a-z]+)?-small/, to: "rounded$1-50" },
-  { from: /rounded(-[a-z]+)?-normal/, to: "rounded$1-100" },
-  { from: /rounded(-[a-z]+)?-large/, to: "rounded$1-150" },
-  { from: /rounded(-[a-z]+)?-circle/, to: "rounded$1-full" },
+  { from: /rounded(-[a-z]+)?-small\b/, to: "rounded$1-50" },
+  { from: /rounded(-[a-z]+)?-normal\b/, to: "rounded$1-100" },
+  { from: /rounded(-[a-z]+)?-large\b/, to: "rounded$1-150" },
+  { from: /rounded(-[a-z]+)?-circle\b/, to: "rounded$1-full" },
   // tokens
   { from: "borderRadiusSmall", to: "borderRadius50" },
   { from: "borderRadiusNormal", to: "borderRadius100" },
@@ -51,7 +51,9 @@ const headingTransformations = [
   { from: "fontWeightHeadingTitle6", to: "headingTitle6FontWeight" },
   // keep type and tailwind classes to avoid visual breaking changes
   { from: 'type="title1"', to: 'type="title0"' },
+  { from: 'type: "title1"', to: 'type: "title0"' },
   { from: "leading-heading-title1", to: "leading-heading-title0" },
+  { from: "theme(lineHeight.heading-title1)", to: "theme(lineHeight.heading-title0)" },
   { from: "text-heading-title1", to: "text-heading-title0" },
   { from: "font-heading-title1", to: "font-heading-title0" },
 ];
@@ -80,63 +82,63 @@ const elevationTransformations = [
 
 const spacingTransformations = [
   // tailwind space classes
-  { from: /space(-[x|y])?-xxxs/, to: "space$1-50" },
-  { from: /space(-[x|y])?-xxs/, to: "space$1-100" },
-  { from: /space(-[x|y])?-xs/, to: "space$1-200" },
-  { from: /space(-[x|y])?-sm/, to: "space$1-300" },
-  { from: /space(-[x|y])?-md/, to: "space$1-400" },
-  { from: /space(-[x|y])?-lg/, to: "space$1-600" },
-  { from: /space(-[x|y])?-xl/, to: "space$1-800" },
-  { from: /space(-[x|y])?-xxl/, to: "space$1-1000" },
-  { from: /space(-[x|y])?-xxxl/, to: "space$1-[52px]" },
+  { from: /space(-[x|y])?-xxxs\b/, to: "space$1-50" },
+  { from: /space(-[x|y])?-xxs\b/, to: "space$1-100" },
+  { from: /space(-[x|y])?-xs\b/, to: "space$1-200" },
+  { from: /space(-[x|y])?-sm\b/, to: "space$1-300" },
+  { from: /space(-[x|y])?-md\b/, to: "space$1-400" },
+  { from: /space(-[x|y])?-lg\b/, to: "space$1-600" },
+  { from: /space(-[x|y])?-xl\b/, to: "space$1-800" },
+  { from: /space(-[x|y])?-xxl\b/, to: "space$1-1000" },
+  { from: /space(-[x|y])?-xxxl\b/, to: "space$1-1200" },
   // tailwind spacing, inset and translate classes
-  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xxxs/, to: "$1$2-50" },
-  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xxs/, to: "$1$2-100" },
-  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xs/, to: "$1$2-200" },
-  { from: /(p|m)([s|e|t|b|l|r|x|y])?-sm/, to: "$1$2-300" },
-  { from: /(p|m)([s|e|t|b|l|r|x|y])?-md/, to: "$1$2-400" },
-  { from: /(p|m)([s|e|t|b|l|r|x|y])?-lg/, to: "$1$2-600" },
-  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xl/, to: "$1$2-800" },
-  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xxl/, to: "$1$2-1000" },
-  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xxxl/, to: "$1$2-[52px]" },
-  { from: /(inset|gap|translate)(-[x|y])?-xxxs/, to: "$1$2-50" },
-  { from: /(inset|gap|translate)(-[x|y])?-xxs/, to: "$1$2-100" },
-  { from: /(inset|gap|translate)(-[x|y])?-xs/, to: "$1$2-200" },
-  { from: /(inset|gap|translate)(-[x|y])?-sm/, to: "$1$2-300" },
-  { from: /(inset|gap|translate)(-[x|y])?-md/, to: "$1$2-400" },
-  { from: /(inset|gap|translate)(-[x|y])?-lg/, to: "$1$2-600" },
-  { from: /(inset|gap|translate)(-[x|y])?-xl/, to: "$1$2-800" },
-  { from: /(inset|gap|translate)(-[x|y])?-xxl/, to: "$1$2-1000" },
-  { from: /(inset|gap|translate)(-[x|y])?-xxxl/, to: "$1$2-[52px]" },
-  { from: /(top|bottom|left|right|start|end])-xxxs/, to: "$1-50" },
-  { from: /(top|bottom|left|right|start|end)-xxs/, to: "$1-100" },
-  { from: /(top|bottom|left|right|start|end)-xs/, to: "$1-200" },
-  { from: /(top|bottom|left|right|start|end)-sm/, to: "$1-300" },
-  { from: /(top|bottom|left|right|start|end)-md/, to: "$1-400" },
-  { from: /(top|bottom|left|right|start|end)-lg/, to: "$1-600" },
-  { from: /(top|bottom|left|right|start|end)-xl/, to: "$1-800" },
-  { from: /(top|bottom|left|right|start|end)-xxl/, to: "$1-1000" },
-  { from: /(top|bottom|left|right|start|end)-xxxl/, to: "$1-[52px]" },
+  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xxxs\b/, to: "$1$2-50" },
+  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xxs\b/, to: "$1$2-100" },
+  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xs\b/, to: "$1$2-200" },
+  { from: /(p|m)([s|e|t|b|l|r|x|y])?-sm\b/, to: "$1$2-300" },
+  { from: /(p|m)([s|e|t|b|l|r|x|y])?-md\b/, to: "$1$2-400" },
+  { from: /(p|m)([s|e|t|b|l|r|x|y])?-lg\b/, to: "$1$2-600" },
+  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xl\b/, to: "$1$2-800" },
+  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xxl\b/, to: "$1$2-1000" },
+  { from: /(p|m)([s|e|t|b|l|r|x|y])?-xxxl\b/, to: "$1$2-1200" },
+  { from: /(inset|gap|translate)(-[x|y])?-xxxs\b/, to: "$1$2-50" },
+  { from: /(inset|gap|translate)(-[x|y])?-xxs\b/, to: "$1$2-100" },
+  { from: /(inset|gap|translate)(-[x|y])?-xs\b/, to: "$1$2-200" },
+  { from: /(inset|gap|translate)(-[x|y])?-sm\b/, to: "$1$2-300" },
+  { from: /(inset|gap|translate)(-[x|y])?-md\b/, to: "$1$2-400" },
+  { from: /(inset|gap|translate)(-[x|y])?-lg\b/, to: "$1$2-600" },
+  { from: /(inset|gap|translate)(-[x|y])?-xl\b/, to: "$1$2-800" },
+  { from: /(inset|gap|translate)(-[x|y])?-xxl\b/, to: "$1$2-1000" },
+  { from: /(inset|gap|translate)(-[x|y])?-xxxl\b/, to: "$1$2-1200" },
+  { from: /(top|bottom|left|right|start|end])-xxxs\b/, to: "$1-50" },
+  { from: /(top|bottom|left|right|start|end)-xxs\b/, to: "$1-100" },
+  { from: /(top|bottom|left|right|start|end)-xs\b/, to: "$1-200" },
+  { from: /(top|bottom|left|right|start|end)-sm\b/, to: "$1-300" },
+  { from: /(top|bottom|left|right|start|end)-md\b/, to: "$1-400" },
+  { from: /(top|bottom|left|right|start|end)-lg\b/, to: "$1-600" },
+  { from: /(top|bottom|left|right|start|end)-xl\b/, to: "$1-800" },
+  { from: /(top|bottom|left|right|start|end)-xxl\b/, to: "$1-1000" },
+  { from: /(top|bottom|left|right|start|end)-xxxl\b/, to: "$1-1200" },
   // tailwind size classes
-  { from: /(size|w|h)-xxxs/, to: "$1-50" },
-  { from: /(size|w|h)-xxs/, to: "$1-100" },
-  { from: /(size|w|h)-xs/, to: "$1-200" },
-  { from: /(size|w|h)-sm/, to: "$1-300" },
-  { from: /(size|w|h)-md/, to: "$1-400" },
-  { from: /(size|w|h)-lg/, to: "$1-600" },
-  { from: /(size|w|h)-xl/, to: "$1-800" },
-  { from: /(size|w|h)-xxl/, to: "$1-1000" },
-  { from: /(size|w|h)-xxxl/, to: "$1-[52px]" },
+  { from: /(size|w|h)-xxxs\b/, to: "$1-50" },
+  { from: /(size|w|h)-xxs\b/, to: "$1-100" },
+  { from: /(size|w|h)-xs\b/, to: "$1-200" },
+  { from: /(size|w|h)-sm\b/, to: "$1-300" },
+  { from: /(size|w|h)-md\b/, to: "$1-400" },
+  { from: /(size|w|h)-lg\b/, to: "$1-600" },
+  { from: /(size|w|h)-xl\b/, to: "$1-800" },
+  { from: /(size|w|h)-xxl\b/, to: "$1-1000" },
+  { from: /(size|w|h)-xxxl\b/, to: "$1-1200" },
   // tailwind theme access
-  { from: /theme\(spacing.xxxs\)/, to: "theme(spacing.50)" },
-  { from: /theme\(spacing.xxs\)/, to: "theme(spacing.100)" },
-  { from: /theme\(spacing.xs\)/, to: "theme(spacing.200)" },
-  { from: /theme\(spacing.sm\)/, to: "theme(spacing.300)" },
-  { from: /theme\(spacing.md\)/, to: "theme(spacing.400)" },
-  { from: /theme\(spacing.lg\)/, to: "theme(spacing.600)" },
-  { from: /theme\(spacing.xl\)/, to: "theme(spacing.800)" },
-  { from: /theme\(spacing.xxl\)/, to: "theme(spacing.1000)" },
-  { from: /theme\(spacing.xxxl\)/, to: "52px" },
+  { from: /theme\((spacing|space)\.xxxs\)\b/, to: "theme(spacing.50)" },
+  { from: /theme\((spacing|space)\.xxs\)\b/, to: "theme(spacing.100)" },
+  { from: /theme\((spacing|space)\.xs\)\b/, to: "theme(spacing.200)" },
+  { from: /theme\((spacing|space)\.sm\)\b/, to: "theme(spacing.300)" },
+  { from: /theme\((spacing|space)\.md\)\b/, to: "theme(spacing.400)" },
+  { from: /theme\((spacing|space)\.lg\)\b/, to: "theme(spacing.600)" },
+  { from: /theme\((spacing|space)\.xl\)\b/, to: "theme(spacing.800)" },
+  { from: /theme\((spacing|space)\.xxl\)\b/, to: "theme(spacing.1000)" },
+  { from: /theme\((spacing|space)\.xxxl\)\b/, to: "theme(spacing.1200)" },
   // space tokens
   { from: "theme.orbit.spaceXXXSmall", to: "theme.orbit.space50" },
   { from: "theme.orbit.spaceXXSmall", to: "theme.orbit.space100" },
@@ -146,7 +148,7 @@ const spacingTransformations = [
   { from: "theme.orbit.spaceLarge", to: "theme.orbit.space600" },
   { from: "theme.orbit.spaceXLarge", to: "theme.orbit.space800" },
   { from: "theme.orbit.spaceXXLarge", to: "theme.orbit.space1000" },
-  { from: "theme.orbit.spaceXXXLarge", to: "52px" },
+  { from: "theme.orbit.spaceXXXLarge", to: "theme.orbit.space1200" },
   { from: "defaultTokens.spaceXXXSmall", to: "defaultTokens.space50" },
   { from: "defaultTokens.spaceXXSmall", to: "defaultTokens.space100" },
   { from: "defaultTokens.spaceXSmall", to: "defaultTokens.space200" },
@@ -155,7 +157,7 @@ const spacingTransformations = [
   { from: "defaultTokens.spaceLarge", to: "defaultTokens.space600" },
   { from: "defaultTokens.spaceXLarge", to: "defaultTokens.space800" },
   { from: "defaultTokens.spaceXXLarge", to: "defaultTokens.space1000" },
-  { from: "defaultTokens.spaceXXXLarge", to: "52px" },
+  { from: "defaultTokens.spaceXXXLarge", to: "defaultTokens.space1200" },
   // padding / margin / spacing / sideOffset props
   { from: /(spacing|padding|margin)="XXXSmall"/, to: '$1="50"' },
   { from: /(spacing|padding|margin)="XXSmall"/, to: '$1="100"' },