Disallow usage of <style> tag

Rule ID:
no-style-tag
Category:
Style
Standards:
-
Fixable:
No

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 across all page loads).

Rule details

Examples of incorrect code for this rule:

<style>
  body {
    background-color: hotpink;
  }
</style>
error: Use external stylesheet with <link> instead of <style> tag (no-style-tag)
> 1 | <style>
    | ^^^^^^
  2 |   body {
  3 |     background-color: hotpink;
  4 |   }


1 error found.

Examples of correct code for this rule:

<link rel="stylesheet" src="my-style.css" />

Options

This rule takes an optional object:

{
  "allowTemplate": true
}

allowTemplate

When set to true the rule allows <style> tags as direct children of <template> elements. This is mostly useful when using shadow trees.

With allowTemplate set to true this is considered valid:

<template>
  <style>
    :host {
      display: block;
    }
  </style>
</template>

Version history