This project was forked by Widen for two reasons:
- To fix some peer dependency warnings that don't apply given our setup and cause warnings with Yarn.
- To fix Babel parsing. Newer versions of Babel made some non-supported use cases break. We've fixed this to make stylelint work properly.
We will likely not merge our fork into the source repo due to stylelint's desire to deprecate this package eventually.
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 @stylelint/postcss-css-in-js --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.