feat(gatsby-plugin-postcss): added css-loader options

[magicspon]

Description

This commit allows users to define some css-loader options, such as localIdentName

{
	resolve: `gatsby-plugin-postcss`,
	options: {
		postCssPlugins: plugins,
		cssOptions: {
			localIdentName: 'mod-[hash:base64:8]'
		}
	}
}

cssOptions is the new bit.

Related Issues

Some of my class names were getting stupidly long!

[calcsam]

This looks like it should work, but

[calcsam]

...should the API be eg "cssLoaderOptions" for clarity?

[magicspon]

yup, that makes sense, i've changed it to cssLoaderOptions.

thanks

[KingScooty]

Does this PR mean i'd be able to set the camelCase option in css loader?!

cssLoaderOptions: {
  camelCase: false
}

Amazing if so. Let's get this in!

[wardpeet]

I've updated the README.md and added cssLoaderOptions to our non-modules rule too.

It's ready to be MERGED! Thank you!

[pieh]

We also need to update jest snapshots as seems slight order change of options make them fail

[mbifulco]

Hey there - anything I can do to help with this PR? It looks like this would be helpful for a project I'm working on.

My use case:

• I'm setting up Gatsby and Storybookjs in the same project. Right now, Gatsby and Storybook have both chosen to feed opposing options into the css-loader camelCase option, which means the same styles.module.css file gets compiled down to a camelCase based dictionary in one project, and a skewer-case dictionary in the other:

In other words...

import classes from './Footer.module.css';

console.log('footer classes', classes);

This results in

Camel Case from gatsby:

Skewer-case from storybook:

This essentially renders storybook and gatsby incompatible for my purposes. I'm hoping this PR would help me address that!

[wardpeet]

i'll get this one merged tomorrow @mbifulco

[magicspon]

heyo... sorry i've not had a chance to take another look at this... let me know if there is anything i can do to help.

cheers

[wardpeet]

Ready to go! Thanks for your patience!

[mbifulco]

I hate to be a pain, but it looks like failing tests may be holding this up. Is that jest missing a snapshot update?

[wardpeet]

sorry fell sick yesterday, updated the snapshots 🤞

[mbifulco]

Ah sorry to hear you were under the weather. I hope you're back at full steam now!

Thank you, @wardpeet @magicspon @pieh! 🙏

[mbifulco]

Just coming back to say that this absolutely did the trick for me. Thanks, y'all! This is the postcss config I needed:

    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        cssLoaderOptions: {
          camelCase: true,
        },
      },
    },

and this is a screenshot of thegymnasium.com's new footer design running simultaneously in storybook and gatsby develop 👍 Sweet!