refactor: migrate from windi to tailwind (#26516)

Co-authored-by: Lachlan Miller <[email protected]> Co-authored-by: Stokes Player <[email protected]> Co-authored-by: astone123 <[email protected]> Co-authored-by: Stokes Player <[email protected]>
cypress-io · Apr 28, 2023 · 8f75b13 · 8f75b13 · cypress-bot · Apr 28, 2023
1 parent 296342c
commit 8f75b13
Show file tree

Hide file tree

Showing 288 changed files with 1,469 additions and 1,383 deletions.
diff --git a/.vscode/cspell.json b/.vscode/cspell.json
@@ -59,8 +59,7 @@
         "viewports",
         "vite",
         "vitejs",
-        "vueuse",
-        "Windi"
+        "vueuse"
     ],
     "ignoreWords": [],
     "import": []

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -22,9 +22,9 @@
     // Description: Adds syntax highlighting for all gql tags.
     "apollographql.vscode-apollo",
 
-    // Name: WindiCSS Intellisense
-    // Description: Automatically sorts your WindiCSS classes.
-    "voorjaar.windicss-intellisense",
+    // Name: TailwindCSS Intellisense
+    // Description: Automatically sorts your TailwindCSS classes.
+    "bradlc.vscode-tailwindcss",
 
     // Name: Volar
     // Description: Language server for Vue. Required for any syntax highlighting in Vue files.

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -23,9 +23,6 @@
   },
   "typescript.tsdk": "node_modules/typescript/lib",
 
-  // A flag that controls whether or not Windi CSS classes will be sorted on save on save.
-  "windicss.sortOnSave": true,
-
   // Support autocompletion and preview of strings.
   // Additionally, support extraction of hardcoded strings into key-values.
   "i18n-ally.localesPaths": "packages/frontend-shared/src/locales",

diff --git a/packages/app/cypress/component/support/index.ts b/packages/app/cypress/component/support/index.ts
@@ -18,8 +18,6 @@ import { registerMountFn } from '@packages/frontend-shared/cypress/support/commo
 
 // Import commands.js using ES2015 syntax:
 
-import 'virtual:windi.css'
-import '../../../src/main.scss'
 import '@iconify/iconify'
 import { createRouter } from '../../../src/router/router'
 import { createPinia } from '../../../src/store'

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -20,8 +20,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-icon": "0.18.1",
-    "@cypress-design/vue-statusicon": "0.2.4",
+    "@cypress-design/vue-icon": "0.20.0",
+    "@cypress-design/vue-statusicon": "0.3.0",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",

diff --git a/packages/app/postcss.config.js b/packages/app/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue
@@ -19,17 +19,3 @@ import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 import LoginConnectModals from '@cy/gql-components/LoginConnectModals.vue'
 import CloudViewerAndProject from '@packages/frontend-shared/src/gql-components/CloudViewerAndProject.vue'
 </script>
-
-<style lang="scss">
-html,
-body,
-#app {
-  @apply bg-white h-full;
-}
-
-@font-face {
-  font-family: "Fira Code";
-  src: local("Fira Code"),
-   url('../../frontend-shared/src/assets/fonts/FiraCode-VariableFont_wght.ttf') format("truetype");
-}
-</style>
diff --git a/packages/app/src/components/FileMatch.vue b/packages/app/src/components/FileMatch.vue
@@ -28,23 +28,23 @@
 
 <template>
   <div>
-    <div class="rounded border-1 h-40px w-full inline-flex items-center hocus-default focus-within-default truncate">
+    <div class="rounded border h-[40px] w-full inline-flex items-center hocus-default focus-within-default truncate">
       <FileMatchButton
         :expanded="expanded"
         @click="toggleExpanded()"
       >
         <span v-if="!expanded">{{ localExtensionPattern }}</span>
       </FileMatchButton>
-      <div class="flex-grow min-w-min inline-flex items-center group">
+      <div class="grow min-w-min inline-flex items-center group">
         <i-cy-magnifying-glass_x16
           v-if="!expanded"
-          class="mr-8px ml-12px inline-block icon-light-gray-50 icon-dark-gray-500 group-focus-within:icon-light-indigo-50 group-focus-within:icon-dark-indigo-400"
+          class="mr-[8px] ml-[12px] inline-block icon-light-gray-50 icon-dark-gray-500 group-focus-within:icon-light-indigo-50 group-focus-within:icon-dark-indigo-400"
         />
 
         <FileMatchInput
           v-if="expanded"
           v-model="localExtensionPattern"
-          class="ml-12px"
+          class="ml-[12px]"
           :placeholder="t('components.fileSearch.byExtensionInput')"
         />
         <FileMatchInput
