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