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.

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

Migrate styles to PostCSS #666

Merged
merged 161 commits into from Jan 5, 2017

Conversation

Projects
None yet
@javivelasco
Member

javivelasco commented Jul 24, 2016

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

This comment has been minimized.

Show comment
Hide comment
@retorquere

retorquere Dec 27, 2016

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

retorquere commented Dec 27, 2016

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

landabaso and others added some commits Dec 28, 2016

Import from ramda using the 'import XXX from "ramda/src/XXX"' pattern…
… so that bundle sizes will be smaller for not including the whole ramda package.
Merge pull request #1091 from landabaso/css-next
Minimize bundle size because of ramda

javivelasco added some commits Jan 4, 2017

@javivelasco

This comment has been minimized.

Show comment
Hide comment
@javivelasco

javivelasco Jan 5, 2017

Member

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

Member

javivelasco commented Jan 5, 2017

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

javivelasco added some commits Jan 5, 2017

@javivelasco javivelasco merged commit 81acda7 into dev Jan 5, 2017

0 of 2 checks passed

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
continuous-integration/travis-ci/push The Travis CI build is in progress
Details

@javivelasco javivelasco deleted the css-next branch Jan 5, 2017

@aislanmaia

This comment has been minimized.

Show comment
Hide comment
@aislanmaia

aislanmaia Jan 25, 2017

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

aislanmaia commented Jan 25, 2017

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

This comment has been minimized.

Show comment
Hide comment
@javivelasco

javivelasco Jan 25, 2017

Member

@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!

Member

javivelasco commented Jan 25, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@aldensc

aldensc Aug 17, 2017

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.

aldensc commented Aug 17, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment