PostCSS JSX Syntax

PostCSS syntax for parsing CSS in JS literals:

• aphrodite
• astroturf
• csjs
• css-light
• cssobj
• electron-css
• emotion
• freestyler
• glamor
• glamorous
• j2c
• linaria
• lit-css
• react-native
• react-style
• reactcss
• styled-components
• styletron-react
• styling
• typestyle

Getting Started

First thing's first, install the module:

npm install postcss-syntax postcss-jsx --save-dev

Use Cases

1const postcss = require('postcss');
2const stylelint = require('stylelint');
3const syntax = require('postcss-syntax');
4postcss([stylelint({ fix: true })]).process(source, { syntax: syntax }).then(function (result) {
5	// An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
6	result.content
7});

input:

1import glm from 'glamorous';
2const Component1 = glm.a({
3	flexDirectionn: 'row',
4	display: 'inline-block',
5	color: '#fff',
6});

output:

1import glm from 'glamorous';
2const Component1 = glm.a({
3	color: '#fff',
4	display: 'inline-block',
5	flexDirectionn: 'row',
6});

Advanced Use Cases

Add support for more css-in-js package:

1const syntax = require('postcss-syntax')({
2	"i-css": (index, namespace) => namespace[index + 1] === "addStyles",
3	"styled-components": true,
4});

See: postcss-syntax

Style Transformations

The main use case of this plugin is to apply PostCSS transformations to CSS code in template literals & styles as object literals.