PostCSS JSX Syntax
PostCSS syntax for parsing CSS in JS literals:
Getting Started
First thing's first, install the module:
npm install postcss-syntax postcss-jsx --save-dev
Use Cases
const postcss = require('postcss');
const stylelint = require('stylelint');
const syntax = require('postcss-syntax');
postcss([stylelint({ fix: true })]).process(source, { syntax: syntax }).then(function (result) {
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',
});
Advanced Use Cases
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
Style Transformations
The main use case of this plugin is to apply PostCSS transformations to CSS code in template literals & styles as object literals.