Nonlinear Programming Methods

    @hint/hint-scoped-svg-styles
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.21 • Public • Published

    scoped-svg-styles (@hint/hint-scoped-svg-styles)

    Scoped SVG Styles checks if SVG styles affect any other elements outside the svg.

    Why is this important?

    As <style> inside inline <svg> elements are not scoped to <svg>, these can affect elements of dom outside the SVG. So it is important to detect if any style (CSS rule or selector) inside <svg> selects elements outside it.

    What does the hint check?

    This hint checks if styles inside SVG affect any other elements outside it. If any such style is found, it reports the CSS rule that is affecting and html elements that are being affected.

    Examples that trigger the hint

    Any style rule inside SVG that selects elements outside it will trigger the hint.

    Example:

    <html>
        <body>
            <h1 class="my-style">Heading</h1>
    
            <svg>
                <style>
                    .my-style {
                        opacity: 0.5;
                    }
                </style>
                <text class="my-style">SVG text</text>
            </svg>
        </body>
    </html>

    Examples that pass the hint

    If in document, all styles inside SVGs are scoped to SVG only and are not affecting any element outside it, hint will pass.

    Example:

    <html>
        <body>
            <h1 class="html-style">Heading</h1>
    
            <svg>
                <style>
                    .svg-style {
                        opacity: 0.5;
                    }
                </style>
                <text class="svg-style">SVG text</text>
            </svg>
        </body>
    </html>

    Can the hint be configured?

    This hint can be configured to limit the number of HTML elements reported per CSS rule. If the hint finds an affecting CSS rule, it generates one report related to that rule and an additional report for each HTML element matched by that rule.

    If the maxReportsPerCSSRule option is passed to this hint, it will limit the number of reports related to affected elements, but reports related to the CSS rule will still be there.

    How to pass maxReportsPerCSSRule option to hint

    maxReportsPerCSSRule can be added in .hintrc as given below:

        ...
        "hints": {
                "scoped-svg-styles": [
                        "warning", {
                            "maxReportsPerCSSRule": 5
                        }
                ]
            },
        ...

    In above example, for every affecting rule, there can be a maximum of six reports. One report related to the CSS rule itself and a maximum of five reports related to affected elements.

    How to use this hint?

    This package is installed automatically by webhint:

    npm install hint --save-dev

    To use it, activate it via the .hintrc configuration file:

    {
        "connector": {...},
        "formatters": [...],
        "parsers": [...],
        "hints": {
            "scoped-svg-styles": "error"
        },
        ...
    }

    Note: The recommended way of running webhint is as a devDependency of your project.

    Install

    npm i @hint/hint-scoped-svg-styles

    Homepage

    webhint.io/

    DownloadsWeekly Downloads

    22,121

    Version

    1.3.21

    License

    Apache-2.0

    Unpacked Size

    24.4 kB

    Total Files

    13

    Last publish

    Collaborators

    • leotlee
    • vidorteg
    • oaflynn
    • molant
    • antross
    • johnatms