refactor: migrate from windi to tailwind

[elevatebart]

Edit by @lmiller1990 WindiCSS (Tailwind clone) is official deprecated, but has been unmaintained for a while now. @elevatebart updated us to use the official Tailwind. We need to review the Launchpad and App to make sure it all still looks correct.

Steps:

• Upgrade Design System items: npx npm-check-updates "/^@cypress-design/*/" -wsu
• follow the instructions to switch from cypress-windi to tailwind
• fix all custom values incompatible with tailwind
  • fix margin and padding classes:(-?)([pm][xyltbr]?)-([\d.]+)(px|em|rem|vh) -> $2-[$1$3$4] from p-16px to p-[16px]
  • position classes: (-?)(left|right|top|bottom)-([\d.]+)(px|em|rem|vh) -> $2-[$1$3$4]
  • text size classes: (text|leading)-([\d.]+)(px|em|rem|vh) -> $1-[$2$3]
    • text-space-([\d.]+)(px|em|rem|vh) -> text-[$1$2]
  • border: (border|outline|divider|ring)(-[xyltrb])?-([\d.]+)(px|em|rem|vh) -> $1$2-[$3$4]
  • dimensions: (min-|max-)?([wh])-([\d.]+)(px|em|rem|vh) -> $1$2-[$3$4]
  • (gap|space)(-[xy])?-(\d+)px -> $1$2-[$3px]
  • rounded(-[tb][lr])?-(\d+)px -> rounded$1-[$2px] // rounded
  • (-?)translate(-[xy])?-(\d+)px -> translate$2-[$1$3px] // translate
• Some classes are different
  • flex-grow, flex-shrink and flex-gap should be grow, shrink and gap
  • underline-indigo-500 should be decoration-indigo-500
  • border-1 should be border
    • border(-[x|y|t|b|l|r|s|e])-1 -> border$1
• remove all grouped variants hover:(bg-indigo-500 underline text-white) does not work with tailwind
• add back the children: variant
• fix some defaults about pseudo class before: (add before:shrink-0)

Fixed redundant styles for component tests

• For packages/app and packages/launchpad, the utility classes were getting loaded twice. Once was when the component support file was importing the frontend-shared component support file, and then again added directly in the project's component support file. This PR just relies on the imports in the frontend-shared component support file.

Monospace font

• Moved the import of the 'Fire Code' monospace font back to the shared.scss file and using the woff2 version versus the ttf version
  • Removed the inclusion of the ttf font in the App.vue files for package/app and package/launchpad

Key differences when using Tailwind vs Windi

• Our Windi implementation applied !important to all the utility classes. Tailwind currently does not do this. This would cause a different precedence when having overlapping styles.
  • Can cause a difference hen two utility classes for the same style were added to a DOM element.
  • In Tailwind, you can add a ! prefix to a utility class to get Tailwind to dynamically add a !important
• In Windi, if you used a dynamic text size (i.e. text-16px vs text-sm), then Windi also included line-height: 1 as part of that style. TailWind does not do this. Instead, Tailwind inherits the line-height for these elements. The majority of differences in the Percy snapshots for this PR that will be introduced are related to this. The snapshots will show slight increases in line height in this case.
• Updating the way that the monospaced font is included

[cypress]

32 flaky tests on run #45907 ↗︎

0

27269

1307

0

32

Details:

Merge branch 'develop' into refactor/use-tailwindcss
Project: cypress	Commit: 3238ec294a
Status: Passed	Duration: 20:51 💡
Started: Apr 28, 2023 11:39 AM	Ended: Apr 28, 2023 12:00 PM

  cypress/e2e/commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-firefox

View Output Video

Test		Artifacts
network stubbing > intercepting request > can delay and throttle a StaticResponse		Output

  cypress/e2e/e2e/origin/commands/assertions.cy.ts • 1 flaky test • 5x-driver-firefox

View Output Video

