Commit a1dff5c3 authored by David Sveningsson's avatar David Sveningsson

feat(rules): new rule no-style-tag

[skip release]
parent 50d877ca
Pipeline #76894334 passed with stages
in 11 minutes and 2 seconds
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`docs/rules/no-style-tag.md inline validation: correct 1`] = `Array []`;
exports[`docs/rules/no-style-tag.md inline validation: incorrect 1`] = `
Array [
Object {
"errorCount": 1,
"filePath": "inline",
"messages": Array [
Object {
"column": 1,
"context": undefined,
"line": 1,
"message": "Use external stylesheet with <link> instead of <style> tag",
"offset": 0,
"ruleId": "no-style-tag",
"severity": 2,
"size": 6,
},
],
"source": "<style>
body {
background-color: hotpink;
}
</style>",
"warningCount": 0,
},
]
`;
import HtmlValidate from "../../../src/htmlvalidate";
const markup: { [key: string]: string } = {};
markup["incorrect"] = `<style>
body {
background-color: hotpink;
}
</style>`;
markup["correct"] = `<link rel="stylesheet" src="my-style.css">`;
describe("docs/rules/no-style-tag.md", () => {
it("inline validation: incorrect", () => {
const htmlvalidate = new HtmlValidate({"rules":{"no-style-tag":"error"}});
const report = htmlvalidate.validateString(markup["incorrect"]);
expect(report.results).toMatchSnapshot();
});
it("inline validation: correct", () => {
const htmlvalidate = new HtmlValidate({"rules":{"no-style-tag":"error"}});
const report = htmlvalidate.validateString(markup["correct"]);
expect(report.results).toMatchSnapshot();
});
});
@ngdoc rule
@module rules
@name no-style-tag
@summary Disallow usage of <style> tag
@description
# Disallow usage of `<style>` tag (`no-style-tag`)
The `<style>` tag can be used to write CSS directly inside the document. When
using multiple documents it is preferable to put all styling in a single asset
and use the `<link>` tag to reference it to lower the bandwidth required (by
preventing duplicated style accross all page loads).
## Rule details
Examples of **incorrect** code for this rule:
<validate name="incorrect" rules="no-style-tag">
<style>
body {
background-color: hotpink;
}
</style>
</validate>
Examples of **correct** code for this rule:
<validate name="correct" rules="no-style-tag">
<link rel="stylesheet" src="my-style.css">
</validate>
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rule no-style-tag should contain documentation 1`] = `
Object {
"description": "Prefer to use external stylesheets with the \`<link>\` tag instead of inlining the styling.",
"url": "https://html-validate.org/rules/no-style-tag.html",
}
`;
import HtmlValidate from "../htmlvalidate";
import "../matchers";
describe("rule no-style-tag", () => {
let htmlvalidate: HtmlValidate;
beforeAll(() => {
htmlvalidate = new HtmlValidate({
rules: { "no-style-tag": "error" },
});
});
it("should not report for other tags", () => {
const report = htmlvalidate.validateString("<div></div>");
expect(report).toBeValid();
});
it("should not report error when <style> is used", () => {
const html = "<style>foo</style>";
const report = htmlvalidate.validateString(html);
expect(report).toBeInvalid();
expect(report).toHaveError(
"no-style-tag",
"Use external stylesheet with <link> instead of <style> tag"
);
});
it("should contain documentation", () => {
expect(htmlvalidate.getRuleDocumentation("no-style-tag")).toMatchSnapshot();
});
});
import { TagOpenEvent } from "../event";
import { Rule, RuleDocumentation, ruleDocumentationUrl } from "../rule";
class NoStyleTag extends Rule {
public documentation(): RuleDocumentation {
return {
description:
"Prefer to use external stylesheets with the `<link>` tag instead of inlining the styling.",
url: ruleDocumentationUrl(__filename),
};
}
public setup(): void {
this.on("tag:open", (event: TagOpenEvent) => {
const node = event.target;
if (node.tagName === "style") {
this.report(
node,
"Use external stylesheet with <link> instead of <style> tag"
);
}
});
}
}
module.exports = NoStyleTag;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment