refactor: Rename all .css files to .module.css

jdeichert commented 1 month ago

Motivations

This is just me getting ahead of some cool upcoming things.

Storybook 8 replaced its webpack bundler with vite. Vite by default requires CSS Modules to use the .module.css extension. After chatting with Scott regarding the new docs site work, renaming all files seems like something we would want to do... and by doing it now instead of as part of a storybook 8 PR, this ends up reducing the total number of changes to review in that eventual PR.

Note that there are some css files (such as those inside design) that aren't CSS Modules and therefore don't need to be renamed as far as I can tell.

Changes

Changed

Renamed all .css files to .module.css
Renamed all .css.d.ts files to .module.css.d.ts
Updated all imports to use the new extension
Fixed a duplicate file name
- There were 2 files named ColorSwatches.module.css, inside different directories (one was already named .module.css). Storybook doesn't allow this. For that reason, I renamed ‎.storybook/components/ColorSwatches/ColorSwatches.module.css to ‎StorybookColorSwatches.module.css. Naming is hard, so i'm happy to rename this if you have suggestions

Testing

To test this:

Pull this branch
npm install or npm run bootstrap to rebuild everything
npm start to run storybook
Do a quick run through storybook to see if component styles are loading accordingly
Also, test a pre-release against JO locally to see if things look normal

Changes can be tested via Pre-release

Risks to be aware of

Because this is just a rename, and because all stylesheets are imported inside typescript components, we can reasonably trust typescript to throw errors if it can't find those stylesheets. Likewise, the build process would fail for you if it can't find those files.

For that reason, I would keep the QA process lite. If your build is working and typescript isn't complaining, then things should be good 👍

github-actions[bot] commented 1 month ago

Published Pre-release for f293fb093f370292015419168e618f5a2c44b01f with versions:

  - @jobber/components@5.32.1-CLEANUPre-f293fb0.13+f293fb09
  - @jobber/components-native@0.72.2-CLEANUPre-f293fb0.15+f293fb09
  - @jobber/design@0.65.2-CLEANUPre-f293fb0.15+f293fb09

To install the new version(s) for Web run:

npm install @jobber/components@5.32.1-CLEANUPre-f293fb0.13+f293fb09 @jobber/design@0.65.2-CLEANUPre-f293fb0.15+f293fb09

To install the new version(s) for Mobile run:

npm install @jobber/components-native@0.72.2-CLEANUPre-f293fb0.15+f293fb09 @jobber/design@0.65.2-CLEANUPre-f293fb0.15+f293fb09

cloudflare-workers-and-pages[bot] commented 1 month ago

Deploying atlantis with Cloudflare Pages

Latest commit:	`f293fb0`
Status:	✅ Deploy successful!
Preview URL:	https://4d84aedf.atlantis.pages.dev
Branch Preview URL:	https://cleanup-rename-all-css-files.atlantis.pages.dev

View logs

GetJobber / atlantis