search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.73k stars 26.85k forks source link

Error in ./~/react-toolbox/lib/button/theme.css #1477

Closed umair-khanzada closed 7 years ago

umair-khanzada commented 7 years ago

Hi, getting error when add react-tool component. Module build failed: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is weird we have not web-pack config file then how i fix this issue ? similar issues

gaearon commented 7 years ago

cc @javivelasco

javivelasco commented 7 years ago

@umair-khanzada React Toolbox current version relies on CSS Modules to handle styling. If you require a component from react-toolbox, the css will be required for you but the configuration should enable modules. This is not the case for create-react-app: you are requiring a css file that has assumes that modules are enabled and that's why you get the warning.

To avoid it (and to skip configuration with any other project and react toolbox) you can use the recently released react-toolbox-themr. It allows you to extract and transform CSS from react-toolbox to be required as any other css asset. Beware you should require components always default from its definition, for example from react-toolbox/lib/button/Button instead of the named export of the index.js. You should do it this way because we are currently exposing components with and without styles. This is going to change soon as a style refactoring is in progress.

Let me know any other issues in the react-css-themr repository!

gaearon commented 7 years ago

Going to close since appears resolved. @javivelasco It would be great if you could contribute a small guide we could point people to.

umair-khanzada commented 7 years ago

@javivelasco works like charm. thanks 💃

javivelasco commented 7 years ago

Great @umair-khanzada!! Sure @gaeron, I will let you know when I've got it ready :)

gnapse commented 7 years ago

@javivelasco I looked at react-toolbox-themr and looks good. However I was wondering if it's possible to instead integrate react-toolbox as is with an app generated with create-react-app. What would entail in the app configuration to be able to work with react-toolbox as is?

javivelasco commented 7 years ago

Yeah it is possible but you have need to eject and configure CSS Modules as detailed in React Toolbox documentation or in the Webpack example repository. I think that was a too opinionated decision and I'm working on changing the approach to deliver fully flexible components. I encourage you to use themr meanwhile, the only downside is dependency resolution because the CSS should be manually included.