@@ -56,7 +56,7 @@
       </div>
       <slot name="matches">
         <FileMatchIndicator
-          class="mr-8px truncate"
+          class="mr-[8px] truncate"
           data-cy="file-match-indicator"
         >
           {{ indicatorText }}
@@ -65,11 +65,11 @@
     </div>
 
     <div
-      class="rounded border-1 h-40px mt-8px w-full inline-flex items-center hocus-default focus-within-default"
+      class="rounded border h-[40px] mt-[8px] w-full inline-flex items-center hocus-default focus-within-default"
       :class="{ 'hidden' : !expanded }"
     >
-      <div class="flex-grow inline-flex items-center group">
-        <i-cy-magnifying-glass_x16 class="mr-8px ml-12px inline-block icon-light-gray-50 icon-dark-gray-500 group-focus-within:icon-light-indigo-50 group-focus-within:icon-dark-indigo-400" />
+      <div class="grow inline-flex items-center group">
+        <i-cy-magnifying-glass_x16 class="mr-[8px] ml-[12px] inline-block icon-light-gray-50 icon-dark-gray-500 group-focus-within:icon-light-indigo-50 group-focus-within:icon-dark-indigo-400" />
         <FileMatchInput
           v-model="localPattern"
           :placeholder="t('components.fileSearch.byFilenameInput')"

diff --git a/packages/app/src/components/FileMatchButton.vue b/packages/app/src/components/FileMatchButton.vue
@@ -1,10 +1,10 @@
 <template>
   <button
     data-cy="file-match-button"
-    class="inline-flex items-center h-full text-gray-700 transition duration-150 rounded-l outline-none group bg-gray-50 border-r-gray-100 border-r-1 hocus:bg-indigo-50 hocus:border-r-indigo-300 hocus:text-indigo-500 px-12px"
+    class="inline-flex items-center h-full text-gray-700 transition duration-150 rounded-l outline-none group bg-gray-50 border-r-gray-100 border-r hocus:bg-indigo-50 hocus:border-r-indigo-300 hocus:text-indigo-500 px-[12px]"
   >
     <i-cy-chevron-right-small_x16
-      class="transition duration-150 transform min-w-16px min-h-16px icon-dark-gray-400 group-hocus:icon-dark-indigo-400"
+      class="transition duration-150 transform min-w-[16px] min-h-[16px] icon-dark-gray-400 group-hocus:icon-dark-indigo-400"
       :class="{
         'rotate-90': expanded
       }"

diff --git a/packages/app/src/components/FileMatchIndicator.vue b/packages/app/src/components/FileMatchIndicator.vue
@@ -4,7 +4,7 @@
     data-cy="file-match-indicator"
   >
     <span
-      class="rounded font-medium  h-24px text-center px-8px  truncate select-none"
+      class="rounded font-medium  h-[24px] text-center px-[8px]  truncate select-none"
       :class="color"
     >
       <slot /></span>

diff --git a/packages/app/src/components/FileMatchInput.vue b/packages/app/src/components/FileMatchInput.vue
@@ -1,7 +1,7 @@
 <template>
   <input
     v-model="localModelValue"
-    class="flex-grow p-0 text-gray-700 placeholder-gray-400 border-transparent outline-none placeholder-shown:overflow-ellipsis placeholder-shown:truncate hocus:border-transparent mr-8px"
+    class="grow p-0 text-gray-700 placeholder-gray-400 border-transparent outline-none placeholder-shown:overflow-ellipsis placeholder-shown:truncate hocus:border-transparent mr-[8px]"
     type="search"
     autocomplete="off"
   >

diff --git a/packages/app/src/components/SpecPatternModal.vue b/packages/app/src/components/SpecPatternModal.vue
@@ -9,15 +9,15 @@
     @update:model-value="emits('close')"
   >
     <div
-      class="w-full p-24px sm:min-w-640px"
+      class="w-full p-[24px] sm:min-w-[640px]"
     >
       <SpecPatterns
         :gql="props.gql"
         class="border-px rounded border-gray-100"
       />
     </div>
     <StandardModalFooter
-      class="flex gap-16px items-center"
+      class="flex gap-[16px] items-center"
     >
       <OpenConfigFileInIDE
         v-slot="{onClick}"

