Function createCSSRule

Create CSS rule text from a selector and an array of declarations.

Declarations are joined with semicolons. The selector and declarations are used verbatim without validation or escaping; this function does not modify the DOM.

Usage:

const ret1 = createCSSRule(".a", [ "color:red" ]);
const ret2 = createCSSRule("#b", [ "color:red", "font-size:12px" ]);
console.log(ret1);
console.log(ret2);
Copy

Output:

.a{color:red;}
#b{color:red;font-size:12px;}
Copy

Example: Combine createCSSRule and injectStyle to add multiple styles at once.

import { createCSSRule, injectStyle } from "mazey";

const xStyle = createCSSRule(
  ".footer>.x-wish>a:first-child" +
  ",div.wish-flex>a[href^='https://github.com/chengchuu']" +
  ",.m-hide",
  [ "display: none" ]
);
const yStyle = createCSSRule(
  ".footer>.y-wish:before",
  [
    `content: 'Copyright (c) chengchuu'`,
    "color: inherit",
    "padding-inline-start: var(--y-wish-1_5)",
    "padding-inline-end: var(--y-wish-1_5)",
    "padding-top: var(--y-wish-1)",
    "padding-bottom: var(--y-wish-1)",
  ]
);
injectStyle(xStyle + yStyle, { id: "z-style" });
Copy

Output:

<style id="z-style">.footer>.x-wish>a:first-child,div.wish-flex>a[href^='https://github.com/chengchuu'],.m-hide{display: none;}.footer>.y-wish:before{content: 'Copyright (c) chengchuu';color: inherit;padding-inline-start: var(--y-wish-1_5);padding-inline-end: var(--y-wish-1_5);padding-top: var(--y-wish-1);padding-bottom: var(--y-wish-1);}</style>
Copy