mirror of
https://github.com/bitwarden/browser
synced 2025-12-06 00:13:28 +00:00
* add eslint rule to prevent hardcoded colors in svgs * add tests * warn instead of error for now
54 lines
1.7 KiB
JavaScript
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" } }],
|
|
},
|
|
],
|
|
});
|