|
1 |
| -PostCSS JSX Syntax |
2 |
| -==== |
| 1 | +# PostCSS CSS-in-JS Syntax |
3 | 2 |
|
4 |
| -[](https://www.npmjs.com/package/postcss-jsx) |
5 |
| -[](https://travis-ci.org/gucong3000/postcss-jsx) |
6 |
| -[](https://travis-ci.org/gucong3000/postcss-syntaxes) |
7 |
| -[](https://codecov.io/gh/gucong3000/postcss-jsx) |
8 |
| -[](https://david-dm.org/gucong3000/postcss-jsx) |
| 3 | +[](https://www.npmjs.org/package/@stylelint/postcss-css-in-js) [](https://github.com/stylelint/postcss-css-in-js/actions) |
9 | 4 |
|
10 | 5 | <img align="right" width="95" height="95"
|
11 | 6 | title="Philosopher’s stone, logo of PostCSS"
|
@@ -39,48 +34,53 @@ PostCSS JSX Syntax
|
39 | 34 | First thing's first, install the module:
|
40 | 35 |
|
41 | 36 | ```
|
42 |
| -npm install postcss-syntax postcss-jsx --save-dev |
| 37 | +npm install postcss-syntax @stylelint/postcss-css-in-js --save-dev |
43 | 38 | ```
|
44 | 39 |
|
45 | 40 | ## Use Cases
|
46 | 41 |
|
47 | 42 | ```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 | + }); |
55 | 52 | ```
|
56 | 53 |
|
57 | 54 | input:
|
| 55 | + |
58 | 56 | ```javascript
|
59 |
| -import glm from 'glamorous'; |
| 57 | +import glm from "glamorous"; |
60 | 58 | const Component1 = glm.a({
|
61 |
| - flexDirectionn: 'row', |
62 |
| - display: 'inline-block', |
63 |
| - color: '#fff', |
| 59 | + flexDirectionn: "row", |
| 60 | + display: "inline-block", |
| 61 | + color: "#fff" |
64 | 62 | });
|
65 | 63 | ```
|
66 | 64 |
|
67 | 65 | output:
|
| 66 | + |
68 | 67 | ```javascript
|
69 |
| -import glm from 'glamorous'; |
| 68 | +import glm from "glamorous"; |
70 | 69 | const Component1 = glm.a({
|
71 |
| - color: '#fff', |
72 |
| - display: 'inline-block', |
73 |
| - flexDirectionn: 'row', |
| 70 | + color: "#fff", |
| 71 | + display: "inline-block", |
| 72 | + flexDirectionn: "row" |
74 | 73 | });
|
75 | 74 | ```
|
76 | 75 |
|
77 | 76 | ## Advanced Use Cases
|
78 | 77 |
|
79 | 78 | Add support for more `css-in-js` package:
|
| 79 | + |
80 | 80 | ```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 |
84 | 84 | });
|
85 | 85 | ```
|
86 | 86 |
|
|
0 commit comments