Test		Artifacts
cy.origin assertions > #consoleProps > .should() and .and()		Output

  cypress/e2e/cypress/cypress.cy.js • 3 flaky tests • 5x-driver-firefox

View Output Video

Test		Artifacts
... > correctly returns currentRetry		Output
... > correctly returns currentRetry		Output
... > correctly returns currentRetry		Output

  src/debug/DebugSpec.cy.tsx • 1 flaky test • app-ct

View Output Video

Test		Artifacts
with multiple test results > mounts correctly for single groups		Output Video

  cypress/e2e/create-from-component.cy.ts • 2 flaky tests • app-e2e

View Output Video

Test		Artifacts
... > runs generated spec		Output Screenshots Video
... > runs generated spec		Output Screenshots Video

The first 5 flaky specs are shown, see all 19 specs in Cypress Cloud.

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[lmiller1990]

We will review this next sprint @elevatebart

[lmiller1990]

Bumping this into our current sprint for review.

[warrensplayer]

In the last 8 commits, please review the following:

• I removed redundant style imports for CT tests. They were already being imported when the component support file from frontend-shared was being imported.
  • packages/app/cypress/component/support/index.ts
  • packages/launchpad/cypress/component/support/index.ts
• I put the WOFF2 version of the Fira Code font back in the scss file and removed the TTF version from the App.vue files in packages/app and packages/launchpad. I am not a font expert, but as I understand it, the WOFF2 font is the more modern font that contains multiple variants. The options in the @font-face definition are ones that I just pulled back in that were there previously. This is the cause for a lot of the Percy differences. The app should now always use this font for the monospace font option. Since it has multiple variants in it, there are now some places where a different font weight was being applied and it will now be honored.
  • packages/app/src/App.vue
  • packages/launchpad/src/App.vue
  • packages/frontend-shared/src/styles/shared.scss

The other changes are

• removing unneeded ! overrides since the styles are now ordered correctly
• Fixing some places that were affected by Windi previously always applying line-height: 1 when a specific test size was specified in pixels
• Inlining some sample code into the packages/frontend-shared/src/components/ShikiHighlight.cy.tsx test

[lmiller1990]

This is looking good to me. Some of the component test specific snapshots have slightly different spacing, but all the ones in E2E looks either very similar, or when the padding is a little different, I think they still look fine.

[marktnoonan]

I'm taking a walk through Percy to approve it, curious about a couple screems:

1. Settings container differences (new snapshots have different overflow - doesn't seem to be a problem, just different)

https://percy.io/cypress-io/cypress/builds/26992166/changed/1501872371?browser=chrome&browser_ids=38&subcategories=unreviewed%2Cchanges_requested&viewLayout=overlay&viewMode=original&width=900&widths=300%2C500%2C580%2C600%2C700%2C800%2C900%2C1000%2C1032%2C1119%2C1200%2C1280

https://percy.io/cypress-io/cypress/builds/26992166/changed/1501872390?browser=chrome&browser_ids=38&subcategories=unreviewed%2Cchanges_requested&viewLayout=overlay&viewMode=new&width=900&widths=300%2C500%2C580%2C600%2C700%2C800%2C900%2C1000%2C1032%2C1119%2C1200%2C1280

2. This icon is upside down now

https://percy.io/cypress-io/cypress/builds/26992166/changed/1501872332?browser=chrome&browser_ids=38&subcategories=unreviewed%2Cchanges_requested&viewLayout=overlay&viewMode=new&width=800&widths=300%2C500%2C580%2C600%2C700%2C800%2C900%2C1000%2C1032%2C1119%2C1200%2C1280

[warrensplayer]

@marktnoonan The overflow is due to the app now consistently using the same monospace font. The WOFF version of the font seems to be slightly wider.

I looked into that upside down icon. I am not sure why it was not upside down before when looking at the code. The code seems to expect that an expandable alert will always use a caret icon that should rotate when opening/closing.

[marktnoonan]

Got it @warrensplayer, I've gone and approved Percy 👍

[cypress-bot]

Released in 12.12.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.12.0, please open a new issue.