fix: tailwind config loading randomly breaking cause of import.meta in cjs (#3850)

packages/dui3/tailwind.config.mjs

@@ -1,11 +1,8 @@
 import speckleTheme from '@speckle/tailwind-theme'
-import { tailwindContentEntry as themeEntry } from '@speckle/tailwind-theme/tailwind-configure'
-import { tailwindContentEntry as uiLibEntry } from '@speckle/ui-components/tailwind-configure'
+import { tailwindContentEntries as themeEntries } from '@speckle/tailwind-theme/tailwind-configure'
+import { tailwindContentEntries as uiLibEntries } from '@speckle/ui-components/tailwind-configure'
 import formsPlugin from '@tailwindcss/forms'
 
-import { createRequire } from 'module'
-const req = createRequire(import.meta.url)
-
 /** @type {import('tailwindcss').Config} */
 const config = {
   darkMode: 'class',
@@ -19,8 +16,8 @@ const config = {
     './app.vue',
     './.storybook/**/*.{js,ts,vue}',
     './lib/**/composables/*.{js,ts}',
-    themeEntry(req),
-    uiLibEntry(req)
+    ...themeEntries(),
+    ...uiLibEntries()
     // `./lib/**/*.{js,ts,vue}`, // TODO: Wait for fix https://github.com/nuxt/framework/issues/2886#issuecomment-1108312903
   ],
   plugins: [speckleTheme, formsPlugin]

packages/frontend-2/tailwind.config.cjs

@@ -0,0 +1,27 @@
+const speckleTheme = require('@speckle/tailwind-theme').plugin
+const themeEntries =
+  require('@speckle/tailwind-theme/tailwind-configure').tailwindContentEntries
+const uiLibEntries =
+  require('@speckle/ui-components/tailwind-configure').tailwindContentEntries
+const formsPlugin = require('@tailwindcss/forms')
+const typographyPlugin = require('@tailwindcss/typography')
+
+/** @type {import('tailwindcss').Config} */
+const config = {
+  darkMode: 'class',
+  content: [
+    `./components/**/*.{vue,js,ts}`,
+    `./layouts/**/*.vue`,
+    `./pages/**/*.vue`,
+    `./composables/**/*.{js,ts}`,
+    `./plugins/**/*.{js,ts}`,
+    './stories/**/*.{js,ts,vue,mdx}',
+    './app.vue',
+    './lib/**/composables/*.{js,ts}',
+    ...themeEntries(),
+    ...uiLibEntries()
+  ],
+  plugins: [speckleTheme, formsPlugin, typographyPlugin]
+}
+
+module.exports = config

packages/frontend-2/tailwind.config.js

@@ -1,34 +0,0 @@
-const speckleTheme = require('@speckle/tailwind-theme')
-const {
-  tailwindContentEntry: themeEntry
-} = require('@speckle/tailwind-theme/tailwind-configure')
-const {
-  tailwindContentEntry: uiLibEntry
-} = require('@speckle/ui-components/tailwind-configure')
-const formsPlugin = require('@tailwindcss/forms')
-const typographyPlugin = require('@tailwindcss/typography')
-const { createRequire } = require('module')
-
-// i know, this is bizarre - import.meta.url in a CJS file
-// but this happens because apparently this file is transpiled to different formats (ESM/CJS) multiple times
-// if this were an mjs file it wouldn't work
-const req = createRequire(import.meta.url)
-
-const config = {
-  darkMode: 'class',
-  content: [
-    `./components/**/*.{vue,js,ts}`,
-    `./layouts/**/*.vue`,
-    `./pages/**/*.vue`,
-    `./composables/**/*.{js,ts}`,
-    `./plugins/**/*.{js,ts}`,
-    './stories/**/*.{js,ts,vue,mdx}',
-    './app.vue',
-    './lib/**/composables/*.{js,ts}',
-    themeEntry(req),
-    uiLibEntry(req)
-  ],
-  plugins: [speckleTheme, formsPlugin, typographyPlugin]
-}
-
-module.exports = config

packages/tailwind-theme/README.md

@@ -6,7 +6,7 @@ Tailwind theme used in frontend 2 and other apps.
 
 1. Install the package
 1. In your tailwind config import `@speckle/tailwind-theme` and `@tailwindcss/forms` and add them to your `plugins` array
-1. Import `tailwindContentEntry` from `@speckle/tailwind-theme/tailwind-configure` and invoke it in the `contents` field in your Tailwind config to ensure PurgeCSS is configured correctly. It requires the CJS `require` object as its only parameter. If it isn't available (in an ESM environment), you can use node's `createRequire()`.
+1. Import `tailwindContentEntries` from `@speckle/tailwind-theme/tailwind-configure` and invoke it in the `contents` field in your Tailwind config to ensure PurgeCSS is configured correctly. It requires the CJS `require` object as its only parameter. If it isn't available (in an ESM environment), you can use node's `createRequire()`.
 
 ## Development
 

packages/tailwind-theme/eslint.config.mjs

@@ -57,6 +57,14 @@ const configs = [
       '@typescript-eslint/ban-types': 'off',
       'no-unused-vars': 'off'
     }
+  },
+  {
+    files: ['utils/*.cjs'],
+    languageOptions: {
+      globals: {
+        ...globals.node
+      }
+    }
   }
 ]
 

