Easy integrate with postcss

[ron-liu]

I have a existing project which use react-css-modules + scss heavily, and now want to switch to next.js. It is too hard to keep react-css-modules with server rendering, so I have to switch css in js approach. Ideally, I wish I could use postcss (and some scss-like plugins) with styled-jsx to keep most scss files during this transition.

Firstly, I saw styled-jsx-postcss repo, but this one depended on styled-jsx@0.5.7, before #148, therefore, I couldn't use styles in another file. I thought it is easy to upgrade the underlying depends. However, because the newer version of styled-jsx complains the nested css, styled-jsx-postcss need a fundamental change to achieve it.

And later I saw next.js example with-scoped-stylesheets-and-postcss, based on this idea, I achieved postcss with styled-jsx, but with one issue I have to name my css file ended with .js .

Is there anyway to fix the css name issue? I am not sure if I am on the right truck or if there is a better way to achieve postcss with styled-jsx.

Thanks.

next.config.js

const trash = require('trash')

module.exports = {
	webpack: (config) => {
		config.module.rules.push(
			{
				test: /\.css.js$/,            // notice here, .css.js instead of .css
				use: [
					{
						loader: 'emit-file-loader',
						options: {
							name: 'dist/[path][name].[ext]'
						}
					},
					{
						loader: 'skeleton-loader',
						options: {
							procedure: function (content) {
								return `module.exports = \`${content}\``
							},
							toCode: true
						}
					},
					'postcss-loader'
				]
			}
		)
		
		return config
	}
}

/pages/index.js

import css from './index.css'
export default () => <div className="pp">
	123
	<style jsx>{css}</style>
</div>

/pages/index.css.js

.pp {
	&.dd { color: pink;}
	background-color: red;
	width: 100px;
	height: 100px;
}

postcss.config.js

module.exports = {
	plugins: [
		require('postcss-cssnext')(),
		require('cssnano')()
	]
}

[giuseppeg]

What is the css name issue about exactly? By the way there is a ready branch to implement plugins for styled-jsx which should let you use any preprocessor you want #182

[ron-liu]

By using the above approach, the index.css has to be named as index.css.js, otherwise, styled-jsx will not process it. Is there any other option to use postcss at this moment?

looking forward to seeing #182 happening :)

[giuseppeg]

the index.css has to be named as index.css.js

That's right, because styled-jsx is just a Babel plugin and Babel is for transforming JavaScript.

Also in Next.js webpack is run only for client side code, not server side so even if you manage to set it up it won't work for SSR.

I think that styled-jsx plugins are the only easy way to transform the css (eg. with postcss). As I said the branch is ready, I just need someone to review it.