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

[jdeichert]

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 👍