diff --git a/packages/app/src/components/SpecPatterns.cy.tsx b/packages/app/src/components/SpecPatterns.cy.tsx
@@ -4,7 +4,7 @@ import { SpecPatternsFragmentDoc } from '../generated/graphql-test'
 describe('<SpecPatterns />', () => {
   it('renders spec patterns', () => {
     cy.mountFragment(SpecPatternsFragmentDoc, {
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql} /></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql} /></div>,
     })
 
     cy.get('[data-cy="spec-pattern"]').contains('cypress/e2e/**/*.cy.{js,jsx,ts,tsx}')
@@ -23,7 +23,7 @@ describe('<SpecPatterns />', () => {
         res.currentTestingType = 'component'
         res.specs = res.specs.slice(0, 50) || []
       },
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql} /></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql} /></div>,
     })
 
     cy.get('[data-cy="spec-pattern"]').contains('**/*.cy.{js,jsx,ts,tsx}')
@@ -40,7 +40,7 @@ describe('<SpecPatterns />', () => {
         res.currentTestingType = 'component'
         res.specs = res.specs.slice(0, 50) || []
       },
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql} variant='info' /></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql} variant='info' /></div>,
     })
 
     cy.get('[data-cy="spec-pattern"]').contains('**/*.cy.{js,jsx,ts,tsx}')
@@ -57,7 +57,7 @@ describe('<SpecPatterns />', () => {
         res.currentTestingType = 'component'
         res.specs = []
       },
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql}/></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql}/></div>,
     })
 
     cy.get('[data-cy="file-match-indicator"]').contains('No matches')
@@ -73,7 +73,7 @@ describe('<SpecPatterns />', () => {
         res.currentTestingType = 'component'
         res.specs = res.specs.slice(0, 1) || []
       },
-      render: (gql) => <div class="p-16px"><SpecPatterns gql={gql}/></div>,
+      render: (gql) => <div class="p-[16px]"><SpecPatterns gql={gql}/></div>,
     })
 
     cy.get('[data-cy="file-match-indicator"]').contains('1 match')

diff --git a/packages/app/src/components/SpecPatterns.vue b/packages/app/src/components/SpecPatterns.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="rounded border-gray-100 border-1px w-full">
-    <div class="flex p-16px items-center justify-between">
+  <div class="rounded border-gray-100 border-[1px] w-full">
+    <div class="flex p-[16px] items-center justify-between">
       <FileMatchIndicator :variant="props.variant">
         <span v-if="props.variant === 'info'">specPattern</span>
         <span v-else>{{ t('components.specPattern.matches', props.gql.specs.length) }}</span>
@@ -10,7 +10,7 @@
         :gql="props.gql"
       >
         <button
-          class="flex outline-transparent text-indigo-500 gap-8px items-center group"
+          class="flex outline-transparent text-indigo-500 gap-[8px] items-center group"
           @click="onClick"
         >
           <i-cy-document-text_x16 class="icon-light-gray-100 icon-dark-gray-500" />
@@ -19,11 +19,11 @@
       </OpenConfigFileInIDE>
     </div>
 
-    <div class="divide-gray-200 divide-y-1 bg-gray-50 px-16px">
+    <div class="divide-gray-200 divide-y bg-gray-50 px-[16px]">
       <code
         v-for="pattern in specPatterns"
         :key="pattern"
-        class="flex py-8px text-gray-600 text-size-14px leading-24px block"
+        class="flex py-[8px] text-gray-600 text-[14px] leading-[24px] block"
         data-cy="spec-pattern"
       >
         {{ pattern }}

