Scope & Context CSS Modules in twenty-front and twenty-ui due

Remove CSS modules about twenty HOT 1 OPEN

lucasbordeau commented on August 18, 2024 1

Remove CSS modules

from twenty.

Comments (1)

greptile-apps commented on August 18, 2024

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.