Package Exports

postcss-jsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-jsx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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) {
    // 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.