Class StyleParse

Provides resources for parsing style strings.

Methods

cssText pixels remPixels selectorText

Methods

StaticcssText

  • cssText(
        cssText: string,
        options?: { camelCase?: boolean },
    ): { [key: string]: string }

  • Parse a CSS declaration block / CSSDeclarationBlock (IE color: red; font-size: 14px;) into an object of property / value pairs.

    This implementation is optimized for parsing the output of CSSStyleRule.style.cssText, which is always well-formed according to the CSSOM spec. It is designed to be:

    - **Fast**: minimal allocations, no regex in the hot loop.
    - **Accurate**: ignores `;` inside quotes or parentheses.
    - **Flexible**: supports optional camel case conversion.
    - **CSS variable safe**: leaves `--*` properties untouched.

    Parameters

    • cssText: string

      A valid CSS declaration block (no selectors).

    • Optionaloptions: { camelCase?: boolean }

      Optional parser settings.

      • OptionalcamelCase?: boolean

        Convert hyphen-case property names to camel case.

    Returns { [key: string]: string }

    An object mapping property names to their CSS values.

Staticpixels

  • pixels(value: string): number

  • Parses a pixel string / computed styles. Ex. 100px returns 100.

    Parameters

    • value: string

      Value to parse.

    Returns number

    The integer component of a pixel string.

StaticremPixels

  • remPixels(multiplier?: number, options?: { targetDocument?: Document }): number

  • Returns the pixel value for 1rem based on the root document element. You may apply an optional multiplier.

    Parameters

    • Optionalmultiplier: number

      Optional multiplier to apply to rem pixel value; default: 1.

    • Optionaloptions: { targetDocument?: Document }

      Optional parameters.

      • OptionaltargetDocument?: Document

        The target DOM Document if different from the main browser global document.

    Returns number

    The pixel value for 1rem with or without a multiplier based on the root document element.

StaticselectorText

  • selectorText(
        selectorText: string,
        options?: {
            excludeSelectorParts?: RegExp[];
            includeSelectorPartSet?: Set<string>;
        },
    ): string[]

  • Split a CSS selector list into individual selectors, honoring commas that appear only at the top level (IE not inside (), [], or quotes). Additional options provide inclusion / exclusion filtering of selector parts.

    Examples: '.a, .b' → ['.a', '.b'] ':is(.a, .b):not([data-x=","]) .c, .d' → [':is(.a, .b):not([data-x=","]) .c', '.d']

    Parameters

    • selectorText: string

      CSSStyleRule.selectorText to parse.

    • Optionaloptions: { excludeSelectorParts?: RegExp[]; includeSelectorPartSet?: Set<string> }

      Optional filtering options.

      • OptionalexcludeSelectorParts?: RegExp[]

        An array of RegExp instances to filter by exclusion.

      • OptionalincludeSelectorPartSet?: Set<string>

        A Set of strings to filter by inclusion.

    Returns string[]

    Array of trimmed selector strings w/ optional filtering of parts.

Settings

Member Visibility

On This Page

Methods