Skip to content

Commit 069f646

Browse files
authored
Merge pull request stylelint#21 from stylelint/update-readme
Update README
2 parents 2f174f3 + c87e19d commit 069f646

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

README.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
PostCSS JSX Syntax
2-
====
1+
# PostCSS CSS-in-JS Syntax
32

4-
[![NPM version](https://img.shields.io/npm/v/postcss-jsx.svg?style=flat-square)](https://www.npmjs.com/package/postcss-jsx)
5-
[![Travis](https://img.shields.io/travis/gucong3000/postcss-jsx.svg)](https://travis-ci.org/gucong3000/postcss-jsx)
6-
[![Travis](https://img.shields.io/travis/gucong3000/postcss-syntaxes.svg?label=integration)](https://travis-ci.org/gucong3000/postcss-syntaxes)
7-
[![Codecov](https://img.shields.io/codecov/c/github/gucong3000/postcss-jsx.svg)](https://codecov.io/gh/gucong3000/postcss-jsx)
8-
[![David](https://img.shields.io/david/gucong3000/postcss-jsx.svg)](https://david-dm.org/gucong3000/postcss-jsx)
3+
[![NPM version](https://img.shields.io/npm/v/@stylelint/postcss-css-in-js.svg)](https://www.npmjs.org/package/@stylelint/postcss-css-in-js) [![Build Status](https://github.com/stylelint/postcss-css-in-js/workflows/CI/badge.svg)](https://github.com/stylelint/postcss-css-in-js/actions)
94

105
<img align="right" width="95" height="95"
116
title="Philosopher’s stone, logo of PostCSS"
@@ -39,48 +34,53 @@ PostCSS JSX Syntax
3934
First thing's first, install the module:
4035

4136
```
42-
npm install postcss-syntax postcss-jsx --save-dev
37+
npm install postcss-syntax @stylelint/postcss-css-in-js --save-dev
4338
```
4439

4540
## Use Cases
4641

4742
```js
48-
const postcss = require('postcss');
49-
const stylelint = require('stylelint');
50-
const syntax = require('postcss-syntax');
51-
postcss([stylelint({ fix: true })]).process(source, { syntax: syntax }).then(function (result) {
52-
// An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
53-
result.content
54-
});
43+
const postcss = require("postcss");
44+
const stylelint = require("stylelint");
45+
const syntax = require("postcss-syntax");
46+
postcss([stylelint({ fix: true })])
47+
.process(source, { syntax: syntax })
48+
.then(function(result) {
49+
// An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
50+
result.content;
51+
});
5552
```
5653

5754
input:
55+
5856
```javascript
59-
import glm from 'glamorous';
57+
import glm from "glamorous";
6058
const Component1 = glm.a({
61-
flexDirectionn: 'row',
62-
display: 'inline-block',
63-
color: '#fff',
59+
flexDirectionn: "row",
60+
display: "inline-block",
61+
color: "#fff"
6462
});
6563
```
6664

6765
output:
66+
6867
```javascript
69-
import glm from 'glamorous';
68+
import glm from "glamorous";
7069
const Component1 = glm.a({
71-
color: '#fff',
72-
display: 'inline-block',
73-
flexDirectionn: 'row',
70+
color: "#fff",
71+
display: "inline-block",
72+
flexDirectionn: "row"
7473
});
7574
```
7675

7776
## Advanced Use Cases
7877

7978
Add support for more `css-in-js` package:
79+
8080
```js
81-
const syntax = require('postcss-syntax')({
82-
"i-css": (index, namespace) => namespace[index + 1] === "addStyles",
83-
"styled-components": true,
81+
const syntax = require("postcss-syntax")({
82+
"i-css": (index, namespace) => namespace[index + 1] === "addStyles",
83+
"styled-components": true
8484
});
8585
```
8686

0 commit comments

Comments
 (0)