Add postecss-nested plugin to get nesting to work

[Josh Powell]

Great framework and explained really well. Thank you!

Ran into one blocker along the way.

Needed to add postcss-nested plugin:

yarn add postcss-nested

/* .postcssrc.yml */

plugins:
  postcss-smart-import: {}
  postcss-cssnext: {}
  + postcss-nested: {}

in order to get nesting to work here frontend/components/auth-form/auth-form.css

[Andy Baranov]

Thanks for this comment @joshRpowell! What version of Rails are you using? Nesting seems to be a standard feature of cssnext and on my setup nesting works without any additional plugins. Also, did you clone the repo or followed the tutorial from scratch? This information would be useful so we can decide if we should urge readers to install the plugin too

[Tyler Bodway]

I had to follow the same procedure as @joshRpowell as well. I am using the pre version 5.2.0.beta2 which might have something to do with it 🤓

[Andy Baranov]

Probably! Thank you, guys, we will definitely investigate and add a note for that

[Josh Powell]

@progapandist here are the details

•100% [I] ➜ rails -v
Rails 5.1.4

from scratch as well

for what its worth i didn't see it in any yarn.lock dependency

[Andy Baranov]

@joshRpowell @tylerbodway thanks for reporting the issue, to be safe, we added a note to the original blog post:

Note: some readers report that the default .postcssrc.yml generated by Rails does not allow for nesting unless the postcss-nested plugin is explicitly installed. This is how to do it: yarn add postcss-nested in the Terminal followed by adding this line to the top of plugins section inside .postcssrc.yml: postcss-nested: {}

Please feel free to open new issues if you encounter more blocking points while advancing through the tutorial