Comments (1)
Steps to Remove CSS Modules and Replace with Linaria
-
Remove CSS Modules:
- Delete all
.module.css
files intwenty-front
andtwenty-ui
. - Remove any imports of CSS modules in JavaScript/TypeScript files.
- Delete all
-
Install Linaria:
- Add Linaria to your project dependencies:
npm install @linaria/core @linaria/react
- Add Linaria to your project dependencies:
-
Configure Linaria:
- Update your Babel configuration to include Linaria plugin:
{ "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": ["@linaria"] }
- Update your Babel configuration to include Linaria plugin:
-
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
andtwenty-ui
are updated to use Linaria for styling. - Check for any remaining CSS module references and replace them with Linaria styled components.
- Ensure all components in
-
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
andstyled
functions.
- Update any theme-related assets in
-
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.
- Ensure all Storybook stories in
-
Commit Changes:
- Commit the changes with a meaningful commit message, e.g.,
refactor: replace CSS modules with Linaria in twenty-front and twenty-ui
.
- Commit the changes with a meaningful commit message, e.g.,
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
from twenty.
Related Issues (20)
- Indicator for hidden columns
- Existing user of one workspace doesn't have transferred data when invited to another workspace HOT 1
- Demo link not working
- Field "body" on Create note and task API creates error HOT 2
- Cache related error after upgrading from 0.22.0 to 0.23.1 HOT 1
- Change defaultHomePagePath from /objects/companies to last visited page HOT 8
- Ex: In DarkMode, a blank square appears in bottom right corner while scrolling HOT 2
- Modify event emitter to emit an array of events
- In Search, redirect 'Create Task' doesn't work HOT 1
- After creating new object or clicking 'c', global redirect shortcuts don't work
- Visualisation of relations between objects doesn't work
- Creating empty objects
- Editing empty name of Company HOT 2
- Try WebPack on twenty-front
- Create an e2e test for login HOT 1
- E2E testing should be able to query the DB to work on actual data and not hard coded mocks. HOT 1
- No login page after changes introduced in #6621
- REST API returns 500 error code when request is sent with wrong key
- Introduction to E2E Playwright testing HOT 2
- Update AWS SDK to v3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twenty.