postcss-jsx

PostCSS JSX Syntax
====


title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo.svg">

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

`js
const postcss = require('postcss');
const stylelint = require('stylelint');
const syntax = require('postcss-syntax');
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:
`javascript
import glm from 'glamorous';
const Component1 = glm.a({
flexDirectionn: 'row',
display: 'inline-block',
color: '#fff',
});
`

output:
`javascript
import glm from 'glamorous';
const Component1 = glm.a({
color: '#fff',
display: 'inline-block',
flexDirectionn: 'row',
});
`

Advanced Use Cases

Add support for more css-in-js package:
`js
const syntax = require('postcss-syntax')({
"i-css": (index, namespace) => namespace[index + 1] === "addStyles",
"styled-components": true,
});
``

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.