Importing css doesn't work with Sass
derochedesign opened this issue · 11 comments
Not sure if this is an issue with plyr itself or with plyr-react. The styles in the plyr repo seem much different than those here (they use scss, for starters).
Describe the bug
When importing import "plyr-react/plyr.css"; no styles are imported. When copy/pasting the css rules into my own styles, our sass loader finds an error with this specific rule: margin-right: calc(-7px - -2); (which is inside of .plyr__menu__container .plyr__menu__value).
When I switch this to margin-right: calc(-7px - -2px); the styles load properly. (I'm not really even sure what this calc is trying to do)
To Reproduce
Bring the plyr styles into a project with sass loader.
Desktop:
- OS: macOS Monterey
- Browser: Firefox 107
Using plyr-react v5.1.0
Hey @derochedesign, Thanks for the report
There is a closed issue in the latest release of the plyr about calc and Dart Sass
https://github.com/sampotts/plyr/pull/2519/files
@chintan9 we must need to update the plyr version to ^3.7.3 and publish a newer version to fix this issue
@realamirhe I will do it
Hey all, just for some guidance, is this a fix we could expect in the next week or so? Or is it more like a month away? No issue either way, just looking to plan my work around it.
hey @derochedesign, in case @chintan9 miss your message, I guess it won't take more than a week. he occasionally publishes the latest version changes within his weekend.
@realamirhe I published new version 5.1.1 .
Please test it @derochedesign
The sass loader error is gone now 👍
Looks like the css as side effect issue is also affecting me so i'll wait on that to be merged (#963). Thanks for the quick work!
Hey @derochedesign
could you explain how CSS side effect affect your project, also it would be appreciated to comment on the following comment
Hey @derochedesign
could you explain how CSS side effect affect your project, also it would be appreciated to comment on the following comment
Sorry for the delay; I don't actually know why, I just saw that my issues were the same as described in that issue and so I tried setting css as a side effect and it worked after that. I don't know how or why, but it just worked.
Try to make another issue for css side effect @derochedesign, please 😊