chore: TailwindCSSのclassNameの順番を揃える (#1089)

* fix: Set fsx to tailwindcss/callees

* Fmt

* Add change log

.changeset/friendly-roses-fold.md

@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+chore: TailwindCSSのclassNameの順番を揃える

.eslintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
     tailwindcss: {
       // NOTE: eslint の設定はデフォルトに合わせる
       config: 'packages/for-ui/tailwindcss.config.js',
+      callees: ['fsx'],
     },
   },
   rules: {},

packages/for-ui/src/badge/ConstantBadge.tsx

@@ -27,7 +27,7 @@ export const ConstantBadge: FC<Omit<ConstantBadgeProps, 'variant'>> = ({
   >
     <span
       className={fsx([
-        `flex w-4 flex-row items-start my-1 p-0.5 rounded-full icon-shade-white-default [&>svg]:w-full [&>svg]:h-full`,
+        `icon-shade-white-default my-1 flex w-4 flex-row items-start rounded-full p-0.5 [&>svg]:h-full [&>svg]:w-full`,
         {
           subtle: `bg-shade-medium-default`,
           shade: `bg-shade-dark-default`,

packages/for-ui/src/badge/OutlinedBadge.tsx

@@ -6,7 +6,7 @@ import { BadgeProps } from './Badge';
 export const OutlinedBadge: FC<Omit<BadgeProps, 'variant'>> = ({ intention = 'subtle', icon, label, className }) => (
   <span
     className={fsx([
-      `flex flex-row items-center gap-1 w-fit justify-center rounded px-2 ring ring-1 ring-inset`,
+      `flex w-fit flex-row items-center justify-center gap-1 rounded px-2 ring-1 ring-inset`,
       {
         subtle: `bg-shade-light-default text-shade-dark-default ring-shade-light-default`,
         shade: `bg-shade-white-default text-shade-dark-default ring-shade-light-default`,

packages/for-ui/src/badge/TextBadge.tsx

@@ -6,7 +6,7 @@ import { BadgeProps } from './Badge';
 export const TextBadge: FC<Omit<BadgeProps, 'variant'>> = ({ intention = 'subtle', icon, label, className }) => (
   <span
     className={fsx([
-      `flex flex-row items-center w-fit gap-1 justify-center rounded px-2`,
+      `flex w-fit flex-row items-center justify-center gap-1 rounded px-2`,
       {
         subtle: `bg-shade-light-default text-shade-dark-default`,
         shade: `bg-shade-white-default text-shade-dark-default`,

packages/for-ui/src/button/Button.tsx

@@ -166,7 +166,7 @@ const _Button = <As extends ElementType = 'button'>({
       aria-label={label || rest['aria-label'] || 'button'}
       aria-busy={loading}
       className={fsx([
-        `flex flex-row items-center justify-items-center relative rounded-1.5 font-sans w-fit h-fit outline-none [&_svg]:fill-inherit disabled:cursor-not-allowed`,
+        `rounded-1.5 relative flex h-fit w-fit flex-row items-center justify-items-center font-sans outline-none disabled:cursor-not-allowed [&_svg]:fill-inherit`,
         {
           text: {
             large: `px-4 py-2 gap-1`,
@@ -235,8 +235,8 @@ const _Button = <As extends ElementType = 'button'>({
       {children}
       {endIcon}
       {loading && (
-        <div className={fsx(`absolute grid place-items-center inset-0 w-full h-full`)}>
-          <Loader className={fsx(`[&:is(svg)]:fill-shade-dark-default [&:is(svg)]:w-6 [&:is(svg)]:h-6`)} />
+        <div className={fsx(`absolute inset-0 grid h-full w-full place-items-center`)}>
+          <Loader className={fsx(`[&:is(svg)]:fill-shade-dark-default [&:is(svg)]:h-6 [&:is(svg)]:w-6`)} />
         </div>
       )}
     </MuiButton>

packages/for-ui/src/checkbox/Checkbox.tsx

@@ -31,7 +31,7 @@ const Indicator: FC<{ state: 'default' | 'checked' | 'intermediate' }> = ({ stat
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   ({ label, nopadding = false, disabled, className, ...rest }, ref) => (
-    <Text as="label" className={fsx(`group inline-flex w-[max-content] flex-row gap-1 items-center`, className)}>
+    <Text as="label" className={fsx(`group inline-flex w-[max-content] flex-row items-center gap-1`, className)}>
       <MuiCheckbox
         disableRipple
         icon={<Indicator state="default" />}

packages/for-ui/src/chip/FullChip.tsx

@@ -14,7 +14,7 @@ export const FullChip: FC<Omit<ChipProps, 'clickableArea'>> = ({
   <button
     onClick={onClick}
     className={fsx([
-      `inline-flex flex-row gap-1 items-center justify-center rounded outline -outline-offset-1 outline-1 px-2 w-min break-keep shadow-attractive focus-visible:outline-none`,
+      `shadow-attractive inline-flex w-min flex-row items-center justify-center gap-1 break-keep rounded px-2 outline outline-1 -outline-offset-1 focus-visible:outline-none`,
       {
         shade: `bg-shade-white-default outline-shade-medium-default hover:bg-shade-white-hover focus-visible:bg-shade-white-hover`,
         primary: `bg-primary-light-default outline-primary-medium-default hover:bg-primary-light-hover focus-visible:bg-primary-light-hover`,
@@ -31,7 +31,7 @@ export const FullChip: FC<Omit<ChipProps, 'clickableArea'>> = ({
     {icon && (
       <span
         className={fsx([
-          `w-4 h-4 [&_svg]:w-full [&_svg]:h-full`,
+          `h-4 w-4 [&_svg]:h-full [&_svg]:w-full`,
           {
             shade: `icon-shade-dark-default`,
             primary: `icon-primary-dark-default`,

packages/for-ui/src/chip/LimitedChip.tsx

@@ -14,7 +14,7 @@ export const LimitedChip: FC<Omit<ChipProps, 'clickableArea'>> = ({
 }) => (
   <span
     className={fsx([
-      `inline-flex flex-row gap-1 items-center justify-center rounded outline -outline-offset-1 outline-1 px-2 w-min break-keep pr-0 shadow-attractive`,
+      `shadow-attractive inline-flex w-min flex-row items-center justify-center gap-1 break-keep rounded px-2 pr-0 outline outline-1 -outline-offset-1`,
       {
         shade: `bg-shade-white-default outline-shade-medium-default`,
         primary: `bg-primary-light-default outline-primary-medium-default`,
@@ -46,7 +46,7 @@ export const LimitedChip: FC<Omit<ChipProps, 'clickableArea'>> = ({
     <button
       onClick={onClick}
       className={fsx([
-        `flex flex-row items-start outline -outline-offset-1 outline-1 p-1 rounded-r w-6 h-6 [&_svg]:w-full [&_svg]:h-full`,
+        `flex h-6 w-6 flex-row items-start rounded-r p-1 outline outline-1 -outline-offset-1 [&_svg]:h-full [&_svg]:w-full`,
         {
           shade: `icon-shade-dark-default hover:bg-shade-white-hover focus-visible:bg-shade-white-hover outline-shade-light-default hover:outline-shade-medium-default focus-visible:outline-shade-medium-default`,
           primary: `icon-primary-dark-default hover:bg-primary-light-hover focus-visible:bg-primary-light-hover outline-primary-light-default hover:outline-primary-medium-default focus-visible:outline-primary-medium-default`,

packages/for-ui/src/drawer/Drawer.tsx

@@ -117,7 +117,7 @@ export const Drawer: React.FC<Props> = ({
         >
           <MdMoreVert
             size="24"
-            className={fsx(['relative h-full', anchor === 'left' ? 'right-[6px]' : '-left-[6px]'])}
+            className={fsx(['relative h-full', anchor === 'left' ? 'right-[6px]' : 'left-[-6px]'])}
           />
         </span>
       </div>

packages/for-ui/src/loader/Loader.tsx

@@ -3,5 +3,5 @@ import { fsx } from '../system/fsx';
 import { Loading } from './Loading';
 
 export const Loader: FC<{ className?: string }> = ({ className }) => (
-  <Loading className={fsx(`w-4 h-4 motion-safe:animate-spin`, className)} role="img" aria-label="処理中" aria-busy />
+  <Loading className={fsx(`h-4 w-4 motion-safe:animate-spin`, className)} role="img" aria-label="処理中" aria-busy />
 );

packages/for-ui/src/menu/Menu.tsx

@@ -47,7 +47,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
           transformOrigin={transformOrigin}
           classes={{
             root: fsx(className),
-            paper: fsx(`p-0 shadow-none overflow-visible`),
+            paper: fsx(`overflow-visible p-0 shadow-none`),
             list: fsx(style),
           }}
           {...bindMenu(popupState)}

packages/for-ui/src/menu/MenuDivider.tsx

@@ -10,7 +10,7 @@ export const MenuDivider = forwardRef<HTMLLIElement, MenuDividerProps>(({ classN
   <MuiMenuDivider
     ref={ref}
     component="li"
-    className={fsx(`border-shade-light-default m-0 [&.m-0]:m-0 border-b list-none`, className)}
+    className={fsx(`border-shade-light-default m-0 list-none border-b [&.m-0]:m-0`, className)}
     {...rest}
   />
 ));

packages/for-ui/src/menu/MenuItem.tsx

@@ -44,7 +44,7 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
       disabled={disabled}
       classes={{
         root: fsx([
-          `bg-shade-white-default text-r hover:bg-shade-white-hover whitespace-nowrap px-4 py-1 font-sans flex flex-row gap-2 focus-visible:bg-shade-white-active [&.Mui-focused]:bg-shade-white-active items-start`,
+          `bg-shade-white-default text-r hover:bg-shade-white-hover focus-visible:bg-shade-white-active [&.Mui-focused]:bg-shade-white-active flex flex-row items-start gap-2 whitespace-nowrap px-4 py-1 font-sans`,
           icon && `pl-2`,
           selected && `pr-2`,
           {
@@ -60,7 +60,7 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
       {icon && (
         <figure
           className={fsx([
-            `h-4 w-4 [&>svg]:h-full [&>svg]:w-full my-1 shrink-0`,
+            `my-1 h-4 w-4 shrink-0 [&>svg]:h-full [&>svg]:w-full`,
             {
               shade: `[&_svg]:fill-shade-medium-default`,
               negative: `[&_svg]:fill-negative-medium-default`,
@@ -71,7 +71,7 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
           {icon}
         </figure>
       )}
-      <Text className={fsx(`flex flex-col w-full`)}>
+      <Text className={fsx(`flex w-full flex-col`)}>
         <Text weight={selected ? 'bold' : 'inherit'} className={fsx(`whitespace-pre-wrap`)}>
           {children}
         </Text>
@@ -85,7 +85,7 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
       {selected && (
         <figure
           className={fsx([
-            `h-4 w-4 [&>svg]:h-full [&>svg]:w-full my-1 shrink-0`,
+            `my-1 h-4 w-4 shrink-0 [&>svg]:h-full [&>svg]:w-full`,
             {
               shade: `[&_svg]:fill-shade-dark-default`,
               negative: `[&_svg]:fill-negative-dark-default`,

packages/for-ui/src/menu/style.ts

@@ -1,5 +1,5 @@
 import { fsx } from '../system/fsx';
 
 export const style = fsx(
-  `z-modal min-w-min bg-shade-white-default shadow-more w-full rounded px-0 py-1 divide-shade-light-default grid grid-cols-1 divide-y border border-shade-light-default`,
+  `z-modal bg-shade-white-default shadow-more divide-shade-light-default border-shade-light-default grid w-full min-w-min grid-cols-1 divide-y rounded border px-0 py-1`,
 );

packages/for-ui/src/popper/Popper.tsx

@@ -39,7 +39,7 @@ export const Popper = <Element extends HTMLElement>(props: PopperProps<Element>)
           <Fade {...TransitionProps} timeout={350}>
             <Paper
               classes={{
-                root: fsx(['z-modal shadow-more  min-w-min rounded-[4px] p-1 translate-y-2']),
+                root: fsx(['z-modal shadow-more  min-w-min translate-y-2 rounded-[4px] p-1']),
               }}
             >
               {typeof props.children === 'function' ? props.children({ onClick: popupState.close }) : props.children}

packages/for-ui/src/radio/Radio.stories.tsx

@@ -156,4 +156,4 @@ export const WithRadioGroup = () => {
   );
 };
 
-export const CustomLabel = () => <Radio label={<p className={fsx(`text-xl text-shade-medium-default`)}>hello</p>} />;
+export const CustomLabel = () => <Radio label={<p className={fsx(`text-shade-medium-default text-xl`)}>hello</p>} />;

packages/for-ui/src/radio/Radio.tsx

@@ -19,14 +19,14 @@ const Indicator: FC<{ checked: boolean; disabled: boolean }> = ({ checked, disab
         ? `border-shade-medium-disabled`
         : checked
         ? `border-primary-dark-default`
-        : `border-shade-medium-default group-hover:border-2 group-hover:border-primary-dark-default`,
+        : `border-shade-medium-default group-hover:border-primary-dark-default group-hover:border-2`,
     ])}
   />
 );
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
   ({ nopadding, label, value, disabled, className, ...rest }, ref) => (
-    <Text as="label" className={fsx(`group inline-flex w-[max-content] flex-row gap-1 items-center`, className)}>
+    <Text as="label" className={fsx(`group inline-flex w-[max-content] flex-row items-center gap-1`, className)}>
       <MuiRadio
         disableRipple
         value={value}

packages/for-ui/src/select/Select.tsx

@@ -75,7 +75,7 @@ const _Select = <
       typeof option === 'string' ? option === v : option.inputValue === v.inputValue
     }
     noOptionsText={
-      <Text typeface="sansSerif" size="r" className={fsx(`flex py-1 px-4 text-shade-medium-default`)}>
+      <Text typeface="sansSerif" size="r" className={fsx(`text-shade-medium-default flex py-1 px-4`)}>
         {noOptionsText}
       </Text>
     }
@@ -124,7 +124,7 @@ const _Select = <
       <ul
         aria-label="選択済みアイテム"
         className={fsx([
-          `contents flex-row gap-1 w-min-content flex-wrap py-2`,
+          `w-min-content contents flex-row flex-wrap gap-1 py-2`,
           { large: `py-2`, medium: `py-1` }[size],
         ])}
       >
@@ -156,13 +156,13 @@ const _Select = <
       input: fsx([`min-w-20`, disableFilter && `cursor-pointer caret-transparent`]),
       noOptions: fsx(`p-0`),
       endAdornment: fsx([
-        `static flex [&_svg]:icon-shade-dark-default border-x border-shade-light-default [input:disabled+&_svg]:icon-shade-dark-disabled`,
+        `[&_svg]:icon-shade-dark-default border-shade-light-default [input:disabled+&_svg]:icon-shade-dark-disabled static flex border-x`,
         {
           large: `px-2`,
           medium: `px-1`,
         }[size],
       ]),
-      popupIndicator: fsx(`p-0 m-0`),
+      popupIndicator: fsx(`m-0 p-0`),
     }}
     renderInput={(params) => (
       <TextField

packages/for-ui/src/switch/Switch.tsx

@@ -9,15 +9,15 @@ export type SwitchProps = ComponentPropsWithRef<'input'> & {
 };
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(({ label, disabled, className, ...rest }, ref) => (
-  <Text as="label" className={fsx(`group inline-flex w-[max-content] flex-row gap-1 items-center`, className)}>
+  <Text as="label" className={fsx(`group inline-flex w-[max-content] flex-row items-center gap-1`, className)}>
     <input
       type="checkbox"
       ref={ref}
       className={fsx([
-        `appearance-none bg-shade-medium-default rounded-full h-5 w-8 p-0.5 transition-all duration-100 cursor-pointer`,
-        `before:content-[''] before:block before:h-4 before:w-4 before:bg-shade-white-default before:rounded-full`,
+        `bg-shade-medium-default h-5 w-8 cursor-pointer appearance-none rounded-full p-0.5 transition-all duration-100`,
+        `before:bg-shade-white-default before:block before:h-4 before:w-4 before:rounded-full before:content-['']`,
         `checked:bg-primary-dark-default checked:pl-3.5`,
-        `disabled:cursor-not-allowed disabled:bg-shade-medium-disabled`,
+        `disabled:bg-shade-medium-disabled disabled:cursor-not-allowed`,
         `disabled:checked:bg-primary-dark-disabled`,
       ])}
       disabled={disabled}

packages/for-ui/src/tab/Tab.tsx

@@ -11,7 +11,7 @@ export const Tab: FC<TabProps> = ({ minWidth, tabIndex, className, badge, ...res
   <MuiTab
     disableRipple
     className={fsx(
-      `flex gap-1 text-shade-dark-default hover:bg-shade-white-hover text-r py-1.5 px-4 min-h-min border-transparent border-solid border-y-2 normal-case transition-all duration-100 opacity-100 min-w-min [&:focus-visible]:bg-shade-white-active disabled:text-shade-dark-disabled disabled:cursor-not-allowed`,
+      `text-shade-dark-default hover:bg-shade-white-hover text-r [&:focus-visible]:bg-shade-white-active disabled:text-shade-dark-disabled flex min-h-min min-w-min gap-1 border-y-2 border-solid border-transparent py-1.5 px-4 normal-case opacity-100 transition-all duration-100 disabled:cursor-not-allowed`,
       className,
     )}
     tabIndex={tabIndex ?? 0}

packages/for-ui/src/tab/style.ts

@@ -2,7 +2,7 @@ import { fsx } from '../system/fsx';
 
 export const tabWrapperStyle = (intention: 'primary' | 'secondary') =>
   fsx([
-    `border-solid border-b border-shade-light-default h-10 min-h-min overflow-visible [&_.MuiTabs-indicator]:hidden [&_.MuiTabs-scroller]:h-10`,
+    `border-shade-light-default h-10 min-h-min overflow-visible border-b border-solid [&_.MuiTabs-indicator]:hidden [&_.MuiTabs-scroller]:h-10`,
     {
       primary: `[&_[aria-selected=true]]:text-primary-dark-default [&_[aria-selected=true]]:border-b-primary-dark-default`,
       secondary: `[&_[aria-selected=true]]:text-secondary-dark-default [&_[aria-selected=true]]:border-b-secondary-dark-default`,

packages/for-ui/src/table/TableCell.tsx

@@ -13,7 +13,7 @@ export const TableCell = ({ component = 'td', className, children, ...rest }: Ta
       {component === 'td' ? (
         <td
           className={fsx([
-            'border-shade-light-default text-shade-dark-default border-b py-2 px-3 text-left text-r font-normal',
+            'border-shade-light-default text-shade-dark-default text-r border-b py-2 px-3 text-left font-normal',
             className,
           ])}
           {...rest}
@@ -23,7 +23,7 @@ export const TableCell = ({ component = 'td', className, children, ...rest }: Ta
       ) : (
         <th
           className={fsx([
-            'border-shade-light-default text-shade-dark-default border-b py-2 px-3 text-left text-r font-normal',
+            'border-shade-light-default text-shade-dark-default text-r border-b py-2 px-3 text-left font-normal',
             className,
           ])}
           {...rest}

packages/for-ui/src/textArea/TextArea.tsx

@@ -92,7 +92,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     ref,
   ) => {
     return (
-      <div className={fsx(`w-full flex flex-col gap-1`, className)}>
+      <div className={fsx(`flex w-full flex-col gap-1`, className)}>
         <Text as="label" className={fsx(`flex flex-col gap-1`)}>
           <TextDefaultStyler
             content={label}
@@ -113,7 +113,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             minRows={rows || minRows}
             maxRows={rows || maxRows}
             className={fsx([
-              `w-full bg-shade-white-default ring-shade-medium-default ring-inset ring-1 text-r text-shade-dark-default placeholder:text-shade-light-default rounded font-sans font-normal placeholder:opacity-100 focus-visible:outline-none focus-visible:ring-primary-medium-active focus-visible:ring-2`,
+              `bg-shade-white-default ring-shade-medium-default text-r text-shade-dark-default placeholder:text-shade-light-default focus-visible:ring-primary-medium-active w-full rounded font-sans font-normal ring-1 ring-inset placeholder:opacity-100 focus-visible:outline-none focus-visible:ring-2`,
               {
                 large: `py-2 px-4`,
                 medium: `py-1 px-2`,