Remove CSS modules

[lucasbordeau]

Scope & Context

CSS Modules in twenty-front and twenty-ui due to tests during performance optimization.

Technical inputs

Remove CSS modules and associated logic in twenty-front and twenty-ui and replace by Linaria.

[greptile-apps]

Steps to Remove CSS Modules and Replace with Linaria

1. Remove CSS Modules:

   • Delete all .module.css files in twenty-front and twenty-ui.
   • Remove any imports of CSS modules in JavaScript/TypeScript files.

2. Install Linaria:

   • Add Linaria to your project dependencies:

     npm install @linaria/core @linaria/react

3. Configure Linaria:

   • Update your Babel configuration to include Linaria plugin:

     {
       "presets": ["@babel/preset-env", "@babel/preset-react"],
       "plugins": ["@linaria"]
     }

4. Convert CSS Modules to Linaria:

   • Replace CSS module usage with Linaria styled components.
   • Example conversion:

     // Before (CSS Module)
     import styles from './Button.module.css';
     
     const Button = () => (
       <button className={styles.button}>Click me</button>
     );
     
     // After (Linaria)
     import { styled } from '@linaria/react';
     
     const Button = styled.button`
       background-color: blue;
       color: white;
       padding: 10px;
     `;
     
     const MyButton = () => (
       <Button>Click me</Button>
     );

5. Update Imports and Styles:

   • Ensure all components in twenty-front and twenty-ui are updated to use Linaria for styling.
   • Check for any remaining CSS module references and replace them with Linaria styled components.

6. Refactor Theme Assets:

   • Update any theme-related assets in /packages/twenty-front/src/modules/ui/theme/assets to use Linaria for styling.
   • Ensure variables and styles are defined using Linaria's css and styled functions.

7. Update Storybook Stories:

   • Ensure all Storybook stories in /packages/twenty-front/src/modules/ui/input/components/__stories__ and other directories are updated to reflect the changes from CSS modules to Linaria.

8. Commit Changes:

   • Commit the changes with a meaningful commit message, e.g., refactor: replace CSS modules with Linaria in twenty-front and twenty-ui.

References

/packages/twenty-front/src/index.css
/packages/twenty-front/src/modules/ui/theme/assets
/packages/twenty-front/src/modules/ui/input/components/stories
/packages/twenty-front/src/modules/ui/navigation/link
/packages/twenty-front/src/modules/ui/display/color
/packages/twenty-front/src/modules/ui/display/tag
/packages/twenty-front/src/modules/ui/layout
/packages/twenty-front/src/modules/ui/navigation
/packages/twenty-front/src/modules/ui/navigation/link/components
/packages/twenty-front/src/modules/ui/display/color/components

Ask Greptile