refactor: import component css in globals.css (#32180)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/base/badge/index.tsx

@@ -3,7 +3,6 @@ import type { CSSProperties, ReactNode } from 'react'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
-import './index.css'
 
 enum BadgeState {
   Warning = 'warning',

web/app/components/base/premium-badge/index.tsx

@@ -4,7 +4,6 @@ import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { Highlight } from '@/app/components/base/icons/src/public/common'
 import { cn } from '@/utils/classnames'
-import './index.css'
 
 const PremiumBadgeVariants = cva(
   'premium-badge',

web/app/styles/globals.css

@@ -1,15 +1,16 @@
 @import "preflight.css";
 
-
 @import '../../themes/light.css';
 @import '../../themes/dark.css';
 @import "../../themes/manual-light.css";
 @import "../../themes/manual-dark.css";
 @import "./monaco-sticky-fix.css";
 
-@import "../components/base/button/index.css";
 @import "../components/base/action-button/index.css";
+@import "../components/base/badge/index.css";
+@import "../components/base/button/index.css";
 @import "../components/base/modal/index.css";
+@import "../components/base/premium-badge/index.css";
 
 @tailwind base;
 @tailwind components;

web/eslint.config.mjs

@@ -7,6 +7,10 @@ import sonar from 'eslint-plugin-sonarjs'
 import storybook from 'eslint-plugin-storybook'
 import dify from './eslint-rules/index.js'
 
+// Enable Tailwind CSS IntelliSense mode for ESLint runs
+// See: tailwind-css-plugin.ts
+process.env.TAILWIND_MODE ??= 'ESLINT'
+
 export default antfu(
   {
     react: {

web/tailwind-common-config.ts

@@ -182,6 +182,11 @@ const config = {
     }),
     cssAsPlugin([
       path.resolve(_dirname, './app/styles/globals.css'),
+      path.resolve(_dirname, './app/components/base/action-button/index.css'),
+      path.resolve(_dirname, './app/components/base/badge/index.css'),
+      path.resolve(_dirname, './app/components/base/button/index.css'),
+      path.resolve(_dirname, './app/components/base/modal/index.css'),
+      path.resolve(_dirname, './app/components/base/premium-badge/index.css'),
     ]),
   ],
   // https://github.com/tailwindlabs/tailwindcss/discussions/5969

web/tailwind-css-plugin.ts

@@ -7,9 +7,11 @@ import { parse } from 'postcss'
 import { objectify } from 'postcss-js'
 
 export const cssAsPlugin: (cssPath: string[]) => PluginCreator = (cssPath: string[]) => {
-  if (process.env.NODE_ENV === 'production') {
+  const isTailwindCSSIntelliSenseMode = 'TAILWIND_MODE' in process.env
+  if (!isTailwindCSSIntelliSenseMode) {
     return () => {}
   }
+
   return ({ addUtilities, addComponents, addBase }) => {
     const jssList = cssPath.map(p => objectify(parse(readFileSync(p, 'utf8'))))