JarCastingPostCSS CSS-in-JS 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 @stylelint/postcss-css-in-js --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) {
// 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"
});
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.