packages/tailwind-theme/src/index.ts

@@ -1,4 +1,4 @@
-import plugin, { darkThemeVariables, lightThemeVariables } from './plugin.js'
+import { darkThemeVariables, lightThemeVariables, plugin } from './plugin.js'
 
 export default plugin
-export { darkThemeVariables, lightThemeVariables }
+export { darkThemeVariables, lightThemeVariables, plugin }

packages/tailwind-theme/src/plugin.ts

@@ -1,4 +1,4 @@
-import plugin from 'tailwindcss/plugin.js'
+import buildPlugin from 'tailwindcss/plugin.js'
 import preset from './preset.js'
 
 export const lightThemeVariables = {
@@ -134,7 +134,7 @@ export const darkThemeVariables = {
   '--danger-darker': '#AB3E3E'
 }
 
-export default plugin(function ({ addComponents, addBase }) {
+const plugin = buildPlugin(function ({ addComponents, addBase }) {
   addBase({
     /* cyrillic-ext */
     '@font-face': {
@@ -379,3 +379,6 @@ export default plugin(function ({ addComponents, addBase }) {
     }
   })
 }, preset)
+
+export default plugin
+export { plugin }

packages/tailwind-theme/utils/tailwind-configure.cjs

@@ -1,15 +1,16 @@
-const { resolve, dirname } = require('path')
+const { resolve } = require('path')
 
 /**
  * Use this to generate an entry for the Tailwind 'content' config key that will ensure
  * this library is scanned to prevent unnecessary purging
- * @param {NodeRequire} req Feed in the 'require' object. It needs to be fed in because it may be
- * unavailable in certain environments and might need to be created manually with 'createRequire'
+ * @returns {string[]}
  */
-function tailwindContentEntry(req) {
-  const packageLocaton = req.resolve('@speckle/tailwind-theme')
-  const packageDir = dirname(packageLocaton)
-  return resolve(packageDir, '**/*.{js,cjs,mjs}')
+function tailwindContentEntries() {
+  const currentLocation = __dirname
+  return [
+    resolve(currentLocation, '../dist', '**/*.{js,cjs,mjs}'),
+    resolve(currentLocation, '../dist-cjs', '**/*.{js,cjs,mjs}')
+  ]
 }
 
-module.exports = { tailwindContentEntry }
+module.exports = { tailwindContentEntries }

packages/tailwind-theme/utils/tailwind-configure.d.ts

@@ -1 +1 @@
-export declare function tailwindContentEntry(req: NodeRequire): string
+export declare function tailwindContentEntries(): string[]

packages/tailwind-theme/utils/tailwind-configure.js

@@ -1,13 +1,16 @@
 import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
 
 /**
  * Use this to generate an entry for the Tailwind 'content' config key that will ensure
  * this library is scanned to prevent unnecessary purging
- * @param {NodeRequire} req Feed in the 'require' object. It needs to be fed in because it may be
- * unavailable in certain environments and might need to be created manually with 'createRequire'
+ * @returns {string[]}
  */
-export function tailwindContentEntry(req) {
-  const packageLocaton = req.resolve('@speckle/tailwind-theme')
-  const packageDir = dirname(packageLocaton)
-  return resolve(packageDir, '**/*.{js,cjs,mjs}')
+export function tailwindContentEntries() {
+  const __filename = fileURLToPath(import.meta.url)
+  const __dirname = dirname(__filename)
+  return [
+    resolve(__dirname, '../dist', '**/*.{js,cjs,mjs}'),
+    resolve(__dirname, '../dist-cjs', '**/*.{js,cjs,mjs}')
+  ]
 }

packages/ui-components/README.md

@@ -6,7 +6,7 @@ Speckle UI component library built with Vue 3 and relying on the Speckle Tailwin
 
 1. Make sure you have `@speckle/tailwind-theme` installed and set up with Tailwind
 1. Install `@speckle/ui-components`
-1. In your tailwind config import `tailwindContentEntry` from `@speckle/ui-components/tailwind-configure` and invoke it in the `contents` field to ensure PurgeCSS is configured correctly. It requires the CJS `require` object as its only parameter. If it isn't available (in an ESM environment), you can use node's `createRequire()`.
+1. In your tailwind config import `tailwindContentEntries` from `@speckle/ui-components/tailwind-configure` and invoke it in the `contents` field to ensure PurgeCSS is configured correctly. It requires the CJS `require` object as its only parameter. If it isn't available (in an ESM environment), you can use node's `createRequire()`.
 1. Import `@speckle/ui-components/style.css` in your app. If `exports` map isn't supported you can also import from `@speckle/ui-components/dist/style.css`
 
 ### Usage in Nuxt v3

packages/ui-components/eslint.config.mjs

@@ -147,6 +147,14 @@ const configs = [
       '@typescript-eslint/ban-types': 'off'
     }
   },
+  {
+    files: ['utils/*.cjs'],
+    languageOptions: {
+      globals: {
+        ...globals.node
+      }
+    }
+  },
   prettierConfig
 ]
 

packages/ui-components/src/lib-utils.ts

@@ -1,13 +0,0 @@
-import { resolve, dirname } from 'path'
-
-/**
- * Use this to generate an entry for the Tailwind 'content' config key that will ensure
- * this library is scanned to prevent unnecessary purging
- * @param {NodeRequire} req Feed in the 'require' object. It needs to be fed in because it may be
- * unavailable in certain environments and might need to be created manually with 'createRequire'
- */
-export function tailwindContentEntry(req: NodeRequire) {
-  const packageLocaton = req.resolve('@speckle/ui-components')
-  const packageDir = dirname(packageLocaton)
-  return resolve(packageDir, '**/*.{js,cjs,mjs}')
-}

packages/ui-components/tailwind.config.cjs

@@ -1,5 +1,5 @@
 const speckleTheme = require('@speckle/tailwind-theme')
-const { tailwindContentEntry } = require('@speckle/tailwind-theme/tailwind-configure')
+const { tailwindContentEntries } = require('@speckle/tailwind-theme/tailwind-configure')
 const formsPlugin = require('@tailwindcss/forms')
 
 /** @type {import('tailwindcss').Config} */
@@ -8,7 +8,7 @@ module.exports = {
   content: [
     './index.html',
     './src/**/*.{js,ts,jsx,tsx,vue}',
-    tailwindContentEntry(require)
+    ...tailwindContentEntries()
   ],
   plugins: [speckleTheme.default, formsPlugin]
 }

packages/ui-components/utils/tailwind-configure.cjs

@@ -1,15 +1,13 @@
-const { resolve, dirname } = require('path')
+const { resolve } = require('path')
 
 /**
  * Use this to generate an entry for the Tailwind 'content' config key that will ensure
  * this library is scanned to prevent unnecessary purging
- * @param {NodeRequire} req Feed in the 'require' object. It needs to be fed in because it may be
- * unavailable in certain environments and might need to be created manually with 'createRequire'
+ * @returns {string[]}
  */
-function tailwindContentEntry(req) {
-  const packageLocaton = req.resolve('@speckle/ui-components')
-  const packageDir = dirname(packageLocaton)
-  return resolve(packageDir, '**/*.{js,cjs,mjs}')
+function tailwindContentEntries() {
+  const currentLocation = __dirname
+  return [resolve(currentLocation, '../dist', '**/*.{js,cjs,mjs}')]
 }
 
-module.exports = { tailwindContentEntry }
+module.exports = { tailwindContentEntries }

packages/ui-components/utils/tailwind-configure.d.ts

@@ -1 +1 @@
-export declare function tailwindContentEntry(req: NodeRequire): string
+export declare function tailwindContentEntries(): string[]

packages/ui-components/utils/tailwind-configure.js

@@ -1,13 +1,13 @@
 import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
 
 /**
  * Use this to generate an entry for the Tailwind 'content' config key that will ensure
  * this library is scanned to prevent unnecessary purging
- * @param {NodeRequire} req Feed in the 'require' object. It needs to be fed in because it may be
- * unavailable in certain environments and might need to be created manually with 'createRequire'
+ * @returns {string[]}
  */
-export function tailwindContentEntry(req) {
-  const packageLocaton = req.resolve('@speckle/ui-components')
-  const packageDir = dirname(packageLocaton)
-  return resolve(packageDir, '**/*.{js,cjs,mjs}')
+export function tailwindContentEntries() {
+  const __filename = fileURLToPath(import.meta.url)
+  const __dirname = dirname(__filename)
+  return [resolve(__dirname, '../dist', '**/*.{js,cjs,mjs}')]
 }

workspace.code-workspace

@@ -104,7 +104,7 @@
       "Prorotation"
     ],
     "tailwindCSS.experimental.configFile": {
-      "packages/frontend-2/tailwind.config.mjs": "packages/frontend-2/**"
+      "packages/frontend-2/tailwind.config.cjs": "packages/frontend-2/**"
     },
     "vue-semantic-server.trace.server": "off",
     "vue-syntactic-server.trace.server": "off",

yarn.lock

@@ -49791,7 +49791,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.3.2, tailwindcss@npm:~3.3.2":
+"tailwindcss@npm:^3.3.2, tailwindcss@npm:^3.4.1, tailwindcss@npm:~3.4.13":
+  version: 3.4.17
+  resolution: "tailwindcss@npm:3.4.17"
+  dependencies:
+    "@alloc/quick-lru": "npm:^5.2.0"
+    arg: "npm:^5.0.2"
+    chokidar: "npm:^3.6.0"
+    didyoumean: "npm:^1.2.2"
+    dlv: "npm:^1.1.3"
+    fast-glob: "npm:^3.3.2"
+    glob-parent: "npm:^6.0.2"
+    is-glob: "npm:^4.0.3"
+    jiti: "npm:^1.21.6"
+    lilconfig: "npm:^3.1.3"
+    micromatch: "npm:^4.0.8"
+    normalize-path: "npm:^3.0.0"
+    object-hash: "npm:^3.0.0"
+    picocolors: "npm:^1.1.1"
+    postcss: "npm:^8.4.47"
+    postcss-import: "npm:^15.1.0"
+    postcss-js: "npm:^4.0.1"
+    postcss-load-config: "npm:^4.0.2"
+    postcss-nested: "npm:^6.2.0"
+    postcss-selector-parser: "npm:^6.1.2"
+    resolve: "npm:^1.22.8"
+    sucrase: "npm:^3.35.0"
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 10/b0e00533ae3800223b5b71af9cb1dd9bfea5ef5ffa01300f1ced99de9511487aa41e03106173e4168c56c8f6600ee21c98c1d75a5def23cddf9b39b4ad71210d
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:~3.3.2":
   version: 3.3.2
   resolution: "tailwindcss@npm:3.3.2"
   dependencies:
@@ -49825,72 +49858,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.4.1":
-  version: 3.4.1
-  resolution: "tailwindcss@npm:3.4.1"
-  dependencies:
-    "@alloc/quick-lru": "npm:^5.2.0"
-    arg: "npm:^5.0.2"
-    chokidar: "npm:^3.5.3"
-    didyoumean: "npm:^1.2.2"
-    dlv: "npm:^1.1.3"
-    fast-glob: "npm:^3.3.0"
-    glob-parent: "npm:^6.0.2"
-    is-glob: "npm:^4.0.3"
-    jiti: "npm:^1.19.1"
-    lilconfig: "npm:^2.1.0"
-    micromatch: "npm:^4.0.5"
-    normalize-path: "npm:^3.0.0"
-    object-hash: "npm:^3.0.0"
-    picocolors: "npm:^1.0.0"
-    postcss: "npm:^8.4.23"
-    postcss-import: "npm:^15.1.0"
-    postcss-js: "npm:^4.0.1"
-    postcss-load-config: "npm:^4.0.1"
-    postcss-nested: "npm:^6.0.1"
-    postcss-selector-parser: "npm:^6.0.11"
-    resolve: "npm:^1.22.2"
-    sucrase: "npm:^3.32.0"
-  bin:
-    tailwind: lib/cli.js
-    tailwindcss: lib/cli.js
-  checksum: 10/bf460657c674b1fb22ad7017ab5a9771c2884a3089d7767cee2395e8d9a54d74846170934ee00e285f39622c8e9e54d6f0e54bf38344efdc61544291c4d325c2
-  languageName: node
-  linkType: hard
-
-"tailwindcss@npm:~3.4.13":
-  version: 3.4.17
-  resolution: "tailwindcss@npm:3.4.17"
-  dependencies:
-    "@alloc/quick-lru": "npm:^5.2.0"
-    arg: "npm:^5.0.2"
-    chokidar: "npm:^3.6.0"
-    didyoumean: "npm:^1.2.2"
-    dlv: "npm:^1.1.3"
-    fast-glob: "npm:^3.3.2"
-    glob-parent: "npm:^6.0.2"
-    is-glob: "npm:^4.0.3"
-    jiti: "npm:^1.21.6"
-    lilconfig: "npm:^3.1.3"
-    micromatch: "npm:^4.0.8"
-    normalize-path: "npm:^3.0.0"
-    object-hash: "npm:^3.0.0"
-    picocolors: "npm:^1.1.1"
-    postcss: "npm:^8.4.47"
-    postcss-import: "npm:^15.1.0"
-    postcss-js: "npm:^4.0.1"
-    postcss-load-config: "npm:^4.0.2"
-    postcss-nested: "npm:^6.2.0"
-    postcss-selector-parser: "npm:^6.1.2"
-    resolve: "npm:^1.22.8"
-    sucrase: "npm:^3.35.0"
-  bin:
-    tailwind: lib/cli.js
-    tailwindcss: lib/cli.js
-  checksum: 10/b0e00533ae3800223b5b71af9cb1dd9bfea5ef5ffa01300f1ced99de9511487aa41e03106173e4168c56c8f6600ee21c98c1d75a5def23cddf9b39b4ad71210d
-  languageName: node
-  linkType: hard
-
 "tapable@npm:^1.0.0":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"