picasso-paint/index.html

Paint , a simple CSS-in-JS library that allows you to write CSS in JavaScript cssText/Object

<button class="btn-1">Click Me</button>
<br>
<br>
<button class="btn-2">Click Me</button><br>
<input type="range">
<script src="Paint.js"></script>
<style>
input[type="range"]{
	-webkit-appearance: none;
}
</style>
<script>
/* Paint the Picasso CSS-in-JS Editor */

window.onload = function () {
// range
Paint('input[type="range"]::-webkit-slider-thumb',`
-webkit-appearance:none;
background:red;
width:20px;
height:20px;
`);
Paint('input[type="range"]',`
-webkit-appearance:none;
background:red;
width:200px;
height:12px;
`);
console.log("::-webkit-slider-thumb",Paint.getCSSObj(`input[type="range"]::-webkit-slider-thumb`));

// btn-2
Paint(".btn-2",`
background: #1a1a1a;
border-radius:50px;
transition:.8s;
width:200px;
height:69px;
border:none;`);
Paint(".btn-2").hover(`
background: red;
border-radius:0px;
width:200px;
height:69px;
border:none;`);
Paint(".btn-2").active(`
background: gold;
border-radius:0px;
width:200px;
height:69px;
border:none;`);

// btn-1
Paint(".btn-1",`
background: #1a1a1a;
border-radius:50px;
transition:.8s;
width:200px;
height:69px;
border:none;`);
Paint(".btn-1").hover(`
background: red;
border-radius:0px;
width:200px;
height:69px;
border:none;`);
Paint(".btn-1").active(`
background: gold;
border-radius:0px;
width:200px;
height:69px;
border:none;`);
console.log("element txt",Paint.getCSS(".btn-2")); // return css code for element style
console.log(":active txt",Paint.getCSS(".btn-2:active")); // return :active as a css code
console.log(":hover txt",Paint.getCSS(".btn-2:hover")); // same thing

console.log("element obj",Paint.getCSSObj(".btn-2")); // same thing but as a CSSStyleDeclaration object
console.log(":active obj",Paint.getCSSObj(".btn-2:active")); // same thing but as a CSSStyleDeclaration object

Paint.getCSSObj(".btn-2:hover").background="green";
Paint.getCSSObj(".btn-2:active").background="#00ff00";
console.log(":hover obj",Paint.getCSSObj(".btn-2:hover")); // same thing but as a CSSStyleDeclaration object


// Root
Paint.root("--MyBgColor1","red");
Paint.root("--MyBgColor2","green");
Paint.root("--MyBgColor3","blue");
Paint.root("--MyBgColor4","yellow");
Paint.removeRoot("--MyBgColor4");
console.log("Root:",Paint.getCSSObj(":root"));
/* no need `setCSS` function rePaint `Paint(selector,cssText)` is enough to change CSS */
};
</script>