Moved Accordion to css modules #398
Conversation
| }) | ||
| } | ||
|
|
||
| const main = async () => { |
There was a problem hiding this comment.
can there be better solution? whether using vite or not
There was a problem hiding this comment.
There is rollup plugin https://www.npmjs.com/package/rollup-plugin-copy and there is vite plugin https://www.npmjs.com/package/vite-plugin-static-copy, rollup plugin is somehow popular, but it's unclear if this plugin is supported right now or will be supported in the future, there is also only one maintainer. So it feels like it's easier to implement similar plugin ourselves than getting yet another dependency.
packages/theme/base/colors.css
Outdated
| @@ -0,0 +1,38 @@ | |||
| :root { | |||
| --lido-color-dark-theme-opacity: 0, | |||
packages/accordion/Accordion.tsx
Outdated
| className={`${styles.arrow} ${ | ||
| isExpanded ? styles.arrowExpanded : '' | ||
| }`} |
There was a problem hiding this comment.
with classnames it will look like cn(styles.arrow, {[styles.arrowExpanded]: isExpanded}), consider bringing it to the project (it will be useful anyway)
There was a problem hiding this comment.
Makes sense, added
Description
Moved one component to CSS Modules so we can take a look how migration is going and if everyone likes it.
Demo
CSS Modules desktop
CSS Modules mobile
CSS Modules dark
Styled Components desktop
Styled Components mobile
Review notes
Moved to SASS instead of CSS, because it looks like it's not possible to reuse media queries with CSS & CSS variables. Trying to use as less SASS syntax as possible, right now it's only used for breakpoints & media queries.
Breakpoints were implemented similarly as https://getbootstrap.com/docs/5.0/layout/breakpoints/
default exports → named exports.
Storybook must import from
'.'so we can make sure, that we are actually exposing from the package everything we show on demo stand.