1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Files
browser/libs/eslint/components/require-theme-colors-in-svg.spec.mjs
Will Martin 22cf55a23f [CL-846] forbid hardcoded colors in svg (#16167)
* add eslint rule to prevent hardcoded colors in svgs

* add tests

* warn instead of error for now
2025-09-10 22:22:39 -04:00

54 lines
1.7 KiB
JavaScript

import { RuleTester } from "@typescript-eslint/rule-tester";
import rule from "./require-theme-colors-in-svg.mjs";
const ruleTester = new RuleTester({
languageOptions: {
parserOptions: {
project: [__dirname + "/../tsconfig.spec.json"],
projectService: {
allowDefaultProject: ["*.ts*"],
},
tsconfigRootDir: __dirname + "/..",
},
},
});
ruleTester.run("require-theme-colors-in-svg", rule.default, {
valid: [
{
name: "Allows fill=none",
code: 'const icon = svgIcon`<svg><path fill="none"/></svg>`;',
},
{
name: "Allows CSS variable",
code: 'const icon = svgIcon`<svg><path fill="var(--my-color)"/></svg>`;',
},
{
name: "Allows class-based coloring",
code: 'const icon = svgIcon`<svg><path class="tw-fill-art-primary"/></svg>`;',
},
],
invalid: [
{
name: "Errors on fill with hex color",
code: 'const icon = svgIcon`<svg><path fill="#000000"/></svg>`;',
errors: [{ messageId: "hardcodedColor", data: { color: "#000000" } }],
},
{
name: "Errors on stroke with named color",
code: 'const icon = svgIcon`<svg><path stroke="red"/></svg>`;',
errors: [{ messageId: "hardcodedColor", data: { color: "red" } }],
},
{
name: "Errors on fill with rgb()",
code: 'const icon = svgIcon`<svg><path fill="rgb(255,0,0)"/></svg>`;',
errors: [{ messageId: "hardcodedColor", data: { color: "rgb(255,0,0)" } }],
},
{
name: "Errors on fill with named color",
code: 'const icon = svgIcon`<svg><path fill="blue"/></svg>`;',
errors: [{ messageId: "hardcodedColor", data: { color: "blue" } }],
},
],
});