Aberdeen - v1.2.0
    Preparing search index...

    Function insertCss

    • Inserts CSS rules into the document, optionally scoping them with a unique class name.

      Takes a JavaScript object representation of CSS rules. camelCased property keys are converted to kebab-case (e.g., fontSize becomes font-size).

      Parameters

      • style: object

        An object where keys are CSS selectors (or camelCased properties) and values are CSS properties or nested rule objects.

        • Selectors are usually combined as a descendant-relationship (meaning just a space character) with their parent selector.
        • In case a selector contains a &, that character will be replaced by the parent selector.
        • Selectors will be split on , characters, each combining with the parent selector with or semantics.
        • Selector starting with '@' define at-rules like media queries. They may be nested within regular selectors.
      • global: boolean = false

        If true, styles are inserted globally without prefixing. If false (default), all selectors are prefixed with a unique generated class name (e.g., .AbdStl1) to scope the styles.

      Returns string

      The unique class name prefix used for scoping (e.g., .AbdStl1), or an empty string if global was true. Use this prefix with $ to apply the styles.

      const scopeClass = insertCss({
        color: 'red',
        padding: '10px',
        '&:hover': { // Use '&' for the root scoped selector
          backgroundColor: '#535'
        },
        '.child-element': { // Nested selector
          fontWeight: 'bold'
        },
        '@media (max-width: 600px)': {
          padding: '5px'
        }
      });
      // scopeClass might be ".AbdStl1"

      // Apply the styles
      $(scopeClass, () => { // Add class to the div
        $(`:Scoped content`);
        $('div.child-element:Child'); // .AbdStl1 .child-element rule applies
      });

      insertCss({
        '*': {
          fontFamily: 'monospace',
        },
        'a': {
          textDecoration: 'none',
          color: "#107ab0",
        }
      }, true); // Pass true for global

      $('a:Styled link');

    Settings

    Member Visibility