From 0ca4e7fc610ecf251b0b7b146b962a61f9679540 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Fri, 23 Feb 2024 12:51:11 +0100 Subject: [PATCH] fix(module): revert tailwind config from #1272 --- docs/nuxt.config.ts | 2 +- src/{runtime/utils => }/colors.ts | 2 +- src/module.ts | 112 ++++++++++++++++++++++++- src/tailwind.ts | 135 ------------------------------ 4 files changed, 111 insertions(+), 140 deletions(-) rename src/{runtime/utils => }/colors.ts (99%) delete mode 100644 src/tailwind.ts diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index faea2eefe4..eb529ebe6a 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -1,7 +1,7 @@ import { createResolver } from '@nuxt/kit' import colors from 'tailwindcss/colors' import module from '../src/module' -import { excludeColors } from '../src/runtime/utils/colors' +import { excludeColors } from '../src/colors' import pkg from '../package.json' const { resolve } = createResolver(import.meta.url) diff --git a/src/runtime/utils/colors.ts b/src/colors.ts similarity index 99% rename from src/runtime/utils/colors.ts rename to src/colors.ts index e69f3b47ca..a0455fc928 100644 --- a/src/runtime/utils/colors.ts +++ b/src/colors.ts @@ -1,4 +1,4 @@ -import { omit } from './lodash' +import { omit } from './runtime/utils/lodash' import { kebabCase, camelCase, upperFirst } from 'scule' const colorsToExclude = [ diff --git a/src/module.ts b/src/module.ts index 7da940909d..5beb7c1348 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,10 +1,22 @@ +import { createRequire } from 'node:module' import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit' -import type { CollectionNames, IconsPluginOptions } from '@egoist/tailwindcss-icons' +import { defaultExtractor as createDefaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor.js' +import { iconsPlugin, getIconCollections, type CollectionNames, type IconsPluginOptions } from '@egoist/tailwindcss-icons' import { name, version } from '../package.json' import createTemplates from './templates' +import { generateSafelist, excludeColors, customSafelistExtractor } from './colors' import * as config from './runtime/ui.config' import type { DeepPartial, Strategy } from './runtime/types/utils' -import installTailwind from './tailwind' + +const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } }) +const _require = createRequire(import.meta.url) +const defaultColors = _require('tailwindcss/colors.js') + +delete defaultColors.lightBlue +delete defaultColors.warmGray +delete defaultColors.trueGray +delete defaultColors.coolGray +delete defaultColors.blueGray type UI = { primary?: string @@ -76,13 +88,107 @@ export default defineNuxtModule({ nuxt.options.css.push(resolve(runtimeDir, 'ui.css')) } + // @ts-ignore + nuxt.hook('tailwindcss:config', function (tailwindConfig) { + tailwindConfig.theme = tailwindConfig.theme || {} + tailwindConfig.theme.extend = tailwindConfig.theme.extend || {} + tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {} + + const globalColors: any = { + ...(tailwindConfig.theme.colors || defaultColors), + ...tailwindConfig.theme.extend?.colors + } + + // @ts-ignore + globalColors.primary = tailwindConfig.theme.extend.colors.primary = { + 50: 'rgb(var(--color-primary-50) / )', + 100: 'rgb(var(--color-primary-100) / )', + 200: 'rgb(var(--color-primary-200) / )', + 300: 'rgb(var(--color-primary-300) / )', + 400: 'rgb(var(--color-primary-400) / )', + 500: 'rgb(var(--color-primary-500) / )', + 600: 'rgb(var(--color-primary-600) / )', + 700: 'rgb(var(--color-primary-700) / )', + 800: 'rgb(var(--color-primary-800) / )', + 900: 'rgb(var(--color-primary-900) / )', + 950: 'rgb(var(--color-primary-950) / )', + DEFAULT: 'rgb(var(--color-primary-DEFAULT) / )' + } + + if (globalColors.gray) { + // @ts-ignore + globalColors.cool = tailwindConfig.theme.extend.colors.cool = defaultColors.gray + } + + // @ts-ignore + globalColors.gray = tailwindConfig.theme.extend.colors.gray = { + 50: 'rgb(var(--color-gray-50) / )', + 100: 'rgb(var(--color-gray-100) / )', + 200: 'rgb(var(--color-gray-200) / )', + 300: 'rgb(var(--color-gray-300) / )', + 400: 'rgb(var(--color-gray-400) / )', + 500: 'rgb(var(--color-gray-500) / )', + 600: 'rgb(var(--color-gray-600) / )', + 700: 'rgb(var(--color-gray-700) / )', + 800: 'rgb(var(--color-gray-800) / )', + 900: 'rgb(var(--color-gray-900) / )', + 950: 'rgb(var(--color-gray-950) / )' + } + + const colors = excludeColors(globalColors) + + // @ts-ignore + nuxt.options.appConfig.ui = { + primary: 'green', + gray: 'cool', + colors, + strategy: 'merge' + } + + tailwindConfig.safelist = tailwindConfig.safelist || [] + tailwindConfig.safelist.push(...generateSafelist(options.safelistColors || [], colors)) + }) + createTemplates(nuxt) // Modules await installModule('nuxt-icon') await installModule('@nuxtjs/color-mode', { classSuffix: '' }) - await installTailwind(options, nuxt, { resolve, runtimeDir }) + await installModule('@nuxtjs/tailwindcss', { + exposeConfig: true, + config: { + darkMode: 'class', + plugins: [ + require('@tailwindcss/forms')({ strategy: 'class' }), + require('@tailwindcss/aspect-ratio'), + require('@tailwindcss/typography'), + require('@tailwindcss/container-queries'), + require('@headlessui/tailwindcss'), + iconsPlugin(Array.isArray(options.icons) || options.icons === 'all' ? { collections: getIconCollections(options.icons) } : typeof options.icons === 'object' ? options.icons as IconsPluginOptions : {}) + ], + content: { + files: [ + resolve(runtimeDir, 'components/**/*.{vue,mjs,ts}'), + resolve(runtimeDir, 'ui.config/**/*.{mjs,js,ts}') + ], + transform: { + vue: (content) => { + return content.replaceAll(/(?:\r\n|\r|\n)/g, ' ') + } + }, + extract: { + vue: (content) => { + return [ + ...defaultExtractor(content), + // @ts-ignore + ...customSafelistExtractor(options.prefix, content, nuxt.options.appConfig.ui.colors, options.safelistColors) + ] + } + } + } + } + }) // Plugins diff --git a/src/tailwind.ts b/src/tailwind.ts deleted file mode 100644 index 542f2178cc..0000000000 --- a/src/tailwind.ts +++ /dev/null @@ -1,135 +0,0 @@ -import { createRequire } from 'node:module' -import { join } from 'pathe' -import { addTemplate, installModule, useNuxt } from '@nuxt/kit' -import { excludeColors, generateSafelist } from './runtime/utils/colors' -import type { ModuleOptions } from './module' - -const _require = createRequire(import.meta.url) -const defaultColors = _require('tailwindcss/colors.js') - -delete defaultColors.lightBlue -delete defaultColors.warmGray -delete defaultColors.trueGray -delete defaultColors.coolGray -delete defaultColors.blueGray - -export default async function installTailwind (moduleOptions: ModuleOptions, nuxt = useNuxt(), { resolve, runtimeDir }) { - // 1. register hook - // @ts-ignore - nuxt.hook('tailwindcss:config', function (tailwindConfig) { - tailwindConfig.theme = tailwindConfig.theme || {} - tailwindConfig.theme.extend = tailwindConfig.theme.extend || {} - tailwindConfig.theme.extend.colors = - tailwindConfig.theme.extend.colors || {} - - const globalColors: any = { - ...(tailwindConfig.theme.colors || defaultColors), - ...tailwindConfig.theme.extend?.colors - } - - // @ts-ignore - globalColors.primary = tailwindConfig.theme.extend.colors.primary = { - 50: 'rgb(var(--color-primary-50) / )', - 100: 'rgb(var(--color-primary-100) / )', - 200: 'rgb(var(--color-primary-200) / )', - 300: 'rgb(var(--color-primary-300) / )', - 400: 'rgb(var(--color-primary-400) / )', - 500: 'rgb(var(--color-primary-500) / )', - 600: 'rgb(var(--color-primary-600) / )', - 700: 'rgb(var(--color-primary-700) / )', - 800: 'rgb(var(--color-primary-800) / )', - 900: 'rgb(var(--color-primary-900) / )', - 950: 'rgb(var(--color-primary-950) / )', - DEFAULT: 'rgb(var(--color-primary-DEFAULT) / )' - } - - if (globalColors.gray) { - // @ts-ignore - globalColors.cool = tailwindConfig.theme.extend.colors.cool = - defaultColors.gray - } - - // @ts-ignore - globalColors.gray = tailwindConfig.theme.extend.colors.gray = { - 50: 'rgb(var(--color-gray-50) / )', - 100: 'rgb(var(--color-gray-100) / )', - 200: 'rgb(var(--color-gray-200) / )', - 300: 'rgb(var(--color-gray-300) / )', - 400: 'rgb(var(--color-gray-400) / )', - 500: 'rgb(var(--color-gray-500) / )', - 600: 'rgb(var(--color-gray-600) / )', - 700: 'rgb(var(--color-gray-700) / )', - 800: 'rgb(var(--color-gray-800) / )', - 900: 'rgb(var(--color-gray-900) / )', - 950: 'rgb(var(--color-gray-950) / )' - } - - const colors = excludeColors(globalColors) - - // @ts-ignore - nuxt.options.appConfig.ui = { - primary: 'green', - gray: 'cool', - colors, - strategy: 'merge' - } - - tailwindConfig.safelist = tailwindConfig.safelist || [] - tailwindConfig.safelist.push( - ...generateSafelist(moduleOptions.safelistColors || [], colors) - ) - }) - - // 2. add config template - const configTemplate = addTemplate({ - filename: 'nuxtui-tailwind.config.cjs', - write: true, - getContents: () => ` - const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js') - const { customSafelistExtractor } = require(${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))}) - const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons') - - const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } }) - - module.exports = { - darkMode: 'class', - plugins: [ - require('@tailwindcss/forms')({ strategy: 'class' }), - require('@tailwindcss/aspect-ratio'), - require('@tailwindcss/typography'), - require('@tailwindcss/container-queries'), - require('@headlessui/tailwindcss'), - iconsPlugin(${Array.isArray(moduleOptions.icons) || moduleOptions.icons === 'all' ? `{ collections: getIconCollections(${JSON.stringify(moduleOptions.icons)}) }` : typeof moduleOptions.icons === 'object' ? JSON.stringify(moduleOptions.icons) : '{}'}) - ], - content: { - files: [ - ${JSON.stringify(resolve(runtimeDir, 'components/**/*.{vue,mjs,ts}'))}, - ${JSON.stringify(resolve(runtimeDir, 'ui.config/**/*.{mjs,js,ts}'))} - ], - transform: { - vue: (content) => { - return content.replaceAll(/(?:\\r\\n|\\r|\\n)/g, ' ') - } - }, - extract: { - vue: (content) => { - return [ - ...defaultExtractor(content), - ...customSafelistExtractor(${JSON.stringify(moduleOptions.prefix)}, content, ${JSON.stringify(nuxt.options.appConfig.ui.colors)}, ${JSON.stringify(moduleOptions.safelistColors)}) - ] - } - } - } - } - ` - }) - - // 3. install module - await installModule('@nuxtjs/tailwindcss', { - exposeConfig: true, - configPath: [ - configTemplate.dst, - join(nuxt.options.rootDir, 'tailwind.config') - ] - }) -}