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