update prettier

abu-seini-maf · Oct 12, 2023 · c7b53cf · c7b53cf
1 parent 85f91b7
commit c7b53cf
Show file tree

Hide file tree

Showing 34 changed files with 394 additions and 310 deletions.
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
@@ -235,7 +235,9 @@ code {
 kbd {
   background: var(--sl-color-neutral-100);
   border: solid 1px var(--sl-color-neutral-200);
-  box-shadow: inset 0 1px 0 0 var(--sl-color-neutral-0), inset 0 -1px 0 0 var(--sl-color-neutral-200);
+  box-shadow:
+    inset 0 1px 0 0 var(--sl-color-neutral-0),
+    inset 0 -1px 0 0 var(--sl-color-neutral-200);
   font-family: var(--sl-font-mono);
   font-size: 0.9125em;
   border-radius: var(--docs-border-radius);
@@ -511,7 +513,9 @@ pre .token.italic {
   right: 0;
   white-space: normal;
   color: var(--sl-color-neutral-800);
-  transition: 150ms opacity, 150ms scale;
+  transition:
+    150ms opacity,
+    150ms scale;
 }
 
 .copy-code-button::part(button) {
@@ -982,7 +986,9 @@ main {
   padding: 0.5rem;
   margin: 0;
   cursor: pointer;
-  transition: 250ms scale ease, 250ms rotate ease;
+  transition:
+    250ms scale ease,
+    250ms rotate ease;
 }
 
 @media screen and (max-width: 900px) {

diff --git a/docs/pages/tutorials/integrating-with-rails.md b/docs/pages/tutorials/integrating-with-rails.md
@@ -88,7 +88,7 @@ module.exports = environment;
 The final step is to add the corresponding `pack_tags` to the page. You should have the following `tags` in the `<head>` section of `app/views/layouts/application.html.erb`.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <!-- ... -->

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -120,7 +120,7 @@
     "ora": "^6.3.1",
     "pascal-case": "^3.1.2",
     "plop": "^3.1.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "recursive-copy": "^2.0.14",

diff --git a/prettier.config.cjs → prettier.config.js b/prettier.config.cjs → prettier.config.js
@@ -1,5 +1,5 @@
-/* eslint-env node */
-module.exports = {
+/** @type {import("prettier").Config} */
+const config = {
   arrowParens: 'avoid',
   bracketSpacing: true,
   htmlWhitespaceSensitivity: 'css',
@@ -16,3 +16,5 @@ module.exports = {
   trailingComma: 'none',
   useTabs: false
 };
+
+export default config;
diff --git a/scripts/make-react.js b/scripts/make-react.js
@@ -4,7 +4,7 @@ import path from 'path';
 import chalk from 'chalk';
 import { deleteSync } from 'del';
 import prettier from 'prettier';
-import prettierConfig from '../prettier.config.cjs';
+import { default as prettierConfig } from '../prettier.config.js';
 import { getAllComponents } from './shared.js';
 
 const { outdir } = commandLineArgs({ name: 'outdir', type: String });
@@ -20,7 +20,7 @@ const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.j
 const components = getAllComponents(metadata);
 const index = [];
 
-components.map(component => {
+components.forEach(async component => {
   const tagWithoutPrefix = component.tagName.replace(/^sl-/, '');
   const componentDir = path.join(reactDir, tagWithoutPrefix);
   const componentFile = path.join(componentDir, 'index.ts');
@@ -41,7 +41,7 @@ components.map(component => {
 
   const jsDoc = component.jsDoc || '';
 
-  const source = prettier.format(
+  const source = await prettier.format(
     `
       import * as React from 'react';
       import { createComponent } from '@lit-labs/react';

diff --git a/scripts/make-themes.js b/scripts/make-themes.js
@@ -24,19 +24,19 @@ filesToEmbed.forEach(file => {
 });
 
 // Loop through each theme file, copying the .css and generating a .js version for Lit users
-files.forEach(file => {
+files.forEach(async file => {
   let source = fs.readFileSync(file, 'utf8');
 
   // If the source has "/* _filename.css */" in it, replace it with the embedded styles
   Object.keys(embeds).forEach(key => {
     source = source.replace(`/* ${key} */`, embeds[key]);
   });
 
-  const css = prettier.format(stripComments(source), {
+  const css = await prettier.format(stripComments(source), {
     parser: 'css'
   });
 
-  let js = prettier.format(
+  let js = await prettier.format(
     `
     import { css } from 'lit';
 

diff --git a/src/components/alert/alert.test.ts b/src/components/alert/alert.test.ts
@@ -210,10 +210,12 @@ describe('<sl-alert>', () => {
     };
 
     it('deletes the toast stack after the last alert is done', async () => {
-      const container = await fixture<HTMLElement>(html`<div>
-        <sl-alert data-testid="alert1" closable>alert 1</sl-alert>
-        <sl-alert data-testid="alert2" closable>alert 2</sl-alert>
-      </div>`);
+      const container = await fixture<HTMLElement>(
+        html`<div>
+          <sl-alert data-testid="alert1" closable>alert 1</sl-alert>
+          <sl-alert data-testid="alert2" closable>alert 2</sl-alert>
+        </div>`
+      );
 
       const alert1 = queryByTestId<SlAlert>(container, 'alert1');
       const alert2 = queryByTestId<SlAlert>(container, 'alert2');

diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
@@ -25,8 +25,11 @@ export default css`
     white-space: nowrap;
     vertical-align: middle;
     padding: 0;
-    transition: var(--sl-transition-x-fast) background-color, var(--sl-transition-x-fast) color,
-      var(--sl-transition-x-fast) border, var(--sl-transition-x-fast) box-shadow;
+    transition:
+      var(--sl-transition-x-fast) background-color,
+      var(--sl-transition-x-fast) color,
+      var(--sl-transition-x-fast) border,
+      var(--sl-transition-x-fast) box-shadow;
     cursor: inherit;
   }
 

diff --git a/src/components/button/button.test.ts b/src/components/button/button.test.ts
@@ -99,25 +99,25 @@ describe('<sl-button>', () => {
     });
 
     it('should render a link with rel="noreferrer noopener" when target is set and rel is not', async () => {
-      const el = await fixture<SlButton>(
-        html` <sl-button href="https://example.com/" target="_blank">Link</sl-button> `
-      );
+      const el = await fixture<SlButton>(html`
+        <sl-button href="https://example.com/" target="_blank">Link</sl-button>
+      `);
       const link = el.shadowRoot!.querySelector('a')!;
       expect(link?.getAttribute('rel')).to.equal('noreferrer noopener');
     });
 
     it('should render a link with rel="" when a target is provided and rel is empty', async () => {
-      const el = await fixture<SlButton>(
-        html` <sl-button href="https://example.com/" target="_blank" rel="">Link</sl-button> `
-      );
+      const el = await fixture<SlButton>(html`
+        <sl-button href="https://example.com/" target="_blank" rel="">Link</sl-button>
+      `);
       const link = el.shadowRoot!.querySelector('a')!;
       expect(link?.getAttribute('rel')).to.equal('');
     });
 
     it(`should render a link with a custom rel when a custom rel is provided`, async () => {
-      const el = await fixture<SlButton>(
-        html` <sl-button href="https://example.com/" target="_blank" rel="1">Link</sl-button> `
-      );
+      const el = await fixture<SlButton>(html`
+        <sl-button href="https://example.com/" target="_blank" rel="1">Link</sl-button>
+      `);
       const link = el.shadowRoot!.querySelector('a')!;
       expect(link?.getAttribute('rel')).to.equal('1');
     });

diff --git a/src/components/card/card.test.ts b/src/components/card/card.test.ts
@@ -7,9 +7,9 @@ describe('<sl-card>', () => {
 
   describe('when provided no parameters', () => {
     before(async () => {
-      el = await fixture<SlCard>(
-        html` <sl-card>This is just a basic card. No image, no header, and no footer. Just your content.</sl-card> `
-      );
+      el = await fixture<SlCard>(html`
+        <sl-card>This is just a basic card. No image, no header, and no footer. Just your content.</sl-card>
+      `);
     });
 
     it('should pass accessibility tests', async () => {

diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
@@ -46,8 +46,11 @@ export default css`
     border-radius: 2px;
     background-color: var(--sl-input-background-color);
     color: var(--sl-color-neutral-0);
-    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
-      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
+    transition:
+      var(--sl-transition-fast) border-color,
+      var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) color,
+      var(--sl-transition-fast) box-shadow;
   }
 
   .checkbox__input {

diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
@@ -245,7 +245,11 @@ export default css`
       linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
       linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%);
     background-size: 10px 10px;
-    background-position: 0 0, 0 0, -5px -5px, 5px 5px;
+    background-position:
+      0 0,
+      0 0,
+      -5px -5px,
+      5px 5px;
   }
 
   .color-picker--disabled {
@@ -311,7 +315,9 @@ export default css`
     height: 100%;
     border-radius: inherit;
     background-color: currentColor;
-    box-shadow: inset 0 0 0 2px var(--sl-input-border-color), inset 0 0 0 4px var(--sl-color-neutral-0);
+    box-shadow:
+      inset 0 0 0 2px var(--sl-input-border-color),
+      inset 0 0 0 4px var(--sl-color-neutral-0);
   }
 
   .color-dropdown__trigger--empty:before {

diff --git a/src/components/color-picker/color-picker.test.ts b/src/components/color-picker/color-picker.test.ts
@@ -97,9 +97,9 @@ describe('<sl-color-picker>', () => {
     });
 
     it('should render the correct swatches when passing a string of color values', async () => {
-      const el = await fixture<SlColorPicker>(
-        html` <sl-color-picker swatches="red; #008000; rgb(0,0,255);"></sl-color-picker> `
-      );
+      const el = await fixture<SlColorPicker>(html`
+        <sl-color-picker swatches="red; #008000; rgb(0,0,255);"></sl-color-picker>
+      `);
       const swatches = [...el.shadowRoot!.querySelectorAll('[part~="swatch"] > div')];
 
       expect(swatches.length).to.equal(3);

diff --git a/src/components/dialog/dialog.test.ts b/src/components/dialog/dialog.test.ts
@@ -17,9 +17,9 @@ describe('<sl-dialog>', () => {
   });
 
   it('should not be visible without the open attribute', async () => {
-    const el = await fixture<SlDialog>(
-      html` <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog> `
-    );
+    const el = await fixture<SlDialog>(html`
+      <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
+    `);
     const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
     expect(base.hidden).to.be.true;

diff --git a/src/components/drawer/drawer.test.ts b/src/components/drawer/drawer.test.ts
@@ -16,9 +16,9 @@ describe('<sl-drawer>', () => {
   });
 
   it('should not be visible without the open attribute', async () => {
-    const el = await fixture<SlDrawer>(
-      html` <sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer> `
-    );
+    const el = await fixture<SlDrawer>(html`
+      <sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
+    `);
     const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
     expect(base.hidden).to.be.true;