Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

react library with scss modules support #63

Closed
daniele-zurico opened this issue May 1, 2019 · 6 comments
Closed

react library with scss modules support #63

daniele-zurico opened this issue May 1, 2019 · 6 comments
Labels
kind: feature New feature or request scope: integration Related to an integration, not necessarily to core (but could influence core) solution: outdated This is not up-to-date with the current version

Comments

@daniele-zurico
Copy link

Current Behavior

Is not possible to use it with scss and module

Desired Behavior

Be able to use it as CRA

scss file: helloWorld.module.scss

ts: import style from "./helloWorld.module.scss"

Suggested Solution

Have a look on CRA and see how it works

Who does this impact? Who is this for?

All the developer that want to create a library with multiple modules and have support of scss
@jaredpalmer
Copy link
Owner

I don’t use css modules, so I’m not familiar with what best practices are for including/excluding them in a 3rd party component that eventually gets consumed by something like CRA or Parcel that actually does css processing. For example, Reach UI, has a vanilla CSS file that you eventually import into your app. Again, I’m open to this, I just don’t understand how it should be done

cc @markdalgleish

@Guria
Copy link

Guria commented May 1, 2019

Just a css support only, even without preprocessors and modules, opens an abyss of new questions.

Should import of css be kept in transformed files or they should just used to collect style dependencies to extract one css file and disappear in transformed result? The same about scss. Additionally it could be left untouched or transformed to css import.

What about variables / mixins? Should they evaluated on per file basis or should we collect all dependencies first?

Another big question here is assets (fonts, images, svgs, ...) mentioned in css/scss files or.

@hedgerh
Copy link
Contributor

hedgerh commented Jun 1, 2019

I think this could probably be closed and rolled up (haha get it) into #110

@sisp
Copy link

sisp commented Jun 13, 2019 •
edited
Loading

create-react-library is using rollup-plugin-postcss. Is there anything wrong with this approach?

@sisp
Copy link

sisp commented Jun 15, 2019

Just a css support only, even without preprocessors and modules, opens an abyss of new questions.

Should import of css be kept in transformed files or they should just used to collect style dependencies to extract one css file and disappear in transformed result? The same about scss. Additionally it could be left untouched or transformed to css import.

What about variables / mixins? Should they evaluated on per file basis or should we collect all dependencies first?

Another big question here is assets (fonts, images, svgs, ...) mentioned in css/scss files or.

I'd say in a React component library, everything should be self-contained after bundling. That's why I'd say all CSS should be treated as CSS modules, so there are no name conflicts with a consuming app or component library. With inject === true, postcss adds the function styleInject which injects the (processed) CSS as a <style> block in the <head> block when the library is loaded. I think SCSS should be transpiled to CSS so the component library can be used as is (self-contained).

Assets could be treated similar to how Create React App does it. SVGs are imported as React components using svgr and images could be Base64-encoded and inlined. Assets in CSS could be Base64-encoded to yield a self-contained component library.

Other libraries like create-react-library and microbundle are taking similar approaches from what I can see.

@swyxio
Copy link
Collaborator

swyxio commented Nov 4, 2019

we've enabled customizable configs since this issue was open. please have a try. we still have other users interested in css modules that are reporting small issues.

@swyxio swyxio closed this as completed Nov 4, 2019
@agilgur5 agilgur5 added the kind: feature New feature or request label Mar 19, 2020
@agilgur5 agilgur5 added solution: outdated This is not up-to-date with the current version scope: integration Related to an integration, not necessarily to core (but could influence core) labels Apr 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
kind: feature New feature or request scope: integration Related to an integration, not necessarily to core (but could influence core) solution: outdated This is not up-to-date with the current version
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@Guria @sisp @hedgerh @daniele-zurico @jaredpalmer @agilgur5 @swyxio