Use prettier-plugin-sort-imports

.prettierrc.js

@@ -0,0 +1,33 @@
+const config = {
+  /**
+   * Enable plugin for automatically sorting of imports
+   */
+  plugins: ["@trivago/prettier-plugin-sort-imports"],
+  importOrderParserPlugins: ["typescript", "decorators-legacy"],
+
+  /**
+   * Custom sorting of imports, first lit stuff, then other third
+   * party libs, then own modules
+   */
+  importOrder: [
+    "^lit$",
+    "^lit/.*$",
+    "^@lit/.*$",
+    "<THIRD_PARTY_MODULES>",
+    "^[./]",
+  ],
+
+  /**
+   * Whether to separate sorting groups (as defined above) with
+   * newline
+   */
+  // importOrderSeparation: true,
+
+  /**
+   * Whether to sort the specifiers on the left hand side of the
+   * import statement
+   */
+  importOrderSortSpecifiers: true,
+};
+
+export default config;

package.json

@@ -59,6 +59,7 @@
     "@storybook/blocks": "^7.6.5",
     "@storybook/web-components": "^7.6.5",
     "@storybook/web-components-vite": "^7.6.5",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -79,7 +80,6 @@
       "plugin:prettier/recommended"
     ]
   },
-  "prettier": {},
   "lint-staged": {
     "**/*.{ts,js}": [
       "eslint --fix"

src/components/Backdrop.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/Banner.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { classMap } from "lit/directives/class-map.js";

src/components/Container.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/Footer.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/FooterLink.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";

src/components/Hero.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/Icon.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, TemplateResult } from "lit";
+import { LitElement, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";

src/components/Menu.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { classMap } from "lit/directives/class-map.js";

src/components/MenuAction.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";

src/components/MenuDropdown.ts

@@ -1,10 +1,10 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { classMap } from "lit/directives/class-map.js";
-import { theme } from "../utils/theme";
 import { isNodeOrChild } from "../utils/dom";
 import { navigateMenuWithKeyboard } from "../utils/menu";
+import { theme } from "../utils/theme";
 import "./Icon";
 
 /**

src/components/MenuDropdownItem.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";

src/components/Nav.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/NavItem.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { classMap } from "lit/directives/class-map.js";

src/components/Subnav.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { theme } from "../utils/theme";
 

src/components/Topbar.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { property } from "lit/decorators/property.js";
 import { theme } from "../utils/theme";

src/puzzle-shell.ts

@@ -1,3 +1,5 @@
+import "./utils/theme";
+
 export { Backdrop } from "./components/Backdrop";
 export { Banner } from "./components/Banner";
 export { Container } from "./components/Container";
@@ -14,4 +16,3 @@ export { Nav } from "./components/Nav";
 export { NavItem } from "./components/NavItem";
 export { Subnav } from "./components/Subnav";
 export { Topbar } from "./components/Topbar";
-import "./utils/theme";

src/stories/components/Banner.stories.ts

@@ -1,11 +1,11 @@
 import { html } from "lit";
 import "../../components/Banner";
 import "../../components/Icon";
-import "../../components/Topbar";
 import "../../components/Menu";
 import "../../components/Nav";
-import "../../components/Subnav";
 import "../../components/NavItem";
+import "../../components/Subnav";
+import "../../components/Topbar";
 import { searchStyles } from "./search";
 
 export default {

src/stories/components/Topbar.stories.ts

@@ -1,9 +1,9 @@
 import { html } from "lit";
-import "../../components/Topbar";
+import "../../components/Icon";
 import "../../components/Menu";
 import "../../components/MenuAction";
 import "../../components/MenuDropdown";
-import "../../components/Icon";
+import "../../components/Topbar";
 
 export default {
   title: "Puzzle Shell/Components/Topbar",

src/stories/examples/ContentAppWithSearch.stories.ts

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import "../../puzzle-shell";
-import { searchStyles } from "../components/search";
 import { theme } from "../../utils/theme";
+import { searchStyles } from "../components/search";
 
 export default {
   title: "Puzzle Shell/Examples/Content app with search",

src/stories/examples/WelcomePage.stories.ts

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import "../../puzzle-shell";
-import { searchStyles } from "../components/search";
 import { theme } from "../../utils/theme";
+import { searchStyles } from "../components/search";
 
 export default {
   title: "Puzzle Shell/Examples/Welcome page",

src/utils/theme.ts

@@ -1,15 +1,15 @@
-import { css, CSSResult } from "lit";
+import { CSSResult, css } from "lit";
 
 /**
  * Roboto: Regular 400, Regular 400 italic, Medium 500, Medium 500 italic
  * Roboto Mono: Regular 400, Medium 500
  */
-import "@fontsource/roboto/400.css";
-import "@fontsource/roboto/400-italic.css";
-import "@fontsource/roboto/500.css";
-import "@fontsource/roboto/500-italic.css";
 import "@fontsource/roboto-mono/400.css";
 import "@fontsource/roboto-mono/500.css";
+import "@fontsource/roboto/400-italic.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500-italic.css";
+import "@fontsource/roboto/500.css";
 
 const DEFAULT_BREAKPOINT = 800;
 export function getBreakpoint(): number {