chore(formatting): Apply default printWidth for JS / CSS

.prettierrc.json

@@ -1,5 +1,12 @@
 {
   "bracketSameLine": true,
   "singleQuote": true,
-  "printWidth": 120
+  "overrides": [
+    {
+      "files": ["**/*.md", "**/*.html"],
+      "options": {
+        "printWidth": 120
+      }
+    }
+  ]
 }

.stylelintrc

@@ -7,7 +7,10 @@
     "comment-no-empty": true,
     "declaration-block-no-shorthand-property-overrides": true,
     "declaration-block-single-line-max-declarations": 1,
-    "declaration-empty-line-before": ["never", { "ignore": ["after-comment", "after-declaration"] }],
+    "declaration-empty-line-before": [
+      "never",
+      { "ignore": ["after-comment", "after-declaration"] }
+    ],
     "declaration-no-important": true,
     "font-family-name-quotes": "always-where-recommended",
     "font-family-no-duplicate-names": true,
@@ -17,11 +20,17 @@
     "keyframe-declaration-no-important": true,
     "length-zero-no-unit": true,
     "max-nesting-depth": 5,
-    "media-feature-name-no-unknown": [true, { "ignoreMediaFeatureNames": ["min--moz-device-pixel-ratio"] }],
+    "media-feature-name-no-unknown": [
+      true,
+      { "ignoreMediaFeatureNames": ["min--moz-device-pixel-ratio"] }
+    ],
     "no-invalid-double-slash-comments": true,
     "no-unknown-animations": true,
     "property-no-unknown": true,
-    "rule-empty-line-before": ["always", { "ignore": ["after-comment", "inside-block"] }],
+    "rule-empty-line-before": [
+      "always",
+      { "ignore": ["after-comment", "inside-block"] }
+    ],
     "selector-pseudo-class-no-unknown": true,
     "selector-pseudo-element-no-unknown": true,
     "selector-type-case": "lower",

live-examples/css-examples/color/color-adjust.css

@@ -2,7 +2,10 @@
   padding: 1rem;
   font-size: 1.5rem;
   background-color: black;
-  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+  background-image: linear-gradient(
+    rgba(0, 0, 180, 0.5),
+    rgba(70, 140, 220, 0.5)
+  );
   color: #333;
   text-align: center;
   display: flex;

live-examples/css-examples/fonts/font-synthesis.css

@@ -2,7 +2,8 @@
   font-family: Oxygen;
   font-style: normal;
   font-weight: 400;
-  src: url('https://fonts.gstatic.com/s/oxygen/v14/2sDfZG1Wl4LcnbuKjk0m.woff2') format('woff2');
+  src: url('https://fonts.gstatic.com/s/oxygen/v14/2sDfZG1Wl4LcnbuKjk0m.woff2')
+    format('woff2');
 }
 
 /* [108] */

live-examples/css-examples/fonts/font-variant-east-asian.css

@@ -1,5 +1,6 @@
 #output section {
-  font-family: 'YuGothic Medium', YuGothic, 'Yu Gothic Medium', 'Yu Gothic', sans-serif;
+  font-family: 'YuGothic Medium', YuGothic, 'Yu Gothic Medium', 'Yu Gothic',
+    sans-serif;
   margin-top: 10px;
   font-size: 1.5em;
 }

live-examples/css-examples/fragmentation/break.js

@@ -1,5 +1,7 @@
 const btn = document.getElementById('print-btn');
-const editorContainer = document.getElementsByClassName('css-editor-container')[0];
+const editorContainer = document.getElementsByClassName(
+  'css-editor-container',
+)[0];
 const exampleHTMLElement = document.getElementById('default-example');
 
 const printableSection = document.createElement('div');

live-examples/css-examples/motion-path/offset-anchor.css

