feat(prettier-config)!: split configs and use direct dependencies

package.json

@@ -35,8 +35,6 @@
     "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-vitest": "^0.5.4",
     "prettier": "^3.4.1",
-    "prettier-plugin-svelte": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
     "semver": "^7.6.3",
     "svelte": "^5.4.0",
     "tailwindcss": "3.4.15",

packages/prettier-config-svelte/README.md

@@ -0,0 +1,32 @@
+# Viam's Prettier Config for Svelte
+
+This module contains [Viam][]'s shared [Prettier][] configurations for Prettier v3 in [Svelte][] projects.
+
+[viam]: https://www.viam.com/
+[prettier]: https://prettier.io/
+[svelte]: https://svelte.dev/
+
+## Usage
+
+Use the [Svelte config](./prettier-config-svelte.js) for Svelte projects.
+
+```shell
+pnpm add --save-dev prettier @viamrobotics/prettier-config-svelte
+```
+
+```js
+// prettier.config.js
+export default '@viamrobotics/prettier-config-svelte';
+```
+
+You can also extend the configuration:
+
+```js
+// prettier.config.js
+import baseConfig from '@viamrobotics/prettier-config-svelte';
+
+export default {
+  ...baseConfig,
+  // other options here
+};
+```

packages/prettier-config-svelte/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@viamrobotics/prettier-config-svelte",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "version": "1.0.0",
+  "description": "Viam's shared Prettier configuration for Svelte projects.",
+  "type": "module",
+  "files": [
+    "**/*",
+    "!tsconfig.json"
+  ],
+  "types": "./dist/prettier-config-svelte.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/prettier-config-svelte.d.ts",
+      "default": "./prettier-config-svelte.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/viamrobotics/js-config.git",
+    "directory": "packages/prettier-config-svelte"
+  },
+  "keywords": [
+    "prettier",
+    "prettierconfig",
+    "svelte"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "prettier": ">=3 <4",
+    "svelte": "*",
+    "tailwindcss": "*"
+  },
+  "dependencies": {
+    "@viamrobotics/prettier-config": "workspace:*",
+    "prettier-plugin-svelte": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.9"
+  }
+}

packages/prettier-config-svelte/prettier-config-svelte.js

@@ -0,0 +1,23 @@
+import url from 'node:url';
+
+import baseConfig from '@viamrobotics/prettier-config';
+
+const sveltePlugin = url.fileURLToPath(
+  import.meta.resolve('prettier-plugin-svelte')
+);
+const tailwindPlugin = url.fileURLToPath(
+  import.meta.resolve('prettier-plugin-tailwindcss')
+);
+
+/** @satisfies {import('prettier').Config} */
+const config = {
+  ...baseConfig,
+  plugins: [sveltePlugin, tailwindPlugin],
+  svelteIndentScriptAndStyle: false,
+  tailwindAttributes: ['cx'],
+  tailwindFunctions: ['classnames', 'cx'],
+  // TODO(mc, 2024-12-01): https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/332
+  tailwindPreserveWhitespace: true,
+};
+
+export default config;

packages/prettier-config-svelte/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@viamrobotics/typescript-config/base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "composite": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist"
+  },
+  "references": [{ "path": "../prettier-config" }],
+  "include": ["*.js"]
+}

packages/prettier-config/README.md

@@ -1,28 +1,28 @@
-# Shared Prettier Config for Viam
+# Viam's Prettier Config
 
-This module contains [Viam][]'s shared [Prettier][] configurations for Prettier v3.
+This module contains [Viam][]'s shared [Prettier][] configuration for Prettier v3.
 
 [viam]: https://www.viam.com/
 [prettier]: https://prettier.io/
 
-## Base config
+## Usage
 
