Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/postcss/postcss-js
PostCSS for React Inline Styles, Free Style and other CSS-in-JS
https://github.com/postcss/postcss-js
Last synced: 3 days ago
JSON representation
PostCSS for React Inline Styles, Free Style and other CSS-in-JS
- Host: GitHub
- URL: https://github.com/postcss/postcss-js
- Owner: postcss
- License: mit
- Created: 2015-10-13T19:44:56.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T14:20:48.000Z (5 months ago)
- Last Synced: 2024-10-29T14:38:14.080Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 794 KB
- Stars: 657
- Watchers: 17
- Forks: 25
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS. (Uncategorized / Uncategorized)
- awesome-list - postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS. (Code Design / CSS / Style)
- awesome-react-components - postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS. (Code Design / CSS / Style)
README
# PostCSS JS
[PostCSS] for CSS-in-JS and styles in JS objects.
For example, to use [Stylelint] or [RTLCSS] plugins in your workflow.
[Stylelint]: https://github.com/stylelint/stylelint
[PostCSS]: https://github.com/postcss/postcss
[RTLCSS]: https://github.com/MohammadYounes/rtlcss
## Usage
### Processing
```js
const postcssJs = require('postcss-js')
const autoprefixer = require('autoprefixer')
const prefixer = postcssJs.sync([ autoprefixer ])
const style = prefixer({
userSelect: 'none'
})
style //=> {
// WebkitUserSelect: 'none',
// MozUserSelect: 'none',
// msUserSelect: 'none',
// userSelect: 'none'
// }
```
### Compile CSS-in-JS to CSS
```js
const postcss = require('postcss')
const postcssJs = require('postcss-js')
const style = {
top: 10,
'&:hover': {
top: 5
}
};
postcss().process(style, { parser: postcssJs }).then( (result) => {
result.css //=> top: 10px;
// &:hover { top: 5px; }
})
```
### Compile CSS to CSS-in-JS
```js
const postcss = require('postcss')
const postcssJs = require('postcss-js')
const css = '--text-color: #DD3A0A; @media screen { z-index: 1; color: var(--text-color) }'
const root = postcss.parse(css)
postcssJs.objectify(root) //=> {
// '--text-color': '#DD3A0A',
// '@media screen': {
// zIndex: '1',
// color: 'var(--text-color)'
// }
// }
```
## API
### `sync(plugins): function`
Create PostCSS processor with simple API, but with only sync PostCSS plugins
support.
Processor is just a function, which takes one style object and return other.
### `async(plugins): function`
Same as `sync`, but also support async plugins.
Returned processor will return Promise.
### `parse(obj): Root`
Parse CSS-in-JS style object to PostCSS `Root` instance.
It converts numbers to pixels and parses
[Free Style] like selectors and at-rules:
```js
{
'@media screen': {
'&:hover': {
top: 10
}
}
}
```
This methods use Custom Syntax name convention, so you can use it like this:
```js
postcss().process(obj, { parser: postcssJs })
```
### `objectify(root): object`
Convert PostCSS `Root` instance to CSS-in-JS style object.
## Troubleshoot
Webpack may need some extra config for some PostCSS plugins.
### `Module parse failed`
Autoprefixer and some other plugins
need a [json-loader](https://github.com/webpack/json-loader) to import data.
So, please install this loader and add to webpack config:
```js
loaders: [
{
test: /\.json$/,
loader: "json-loader"
}
]
```