Variable genStyleStringConst

Type Declaration

• • (selector: string, styleArray: string[]): string

  • 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

    Parameters

    • selector: string
    • styleArray: string[]

    Returns string

    The CSS selector and declaration block.