From 92d5fe406672e4ce818dea7a10cc7dd89b70b2fe Mon Sep 17 00:00:00 2001 From: Kristaps Fabians Geikins Date: Tue, 21 Jan 2025 11:47:50 +0200 Subject: [PATCH] fix: tailwind config loading randomly breaking cause of import.meta in cjs (#3850) --- packages/dui3/tailwind.config.mjs | 11 +- packages/frontend-2/tailwind.config.cjs | 27 +++++ packages/frontend-2/tailwind.config.js | 34 ------ packages/tailwind-theme/README.md | 2 +- packages/tailwind-theme/eslint.config.mjs | 8 ++ packages/tailwind-theme/src/index.ts | 4 +- packages/tailwind-theme/src/plugin.ts | 7 +- .../utils/tailwind-configure.cjs | 17 +-- .../utils/tailwind-configure.d.ts | 2 +- .../utils/tailwind-configure.js | 15 +-- packages/ui-components/README.md | 2 +- packages/ui-components/eslint.config.mjs | 8 ++ packages/ui-components/src/lib-utils.ts | 13 --- packages/ui-components/tailwind.config.cjs | 4 +- .../utils/tailwind-configure.cjs | 14 ++- .../utils/tailwind-configure.d.ts | 2 +- .../ui-components/utils/tailwind-configure.js | 12 +-- workspace.code-workspace | 2 +- yarn.lock | 101 ++++++------------ 19 files changed, 125 insertions(+), 160 deletions(-) create mode 100644 packages/frontend-2/tailwind.config.cjs delete mode 100644 packages/frontend-2/tailwind.config.js delete mode 100644 packages/ui-components/src/lib-utils.ts diff --git a/packages/dui3/tailwind.config.mjs b/packages/dui3/tailwind.config.mjs index 022f7b4e4..b952f6bfb 100644 --- a/packages/dui3/tailwind.config.mjs +++ b/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] diff --git a/packages/frontend-2/tailwind.config.cjs b/packages/frontend-2/tailwind.config.cjs new file mode 100644 index 000000000..bb46b71aa --- /dev/null +++ b/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 diff --git a/packages/frontend-2/tailwind.config.js b/packages/frontend-2/tailwind.config.js deleted file mode 100644 index ed955af16..000000000 --- a/packages/frontend-2/tailwind.config.js +++ /dev/null @@ -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 diff --git a/packages/tailwind-theme/README.md b/packages/tailwind-theme/README.md index 94a0af9b3..095ead69e 100644 --- a/packages/tailwind-theme/README.md +++ b/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 diff --git a/packages/tailwind-theme/eslint.config.mjs b/packages/tailwind-theme/eslint.config.mjs index 85e844fd9..299e32507 100644 --- a/packages/tailwind-theme/eslint.config.mjs +++ b/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 + } + } } ] diff --git a/packages/tailwind-theme/src/index.ts b/packages/tailwind-theme/src/index.ts index c1f877470..a1320a510 100644 --- a/packages/tailwind-theme/src/index.ts +++ b/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 } diff --git a/packages/tailwind-theme/src/plugin.ts b/packages/tailwind-theme/src/plugin.ts index 01af0078b..2fd51bf03 100644 --- a/packages/tailwind-theme/src/plugin.ts +++ b/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 } diff --git a/packages/tailwind-theme/utils/tailwind-configure.cjs b/packages/tailwind-theme/utils/tailwind-configure.cjs index 4c1104c6a..ab5bb8d74 100644 --- a/packages/tailwind-theme/utils/tailwind-configure.cjs +++ b/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 } diff --git a/packages/tailwind-theme/utils/tailwind-configure.d.ts b/packages/tailwind-theme/utils/tailwind-configure.d.ts index 2c22994ce..13b1deaab 100644 --- a/packages/tailwind-theme/utils/tailwind-configure.d.ts +++ b/packages/tailwind-theme/utils/tailwind-configure.d.ts @@ -1 +1 @@ -export declare function tailwindContentEntry(req: NodeRequire): string +export declare function tailwindContentEntries(): string[] diff --git a/packages/tailwind-theme/utils/tailwind-configure.js b/packages/tailwind-theme/utils/tailwind-configure.js index aac03796b..af6e71e69 100644 --- a/packages/tailwind-theme/utils/tailwind-configure.js +++ b/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}') + ] } diff --git a/packages/ui-components/README.md b/packages/ui-components/README.md index ad4c654e4..a944e2dbd 100644 --- a/packages/ui-components/README.md +++ b/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 diff --git a/packages/ui-components/eslint.config.mjs b/packages/ui-components/eslint.config.mjs index d89f076ec..73a0dcf78 100644 --- a/packages/ui-components/eslint.config.mjs +++ b/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 ] diff --git a/packages/ui-components/src/lib-utils.ts b/packages/ui-components/src/lib-utils.ts deleted file mode 100644 index 2a7912a9c..000000000 --- a/packages/ui-components/src/lib-utils.ts +++ /dev/null @@ -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}') -} diff --git a/packages/ui-components/tailwind.config.cjs b/packages/ui-components/tailwind.config.cjs index 551c779ef..4c000fd57 100644 --- a/packages/ui-components/tailwind.config.cjs +++ b/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] } diff --git a/packages/ui-components/utils/tailwind-configure.cjs b/packages/ui-components/utils/tailwind-configure.cjs index af76149fb..d252e88d1 100644 --- a/packages/ui-components/utils/tailwind-configure.cjs +++ b/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 } diff --git a/packages/ui-components/utils/tailwind-configure.d.ts b/packages/ui-components/utils/tailwind-configure.d.ts index 2c22994ce..13b1deaab 100644 --- a/packages/ui-components/utils/tailwind-configure.d.ts +++ b/packages/ui-components/utils/tailwind-configure.d.ts @@ -1 +1 @@ -export declare function tailwindContentEntry(req: NodeRequire): string +export declare function tailwindContentEntries(): string[] diff --git a/packages/ui-components/utils/tailwind-configure.js b/packages/ui-components/utils/tailwind-configure.js index d3e570c8f..ae9e29fba 100644 --- a/packages/ui-components/utils/tailwind-configure.js +++ b/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}')] } diff --git a/workspace.code-workspace b/workspace.code-workspace index 55d11ad42..9544fb4a2 100644 --- a/workspace.code-workspace +++ b/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", diff --git a/yarn.lock b/yarn.lock index e3e6537fd..137449e72 100644 --- a/yarn.lock +++ b/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"