@@ -12,7 +12,14 @@
 }
 
 .wrapper {
-  background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%);
+  background-image: linear-gradient(
+    to bottom,
+    transparent,
+    transparent 49%,
+    #000 50%,
+    #000 51%,
+    transparent 52%
+  );
   border: 1px solid #ccc;
   width: 90%;
 }

live-examples/css-examples/rhythm/line-height-step.css

@@ -1,5 +1,11 @@
 .example-container {
-  background-image: repeating-linear-gradient(180deg, #ccc, #ccc 20px, #dbdbdb 20px, #dbdbdb 40px);
+  background-image: repeating-linear-gradient(
+    180deg,
+    #ccc,
+    #ccc 20px,
+    #dbdbdb 20px,
+    #dbdbdb 40px
+  );
   border: 0.75em solid;
   padding: 0.75em;
   text-align: left;

live-examples/css-examples/shapes/shape-image-threshold.css

@@ -9,5 +9,10 @@
   height: 150px;
   margin: 20px;
   width: 150px;
-  background-image: linear-gradient(50deg, rgb(77, 26, 103), transparent 80%, transparent);
+  background-image: linear-gradient(
+    50deg,
+    rgb(77, 26, 103),
+    transparent 80%,
+    transparent
+  );
 }

live-examples/html-examples/content-sectioning/css/article.css

@@ -12,7 +12,8 @@
 }
 
 .day-forecast {
-  background: right/contain content-box border-box no-repeat url('/media/examples/rain.svg') white;
+  background: right/contain content-box border-box no-repeat
+    url('/media/examples/rain.svg') white;
 }
 
 .day-forecast > h2,

live-examples/html-examples/forms/css/button.css

@@ -8,7 +8,12 @@
   text-shadow: 1px 1px 1px #000;
   border-radius: 10px;
   background-color: rgba(220, 0, 0, 1);
-  background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
+  background-image: linear-gradient(
+    to top left,
+    rgba(0, 0, 0, 0.2),
+    rgba(0, 0, 0, 0.2) 30%,
+    rgba(0, 0, 0, 0)
+  );
   box-shadow:
     inset 2px 2px 3px rgba(255, 255, 255, 0.6),
     inset -2px -2px 3px rgba(0, 0, 0, 0.6);

live-examples/html-examples/global-attributes/js/attribute-is.js

@@ -15,4 +15,6 @@ class LengthLeftTextarea extends HTMLTextAreaElement {
   }
 }
 
-customElements.define('length-left-textarea', LengthLeftTextarea, { extends: 'textarea' });
+customElements.define('length-left-textarea', LengthLeftTextarea, {
+  extends: 'textarea',
+});

live-examples/html-examples/input/css/button.css

@@ -8,7 +8,12 @@
   text-shadow: 1px 1px 1px #000;
   border-radius: 10px;
   background-color: rgba(220, 0, 0, 1);
-  background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
+  background-image: linear-gradient(
+    to top left,
+    rgba(0, 0, 0, 0.2),
+    rgba(0, 0, 0, 0.2) 30%,
+    rgba(0, 0, 0, 0)
+  );
   box-shadow:
     inset 2px 2px 3px rgba(255, 255, 255, 0.6),
     inset -2px -2px 3px rgba(0, 0, 0, 0.6);

live-examples/js-examples/array/array-at.js

@@ -2,10 +2,10 @@ const array1 = [5, 12, 8, 130, 44];
 
 let index = 2;
 
-console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
-// Expected output: "Using an index of 2 the item returned is 8"
+console.log(`An index of ${index} returns ${array1.at(index)}`);
+// Expected output: "An index of 2 returns 8"
 
 index = -2;
 
-console.log(`Using an index of ${index} item returned is ${array1.at(index)}`);
-// Expected output: "Using an index of -2 item returned is 130"
+console.log(`An index of ${index} returns ${array1.at(index)}`);
+// Expected output: "An index of -2 returns 130"

live-examples/js-examples/array/array-filter.js

