[gatsby-plugin-sass] new options & [gatsby-plugin-react-css-modules] new package

[mingaldrichgan]

1. [gatsby-plugin-sass] new options

SASS defaults to 5 digits of precision, which is low enough to cause off-by-1px errors in Bootstrap. See:

• https://github.com/twbs/bootstrap-sass/blob/master/README.md#sass-number-precision
• Button line-height in Chrome twbs/bootstrap-sass#409
• Default precision too low sass/sass#1122

I confirmed (by transpiling the bootstrap-sass package and looking at the maximum number of decimal places in the CSS output) that appending ?precision=8 to the sass Webpack loader increases the precision from 5 to 8.

I also wanted to make localIdentName configurable—if a project has more than one index.module.scss file (in different folders), for example, it would be helpful to add [path] to the module class name.

2. [gatsby-plugin-react-css-modules] new package

Gatsby plugin for babel-plugin-react-css-modules—see README.md for details.

[KyleAMathews]

Deploy preview failed.

Built with commit dd5b650

https://app.netlify.com/sites/using-glamor/deploys/599e7c59424ef241a5709df2

[mingaldrichgan]

Any possibility of viewing the build logs?

[KyleAMathews]

This looks fantastic! Nice new options + great tests. gatsby-plugin-react-css-modules fills in another nice gap as well.

On build problems — build issues on Netlify are rather opaque. I want to create a new build system for the example sites and will hopefully have time to build it soon.

[KyleAMathews]

I merged in master which includes #1903 which was breaking builds.

[KyleAMathews]

Oh and do you think that perhaps the [path] should be added by default to the css module paths?

[mingaldrichgan]

Re: adding [path] by default, not a bad idea. I personally don't care as long as it's configurable. 😎 Let me know if you'd like me to add it! And I should probably add the same options to the built-in CSS loader and gatsby-plugin-postcss-sass as well, for consistency. Would you like me to include all of the above in the same pull request?

[KyleAMathews]

Would you like me to include all of the above in the same pull request?

Yeah, let's do it! Thanks!

[mingaldrichgan]

@KyleAMathews I noticed that gatsby-plugin-sass does not load any CSS preprocessors for the develop-html stage, whereas gatsby-plugin-postcss-sass, gatsby-plugin-stylus, and the core webpack.config.js do. I'm not yet familiar enough with the details of each stage to know if it's necessary—do you know if this was left out by mistake?

No develop-html:

• https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sass/src/gatsby-node.js

Has develop-html:

• https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-postcss-sass/src/gatsby-node.js#L47
• https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-stylus/src/gatsby-node.js#L92
• https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js#L451

[KyleAMathews]

Hmm probably we do always want to set the null-loader as otherwise webpack will throw an error. Probably this hasn't been a problem for the sass loader as it'd only show up if someone imported a sass file into a html.js which you don't generally.

But for completeness, yeah, the sass plugin should have a setting for develop-html.

[gatsbybot]

Deploy preview ready!

Built with commit ac72be2

https://deploy-preview-1900--gatsbygram.netlify.com

[mingaldrichgan]

Closed this pull request and opened a new one: #1934