From 898e09264bda2c80b665a650d5e7452a3f4870f3 Mon Sep 17 00:00:00 2001 From: Stephen Zhou <38493346+hyoban@users.noreply.github.com> Date: Mon, 9 Feb 2026 18:20:09 +0800 Subject: [PATCH] chore: detect utilities in css (#32143) --- .../workflow/run/status-container.tsx | 14 +- web/app/styles/globals.css | 1017 ++--- web/eslint-suppressions.json | 3683 ++++++++++++++++- web/eslint.config.mjs | 5 +- web/package.json | 2 + web/pnpm-lock.yaml | 23 + web/tailwind-common-config.ts | 15 +- web/tailwind-css-plugin.ts | 25 + 8 files changed, 4262 insertions(+), 522 deletions(-) create mode 100644 web/tailwind-css-plugin.ts diff --git a/web/app/components/workflow/run/status-container.tsx b/web/app/components/workflow/run/status-container.tsx index fc33bd46a7..8a8e613301 100644 --- a/web/app/components/workflow/run/status-container.tsx +++ b/web/app/components/workflow/run/status-container.tsx @@ -18,25 +18,25 @@ const StatusContainer: FC = ({ return (
= 24} + peerDependencies: + postcss: ^8.4.21 + postcss-load-config@6.0.1: resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==} engines: {node: '>= 18'} @@ -10396,6 +10411,10 @@ snapshots: dependencies: '@types/node': 18.15.0 + '@types/postcss-js@4.1.0': + dependencies: + postcss: 8.5.6 + '@types/qs@6.14.0': {} '@types/react-dom@19.2.3(@types/react@19.2.9)': @@ -14012,6 +14031,10 @@ snapshots: camelcase-css: 2.0.1 postcss: 8.5.6 + postcss-js@5.0.3(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.6)(tsx@4.21.0)(yaml@2.8.2): dependencies: lilconfig: 3.1.3 diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts index 2fd568edd1..fb9216fc2d 100644 --- a/web/tailwind-common-config.ts +++ b/web/tailwind-common-config.ts @@ -1,8 +1,16 @@ +import path from 'node:path' +import { fileURLToPath } from 'node:url' import tailwindTypography from '@tailwindcss/typography' // @ts-expect-error workaround for turbopack issue +import { cssAsPlugin } from './tailwind-css-plugin.ts' +// @ts-expect-error workaround for turbopack issue import tailwindThemeVarDefine from './themes/tailwind-theme-var-define.ts' import typography from './typography.js' +const _dirname = typeof __dirname !== 'undefined' + ? __dirname + : path.dirname(fileURLToPath(import.meta.url)) + const config = { theme: { typography, @@ -148,7 +156,12 @@ const config = { }, }, }, - plugins: [tailwindTypography], + plugins: [ + tailwindTypography, + cssAsPlugin([ + path.resolve(_dirname, './app/styles/globals.css'), + ]), + ], // https://github.com/tailwindlabs/tailwindcss/discussions/5969 corePlugins: { preflight: false, diff --git a/web/tailwind-css-plugin.ts b/web/tailwind-css-plugin.ts new file mode 100644 index 0000000000..bbe0d69421 --- /dev/null +++ b/web/tailwind-css-plugin.ts @@ -0,0 +1,25 @@ +// Credits: +// https://github.com/tailwindlabs/tailwindcss-intellisense/issues/227 + +import type { PluginCreator } from 'tailwindcss/types/config' +import { readFileSync } from 'node:fs' +import { parse } from 'postcss' +import { objectify } from 'postcss-js' + +export const cssAsPlugin: (cssPath: string[]) => PluginCreator = (cssPath: string[]) => { + if (process.env.NODE_ENV === 'production') { + return () => {} + } + return ({ addUtilities, addComponents, addBase }) => { + const jssList = cssPath.map(p => objectify(parse(readFileSync(p, 'utf8')))) + + for (const jss of jssList) { + if (jss['@layer utilities']) + addUtilities(jss['@layer utilities']) + if (jss['@layer components']) + addComponents(jss['@layer components']) + if (jss['@layer base']) + addBase(jss['@layer base']) + } + } +}