fix(typography): replace classes with breakpoints

Author: KaelWD

src/helpers.ts

@@ -228,7 +228,7 @@ export function findClassNodes (ast: AST.VDocumentFragment, utils: CodemodPlugin
     })
   }
 
-  return results
+  return { results, matchingRegexp: new RegExp(matchingRegexp, 'g') }
 }
 
 export function removeDotMember (ref: VueAST.ESLintIdentifier, name: string) {

src/plugins/v4/elevation.ts

@@ -51,7 +51,6 @@ const elevationComponents = new Set([
 const mapping = [0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5]
 
 const elevationMatch = String.raw`elevation-(\d{1,2})`
-const elevationRegexp = new RegExp(String.raw`(^|\s)${elevationMatch}(?=$|\s)`, 'g')
 
 export const v4ElevationPlugin: CodemodPlugin = {
   type: 'codemod',
@@ -61,13 +60,13 @@ export const v4ElevationPlugin: CodemodPlugin = {
     let count = 0
 
     // Match classes
-    const found = findClassNodes(sfcAST, utils, [elevationMatch])
-    for (const node of found) {
+    const { results, matchingRegexp } = findClassNodes(sfcAST, utils, [elevationMatch])
+    for (const node of results) {
       if (node.type === 'Identifier') {
-        node.name = node.name.replaceAll(elevationRegexp, (_, s, n) => `${s}elevation-${mapping[Number(n)]}`)
+        node.name = node.name.replaceAll(matchingRegexp, (_, s, n) => `${s}elevation-${mapping[Number(n)]}`)
         count++
       } else if (typeof node.value === 'string') {
-        node.value = node.value.replaceAll(elevationRegexp, (_, s, n) => `${s}elevation-${mapping[Number(n)]}`)
+        node.value = node.value.replaceAll(matchingRegexp, (_, s, n) => `${s}elevation-${mapping[Number(n)]}`)
         count++
       }
     }

src/plugins/v4/typography.spec.ts

@@ -29,3 +29,23 @@ it('replaces classes', () => {
     "
   `)
 })
+
+it('replaces classes with breakpoints', () => {
+  const input = `
+<template>
+  <div class="text-h1" />
+  <div class="text-md-h1" />
+  <div :class="{ 'text-md-center': true }" />
+</template>
+`
+
+  expect(transform(input, 'file.vue', [v4TypographyPlugin]).code).toMatchInlineSnapshot(`
+    "
+    <template>
+      <div class="text-display-large" />
+      <div class="text-md-display-large" />
+      <div :class="{ 'text-md-center': true }" />
+    </template>
+    "
+  `)
+})

src/plugins/v4/typography.ts

@@ -1,37 +1,38 @@
 import type { CodemodPlugin } from 'vue-metamorph'
 import { findClassNodes } from '../../helpers'
 
+const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const
 const replacements: Record<string, string> = {
-  'text-h1': 'text-display-large',
-  'text-h2': 'text-display-medium',
-  'text-h3': 'text-display-small',
-  'text-h4': 'text-headline-large',
-  'text-h5': 'text-headline-medium',
-  'text-h6': 'text-headline-small',
-  'text-subtitle-1': 'text-body-large',
-  'text-subtitle-2': 'text-label-large',
-  'text-body-1': 'text-body-large',
-  'text-body-2': 'text-body-medium',
-  'text-caption': 'text-body-small',
-  'text-button': 'text-label-large',
-  'text-overline': 'text-label-small',
+  'h1': '-display-large',
+  'h2': '-display-medium',
+  'h3': '-display-small',
+  'h4': '-headline-large',
+  'h5': '-headline-medium',
+  'h6': '-headline-small',
+  'subtitle-1': '-body-large',
+  'subtitle-2': '-label-large',
+  'body-1': '-body-large',
+  'body-2': '-body-medium',
+  'caption': '-body-small',
+  'button': '-label-large',
+  'overline': '-label-small',
 }
 
-const matchingRegexp = new RegExp(String.raw`(^|\s)(${Object.keys(replacements).join('|')})(?=$|\s)`, 'g')
+const matcher = String.raw`text(-(?:${breakpoints.join('|')}))?-(${Object.keys(replacements).join('|')})`
 
 export const v4TypographyPlugin: CodemodPlugin = {
   type: 'codemod',
   name: 'vuetify-4-typography',
   transform ({ sfcAST, utils }) {
     if (!sfcAST) return 0
     let count = 0
-    const found = findClassNodes(sfcAST, utils, Object.keys(replacements))
-    for (const node of found) {
+    const { results, matchingRegexp } = findClassNodes(sfcAST, utils, [matcher])
+    for (const node of results) {
       if (node.type === 'Identifier') {
-        node.name = node.name.replaceAll(matchingRegexp, (_, s, m) => `${s}${replacements[m]}`)
+        node.name = node.name.replaceAll(matchingRegexp, (_, s, b, m) => `${s}text${b || ''}${replacements[m]}`)
         count++
       } else if (typeof node.value === 'string') {
-        node.value = node.value.replaceAll(matchingRegexp, (_, s, m) => `${s}${replacements[m]}`)
+        node.value = node.value.replaceAll(matchingRegexp, (_, s, b, m) => `${s}text${b || ''}${replacements[m]}`)
         count++
       }
     }