PostCSS CSS-in-JS Syntax

Fork notes

This project was forked by Widen for two reasons:

1. To fix some peer dependency warnings that don't apply given our setup and cause warnings with Yarn.
2. 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

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.