Resolve Stylelint errors (#984)

* Do not throw lint error for multi-line @imports

* Do not flag lint errors where practical

* Use consistent quotes style

* Allow currently-erroring “unknown” properties

* Close open parentheses in pre rule

* Allow vendor prefixes where required

* Inline one-line grid-template-areas

* Quote font-family names

* Allow certain grid shorthands

* Use shorthand where possible

* Use hex for named colors

* Resolve conflicting flex shorthand overrides

* Prefer hex value over named color

* Address flex-wrap override

* Remove redundant spacing rules

.stylelintrc

@@ -19,13 +19,15 @@
 		"no-duplicate-selectors": true,
 		"no-extra-semicolons": true,
 		"color-named": ["never", {
-			"ignore": "inside-function"
+			"ignore": ["inside-function"]
 		}],
 		"function-url-no-scheme-relative": true,
 		"shorthand-property-no-redundant-values": true,
 		"value-no-vendor-prefix": true,
 		"property-no-vendor-prefix": true,
-		"declaration-block-no-redundant-longhand-properties": true,
+		"declaration-block-no-redundant-longhand-properties": [true, {
+			"ignoreShorthands": ["/grid/"]
+		}],
 		"selector-max-id": 0,
 		"selector-no-vendor-prefix": true,
 		"at-rule-no-vendor-prefix": true,
@@ -35,7 +37,7 @@
 		"no-unknown-animations": true,
 		"color-hex-case": "lower",
 		"color-hex-length": "long",
-		"font-family-name-quotes": "always-where-required",
+		"font-family-name-quotes": "always-where-recommended",
 		"function-comma-newline-after": "never-multi-line",
 		"function-comma-newline-before": "never-multi-line",
 		"function-comma-space-after": "always-single-line",
@@ -54,7 +56,7 @@
 		"value-list-comma-newline-before": "never-multi-line",
 		"value-list-comma-space-after": "always-single-line",
 		"value-list-comma-space-before": "never-single-line",
-		"value-list-comma-newline-after": "always",
+		"value-list-comma-newline-after": "always-multi-line",
 		"value-list-max-empty-lines": 0,
 		"property-case": "lower",
 		"declaration-bang-space-after": "never",
@@ -87,10 +89,10 @@
 		"media-feature-parentheses-space-inside": "never",
 		"media-feature-range-operator-space-after": "always",
 		"media-feature-range-operator-space-before": "always",
-		"media-query-list-comma-space-after": "always",
+		"media-query-list-comma-space-after": "always-single-line",
 		"media-query-list-comma-space-before": "never",
 		"at-rule-name-case": "lower",
-		"at-rule-name-space-after": "always",
+		"at-rule-name-space-after": "always-single-line",
 		"at-rule-semicolon-newline-after": "always",
 		"at-rule-semicolon-space-before": "never",
 		"comment-whitespace-inside": "always",

src/css/base/_html.scss

@@ -19,13 +19,13 @@ html {
 
 	// Typography
 	-ms-overflow-style: scrollbar;
-	-ms-text-size-adjust: 100%;
-	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */
+	-webkit-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */
 
 	font-kerning: normal;
-	-moz-font-feature-settings: "kern";
-	-ms-font-feature-settings: "kern";
-	-webkit-font-feature-settings: "kern";
+	-moz-font-feature-settings: "kern"; /* stylelint-disable-line property-no-vendor-prefix */
+	-ms-font-feature-settings: "kern"; /* stylelint-disable-line property-no-vendor-prefix */
+	-webkit-font-feature-settings: "kern"; /* stylelint-disable-line property-no-vendor-prefix */
 	font-feature-settings: "kern";
 
 	&:lang(en-US) {
@@ -41,10 +41,12 @@ html {
 	// Media Queries
 	@media screen and (-webkit-min-device-pixel-ratio: 2),
 	screen and (min-resolution: 2dppx) {
+		/* stylelint-disable-next-line property-no-unknown */
 		font-smoothing: subpixel-antialiased; // Only apply to devices that support font smoothing: https://www.zachleat.com/web/font-smooth/
 	}
 
 	// Vendor
+	/* stylelint-disable-next-line at-rule-no-vendor-prefix */
 	@-ms-viewport {
 		width: device-width; // https://msdn.microsoft.com/en-us/library/hh869615(v=vs.85).aspx
 	}

src/css/base/_resets.scss

@@ -142,6 +142,7 @@ sub {
 
 	// Supports
 	@supports not (font-variant-position: sub) {
+		/* stylelint-disable-next-line property-no-vendor-prefix */
 		-webkit-font-feature-settings: "subs", "subs";
 		font-feature-settings: "subs", "subs";
 
@@ -163,6 +164,7 @@ sup {
 
 	// Supports
 	@supports not (font-variant-position: sup) {
+		/* stylelint-disable-next-line property-no-vendor-prefix */
 		-webkit-font-feature-settings: "sups", "sups";
 		font-feature-settings: "sups", "sups";
 
@@ -241,27 +243,34 @@ time {
 
 	// Supports
 	@supports not (font-variant-numeric: tabular-nums) {
+		/* stylelint-disable-next-line property-no-vendor-prefix */
 		-webkit-font-feature-settings: "pnum" 0, "tnum", "tnum";
 		font-feature-settings: "pnum" 0, "tnum", "tnum";
 	}
 
+	/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
 	font-variant-numeric: oldstyle-nums;
 
 	@supports not (font-variant-numeric: oldstyle-nums) {
+		/* stylelint-disable-next-line property-no-vendor-prefix */
 		-webkit-font-feature-settings: "lnum" 0, "onum", "onum";
 		font-feature-settings: "lnum" 0, "onum", "onum";
 	}
 
+	/* stylelint-disable-next-line property-no-vendor-prefix */
 	-ms-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum";
 
 	@supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) {
+		/* stylelint-disable-next-line property-no-vendor-prefix */
 		-webkit-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum";
 		font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum";
 	}
 
+	/* stylelint-disable-next-line property-no-vendor-prefix, declaration-block-no-duplicate-properties */
 	-ms-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum";
 
 	@supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) {
+		/* stylelint-disable-next-line property-no-vendor-prefix */
 		-webkit-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum";
 		font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum";
 	}

src/css/components/_c-404.scss

@@ -11,7 +11,7 @@
 	background-color: $color-white;
 	border-top: $border-thicker solid $color-pink-shade;
 	margin-top: 2rem;
-	padding: 1rem 2rem 2rem 2rem;
+	padding: 1rem 2rem 2rem;
 
 	// Supports
 	@supports #{$supports-flex} {
@@ -28,7 +28,7 @@
 	}
 
 	@include mappy-bp(lap-small) {
-		padding: 1rem 4rem 2rem 4rem;
+		padding: 1rem 4rem 2rem;
 	}
 
 	// Text-level formatting
@@ -42,6 +42,7 @@
 .c-404__link {
 	@include link-states($color-pink-shade);
 
+	/* stylelint-disable-next-line property-no-unknown */
 	text-decoration-thickness: $border-thinner;
 	text-underline-offset: 0.25em;
 }

src/css/components/_c-a11y-summary.scss

@@ -12,7 +12,7 @@
 	margin: 2rem 0;
 
 	@include mappy-bp(palm-large) {
-		padding: 2rem 7rem 2.75rem 7rem;
+		padding: 2rem 7rem 2.75rem;
 	}
 }
 

src/css/components/_c-checklist.scss

@@ -109,6 +109,7 @@ $_checklist-padding: 1.5rem;
 
 	font-family: $font-family-secondary;
 	letter-spacing: $font-tracking-slight;
+	/* stylelint-disable-next-line property-no-unknown */
 	text-decoration-thickness: $border-thinnest;
 	text-underline-offset: 0.3em;
 	text-transform: uppercase;

src/css/components/_c-copy-email-button.scss

@@ -9,7 +9,7 @@
 	font-size: $font-size-body-tiny;
 	letter-spacing: $font-tracking-slight;
 	margin-left: 1ch;
-	padding: 0.2rem 0.4rem 0.1rem 0.4rem;
+	padding: 0.2rem 0.4rem 0.1rem;
 	text-transform: uppercase;
 	transition: background-color $animation-duration-shorter $animation-easing-character;
 

src/css/components/_c-homepage-card.scss

@@ -102,6 +102,7 @@
 		border-bottom: none;
 		text-decoration: underline;
 		text-decoration-color: $color-pink;
+		/* stylelint-disable-next-line property-no-unknown */
 		text-decoration-thickness: $border-thinnest;
 		text-underline-offset: 0.5rem;
 	}

src/css/components/_c-person.scss

@@ -133,6 +133,7 @@ $_person-photo: (
 	font-family: $font-family-secondary;
 	font-size: $font-size-body;
 	letter-spacing: $font-tracking-slight;
+	/* stylelint-disable-next-line property-no-unknown */
 	text-decoration-thickness: $border-thinnest;
 	text-transform: uppercase;
 	text-underline-offset: 0.3em;

src/css/components/_c-wcag-explanation.scss

@@ -2,11 +2,11 @@
 	background-color: $color-blue-tint;
 	font-family: $font-family-secondary;
 	margin-bottom: 1rem;
-	padding: 0.5rem 1.5rem 2rem 1.5rem;
+	padding: 0.5rem 1.5rem 2rem;
 
 	// Breakpoints
 	@include mappy-bp(palm-small) {
-		padding: 0.5rem 4rem 2rem 4rem;
+		padding: 0.5rem 4rem 2rem;
 	}
 
 	// Text-level formatting
@@ -20,6 +20,7 @@
 .c-wcag-explanation__link {
 	@include link-states($color-blue-shade);
 
+	/* stylelint-disable-next-line property-no-unknown */
 	text-decoration-thickness: $border-thinnest;
 	text-underline-offset: 0.3em;
 }

src/css/components/content/_headings.scss

@@ -43,7 +43,6 @@
 	h5 {
 		color: $color-gray-shade;
 		font-weight: $font-weight-bold;
-		margin-bottom: 2ch;
 		margin-bottom: -4ch;
 	}
 }

src/css/components/content/_inline-content.scss

@@ -77,7 +77,7 @@
 	// Style guide: Components.post.pre
 	pre {
 		margin-left: map-get($global-post-content-inset, small) * -1;
-		width: calc(100% + (#{map-get($global-post-content-inset, small) * 2)});
+		width: calc(100% + (#{map-get($global-post-content-inset, small) * 2)}));
 
 		// Breakpoints
 		@include mappy-bp(palm-large) {

src/css/imports/_fonts.scss

@@ -1,56 +1,66 @@
 // Anaheim
 @font-face {
 	font-display: swap;
-	font-family: "Anaheim";
+	font-family: Anaheim;
 	font-style: normal;
 	font-weight: 400;
-	src: local('Anaheim'), local('Anaheim-Regular'),
-			 url("../fonts/anaheim-v7-latin-regular.woff") format("woff"),
-			 url("../fonts/anaheim-v7-latin-regular.woff2") format("woff2");
+	src:
+		local("Anaheim"),
+		local("Anaheim-Regular"),
+		url("../fonts/anaheim-v7-latin-regular.woff") format("woff"),
+		url("../fonts/anaheim-v7-latin-regular.woff2") format("woff2");
 }
 
 
 // Noto Serif Regular
 @font-face {
-	font-family: 'Noto Serif';
+	font-family: "Noto Serif";
 	font-style: normal;
 	font-weight: 400;
-	src: local('Noto Serif'), local('NotoSerif'),
-			 url('../fonts/noto-serif-v8-latin-regular.woff2') format('woff2'),
-			 url('../fonts/noto-serif-v8-latin-regular.woff') format('woff');
+	src:
+		local("Noto Serif"),
+		local("NotoSerif"),
+		url("../fonts/noto-serif-v8-latin-regular.woff2") format("woff2"),
+		url("../fonts/noto-serif-v8-latin-regular.woff") format("woff");
 }
 
 
 // Noto Serif Italic
 @font-face {
-	font-family: 'Noto Serif';
+	font-family: "Noto Serif";
 	font-style: italic;
 	font-weight: 400;
-	src: local('Noto Serif Italic'), local('NotoSerif-Italic'),
-			 url('../fonts/noto-serif-v8-latin-italic.woff2') format('woff2'),
-			 url('../fonts/noto-serif-v8-latin-italic.woff') format('woff');
+	src:
+		local("Noto Serif Italic"),
+		local("NotoSerif-Italic"),
+		url("../fonts/noto-serif-v8-latin-italic.woff2") format("woff2"),
+		url("../fonts/noto-serif-v8-latin-italic.woff") format("woff");
 }
 
 
 // Noto Serif Bold
 @font-face {
-	font-family: 'Noto Serif';
+	font-family: "Noto Serif";
 	font-style: normal;
 	font-weight: 700;
-	src: local('Noto Serif Bold'), local('NotoSerif-Bold'),
-			 url('../fonts/noto-serif-v8-latin-700.woff2') format('woff2'),
-			 url('../fonts/noto-serif-v8-latin-700.woff') format('woff');
+	src:
+		local("Noto Serif Bold"),
+		local("NotoSerif-Bold"),
+		url("../fonts/noto-serif-v8-latin-700.woff2") format("woff2"),
+		url("../fonts/noto-serif-v8-latin-700.woff") format("woff");
 }
 
 
 // Noto Serif Bold Italic
 @font-face {
-	font-family: 'Noto Serif';
+	font-family: "Noto Serif";
 	font-style: italic;
 	font-weight: 700;
-	src: local('Noto Serif Bold Italic'), local('NotoSerif-BoldItalic'),
-			 url('../fonts/noto-serif-v8-latin-700italic.woff2') format('woff2'),
-			 url('../fonts/noto-serif-v8-latin-700italic.woff') format('woff');
+	src:
+		local("Noto Serif Bold Italic"),
+		local("NotoSerif-BoldItalic"),
+		url("../fonts/noto-serif-v8-latin-700italic.woff2") format("woff2"),
+		url("../fonts/noto-serif-v8-latin-700italic.woff") format("woff");
 }
 
 
@@ -60,7 +70,9 @@
 	font-family: "Source Code Pro";
 	font-style: normal;
 	font-weight: 400;
-	src: local("Source Code Pro Regular"), local("SourceCodePro-Regular"),
-			 url("../fonts/source-code-pro-v11-latin-regular.woff") format("woff"),
-			 url("../fonts/source-code-pro-v11-latin-regular.woff2") format("woff2");
+	src:
+		local("Source Code Pro Regular"),
+		local("SourceCodePro-Regular"),
+		url("../fonts/source-code-pro-v11-latin-regular.woff") format("woff"),
+		url("../fonts/source-code-pro-v11-latin-regular.woff2") format("woff2");
 }

src/css/layout/_l-footer-nav.scss

@@ -4,7 +4,6 @@
 		// Breakpoints
 		@include mappy-bp(palm-small) {
 			display: flex;
-			flex-direction: row;
 			flex-flow: row wrap;
 		}
 

src/css/layout/_l-generic-title.scss

@@ -1,5 +1,5 @@
 .l-generic-title {
-background-color: pink;
+background-color: #ffc2cc;
 	// Supports
 	@supports #{$supports-flex} {
 		// Breakpoints

src/css/layout/_l-lip.scss

@@ -6,8 +6,7 @@
 			display: grid;
 			grid-template-columns: map-get($global-bleed, large) $global-grid-columns map-get($global-bleed, large);
 			grid-template-rows: 3rem;
-			grid-template-areas:
-				". hollow fill fill";
+			grid-template-areas: ". hollow fill fill";
 		}
 	}
 	// Contexts

src/css/layout/_l-main.scss

@@ -24,8 +24,7 @@
 			@include mappy-bp(lap-small) {
 				display: grid;
 				grid-template-columns: map-get($global-bleed, large) $global-grid-columns map-get($global-bleed, large);
-				grid-template-areas:
-					". toc content .";
+				grid-template-areas: ". toc content .";
 				margin-left: 0;
 				margin-right: 0;
 			}

src/css/layout/_l-post.scss

@@ -34,8 +34,7 @@
 			display: grid;
 			grid-template-columns: map-get($global-post-columns, category) map-get($global-post-columns, gutter) 2fr 2rem map-get($global-post-columns, toc);
 			grid-template-rows: auto auto;
-			grid-template-areas:
-				". . content     . toc";
+			grid-template-areas: ". . content     . toc";
 		}
 	}
 }

src/css/layout/_l-primary-nav.scss

@@ -28,14 +28,12 @@
 	// Supports
 	@supports #{$supports-flex} {
 		display: flex;
-		flex-direction: column;
 		flex-flow: row wrap;
 		margin-top: 0;
 
 		// Breakpoints
 		@include mappy-bp(palm-small) {
-			flex-direction: row;
-			flex-flow: initial;
+			flex-flow: row initial;
 		}
 
 		@include mappy-bp(lap-small) {