https://github.com/streamich/virtual-css
💄 Virtual CSS for virtual DOM libraries
https://github.com/streamich/virtual-css
Last synced: 11 months ago
JSON representation
💄 Virtual CSS for virtual DOM libraries
- Host: GitHub
- URL: https://github.com/streamich/virtual-css
- Owner: streamich
- License: unlicense
- Created: 2019-03-22T19:37:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T11:47:17.000Z (over 2 years ago)
- Last Synced: 2025-08-09T18:38:40.366Z (11 months ago)
- Language: TypeScript
- Homepage:
- Size: 230 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# virtual-css
Virtual CSS renderer. Renders only CSS declaration that changed.
```shell
npm i virtual-css
```
- Inline CSS with pseudo-selectors and media queries
## Usage
As React hook:
```js
import {useCss} from 'virtual-css';
const Demo = () => {
const className = useCss({
color: 'tomato',
'&:hover': {
color: 'orange',
},
});
return
Hover me!;
};
```
As styled blocks:
```js
import {Box, Text} from 'virtual-css';
const myCss = {
color: 'tomato',
'&:hover': {
color: 'orange',
},
};
Hover me!
Hover me!
```
As inline JSX:
```js
/** @jsx jsx */
import {jsx} from 'virtual-css';
const myCss = {
color: 'tomato',
'&:hover': {
color: 'orange',
},
};
Hover me!
```
If you are using TypeScript, include this type override:
```ts
declare module 'react' {
interface DOMAttributes {
css?: any;
}
}
```
## License
[Unlicense](LICENSE) — public domain.