Example using styled-jsx with preact-cli default template

preact.config.js

export default (config, env, helpers) => {
	config.node = {process: 'mock'}
	const {rule} = helpers.getLoadersByName(config, 'babel-loader')[0]

	rule.options.plugins.splice(3, 0, 'styled-jsx/babel')
	rule.options.plugins.splice(5, 0, 'styled-jsx/babel')
	// console.log(JSON.stringify(rule.options.plugins, null, 2))
}

routes_home_index.js

import {h, Component} from 'preact'
import style from './style'

export default class Home extends Component {
	render() {
		return (
			<div class={style.home}>
				<h1>Home</h1>
				<p>This is the Home component.</p>
				<p className="red">This should be red.</p>
				<p className="blue">Should be blue.</p>
				<style jsx>{`
					.red {
						color: red;
					}
					.blue {
						color: blue;
					}
				`}</style>
			</div>
		)
	}
}