realdennis / caesar

Batch read / update multiple CSS3 variables !

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

$ npm install @realdennis/caesar

or script tag

<script src="https://unpkg.com/@realdennis/[email protected]/dist/index.umd.js"></script>

Usage

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

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:

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