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