refactor: use design system windicss config #21503
Conversation
|
Thanks for taking the time to open a PR!
|
|
Test summary
Run details
View run in Cypress Dashboard ➡️ Flakiness
This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
||||||||||||||||||||||||||||||||||||||||||||||||||||||
packages/app/package.json
Outdated
| @@ -19,6 +19,7 @@ | |||
| }, | |||
| "dependencies": {}, | |||
| "devDependencies": { | |||
| "@cypress-design/css": "0.1.0", | |||
| "@graphql-typed-document-node/core": "^3.1.0", | |||
There was a problem hiding this comment.
Not directly related but do you think we should consider changing to TailwindCSS at this point for future sustainability? It has way more contributors, and just looking at the repo we have 18 issues (Tailwind) vs 172(Windi).
I feel like Tailwind will likely outlast and be a more sustainability option. I have no idea of the cost of migration - should be small, since Windi is "Tailwind compatible".
I don't see a strong benefit to Windi since Tailwind now has a JIT compiler, which was the main issue Windi solved (speed).
Thoughts?
There was a problem hiding this comment.
Unless there is a compelling reason (bug, needed enhancement), I would prefer to avoid unnecessary changes.
Tailwind is great and really active, but this does not justify yet the potential fixing of the problems.
Among the differences, TailwindCSS is a PostCSS-based plugin instead of being independent in WindiCSS. It means that in WindiCSS the plugin controls the configuration. With TailwindCSS, we would have to export a TailwindCSS config.
There are a few configurations as well that would need to migrate. Colors, safelist, plugins.
elevatebart
changed the title
elevatebart
requested review from
lmiller1990,
JessicaSachs,
flotwig and
ZachJW34
packages/app/package.json
Outdated
| @@ -19,6 +19,7 @@ | |||
| }, | |||
| "dependencies": {}, | |||
| "devDependencies": { | |||
There was a problem hiding this comment.
Just learned that https://github.com/cypress-io/cypress-design exists!
There was a problem hiding this comment.
@elevatebart Update the base branch to be against develop before merging.
|
Hey @elevatebart, is this waiting on anything? :-) |
|
@rachelruderman nope just on a green CI |
…esser/CLOUD-577-spec-list-display-latest-runs-batching * muaz/CLOUD-577-spec-list-display-latest-runs: fix: Update "Request Access" button state after requesting access (ACI) (#22499) feat: Support "Queued" latest run status (#22497) fix: remove ctx.cloud.reset in tests, handle infinite loop in stale results (#22483) chore: add reporter webpack to gulp watch script (#22386) fix: Increase timeout for npm-webpack-dev-server tests (#22489) fix: Time out unmatched prerequests in proxy to avoid leaking memory (#22462) fix: Sort results in findCrossOriginLogs test helper to deterministic (#22481) fix: memory leak caused by storing base64 encoded files recieved by CDP `Network.requestWillBeSent` (#22460) fix: Improve cross-origin cookie handling (#22320) feat: Add button to clear value from search fields (#22202) chore: Add test to verify settings panels are collapsed by default (#22382) fix: process_profiler follow up work for v10 (#22363) chore: Update Chrome (stable) to 103.0.5060.53 (#22441) refactor: use design system windicss config (#21503) chore: update readme logo (#22433) chore: Update Chrome (beta) to 103.0.5060.53 (#22351) chore: updating version (#22432) Trigger Build
User facing changelog
None
Additional details
To share windi colors and plugins between App, Cloud, and marketing website, we wanted to have a single set of windicss plugins. These plugins have been created and delivered on the design system. This is the implementation of those plugins in the app.
A very limited
windi.config.tsfile had to be kept in each project.This contains the color configuration.
Since we do not want to lose the autocompletion of colors using the WindiCSS vscode plugin, we had to rely on this limited
NOTE: the
windi.config.tsfile is never used to configure Windi itself. Only to help the VSCode plugin to find the appropriate custom colors.