fix: twMergeConfigの副作用がランタイムで実行されない問題を修正 (#6254)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: saitolume

packages/smarthr-ui/.storybook/preview.tsx

@@ -11,6 +11,9 @@ import ReactGA from 'react-ga4'
 import { INITIAL_VIEWPORTS } from 'storybook/viewport'
 import resolveConfig from 'tailwindcss/resolveConfig'
 
+// twMergeConfig を最初に設定する（他のモジュールの tv() より先に実行する必要がある）
+// eslint-disable-next-line smarthr/require-barrel-import
+import '../src/configureTwMerge'
 // eslint-disable-next-line smarthr/require-barrel-import
 import '../src/styles/index.css'
 import { EnvironmentProvider, IntlProvider, locales } from '../src'

packages/smarthr-ui/package.json

@@ -170,7 +170,8 @@
     "scaffold:storybook": "plop"
   },
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "**/configureTwMerge.*"
   ],
   "typings": "lib/index.d.ts"
 }

packages/smarthr-ui/src/configureTwMerge.ts

@@ -0,0 +1,60 @@
+import { validators } from 'tailwind-merge'
+import { defaultConfig } from 'tailwind-variants'
+
+import { defaultWidth } from './themes'
+
+const DEFAULT_WIDTH_KEYS = Object.keys(defaultWidth) as Array<keyof typeof defaultWidth>
+
+defaultConfig.twMergeConfig = {
+  prefix: 'shr-',
+  classGroups: {
+    w: [{ w: [...DEFAULT_WIDTH_KEYS, validators.isArbitraryValue] }],
+    basis: [{ basis: [...DEFAULT_WIDTH_KEYS, validators.isArbitraryValue] }],
+    boxShadow: [
+      {
+        shadow: [
+          'layer-0',
+          'layer-1',
+          'layer-2',
+          'layer-3',
+          'layer-4',
+          'outline',
+          'underline',
+          'input-hover',
+          'none',
+        ],
+      },
+    ],
+    'border-shorthand': [
+      'border-shorthand',
+      'border-t-shorthand',
+      'border-r-shorthand',
+      'border-b-shorthand',
+      'border-l-shorthand',
+    ],
+    fontSize: [
+      {
+        text: ['2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl', 'inherit'],
+      },
+    ],
+    lineHeight: [
+      {
+        leading: ['none', 'tight', 'normal', 'loose', '[0]'],
+      },
+    ],
+    zIndex: [
+      {
+        z: [
+          'auto',
+          '0',
+          '1',
+          'fixed-menu',
+          'overlap-base',
+          'overlap',
+          (classPart: string) => /^\[\d+\]$/.test(classPart),
+        ],
+      },
+    ],
+    focus: ['focus-indicator', 'focus-indicator--outer', 'focus-indicator-none'],
+  },
+}

packages/smarthr-ui/src/index.ts

@@ -1,3 +1,5 @@
+import './configureTwMerge'
+
 // components
 export { DisclosureTrigger, DisclosureContent } from './components/Disclosure'
 export { Balloon } from './components/Balloon'

packages/smarthr-ui/src/smarthr-ui-preset.test.ts

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants'
 
-// smarthr-ui-presetをimportして設定を適用
-import './smarthr-ui-preset'
+// configureTwMergeをimportして設定を適用
+import './configureTwMerge'
 
 describe('twMergeConfig', () => {
   describe('classGroups', () => {

packages/smarthr-ui/src/smarthr-ui-preset.ts

@@ -1,6 +1,4 @@
 import { darken } from 'polished'
-import { validators } from 'tailwind-merge'
-import { defaultConfig } from 'tailwind-variants'
 import plugin from 'tailwindcss/plugin'
 
 import {
@@ -16,62 +14,6 @@ import {
 
 import type { Config } from 'tailwindcss'
 
-const DEFAULT_WIDTH_KEYS = Object.keys(defaultWidth) as Array<keyof typeof defaultWidth>
-
-defaultConfig.twMergeConfig = {
-  prefix: 'shr-',
-  classGroups: {
-    w: [{ w: [...DEFAULT_WIDTH_KEYS, validators.isArbitraryValue] }],
-    basis: [{ basis: [...DEFAULT_WIDTH_KEYS, validators.isArbitraryValue] }],
-    boxShadow: [
-      {
-        shadow: [
-          'layer-0',
-          'layer-1',
-          'layer-2',
-          'layer-3',
-          'layer-4',
-          'outline',
-          'underline',
-          'input-hover',
-          'none',
-        ],
-      },
-    ],
-    'border-shorthand': [
-      'border-shorthand',
-      'border-t-shorthand',
-      'border-r-shorthand',
-      'border-b-shorthand',
-      'border-l-shorthand',
-    ],
-    fontSize: [
-      {
-        text: ['2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl', 'inherit'],
-      },
-    ],
-    lineHeight: [
-      {
-        leading: ['none', 'tight', 'normal', 'loose', '[0]'],
-      },
-    ],
-    zIndex: [
-      {
-        z: [
-          'auto',
-          '0',
-          '1',
-          'fixed-menu',
-          'overlap-base',
-          'overlap',
-          (classPart: string) => /^\[\d+\]$/.test(classPart),
-        ],
-      },
-    ],
-    focus: ['focus-indicator', 'focus-indicator--outer', 'focus-indicator-none'],
-  },
-}
-
 const spacingByChar = createSpacingByChar(defaultHtmlFontSize / 2)
 type Spacing = {
   [key in (typeof spacingSizes)[number]]: string