no-browser-refs-in-toolkit

This rule prevents toolkit code from importing browser-specific CSS or SVG files. It is applied to both @import statements and CSS property values using the url function.

This ensures that toolkit code remains independent and can be used in other applications/contexts where browser code is not necessarily available. Browser code can depend on toolkit code, but toolkit code should never depend on browser code, since toolkit code can be used in other applications/contexts where browser code may not be available.

See additional documentation for more information on internal URLs.

Rule Scope

This rule only applies to CSS files within the toolkit/ directory. It is configured as an override in the stylelint configuration to target only toolkit/**/*.css files.

Examples of incorrect usage for this rule:

Incorrect usage of @import statements:

@import "chrome://browser/skin/example-file.css";

@import url("chrome://browser/skin/example-file.css");

@import "resource:///modules/example-file.css";

@import url("resource:///modules/example-file.css");

@import "resource://app/modules/example-file.css";

@import url("resource://app/modules/example-file.css");

@import "moz-src:///browser/example-file.css";

@import url("moz-src:///browser/example-file.css");

Incorrect usage of property values:

.background-image {
  background-image: url("chrome://browser/skin/example-file.svg");
}

.background-image {
  background: url("moz-src:///browser/example-file.svg");
}

.background-image {
  background: url("moz-src://foo/browser/example-file.svg");
}

Examples of correct usage for this rule:

Correct usage of @import statements:

@import "chrome://global/skin/example-file.css";

@import url("chrome://global/skin/example-file.css");

@import "example-file.css";

@import url("example-file.css");

@import "resource://content-accessible/example-file.css"

@import url("resource://content-accessible/example-file.css");

Correct usage of property values:

.background-image {
  background: url("chrome://global/skin/example-file.svg");
}

.background-image {
  background: url("example-file.svg");
}