-Use the [base config](./base.js) for vanilla JavaScript / TypeScript projects.
+Use the [base config](./prettier-config.js) for vanilla JavaScript / TypeScript projects.
 
 ```shell
 pnpm add --save-dev prettier @viamrobotics/prettier-config
 ```
 
 ```js
-// .prettierrc.cjs
-module.exports = '@viamrobotics/prettier-config';
+// prettier.config.js
+export default '@viamrobotics/prettier-config';
 ```
 
 You can also extend the configuration:
 
 ```js
-// .prettierrc.cjs
-const baseConfig = require('@viamrobotics/prettier-config');
+// prettier.config.js
+import baseConfig from '@viamrobotics/prettier-config';
 
 export default {
   ...baseConfig,
@@ -32,17 +32,4 @@ export default {
 
 ## Svelte config
 
-Use the [Svelte config](./svelte.js) for Svelte projects.
-
-```shell
-pnpm add --save-dev \
-  @viamrobotics/prettier-config \
-  prettier \
-  prettier-plugin-svelte \
-  prettier-plugin-tailwindcss
-```
-
-```js
-// .prettierrc.cjs
-module.exports = '@viamrobotics/prettier-config/svelte';
-```
+See [@viamrobotics/prettier-config-svelte](../prettier-config-svelte/)

packages/prettier-config/package.json

@@ -4,29 +4,18 @@
     "access": "public",
     "provenance": true
   },
-  "version": "0.3.6",
-  "description": "Common Prettier configuration for Viam projects.",
-  "type": "commonjs",
+  "version": "1.0.0",
+  "description": "Viam's shared Prettier configuration.",
+  "type": "module",
   "files": [
     "**/*",
     "!tsconfig.json"
   ],
-  "types": "dist/base.d.cts",
-  "typesVersions": {
-    "*": {
-      "svelte": [
-        "dist/svelte.d.cts"
-      ]
-    }
-  },
+  "types": "./dist/prettier-config.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/base.d.cts",
-      "default": "./base.cjs"
-    },
-    "./svelte": {
-      "types": "./dist/svelte.d.cts",
-      "default": "./svelte.cjs"
+      "types": "./dist/prettier-config.d.ts",
+      "default": "./prettier-config.js"
     }
   },
   "repository": {
@@ -40,16 +29,6 @@
   ],
   "license": "Apache-2.0",
   "peerDependencies": {
-    "prettier": ">=3 <4",
-    "prettier-plugin-svelte": ">=3 <4",
-    "prettier-plugin-tailwindcss": ">=0.4.0 <0.7"
-  },
-  "peerDependenciesMeta": {
-    "prettier-plugin-svelte": {
-      "optional": true
-    },
-    "prettier-plugin-tailwindcss": {
-      "optional": true
-    }
+    "prettier": ">=3 <4"
   }
 }

packages/prettier-config/base.cjs → packages/prettier-config/prettier-config.js

@@ -1,5 +1,3 @@
-'use strict';
-
 /** @satisfies {import('prettier').Config} */
 const config = {
   // overrides
@@ -24,4 +22,4 @@ const config = {
   embeddedLanguageFormatting: 'auto',
 };
 
-module.exports = config;
+export default config;

packages/prettier-config/tsconfig.json

@@ -7,5 +7,5 @@
     "emitDeclarationOnly": true,
     "outDir": "dist"
   },
-  "include": ["*.cjs"]
+  "include": ["*.js"]
 }

tests/peers.spec.ts

@@ -12,7 +12,12 @@ interface PackageJSON {
 }
 
 const repo = path.join(url.fileURLToPath(import.meta.url), '../..');
-const packages = ['eslint-config', 'prettier-config', 'typescript-config'];
+const packages = [
+  'eslint-config',
+  'prettier-config',
+  'prettier-config-svelte',
+  'typescript-config',
+];
 
 const getManifest = (pkgPath: string) =>
   JSON.parse(

tsconfig.json

@@ -6,7 +6,8 @@
   },
   "references": [
     { "path": "./packages/eslint-config" },
-    { "path": "./packages/prettier-config" }
+    { "path": "./packages/prettier-config" },
+    { "path": "./packages/prettier-config-svelte" }
   ],
-  "include": [".eslintrc.cjs", ".prettierrc.js", "./tests/**/*.ts"]
+  "include": [".eslintrc.cjs", "prettier.config.js", "./tests/**/*.ts"]
 }