Can't get React-toolbox 2 working

neoromantic commented 7 years ago

So, I'm trying to get react-toolbox 2.0 with meteor 1.4 and meteor-css-modules 2.4.0 working, and can't get styles to import.

Here's test repository: https://github.com/neoromantic/meteor-cssmodules-reacttoolbox

Basically, I can import react-toolbox component, but it appears unstyled.

If I add node_modules/react-toolbox to ignorePaths all is working, but there is no styles. I assume that's what one should expect.

If I remove it from ignorePaths, I get various errors, depending on my configuration. Currently, I'm stuck with this:

   Processing files with nathantreid:css...  /
/~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Processing Step: CSS Modules / PostCSS compilation
Unable to compile /Users/sergey.petrov/Projects/meteor-cssmodules-reacttoolbox/node_modules/react-toolbox/components/layout/theme.css
CssSyntaxError: postcss-simple-vars: /Users/sergey.petrov/Projects/meteor-cssmodules-reacttoolbox/node_modules/react-toolbox/components/layout/theme.css:161:1: Undefined variable $platform

@define-mixin sidebarIncrements $platform {
^
  & .sidebarDrawer {

/~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
=> Errors prevented startup:

Could you help me with that? How can I run meteor 1.4 & css-modules & react-toolbox 2.0?

neoromantic commented 7 years ago

I also get errors like this:

=> Errors prevented startup:

While minifying app stylesheet: app/node_modules/react-toolbox/lib/app_bar/theme.css.css:409:5: missing '}' app/node_modules/react-toolbox/lib/autocomplete/theme.css.css:380:5: missing '}' app/node_modules/react-toolbox/lib/avatar/theme.css.css:380:5: missing '}' app/node_modules/react-toolbox/lib/button/theme.css.css:380:5: missing '}' app/node_modules/react-toolbox/lib/card/theme.css.css:380:5: missing '}' app/node_modules/react-toolbox/lib/checkbox/theme.css.css:380:5: missing '}' app/node_modules/react-toolbox/lib/chip/theme.css.css:380:5: missing '}'

akanix42 commented 7 years ago

Thanks for supplying the test repo, I'll take a look at this soon.

neoromantic commented 7 years ago

Thanks a lot! Waiting eagerly, we're choosing our frontend stack right now and I hope that we'll be able to use react-toolbox in this project.

akanix42 commented 7 years ago

It appears the react toolbox documentation isn't up to date. I poked around and looked at the 1.x example, then added the following plugins: postcss-import, postcss-each, postcss-mixins. I don't know if postcss-import is required, but I saw both the mixins and each being used. The error you received is caused by the missing mixins module. My updated config looks like this:

...
    "postcssPlugins": {
      "postcss-import": {},
      "postcss-mixins": {},
      "postcss-each": {},
      "postcss-cssnext": {},
      "postcss-simple-vars": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {}
    }
...

After you set that up run a meteor reset to clear the cache and hopefully you'll be good to go.

neoromantic commented 7 years ago

@nathantreid Thank you so much! It actually works!

shenrenguo commented 7 years ago

@nathantreid I cloned @neoromantic ‘s test repo, and upgrade to meteor 1.5，also installed postcss plugins you mentioned above. But, still appears unstyled.

here is the test repo https://github.com/shenrenguo/meteor-cssmodules-reacttoolbox.git

akanix42 / meteor-css-modules

Can't get React-toolbox 2 working #90