Caesar

"THIS IS THE LAST OF MY HAMON! TAKE IT!"

by Caesar Anthonio Zeppeli

Caesar is a developer-friendly library for CSS3 variables get & set.

- Set CSS variables by caesar.assign method like Object.assign.
- Get CSS variable value by name using caesar.query.

Demo

Install

``sh
$ npm install @realdennis/caesar
`

or script tag

`html

`

Usage

Only two methods caesar.assign & caesar.query & caesar.queryOne, the below is usage.

`javascript
import * as caesar from '@realdennis/caesar';

const el = document.querySelector('div.container');
caesar.assign(el, {
duration: '2s',
delay: '1.5s',
height: '20px'
});
/* Now the container style would be like below
** div.container{
** --duration: 2s;
** --delay: 1.5s;
** --height: 20px;
** transition-delay: var(--duration);
** }
**
*/
const { duration, height } = caesar.query(el, ['duration', 'height']);
const { delay } = caesar.queryOne(el,'delay');
console.log(duration); // "2s"
console.log(height); // "20px"
console.log(delay); // "1.5s"
`

Note

- When variable does not exist, it'll return empty string (default value is '').
- Caesar CANNOT get the initial CSS variable value in stylesheet.
- Each query return would be string type, though you assign in number type.
example:

`javascript
caesar.assign(el, {
containerTop: 20,
containerBottom: 10
});
const { containerTop:top } = caesar.query(el, ['containerTop']);
console.log(typeof top); // string
`

- If you are using typescript and querySelector, it'll get Element type, please type assertion as HTMLElement`.
- Full document will coming soon...

---

LICENSE MIT © 2019 realdennis