@@ -1,4 +1,4 @@
-const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
+const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
 
 const result = words.filter((word) => word.length > 6);
 

live-examples/js-examples/array/array-reduce-right.js

@@ -4,7 +4,9 @@ const array1 = [
   [4, 5],
 ];
 
-const result = array1.reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));
+const result = array1.reduceRight((accumulator, currentValue) =>
+  accumulator.concat(currentValue),
+);
 
 console.log(result);
 // Expected output: Array [4, 5, 2, 3, 0, 1]

live-examples/js-examples/array/array-reduce.js

@@ -2,7 +2,10 @@ const array1 = [1, 2, 3, 4];
 
 // 0 + 1 + 2 + 3 + 4
 const initialValue = 0;
-const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue);
+const sumWithInitial = array1.reduce(
+  (accumulator, currentValue) => accumulator + currentValue,
+  initialValue,
+);
 
 console.log(sumWithInitial);
 // Expected output: 10

live-examples/js-examples/bigint/bigint-asintn.js

@@ -1,7 +1,9 @@
 const max = 2n ** (64n - 1n) - 1n;
 
 function check64bit(number) {
-  number > max ? console.log("Number doesn't fit in signed 64-bit integer!") : console.log(BigInt.asIntN(64, number));
+  number > max
+    ? console.log("Number doesn't fit in signed 64-bit integer!")
+    : console.log(BigInt.asIntN(64, number));
 }
 
 check64bit(2n ** 64n);

live-examples/js-examples/bigint/bigint-tolocalestring.js

@@ -5,5 +5,7 @@ console.log(bigint.toLocaleString('de-DE'));
 // Expected output: "123.456.789.123.456.789"
 
 // Request a currency format
-console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+console.log(
+  bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }),
+);
 // Expected output: "123.456.789.123.456.789,00 €"

live-examples/js-examples/classes/classes-extends.js

@@ -1,6 +1,19 @@
 class DateFormatter extends Date {
   getFormattedDate() {
-    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
     return `${this.getDate()}-${months[this.getMonth()]}-${this.getFullYear()}`;
   }
 }

live-examples/js-examples/date/date-tolocaledatestring.js

@@ -1,5 +1,10 @@
 const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+const options = {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+};
 
 console.log(event.toLocaleDateString('de-DE', options));
 // Expected output (varies according to local timezone): Donnerstag, 20. Dezember 2012

live-examples/js-examples/finalizationregistry/finalizationregistry.js

@@ -9,7 +9,7 @@ const array1 = ['foo'];
 registry.register(array1, 'foo');
 // array1 is not referenced in any callback, so it can be garbage collected
 
-console.log('Triggering garbage collection, which you should never do in production code');
+console.log("Triggering garbage collection. Don't do this in production code!");
 
 (function allocateMemory() {
   Array.from({ length: 50000 }, () => () => {});

live-examples/js-examples/intl/intl-collator.js

@@ -4,5 +4,9 @@ console.log(['Z', 'a', 'z', 'ä'].sort(new Intl.Collator('de').compare));
 console.log(['Z', 'a', 'z', 'ä'].sort(new Intl.Collator('sv').compare));
 // Expected output: Array ["a", "z", "Z", "ä"]
 
-console.log(['Z', 'a', 'z', 'ä'].sort(new Intl.Collator('de', { caseFirst: 'upper' }).compare));
+console.log(
+  ['Z', 'a', 'z', 'ä'].sort(
+    new Intl.Collator('de', { caseFirst: 'upper' }).compare,
+  ),
+);
 // Expected output: Array ["a", "ä", "Z", "z"]

live-examples/js-examples/intl/intl-datetimeformat-prototype-format.js

@@ -1,4 +1,9 @@
-const options1 = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+const options1 = {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+};
 const date1 = new Date(2012, 5);
 
 const dateTimeFormat1 = new Intl.DateTimeFormat('sr-RS', options1);

live-examples/js-examples/intl/intl-datetimeformat-prototype-formatrange.js

@@ -1,4 +1,9 @@
-const options1 = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+const options1 = {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+};
 const options2 = { year: '2-digit', month: 'numeric', day: 'numeric' };
 
 const startDate = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));

