feat: contentPath utility for tailwind's content globs (#2949)

.changeset/heavy-bugs-obey.md

@@ -0,0 +1,5 @@
+---
+'@skeletonlabs/skeleton': patch
+---
+
+feature: Added a `contentPath` utility function for tailwind content paths

packages/skeleton/src/plugin/index.ts

@@ -1,3 +1,6 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
 import plugin from 'tailwindcss/plugin.js';
 import postcssJs from 'postcss-js';
 import { coreConfig, coreUtilities, getSkeletonClasses } from './core.js';
@@ -46,5 +49,33 @@ const skeleton = plugin.withOptions<ConfigOptions>(
 	}
 );
 
+/**
+ * Assembles content glob patterns for skeleton component packages
+ * @example
+ * const config = {
+ * 	// ...
+ * 	content: [
+ * 		// ...
+ * 		contentPath(import.meta.url, "svelte")
+ * 	]
+ * }
+ */
+export function contentPath(fileURL: URL, framework: 'svelte' | 'react') {
+	const configPath = fileURLToPath(fileURL);
+	// resolve framework package path
+	const require = createRequire(fileURL);
+	const packageEntryPath = require.resolve(`@skeletonlabs/skeleton-${framework}`, { paths: [configPath] });
+	const packagePath = path.resolve(packageEntryPath, '..');
+
+	// assemble glob
+	const glob = path.join(packagePath, fileExtensions[framework]);
+	return glob;
+}
+
+const fileExtensions = {
+	react: '/**/*.{html,js,ts,jsx,tsx}',
+	svelte: '/**/*.{html,js,ts,svelte}'
+};
+
 export { skeleton };
 export type { ConfigOptions, Theme };

sites/next.skeleton.dev/src/content/docs/get-started/installation/nextjs.mdx

@@ -35,20 +35,18 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
     <ProcessStep step="4">
         ## Configure Tailwind
         Open `tailwind.config` in the root of your project and make these changes:
-        ```js title="tailwind.config" {3-5, 13, 19-22}
+        ```js title="tailwind.config" {3-4, 11, 17-20}
         import type { Config } from 'tailwindcss';
 
-        import { join } from "path";
-        import { skeleton } from "@skeletonlabs/skeleton/plugin";
+        import { skeleton, contentPath } from "@skeletonlabs/skeleton/plugin";
         import * as themes from "@skeletonlabs/skeleton/themes";
 
-        /** @type {import('tailwindcss').Config} \*/
         export default {
             content: [
                 "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
                 "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
                 "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-                join(require.resolve('@skeletonlabs/skeleton-react'), '../**/*.{html,js,jsx,tsx,ts}')
+                contentPath(import.meta.url, 'react')
             ],
             theme: {
                 extend: {},
@@ -59,7 +57,7 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
                     themes: [ themes.cerberus, themes.rose ]
                 })
             ]
-        }
+        } satisfies Config
         ```
     </ProcessStep>
     <ProcessStep step="5">

sites/next.skeleton.dev/src/content/docs/get-started/installation/sveltekit.mdx

@@ -41,18 +41,16 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
         npm i --save-dev @types/node
         ```
         Open `tailwind.config` in the root of your project and make these changes:
-        ```js title="tailwind.config" {3-5, 11, 17-20}
+        ```ts title="tailwind.config" {3-4, 9, 15-18}
         import type { Config } from 'tailwindcss';
 
-        import { join } from 'path';
-        import { skeleton } from '@skeletonlabs/skeleton/plugin';
+        import { skeleton, contentPath } from '@skeletonlabs/skeleton/plugin';
         import * as themes from '@skeletonlabs/skeleton/themes';
 
-        /** @type {import('tailwindcss').Config} \*/
         export default {
             content: [
                 './src/**/*.{html,js,svelte,ts}',
-                join(require.resolve('@skeletonlabs/skeleton-svelte'), '../**/*.{html,js,svelte,ts}')
+                contentPath(import.meta.url, 'svelte')
             ],
             theme: {
                 extend: {},
@@ -63,7 +61,7 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
                     themes: [ themes.cerberus, themes.rose ]
                 })
             ]
-        }
+        } satisfies Config
         ```
     </ProcessStep>
     <ProcessStep step="4">

sites/next.skeleton.dev/tailwind.config.js

@@ -1,21 +1,17 @@
 // import { skeleton } from '../../packages/skeleton/dist/plugin/index.cjs'
 // NOTE: Do not delete the above comment. It's required for local HMR on plugin changes.
 
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { skeleton } from '@skeletonlabs/skeleton/plugin';
+import { skeleton, contentPath } from '../../packages/skeleton/dist/plugin/index.js';
 import * as themes from '@skeletonlabs/skeleton/themes';
 import forms from '@tailwindcss/forms';
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 /** @type {import('tailwindcss').Config} */
 export default {
 	darkMode: 'class',
 	content: [
 		'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
-		join(__dirname, 'node_modules/@skeletonlabs/skeleton-react/dist/**/*.{html,js,ts,jsx,tsx}'),
-		join(__dirname, 'node_modules/@skeletonlabs/skeleton-svelte/dist/**/*.{html,js,ts,svelte}')
+		contentPath(import.meta.url, 'svelte'),
+		contentPath(import.meta.url, 'react')
 	],
 	theme: {
 		extend: {}

sites/themes.skeleton.dev/tailwind.config.js

@@ -3,14 +3,13 @@
 
 import forms from '@tailwindcss/forms';
 
-import { join } from 'path';
-import { skeleton } from '@skeletonlabs/skeleton/plugin';
+import { skeleton, contentPath } from '../../packages/skeleton/dist/plugin/index.js';
 import * as themes from '@skeletonlabs/skeleton/themes';
 
 /** @type {import('tailwindcss').Config}*/
 export default {
 	darkMode: 'class',
-	content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton-svelte'), '../**/*.{html,js,svelte,ts}')],
+	content: ['./src/**/*.{html,js,svelte,ts}', contentPath(import.meta.url, 'svelte')],
 	theme: {
 		extend: {}
 	},