Add options generators for css/postcss/less/sass/ts

[JerryCauser]

Make possible use dev and isServer variables in css/postcss/less/sass/ts options.
And I think, what using cssModules variable is not a good idea. Instead, we should pass it in cssLoaderOptions, since it was implemented here. Let's unify the way how to pass options. What are you thinking about that?

it will look like that

module.exports = withSass({
  cssLoaderOptions: ({ dev }) => ({
    modules: true,
    localIdentName: dev ? '[local]-[hash:base64:5]' : '[hash:base64:5]'
  })
})

Of course, there is backward compatibility.

Also, it fix passing cssLoaderOptions and it adds possibility:

• to pass postCssOptions
• to pass additional fields in webpack rule (for example, you can pass exclude and include in rule)

[JerryCauser]

No one comment... Is it intrsting feature or overhead?

[JerryCauser]

@timneutkens any thoughts?

[rvetere]

very nice! like it, and we should have this yes... also because it would fix the cssLoaderOptions at all - right now the whole property is just unusable (as it is not passed at least in next-css)

[gihrig]

I agree it's a nice idea.

As it is now (manually patched) I have this:

'[name]_[local]-[hash:base64:4]'

I find this helpful in debugging complex nested layouts. But the class names can get rather long e.g.

class="header_header-CGBN"

This PR would preserve the debug-ability in dev and save some bytes in prod. 🎉

[trexguo]

Hope the PR can be merged ASAP.

[gihrig]

This works today with "@zeit/next-css": "0.1.5",

const production = process.env.NODE_ENV === 'production'

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: production ? '[hash:base64:4]' : '[name]_[local]-[hash:base64:4]',

[timneutkens]

I'm going to close this in favor of vercel/next.js#8626

Thanks for your contribution 🙏