live-examples/js-examples/intl/intl-datetimeformat-prototype-formattoparts.js

@@ -1,5 +1,10 @@
 const date = new Date(2012, 5);
-const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+const options = {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+};
 const dateTimeFormat = new Intl.DateTimeFormat('en-US', options);
 
 const parts = dateTimeFormat.formatToParts(date);

live-examples/js-examples/intl/intl-datetimeformat.js

@@ -11,6 +11,10 @@ console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
 
 // Specify date and time format using "style" options (i.e. full, long, medium, short)
 console.log(
-  new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long', timeZone: 'Australia/Sydney' }).format(date),
+  new Intl.DateTimeFormat('en-GB', {
+    dateStyle: 'full',
+    timeStyle: 'long',
+    timeZone: 'Australia/Sydney',
+  }).format(date),
 );
 // Expected output: "Sunday, 20 December 2020 at 14:23:16 GMT+11"

live-examples/js-examples/intl/intl-displaynames.js

@@ -1,5 +1,7 @@
 const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' });
-const regionNamesInTraditionalChinese = new Intl.DisplayNames(['zh-Hant'], { type: 'region' });
+const regionNamesInTraditionalChinese = new Intl.DisplayNames(['zh-Hant'], {
+  type: 'region',
+});
 
 console.log(regionNamesInEnglish.of('US'));
 // Expected output: "United States"

live-examples/js-examples/intl/intl-listformat-prototype-formattoparts.js

@@ -1,6 +1,12 @@
 const vehicles = ['Motorcycle', 'Bus', 'Car'];
-const formatterEn = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
-const formatterFr = new Intl.ListFormat('fr', { style: 'long', type: 'conjunction' });
+const formatterEn = new Intl.ListFormat('en', {
+  style: 'long',
+  type: 'conjunction',
+});
+const formatterFr = new Intl.ListFormat('fr', {
+  style: 'long',
+  type: 'conjunction',
+});
 
 const partValuesEn = formatterEn.formatToParts(vehicles).map((p) => p.value);
 const partValuesFr = formatterFr.formatToParts(vehicles).map((p) => p.value);

live-examples/js-examples/intl/intl-listformat.js

@@ -1,10 +1,16 @@
 const vehicles = ['Motorcycle', 'Bus', 'Car'];
 
-const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
+const formatter = new Intl.ListFormat('en', {
+  style: 'long',
+  type: 'conjunction',
+});
 console.log(formatter.format(vehicles));
 // Expected output: "Motorcycle, Bus, and Car"
 
-const formatter2 = new Intl.ListFormat('de', { style: 'short', type: 'disjunction' });
+const formatter2 = new Intl.ListFormat('de', {
+  style: 'short',
+  type: 'disjunction',
+});
 console.log(formatter2.format(vehicles));
 // Expected output: "Motorcycle, Bus oder Car"
 

live-examples/js-examples/intl/intl-locale-prototype-tostring.js

@@ -1,5 +1,11 @@
-const french = new Intl.Locale('fr-Latn-FR', { calendar: 'gregory', hourCycle: 'h12' });
-const korean = new Intl.Locale('ko-Kore-KR', { numeric: true, caseFirst: 'upper' });
+const french = new Intl.Locale('fr-Latn-FR', {
+  calendar: 'gregory',
+  hourCycle: 'h12',
+});
+const korean = new Intl.Locale('ko-Kore-KR', {
+  numeric: true,
+  caseFirst: 'upper',
+});
 
 console.log(french.toString());
 // Expected output: "fr-Latn-FR-u-ca-gregory-hc-h12"