diff --git a/packages/app/src/debug/DebugArtifactLink.cy.tsx b/packages/app/src/debug/DebugArtifactLink.cy.tsx
@@ -11,7 +11,7 @@ describe('<DebugArtifacts />', () => {
   it('mounts correctly, provides expected tooltip content, and emits correct event', () => {
     artifactMapping.forEach((artifact) => {
       cy.mount(() => (
-        <DebugArtifactLink class="m-24px inline-flex" icon={artifact.icon} popperText={artifact.text} url={artifact.url}/>
+        <DebugArtifactLink class="m-[24px] inline-flex" icon={artifact.icon} popperText={artifact.text} url={artifact.url}/>
       ))
 
       cy.findByTestId(`artifact-for-${artifact.icon}`).should('have.length', 1)
@@ -26,7 +26,7 @@ describe('<DebugArtifacts />', () => {
 
   it('mounts correctly for all icons together and has correct URLs', () => {
     cy.mount(() => (
-      <div class="flex flex-grow space-x-4.5 pt-24px justify-center" data-cy='debug-artifacts-all'>
+      <div class="flex grow space-x-4.5 pt-[24px] justify-center" data-cy='debug-artifacts-all'>
         <DebugArtifactLink icon={'TERMINAL_LOG'} popperText={'View Log'} url={'www.cypress.io'}/>
         <DebugArtifactLink icon={'IMAGE_SCREENSHOT'} popperText={'View Screenshot'} url={'cloud.cypress.io'}/>
         <DebugArtifactLink icon={'PLAY'} popperText={'View Video'} url={'www.cypress.io'}/>

diff --git a/packages/app/src/debug/DebugArtifactLink.vue b/packages/app/src/debug/DebugArtifactLink.vue
@@ -5,7 +5,7 @@
     :distance="8"
   >
     <ExternalLink
-      class="flex h-24px w-24px justify-center items-center hocus:rounded-md group hocus:border-1px hocus:border-indigo-500"
+      class="flex h-[24px] w-[24px] justify-center items-center hocus:rounded-md group hocus:border-[1px] hocus:border-indigo-500"
       :data-cy="`${icon}-button`"
       :href="props.url || '#'"
       :use-default-hocus="true"

diff --git a/packages/app/src/debug/DebugCancelledAlert.vue b/packages/app/src/debug/DebugCancelledAlert.vue
@@ -3,23 +3,23 @@
     :title="t('debugPage.manuallyCancelled')"
     status="warning"
     :icon="ErrorOutlineIcon"
-    class="flex flex-col mb-24px w-full"
+    class="flex flex-col mb-[24px] w-full"
   >
     <div class="flex items-center">
       <div>{{ t('debugPage.specsSkipped', {n: totalSpecs, totalSkippedSpecs}) }}</div>
       <template v-if="cancellation.cancelledBy?.email && cancellation.cancelledBy.fullName">
-        <div class="rounded-full font-semibold bg-orange-500 h-3px mx-10px w-3px" />
+        <div class="rounded-full font-semibold bg-orange-500 h-[3px] mx-[10px] w-[3px]" />
         <div class="flex items-center">
           <UserAvatar
             :email="cancellation.cancelledBy.email"
-            class="h-20px mr-7px w-20px"
+            class="h-[20px] mr-[7px] w-[20px]"
             data-cy="cancelled-by-user-avatar"
           />
           <div>{{ cancellation.cancelledBy.fullName }}</div>
         </div>
       </template>
       <template v-if="cancellation.cancelledAt">
-        <div class="rounded-full font-semibold bg-orange-500 h-3px mx-10px w-3px" />
+        <div class="rounded-full font-semibold bg-orange-500 h-[3px] mx-[10px] w-[3px]" />
         <div>
           {{ dayjs(cancellation.cancelledAt).local().format('MMM D, YYYY h:mm A') }}
         </div>

diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -126,7 +126,7 @@ describe('<DebugContainer />', () => {
         },
         render: (gqlVal) => {
           return (
-            <div class="h-850px">
+            <div class="h-[850px]">
               <DebugContainer
                 gql={gqlVal}
               />
@@ -256,7 +256,7 @@ describe('<DebugContainer />', () => {
           }
         },
         render: (gqlVal) =>
-          <div class="h-850px">
+          <div class="h-[850px]">
             <DebugContainer
               gql={gqlVal}
             />

diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
@@ -22,12 +22,12 @@
       />
       <div
         v-else-if="run?.status"
-        class="flex flex-col p-1.5rem gap-24px"
+        class="flex flex-col p-[1.5rem] gap-[24px]"
         :class="{'h-full': shouldBeFullHeight}"
       >
         <DebugRunNavigation
           v-if="allRuns && run.runNumber"
-          class="flex-shrink-0"
+          class="shrink-0"
           :runs="allRuns"
           :current-run-number="run.runNumber"
           :current-commit-info="currentCommitInfo"
@@ -42,13 +42,13 @@
           <DebugTestingProgress
             v-if="isRunning && run.id"
             :run-id="run.id"
-            class="flex-shrink-0"
+            class="shrink-0"
           />
         </TransitionQuickFade>
 
         <DebugPendingRunSplash
           v-if="shouldShowPendingRunSplash"
-          class="flex-grow"
+          class="grow"
           :is-completion-scheduled="isScheduledToComplete"
         />
 

diff --git a/packages/app/src/debug/DebugErrored.vue b/packages/app/src/debug/DebugErrored.vue
@@ -3,18 +3,18 @@
     :title="t('debugPage.incomplete')"
     status="warning"
     :icon="ErrorOutlineIcon"
-    class="flex flex-col mb-24px w-full"
+    class="flex flex-col mb-[24px] w-full"
   >
-    <div class="ml-5px">
+    <div class="ml-[5px]">
       <ul
         v-for="(error, index) in errors"
         :key="index"
-        class="list-disc ml-25px"
+        class="list-disc ml-[25px]"
       >
         <li><pre>{{ error }}</pre></li>
       </ul>
     </div>
-    <div class="mt-20px">
+    <div class="mt-[20px]">
       {{ t('debugPage.specsSkipped', {n: totalSpecs, totalSkippedSpecs}) }}
     </div>
   </Alert>