Remove CSS modules - Githubissues

Steps to Remove CSS Modules and Replace with Linaria

Remove CSS Modules:
- Delete all .module.css files in twenty-front and twenty-ui.
- Remove any imports of CSS modules in JavaScript/TypeScript files.
Install Linaria:
- Add Linaria to your project dependencies:
```
npm install @linaria/core @linaria/react
```

Configure Linaria:

Update your Babel configuration to include Linaria plugin:

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

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>
);

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.
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.
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.
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

Ask Greptile

twentyhq / twenty

Remove CSS modules #5931

Scope & Context

Technical inputs

Steps to Remove CSS Modules and Replace with Linaria

References