postcss-jsx

PostCSS syntax for parsing CSS in JS literals

MIT 25 个版本
postcss syntax emotion aphrodite glamor glamorous react-native react-style reactcss styled-components styletron-react typestyle css-in-js css
主页
仓库
提交 Issue
安装
npm install postcss-jsx
yarn add postcss-jsx
pnpm add postcss-jsx
bun add postcss-jsx
README

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.

版本列表
0.36.4 2020-01-16
0.36.3 2019-07-29
0.36.2 2019-07-22
0.36.1 2019-06-05
0.36.0 2019-01-02
0.35.0 2018-10-25
0.34.0 2018-09-18
0.33.0 2018-08-15
0.32.0 2018-07-27
0.31.0 2018-06-29
0.30.0 2018-06-20
0.28.0 2018-06-11
0.27.0 2018-06-07
0.26.0 2018-05-28
0.25.0 2018-05-25
0.24.0 2018-05-24
0.10.0 2018-05-18
0.9.0 2018-05-08
0.8.0 2018-05-08
0.7.0 2018-05-07
0.6.0 2018-05-04
0.5.0 2018-05-04
0.4.0 2018-05-04
0.1.0 2018-05-03
0.0.1-beta.1 2018-04-28