Migrate styles to PostCSS

[javivelasco]

This PR brings a complete migration of react-toolbox to post-css along with changes that are side effects of this migration. The theming philosophy behind this migration is basically the same as before. Each component has a configuration file where some variables are defined and used at time of generating styles. Those variables can be overridden to customize appearance. We are using:

• postcss-import allows to separate CSS in multiple files so we can do stuff like importing variables from one component into another.
• postcss-mixins allows to define and use mixins. They are not very used in react-toolbox but I've found them useful in the Layout component since some properties need to be repeated for different screen sizes.
• postcss-next the most important one. Includes multiple plugins to define custom variables, to use calc, etc.
• postcss-each used in the Layout component to generate a bunch of classes that define sizes of the drawer element, for example.

With this implementation we don't need to make tricks to prepend variables SASS files to react-toolbox stylesheets. We just need a variables Javascript file defining theming variables we want to override and pass it to the custom properties plugin configuration. In case you are using sass variables from react-toolbox now, with the new version you'd need to change to postcss. Apart from that, if basically works the same way.

Of course this is a huge change because it implies a technology change and I think it should be released under 2.0.0. The amazing news is that we can do awesome stuff with this change that I'd like to include in this PR before merging:

• Update MD documenting the usage of react-toolbox with PostCSS.
• Review and document the custom properties used for each component.
• More detailed documentation with specific info for Webpack and Theming.
• Redesign the docs.
• Include theming live customization in the docs playground.
• Create a live theme generator in the documentation.

Please leave your feedback in this PR!

[retorquere]

I'm looking to give this a go because I share the need expressed in #963. How do I get started on this branch? I've tried @mmazzarolo 's bolierplate but that gives me

ERROR in ./src/index.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/emile/heroku/react-toolbox-postcss-boilerplate/src
 @ ./src/index.js 1:340-371

ERROR in ./src/index.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/commons.css' in /Users/emile/heroku/react-toolbox-postcss-boilerplate/src
 @ ./src/index.js 15:0-40

ERROR in ./src/App.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/emile/heroku/react-toolbox-postcss-boilerplate/src
 @ ./src/App.js 1:340-371

ERROR in ./src/App.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/card' in /Users/emile/heroku/react-toolbox-postcss-boilerplate/src
 @ ./src/App.js 17:12-45

ERROR in ./src/App.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/app_bar' in /Users/emile/heroku/react-toolbox-postcss-boilerplate/src
 @ ./src/App.js 19:15-51

ERROR in ./src/App.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/button' in /Users/emile/heroku/react-toolbox-postcss-boilerplate/src
 @ ./src/App.js 23:14-49

ERROR in ./src/App.js
Module not found: Error: Cannot resolve module 'react-toolbox' in /Users/emile/heroku/react-toolbox-postcss-boilerplate/src
 @ ./src/App.js 15:20-44

on npm start

[javivelasco]

Here is the build system. I forgot to mention here!

[aislanmaia]

Okay, I trying to use this beta but right now I'm getting problems like:
...
ERROR in ./app/components/students/StudentForm/ResponsibleFormSection.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/input' in /home/aislan/Projects/Phoenix/AppNaEscola/app-web-frontend/app/components/students/StudentForm
@ ./app/components/students/StudentForm/ResponsibleFormSection.js 23:13-47

ERROR in ./app/components/students/StudentForm/ResponsibleFormSection.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/dropdown' in /home/aislan/Projects/Phoenix/AppNaEscola/app-web-frontend/app/components/students/StudentForm
@ ./app/components/students/StudentForm/ResponsibleFormSection.js 27:16-53

ERROR in ./app/components/students/StudentConfirmDialog/index.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/dialog' in /home/aislan/Projects/Phoenix/AppNaEscola/app-web-frontend/app/components/students/StudentConfirmDialog
@ ./app/components/students/StudentConfirmDialog/index.js 13:14-49

... and so on...

Before trying the beta, the components was getting compiled right.

This is my webpack config dev:

webpack.config.js.txt

[javivelasco]

@aislanmaia Your configuration needs to support CSS modules with postcss for react-toolbox. I see this line here:

loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'),

I guess that's the loader that was being used for react-toolbox. You just have to remove !sass from there and to add css-next in the configuration for postcss. Right now the config is:

postcss: function () {
   return [autoprefixer];
}

I recommend to use just css-next. Check out the configuration examples in the root of the repository and the /docs folder. Also, you may use that loader config just for react-toolbox because right now there are two different loaders with the same regex!

[aldensc]

Any timeline on the official 2.0 release? Downloaded the npm install and it is still in beta. I see the comment on fixing up the documentation and playground, but that comment was in Jul 2016. Personally, I would be good with some documentation and have the playground come later. I've had to dig through the code to find out how to use certain components. 2.0 looks like it may fulfill our needs, but would not be allowed to use a beta.