postcss-jsx

0.36.4 • Public • Published

PostCSS JSX Syntax

NPM version Travis Travis Codecov David

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.

Package Sidebar

Install

npm i postcss-jsx

Weekly Downloads

263,889

Version

0.36.4

License

MIT

Unpacked Size

33.5 kB

Total Files

23

Last publish

Collaborators

  • ai
  • gucong