.stylelintrc.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* eslint-env node */
   6
   7 "use strict";
   8
   9 const fs = require("fs");
  10 const path = require("path");
  11
  12 function readFile(path) {
  13   return fs
  14     .readFileSync(path, { encoding: "utf-8" })
  15     .split("\n")
  16     .filter(p => p && !p.startsWith("#"));
  17 }
  18
  19 const ignoreFiles = [
  20   ...readFile(
  21     path.join(__dirname, "tools", "rewriting", "ThirdPartyPaths.txt")
  22   ),
  23   ...readFile(path.join(__dirname, "tools", "rewriting", "Generated.txt")),
  24 ];
  25
  26 module.exports = {
  27   extends: ["stylelint-config-recommended"],
  28   ignoreFiles,
  29   rules: {
  30     /* Disabled because of `-moz-element(#foo)` which gets misparsed. */
  31     "color-no-invalid-hex": null,
  32     "font-family-no-missing-generic-family-keyword": [
  33       true,
  34       {
  35         ignoreFontFamilies: [
  36           "-moz-button",
  37           "-moz-field",
  38           "-moz-fixed",
  39           "-moz-list",
  40           "caption",
  41         ],
  42       },
  43     ],
  44
  45     "function-no-unknown": [
  46       true,
  47       {
  48         ignoreFunctions: [
  49           "light-dark" /* Used for color-scheme dependent colors */,
  50           "add" /* Used in mathml.css */,
  51         ],
  52       },
  53     ],
  54
  55     "max-nesting-depth": [
  56       3,
  57       {
  58         ignore: ["blockless-at-rules"],
  59       },
  60     ],
  61
  62     "no-descending-specificity": null,
  63     "no-duplicate-selectors": null,
  64
  65     "property-no-unknown": [
  66       true,
  67       {
  68         ignoreProperties: ["overflow-clip-box"],
  69       },
  70     ],
  71
  72     /*
  73      * XXXgijs: we would like to enable this, but we can't right now.
  74      * This is because Gecko uses a number of custom pseudoclasses,
  75      * and stylelint assumes that for `:unknown-pseudoclass(foo)`,
  76      * `foo` should be a known type.
  77      * This is tedious but workable for things like `-moz-locale-dir` where
  78      * the set of acceptable values (ltr/rtl) is small.
  79      * However, for tree cells, the set of values is unlimited (ie
  80      * user-defined, based on atoms sent by the JS tree view APIs).
  81      * There does not appear to be a way to exempt the contents of these
  82      * unknown pseudoclasses, and as a result, this rule is not
  83      * usable for us. The 'type' only includes the contents of the
  84      * pseudoclass, not the pseudo itself, so we can't filter based on the
  85      * pseudoclass either.
  86      * Ideally, we would either create an option to the builtin rule
  87      * in stylelint itself, or mimic the rule but exempt these, or
  88      * add parser support for our custom pseudoclasses.
  89      *
  90      * For now, we just disable this rule.
  91      */
  92     "selector-type-no-unknown": null,
  93     /*
  94      * See above - if we enabled this rule, we'd have to allow for a number
  95      * of custom elements we use, which are listed here:
  96     "selector-type-no-unknown": [
  97       true,
  98       {
  99         ignore: ["custom-elements"],
 100         ignoreTypes: [
 101           // Modern custom element / storybooked components:
 102           /^moz-/,
 103           // moz-locale-dir trips this rule for some reason:
 104           "rtl",
 105           "ltr",
 106           // Migrated XBL elements not part of core XUL that we use at the moment:
 107           "findbar",
 108           "panelmultiview",
 109           "panelview",
 110           "popupnotification",
 111           "popupnotificationcontent",
 112           // Legacy XUL elements:
 113           // (the commented out ones used to be a thing and aren't used in-tree anymore)
 114           "arrowscrollbox",
 115           "box",
 116           // "broadcaster",
 117           // "broadcasterset",
 118           "button",
 119           "browser",
 120           "checkbox",
 121           "caption",
 122           // clicktoscroll
 123           // colorpicker
 124           // column
 125           // columns
 126           "commandset",
 127           "command",
 128           // conditions
 129           // content
 130           // datepicker
 131           "deck",
 132           "description",
 133           "dialog",
 134           // dialogheader
 135           "dropmarker",
 136           "editor",
 137           // grid
 138           // grippy
 139           "groupbox",
 140           "hbox",
 141           // iframe
 142           // image
 143           "key",
 144           "keyset",
 145           // label
 146           "listbox",
 147           // listcell
 148           // listcol
 149           // listcols
 150           // listhead
 151           // listheader
 152           "listitem",
 153           // member
 154           "menu",
 155           "menubar",
 156           "menucaption",
 157           "menuitem",
 158           "menulist",
 159           "menupopup",
 160           "menuseparator",
 161           "notification",
 162           "notificationbox",
 163           "observes",
 164           // overlay
 165           // page
 166           "panel",
 167           // param
 168           "popupset",
 169           // preference
 170           // preferences
 171           // prefpane
 172           // prefwindow
 173           // progressmeter
 174           // query
 175           // queryset
 176           "radio",
 177           "radiogroup",
 178           // resizer
 179           "richlistbox",
 180           "richlistitem",
 181           // row
 182           // rows
 183           // rule
 184           // scale
 185           // script
 186           "scrollbar",
 187           "scrollbox",
 188           "scrollcorner",
 189           "separator",
 190           "spacer",
 191           // spinbuttons
 192           "splitter",
 193           "stack",
 194           // statusbar
 195           // statusbarpanel
 196           "stringbundle",
 197           "stringbundleset",
 198           "tab",
 199           "tabbox",
 200           "tabpanel",
 201           "tabpanels",
 202           "tabs",
 203           // template
 204           // textnode
 205           "textbox",
 206           // timepicker
 207           "titlebar",
 208           "toolbar",
 209           "toolbarbutton",
 210           // toolbargrippy
 211           "toolbaritem",
 212           "toolbarpalette",
 213           "toolbarpaletteitem",
 214           "toolbarseparator",
 215           "toolbarset",
 216           "toolbarspacer",
 217           "toolbarspring",
 218           "toolbartabstop",
 219           "toolbox",
 220           "tooltip",
 221           "tree",
 222           "treecell",
 223           "treechildren",
 224           "treecol",
 225           "treecols",
 226           "treeitem",
 227           "treerow",
 228           "treeseparator",
 229           // triple
 230           "vbox",
 231           // where
 232           "window",
 233           "wizard",
 234           "wizardpage",
 235         ],
 236       },
 237     ],
 238     */
 239
 240     "selector-pseudo-class-no-unknown": [
 241       true,
 242       {
 243         ignorePseudoClasses: ["popover-open"],
 244       },
 245     ],
 246     "selector-pseudo-element-no-unknown": [
 247       true,
 248       {
 249         ignorePseudoElements: ["slider-track", "slider-fill", "slider-thumb"],
 250       },
 251     ],
 252   },
 253
 254   overrides: [
 255     {
 256       files: "*.scss",
 257       customSyntax: "postcss-scss",
 258       extends: "stylelint-config-recommended-scss",
 259     },
 260     {
 261       files: "browser/components/newtab/**",
 262       customSyntax: "postcss-scss",
 263       extends: "stylelint-config-standard-scss",
 264       rules: {
 265         "at-rule-disallowed-list": [
 266           ["debug", "warn", "error"],
 267           {
 268             message: "Clean up %s directives before committing",
 269           },
 270         ],
 271         "at-rule-no-vendor-prefix": null,
 272         "color-function-notation": null,
 273         "color-hex-case": "upper",
 274         "comment-empty-line-before": [
 275           "always",
 276           {
 277             except: ["first-nested"],
 278             ignore: ["after-comment", "stylelint-commands"],
 279           },
 280         ],
 281         "custom-property-empty-line-before": null,
 282         "custom-property-pattern": null,
 283         "declaration-block-no-duplicate-properties": true,
 284         "declaration-block-no-redundant-longhand-properties": null,
 285         "declaration-no-important": true,
 286         "function-no-unknown": [
 287           true,
 288           {
 289             ignoreFunctions: ["div"],
 290           },
 291         ],
 292         "function-url-no-scheme-relative": true,
 293         indentation: 2,
 294         "keyframes-name-pattern": null,
 295         "media-feature-name-no-vendor-prefix": null,
 296         "no-descending-specificity": null,
 297         "no-eol-whitespace": true,
 298         "no-missing-end-of-source-newline": true,
 299         "number-leading-zero": "always",
 300         "number-no-trailing-zeros": true,
 301         "property-disallowed-list": [
 302           ["margin-left", "margin-right"],
 303           {
 304             message: "Use margin-inline instead of %s",
 305           },
 306         ],
 307         "property-no-unknown": true,
 308         "property-no-vendor-prefix": null,
 309         "scss/dollar-variable-empty-line-before": null,
 310         "scss/double-slash-comment-empty-line-before": [
 311           "always",
 312           {
 313             except: ["first-nested"],
 314             ignore: ["between-comments", "stylelint-commands", "inside-block"],
 315           },
 316         ],
 317         "selector-class-pattern": null,
 318         "selector-no-vendor-prefix": null,
 319         "string-quotes": [
 320           "single",
 321           {
 322             avoidEscape: true,
 323           },
 324         ],
 325         "value-keyword-case": null,
 326         "value-no-vendor-prefix": null,
 327       },
 328     },
 329   ],
 330 };