PostCSS syntax for parsing CSS in JS literals:
- [emotion](https://github.com/emotion-js/emotion)
- [aphrodite](https://github.com/Khan/aphrodite)
- [glamor](https://github.com/threepointone/glamor)
- [glamorous](https://github.com/paypal/glamorous)
- [react-native](https://github.com/necolas/react-native-web)
- [react-style](https://github.com/js-next/react-style)
- [reactcss](https://github.com/casesandberg/reactcss)
- [styled-components](https://github.com/styled-components/styled-components)
- [styletron-react](https://github.com/rtsao/styletron)
- [typestyle](https://github.com/typestyle/typestyle)
First thing's first, install the module:
npm install postcss-syntax postcss-jsx --save-dev
const postcss = require('postcss');
const stylelint = require('stylelint');
const syntax = require('postcss-jsx');
postcss([stylelint({ fix: true })]).process(source, { syntax: syntax }).then(function (result) {
// An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
result.content
});input:
import glm from 'glamorous';
const Component1 = glm.a({
flexDirectionn: 'row',
display: 'inline-block',
color: '#fff',
});output:
import glm from 'glamorous';
const Component1 = glm.a({
color: '#fff',
display: 'inline-block',
flexDirectionn: 'row',
});See: postcss-syntax
The main use case of this plugin is to apply PostCSS transformations to CSS code in template literals & styles as object literals.