Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johanholmerin/style9-jsx-prop
CSS prop for style9
https://github.com/johanholmerin/style9-jsx-prop
Last synced: 2 months ago
JSON representation
CSS prop for style9
- Host: GitHub
- URL: https://github.com/johanholmerin/style9-jsx-prop
- Owner: johanholmerin
- License: mit
- Created: 2020-07-18T09:51:42.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T15:49:20.000Z (about 2 years ago)
- Last Synced: 2024-10-03T08:11:50.066Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 123 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# style9-jsx-prop
**Experimental**
Style JSX elements with [style9](https://github.com/johanholmerin/style9) using
a prop. Supports dynamic values using CSS custom properties.
```javascript
// From
;
// To
import style9 from 'style9';
const styles = style9.create({
base: {
color: 'blue',
':hover': {
color: 'var(--hover-color)'
},
animationName: style9.keyframes({
from: { opacity: 0 }
})
},
red: {
color: 'red',
}
});
```
## Install
```sh
# Yarn
yarn add -D style9-jsx-prop
# npm
npm install -D style9-jsx-prop
```
## Babel default options
```json
{
"plugins": [
["module:style9-jsx-prop", {
"propName": "css",
"importPath": "style9"
}]
]
}
```
## Typescript
To get Typescript to recognize the `css` prop you need to add the following
import once in your app.
```javascript
import {} from 'style9-jsx-prop/types';
```