fix(content): move strict scanning to experimental

Author: ineshbose

playground/nuxt.config.ts

@@ -77,5 +77,6 @@ export default defineNuxtConfig({
  exposeConfig: true,
  cssPath: '~/assets/css/tailwind.css',
  editorSupport: true,
+ // experimental: { strictScanContentPaths: true },
  } satisfies Partial<ModuleOptions>,
 })

src/internal-context/load.ts

@@ -14,6 +14,7 @@ const loadConfig = loadConfigC12<Partial<TWConfig>>
 type ResolvedConfig = ResolvedC12Config<Partial<TWConfig>>
 
 const pagesContentPath = getContext<string[]>('twcss-pages-path')
+const componentsContentPath = getContext<string[]>('twcss-components-path')
 const resolvedConfigsCtx = getContext<Array<ResolvedConfig | null>>('twcss-resolved-configs')
 
 const createInternalContext = async (moduleOptions: ModuleOptions, nuxt = useNuxt()) => {
@@ -80,7 +81,7 @@ const createInternalContext = async (moduleOptions: ModuleOptions, nuxt = useNux
  if (!isLayer) {
  const pageFiles = pagesContentPath.tryUse()
 
- if (pageFiles && pageFiles.length) {
+ if (moduleOptions.experimental?.strictScanContentPaths && pageFiles && pageFiles.length) {
  // replace filenames like [...path].vue with ?...path?.vue because [ and ] are reserved in glob matching
  rootProjectFiles.push(...pageFiles.map(p => p.replaceAll(/\[(\.+)([^.].*)\]/g, '?$1$2?')))
  }
@@ -90,21 +91,32 @@ const createInternalContext = async (moduleOptions: ModuleOptions, nuxt = useNux
  }
  }
 
+ const componentPaths: string[] = []
+ const componentFiles = componentsContentPath.tryUse()
+
+ if (moduleOptions.experimental?.strictScanContentPaths && componentFiles && componentFiles.length) {
+ if (!isLayer) componentPaths.push(...componentFiles)
+ }
+ else {
+ componentPaths.push(
+ withSrcDir(`components/**/*${sfcExtensions}`),
+ ...(() => {
+ if (nuxtOptions.components) {
+ return (Array.isArray(nuxtOptions.components) ? nuxtOptions.components : typeof nuxtOptions.components === 'boolean' ? ['components'] : (nuxtOptions.components.dirs || [])).map((d) => {
+ const valueToResolve = typeof d === 'string' ? d : d?.path
+ return valueToResolve ? `${resolveAlias(valueToResolve)}/**/*${sfcExtensions}` : ''
+ }).filter(Boolean)
+ }
+ return []
+ })(),
+ )
+ }
+
  return {
  config: {
  content: {
  files: [
- withSrcDir(`components/**/*${sfcExtensions}`),
- ...(() => {
- if (nuxtOptions.components) {
- return (Array.isArray(nuxtOptions.components) ? nuxtOptions.components : typeof nuxtOptions.components === 'boolean' ? ['components'] : (nuxtOptions.components.dirs || [])).map((d) => {
- const valueToResolve = typeof d === 'string' ? d : d?.path
- return valueToResolve ? `${resolveAlias(valueToResolve)}/**/*${sfcExtensions}` : ''
- }).filter(Boolean)
- }
- return []
- })(),
-
+ ...componentPaths,
  nuxtOptions.dir?.layouts && withSrcDir(`${nuxtOptions.dir.layouts}/**/*${sfcExtensions}`),
  nuxtOptions.dir?.plugins && withSrcDir(`${nuxtOptions.dir.plugins}/**/*${defaultExtensions}`),
  ...importDirs.map(d => `${d}/**/*${defaultExtensions}`),
@@ -241,14 +253,28 @@ const createInternalContext = async (moduleOptions: ModuleOptions, nuxt = useNux
  }
  })
 
- nuxt.hook('pages:extend', async (pages) => {
- const newPageFiles = resolvePageFiles(pages)
+ if (moduleOptions.experimental?.strictScanContentPaths) {
+ nuxt.hook('pages:extend', async (pages) => {
+ const newPageFiles = resolvePageFiles(pages)
 
- if (newPageFiles.length !== pagesContentPath.tryUse()?.length) {
- pagesContentPath.set(newPageFiles, true)
- await reloadConfigTemplate()
- }
- })
+ if (newPageFiles.length !== pagesContentPath.tryUse()?.length) {
+ pagesContentPath.set(newPageFiles, true)
+ await reloadConfigTemplate()
+ }
+ })
+
+ nuxt.hook('components:extend', async (components) => {
+ const newComponentFiles = components.map(c => c.filePath)
+
+ if (newComponentFiles.length !== componentsContentPath.tryUse()?.length) {
+ componentsContentPath.set(newComponentFiles, true)
+ await reloadConfigTemplate()
+ }
+ })
+ }
+ else {
+ nuxt.hook('pages:extend', () => reloadConfigTemplate())
+ }
 
  nuxt.hook('vite:serverCreated', (server) => {
  nuxt.hook('tailwindcss:internal:regenerateTemplates', (data) => {

src/types.ts

@@ -72,6 +72,16 @@ export type EditorSupportConfig = {
  autocompleteUtil: BoolObj<Pick<Import, 'as'>>
 }
 
+export type ExperimentalOptions = {
+ /**
+ * Specify individual files for Nuxt scanned directories in content configuration
+ * using `pages:extend` and `components:extend` hook.
+ *
+ * @default false
+ */
+ strictScanContentPaths: boolean
+}
+
 export interface ModuleOptions {
  /**
  * The path of the Tailwind configuration file. The extension can be omitted, in which case it will try to find a `.js`, `.cjs`, `.mjs`, or `.ts` file.
@@ -118,6 +128,12 @@ export interface ModuleOptions {
  * @default false // if true, { autocompleteUtil: true }
  */
  editorSupport: BoolObj<EditorSupportConfig>
+ /**
+ * Enable module experimental functionalities.
+ *
+ * @default false
+ */
+ experimental: Partial<ExperimentalOptions>
  /**
  * This option falls back to the Tailwind configuration inlined to the PostCSS
  * loader, so any configuration changes while the dev server is running will