Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mainquest: Move css-modules to plain css #1846

Closed
33 tasks done
Tracked by #1045
mimarz opened this issue Apr 18, 2024 · 12 comments
Closed
33 tasks done
Tracked by #1045

Mainquest: Move css-modules to plain css #1846

mimarz opened this issue Apr 18, 2024 · 12 comments
Assignees
Labels
css @digdir/designsystemet-css react @digdir/designsystemet-react

Comments

@mimarz
Copy link
Collaborator

mimarz commented Apr 18, 2024

Sidequest whenever we have some spare time or we are in one of our components that has css defined as a *.module.css move it to separate .css file if it doesn't require to much work.

Actions

  1. Move module.css file to packages/css and rename it to component name in lowercase.
    1. Button.module.css -> button.css
    2. Its important you move and rename the file to retain git file history.
  2. Rename classes to follow a bem naming.
    1. Prefix classes with fds-
    2. Prefix component css variables with --fds-[component-name], like --fds-button-
  3. Update React component to use new classnames instead of css-module object
    1. Replace use of clsx with clsx/lite, i.e. don't use objects for classname string building
  4. Run build to generate new react-css-modules.css file (to remove old css modules for component)

Notes

Components:

Tasks

@mimarz mimarz added react @digdir/designsystemet-react css @digdir/designsystemet-css labels Apr 18, 2024
@mimarz
Copy link
Collaborator Author

mimarz commented Apr 18, 2024

Do we want to make a separate issue for each component or just take it as we go? @Barsnes

@poi33
Copy link
Collaborator

poi33 commented Apr 18, 2024

I'll try to complete this quest as soon as I have some time 🗡️🛡️

@Barsnes
Copy link
Member

Barsnes commented Apr 18, 2024

Do we want to make a separate issue for each component or just take it as we go? @Barsnes

I think making a separate issue for each component is a bit overkill.
I suggest we do it as we go, and if we forget, it's no big deal.

@mimarz
Copy link
Collaborator Author

mimarz commented Apr 18, 2024

Do we want to make a separate issue for each component or just take it as we go? @Barsnes

I think making a separate issue for each component is a bit overkill. I suggest we do it as we go, and if we forget, it's no big deal.

Yeah, thinking the same, its just internal refactors anyways.

@mimarz mimarz moved this from 🔵 Inbox to 📄 Todo in Team Design System Apr 18, 2024
@Barsnes
Copy link
Member

Barsnes commented Apr 19, 2024

After this we can also remove postcss-layers.js - which is then not needed anymore

@poi33
Copy link
Collaborator

poi33 commented Apr 23, 2024

Added a list for to keep track of all the module files

  • Updated to tasklist

@mimarz
Copy link
Collaborator Author

mimarz commented Apr 23, 2024

Nice! @poi33 I updated the description with tasklist for each component we can check off when completed:)

@poi33
Copy link
Collaborator

poi33 commented Apr 23, 2024

Much easier👍 Thanks

@mimarz
Copy link
Collaborator Author

mimarz commented Apr 23, 2024

Much easier👍 Thanks

No problem! Are you allowed to check of the tasks or create issues from them?

Just trying to figure out what permissions contributors have 🤔

image

@poi33
Copy link
Collaborator

poi33 commented Apr 23, 2024

No 😿, but one of you need to review the pull request for it and can mark it done that way. 🤷

poi33 added a commit to poi33/designsystemet that referenced this issue Apr 23, 2024
poi33 added a commit to poi33/designsystemet that referenced this issue Apr 25, 2024
poi33 added a commit to poi33/designsystemet that referenced this issue Apr 25, 2024
poi33 added a commit to poi33/designsystemet that referenced this issue Apr 25, 2024
@mimarz mimarz moved this from 📄 Todo to 🏗 In progress in Team Design System Apr 29, 2024
@mimarz
Copy link
Collaborator Author

mimarz commented Apr 29, 2024

We have prioritised this to Main quest!

Due to planned changes in #1727 which will result in a lot of changes for our css, its best to do this first to avoid a heap of conflicts.

So whoever has the time, create a draft PR for component x, check it in the list and get going!

@mimarz mimarz changed the title Sidequest: Move css-modules to plain css Mainquest: Move css-modules to plain css Apr 29, 2024
mimarz added a commit that referenced this issue May 6, 2024
@mimarz
Copy link
Collaborator Author

mimarz commented May 14, 2024

Finished!

Great work! @poi33 @Barsnes

success-great-job

@mimarz mimarz closed this as completed May 14, 2024
@github-project-automation github-project-automation bot moved this from 🏗 In progress to ✅ Done in Team Design System May 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css @digdir/designsystemet-css react @digdir/designsystemet-react
Projects
Archived in project
Development

No branches or pull requests

3 participants