https://github.com/herber/vxv
👓💄 A tiny library for writing native css code in JavaScript.
https://github.com/herber/vxv
css css-in-js server-side-rendering styles stylesheets tiny vxv
Last synced: 11 days ago
JSON representation
👓💄 A tiny library for writing native css code in JavaScript.
- Host: GitHub
- URL: https://github.com/herber/vxv
- Owner: herber
- License: mit
- Created: 2018-01-30T09:26:57.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T10:22:12.000Z (over 2 years ago)
- Last Synced: 2025-04-03T02:42:57.626Z (27 days ago)
- Topics: css, css-in-js, server-side-rendering, styles, stylesheets, tiny, vxv
- Language: JavaScript
- Homepage: https://vxv.js.org
- Size: 1.21 MB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
A tiny library for writing native css code in JavaScript.
VXV is powered by stylis, a fast css preprocessor.
## Features
- __Tiny__: VXV does not bloat you bundle
- Powered by __tagged template literals__
- __Namespaced__: VXV automatically namespaces your css
- __Modular__: Import css from js files
- __Isomorphic__: VXV works in node and in browsers, this is great for server side rendering
- __Just CSS__: VXV does not force you to learn anything new, it's just good old css.
## Install
```
$ npm install vxv
```
## Usage
__VXV__ supports standard css(with some extras). It returns a simple class name that you can use to access the styles.
```js
const vxv = require('vxv');
const xou = require('xou');
const styles = vxv`
font-family: sans-serif;
// Nested elements have to be tagged by an &.
& h1 {
color: red;
}
& p {
color: blue;
}
`;
const element = xou`
I am red.
I am blue.
`;
document.body.appendChild(element);
```
### Dynamic styles
You can use plain old JavaScript variables for dynamic styles. You could even build mixins using JavaScript functions.
```js
const vxv = require('vxv');
const xou = require('xou');
const color = 'blue';
const styles = vxv`
font-family: sans-serif;
& h1 {
color: ${ color };
}
`;
const element = xou`
I am blue
`;
```
### Styling subelements
Subelements have to be suffixed by an `&`.
```js
const vxv = require('vxv');
vxv`
& p {
text-align: center;
&.red {
color: red;
}
}
`;
```
### Styling global elements
Global elements have to be tagged by the `global` statement.
```js
const vxv = require('vxv');
vxv`
:global(body) {
background: red;
}
`;
```
### Serverside rendering
For serverside rendering you need the [`vxv-server`](https://github.com/herber/vxv/tree/master/packages/vxv-server) module.
__VXV-Server__ processes your styles just like __VXV__ does including hash prefixing. `server()` will return a simple string containing all your styles - you can now save those styles somewhere or send them directly to the user.
```js
const vxv = require('vxv');
const server = require('vxv-server');
const mainStyles = vxv`
h1 { font-size: 2rem }
h2 { font-size: 1.5rem }
h3 { font-size: 1.25rem }
h4 { font-size: 1rem }
h5 { font-size: .875rem }
h6 { font-size: .75rem }
`;
const otherStyles = vxv`
p, dl, ol, ul, pre, blockquote {
margin-top: 1em;
margin-bottom: 1em;
}
`;
server();
// => All styles even those used in other files -
// => prefixed and concatenated into single string,
// => that you can use for serverside rendering.
```
## Monorepo
This is a monorepo, which means that there are multiple node modules in a single git repository, all the modules are in `packages/`. Monorepos are used by many other oss projects including [babel](http://babeljs.io), [react](http://reactjs.org) and [meteor](meteor.com) - [Learn why](https://github.com/babel/babel/blob/9f90b6f1405f80b432c6f20d18ca6c584cc1e6bb/doc/design/monorepo.md).
#### Packages
- [vxv](https://github.com/herber/vxv/tree/master/packages/vxv)
- [vxv-server](https://github.com/herber/vxv/tree/master/packages/vxv-server)
- [vxv-hash](https://github.com/herber/vxv/tree/master/packages/vxv-hash)
- [vxv-parser](https://github.com/herber/vxv/tree/master/packages/vxv-parser)
- [vxv-insert](https://github.com/herber/vxv/tree/master/packages/vxv-insert)
- [vxv-state](https://github.com/herber/vxv/tree/master/packages/vxv-state)
## License
MIT © [Tobias Herber](http://tobihrbr.com)