refactor(css): rm deadly code

packages/vkui/src/components/Button/Button.module.css

@@ -59,9 +59,6 @@
   text-align: start;
 }
 
-.alignCenter {
-}
-
 .alignRight .in {
   justify-content: flex-end;
   text-align: end;
@@ -78,9 +75,6 @@
   opacity: 0.64;
 }
 
-.withIcon {
-}
-
 .content {
   white-space: nowrap;
   text-overflow: ellipsis;

packages/vkui/src/components/Button/Button.tsx

@@ -36,7 +36,6 @@ const stylesAppearance = {
 
 const stylesAlign = {
   left: styles.alignLeft,
-  center: styles.alignCenter,
   right: styles.alignRight,
 };
 
@@ -79,7 +78,6 @@ export const Button = ({
   rounded,
   ...restProps
 }: ButtonProps): React.ReactNode => {
-  const hasIcons = Boolean(before || after);
   const hasIconOnly = !children && Boolean(after) !== Boolean(before);
   const { sizeY = 'none' } = useAdaptivity();
   const platform = usePlatform();
@@ -98,11 +96,10 @@ export const Button = ({
         stylesSize[size],
         stylesMode[mode],
         stylesAppearance[appearance],
-        stylesAlign[align],
+        align !== 'center' && stylesAlign[align],
         sizeY !== 'compact' && sizeYClassNames[sizeY],
         platform === 'ios' && styles.ios,
         stretched && styles.stretched,
-        hasIcons && styles.withIcon,
         hasIconOnly && !stretched && styles.singleIcon,
         loading && styles.loading,
         rounded && styles.rounded,

packages/vkui/src/components/Flex/FlexItem/FlexItem.module.css

@@ -1,7 +1,3 @@
-.host {
-  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
-}
-
 /* flex */
 
 .flexGrow {

packages/vkui/src/components/Flex/FlexItem/FlexItem.tsx

@@ -54,7 +54,6 @@ export const FlexItem = ({
       {...rest}
       style={{ flexBasis, ...style }}
       baseClassName={classNames(
-        styles.host,
         alignSelf && alignSelfClassNames[alignSelf],
         flex && flexClassNames[flex],
       )}

packages/vkui/src/hooks/useAdaptivityConditionalRender/constants.ts

@@ -1,49 +1,30 @@
+import { type ElementProps } from './types';
 import styles from '../../styles/adaptivity.module.css';
 
-export const sizeXCompactClassNames: Record<'mq' | 'compact', { className: string }> = {
-  mq: { className: styles['-sizeX--compact-mq'] },
-  compact: { className: styles['-sizeX--compact-forced'] },
+export const forcedProps = { className: '' };
+
+export const sizeXCompactMediaQueryProps: ElementProps = {
+  className: styles['-sizeX--compact-mq'],
 };
 
-export const sizeXRegularClassNames: Record<'mq' | 'regular', { className: string }> = {
-  mq: { className: styles['-sizeX--regular-mq'] },
-  regular: { className: styles['-sizeX--regular-forced'] },
+export const sizeXRegularMediaQueryProps: ElementProps = {
+  className: styles['-sizeX--regular-mq'],
 };
 
-export const sizeYCompactClassNames: Record<'mq' | 'compact', { className: string }> = {
-  mq: { className: styles['-sizeY--compact-mq'] },
-  compact: { className: styles['-sizeY--compact-forced'] },
+export const sizeYCompactMediaQueryProps: ElementProps = {
+  className: styles['-sizeY--compact-mq'],
 };
 
-export const sizeYRegularClassNames: Record<'mq' | 'regular', { className: string }> = {
-  mq: { className: styles['-sizeY--regular-mq'] },
-  regular: { className: styles['-sizeY--regular-forced'] },
+export const sizeYRegularMediaQueryProps: ElementProps = {
+  className: styles['-sizeY--regular-mq'],
 };
 
-export const viewWidthClassNames: Record<
-  'tabletMinus' | 'tabletPlus',
-  Record<'mq' | 'forced', { className: string }>
-> = {
-  tabletMinus: {
-    mq: { className: styles['-viewWidth--tabletMinus-mq'] },
-    forced: { className: styles['-viewWidth--tabletMinus-forced'] },
-  },
-  tabletPlus: {
-    mq: { className: styles['-viewWidth--tabletPlus-mq'] },
-    forced: { className: styles['-viewWidth--tabletPlus-forced'] },
-  },
+export const viewWidthMediaQueryMapProps: Record<'tabletMinus' | 'tabletPlus', ElementProps> = {
+  tabletMinus: { className: styles['-viewWidth--tabletMinus-mq'] },
+  tabletPlus: { className: styles['-viewWidth--tabletPlus-mq'] },
 };
 
-export const deviceTypeClassNames: Record<
-  'mobile' | 'desktop',
-  Record<'mq' | 'forced', { className: string }>
-> = {
-  mobile: {
-    mq: { className: styles['-deviceType--mobile-mq'] },
-    forced: { className: styles['-deviceType--mobile-forced'] },
-  },
-  desktop: {
-    mq: { className: styles['-deviceType--desktop-mq'] },
-    forced: { className: styles['-deviceType--desktop-forced'] },
-  },
+export const deviceTypeMediaQueryMapProps: Record<'mobile' | 'desktop', ElementProps> = {
+  mobile: { className: styles['-deviceType--mobile-mq'] },
+  desktop: { className: styles['-deviceType--desktop-mq'] },
 };

packages/vkui/src/hooks/useAdaptivityConditionalRender/helpers.ts

@@ -6,6 +6,7 @@ import {
   type ViewWidthType,
 } from '../../lib/adaptivity';
 import type { PlatformType } from '../../lib/platform';
+import { forcedProps } from './constants';
 import type {
   AdaptiveDeviceType,
   AdaptiveSizeType,
@@ -17,41 +18,31 @@ import type {
 
 export const getAdaptiveSizeType = (
   type: undefined | SizeTypeValues,
-  compactClassNames: Record<'mq' | 'compact', ElementProps>,
-  regularClassNames: Record<'mq' | 'regular', ElementProps>,
+  compactMediaQueryProps: ElementProps,
+  regularMediaQueryProps: ElementProps,
 ): AdaptiveSizeType => {
   return {
-    compact:
-      type === undefined
-        ? compactClassNames.mq
-        : type === 'compact'
-          ? compactClassNames[type]
-          : false,
-    regular:
-      type === undefined
-        ? regularClassNames.mq
-        : type === 'regular'
-          ? regularClassNames[type]
-          : false,
+    compact: type === undefined ? compactMediaQueryProps : type === 'compact' ? forcedProps : false,
+    regular: type === undefined ? regularMediaQueryProps : type === 'regular' ? forcedProps : false,
   };
 };
 
 export const getAdaptiveViewWidth = (
   viewWidth: undefined | ViewWidthType,
-  viewWidthClassNames: Record<ViewWidthCSSBreakpoints, Record<'mq' | 'forced', ElementProps>>,
+  viewWidthMapProps: Record<ViewWidthCSSBreakpoints, ElementProps>,
 ): AdaptiveViewWidth => {
   return {
     tabletMinus:
       viewWidth === undefined
-        ? viewWidthClassNames.tabletMinus.mq
+        ? viewWidthMapProps.tabletMinus
         : viewWidth < ViewWidth.TABLET
-          ? viewWidthClassNames.tabletMinus.forced
+          ? forcedProps
           : false,
     tabletPlus:
       viewWidth === undefined
-        ? viewWidthClassNames.tabletPlus.mq
+        ? viewWidthMapProps.tabletPlus
         : viewWidth >= ViewWidth.TABLET
-          ? viewWidthClassNames.tabletPlus.forced
+          ? forcedProps
           : false,
   };
 };
@@ -61,26 +52,26 @@ export const getAdaptiveDeviceType = (
   viewHeight: undefined | ViewHeightType,
   hasPointer: undefined | boolean,
   platform: PlatformType,
-  deviceTypeClassNames: Record<DeviceTypeCSSBreakpoints, Record<'mq' | 'forced', ElementProps>>,
+  deviceTypeMapProps: Record<DeviceTypeCSSBreakpoints, ElementProps>,
 ): AdaptiveDeviceType => {
   const isDesktop = tryToCheckIsDesktop(viewWidth, viewHeight, hasPointer, platform);
 
   if (isDesktop === null) {
     return {
-      mobile: deviceTypeClassNames.mobile.mq,
-      desktop: deviceTypeClassNames.desktop.mq,
+      mobile: deviceTypeMapProps.mobile,
+      desktop: deviceTypeMapProps.desktop,
     };
   }
 
   if (isDesktop) {
     return {
       mobile: false,
-      desktop: deviceTypeClassNames.desktop.forced,
+      desktop: forcedProps,
     };
   }
 
   return {
-    mobile: deviceTypeClassNames.mobile.forced,
+    mobile: forcedProps,
     desktop: false,
   };
 };

packages/vkui/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.test.tsx

@@ -3,12 +3,13 @@ import type { AdaptivityProps } from '../../components/AdaptivityProvider/Adapti
 import { AdaptivityProvider } from '../../components/AdaptivityProvider/AdaptivityProvider';
 import { ViewHeight, ViewWidth } from '../../lib/adaptivity';
 import {
-  deviceTypeClassNames,
-  sizeXCompactClassNames,
-  sizeXRegularClassNames,
-  sizeYCompactClassNames,
-  sizeYRegularClassNames,
-  viewWidthClassNames,
+  deviceTypeMediaQueryMapProps,
+  forcedProps,
+  sizeXCompactMediaQueryProps,
+  sizeXRegularMediaQueryProps,
+  sizeYCompactMediaQueryProps,
+  sizeYRegularMediaQueryProps,
+  viewWidthMediaQueryMapProps,
 } from './constants';
 import { useAdaptivityConditionalRender } from './useAdaptivityConditionalRender';
 
@@ -17,32 +18,32 @@ describe(useAdaptivityConditionalRender, () => {
     it('sizeX', () => {
       const { result } = renderHook(useAdaptivityConditionalRender);
       expect(result.current.sizeX).toMatchObject({
-        compact: sizeXCompactClassNames.mq,
-        regular: sizeXRegularClassNames.mq,
+        compact: sizeXCompactMediaQueryProps,
+        regular: sizeXRegularMediaQueryProps,
       });
     });
 
     it('sizeY', () => {
       const { result } = renderHook(useAdaptivityConditionalRender);
       expect(result.current.sizeY).toMatchObject({
-        compact: sizeYCompactClassNames.mq,
-        regular: sizeYRegularClassNames.mq,
+        compact: sizeYCompactMediaQueryProps,
+        regular: sizeYRegularMediaQueryProps,
       });
     });
 
     it('viewWidth', () => {
       const { result } = renderHook(useAdaptivityConditionalRender);
       expect(result.current.viewWidth).toMatchObject({
-        tabletPlus: viewWidthClassNames.tabletPlus.mq,
-        tabletMinus: viewWidthClassNames.tabletMinus.mq,
+        tabletPlus: viewWidthMediaQueryMapProps.tabletPlus,
+        tabletMinus: viewWidthMediaQueryMapProps.tabletMinus,
       });
     });
 
     it('deviceType', () => {
       const { result } = renderHook(useAdaptivityConditionalRender);
       expect(result.current.deviceType).toMatchObject({
-        mobile: deviceTypeClassNames.mobile.mq,
-        desktop: deviceTypeClassNames.desktop.mq,
+        mobile: deviceTypeMediaQueryMapProps.mobile,
+        desktop: deviceTypeMediaQueryMapProps.desktop,
       });
     });
   });
@@ -59,7 +60,7 @@ describe(useAdaptivityConditionalRender, () => {
           sizeX: 'compact',
         });
         expect(result.current.sizeX).toMatchObject({
-          compact: sizeXCompactClassNames['compact'],
+          compact: forcedProps,
           regular: false,
         });
       });
@@ -70,7 +71,7 @@ describe(useAdaptivityConditionalRender, () => {
         });
         expect(result.current.sizeX).toMatchObject({
           compact: false,
-          regular: sizeXRegularClassNames['regular'],
+          regular: forcedProps,
         });
       });
     });
@@ -81,7 +82,7 @@ describe(useAdaptivityConditionalRender, () => {
           sizeY: 'compact',
         });
         expect(result.current.sizeY).toMatchObject({
-          compact: sizeYCompactClassNames['compact'],
+          compact: forcedProps,
           regular: false,
         });
       });
@@ -92,7 +93,7 @@ describe(useAdaptivityConditionalRender, () => {
         });
         expect(result.current.sizeY).toMatchObject({
           compact: false,
-          regular: sizeYRegularClassNames['regular'],
+          regular: forcedProps,
         });
       });
     });
@@ -103,7 +104,7 @@ describe(useAdaptivityConditionalRender, () => {
           viewWidth: ViewWidth.TABLET,
         });
         expect(result.current.viewWidth).toMatchObject({
-          tabletPlus: viewWidthClassNames.tabletPlus.forced,
+          tabletPlus: forcedProps,
           tabletMinus: false,
         });
       });
@@ -114,7 +115,7 @@ describe(useAdaptivityConditionalRender, () => {
         });
         expect(result.current.viewWidth).toMatchObject({
           tabletPlus: false,
-          tabletMinus: viewWidthClassNames.tabletMinus.forced,
+          tabletMinus: forcedProps,
         });
       });
     });
@@ -125,8 +126,8 @@ describe(useAdaptivityConditionalRender, () => {
           viewWidth: ViewWidth.SMALL_MOBILE,
         });
         expect(result.current.deviceType).toMatchObject({
-          mobile: deviceTypeClassNames.mobile.mq,
-          desktop: deviceTypeClassNames.desktop.mq,
+          mobile: deviceTypeMediaQueryMapProps.mobile,
+          desktop: deviceTypeMediaQueryMapProps.desktop,
         });
       });
 
@@ -135,8 +136,8 @@ describe(useAdaptivityConditionalRender, () => {
           viewHeight: ViewHeight.MEDIUM,
         });
         expect(result.current.deviceType).toMatchObject({
-          mobile: deviceTypeClassNames.mobile.mq,
-          desktop: deviceTypeClassNames.desktop.mq,
+          mobile: deviceTypeMediaQueryMapProps.mobile,
+          desktop: deviceTypeMediaQueryMapProps.desktop,
         });
       });
 
@@ -146,7 +147,7 @@ describe(useAdaptivityConditionalRender, () => {
           viewHeight: ViewHeight.MEDIUM,
         });
         expect(result.current.deviceType).toMatchObject({
-          mobile: deviceTypeClassNames.mobile.forced,
+          mobile: forcedProps,
           desktop: false,
         });
       });
@@ -158,7 +159,7 @@ describe(useAdaptivityConditionalRender, () => {
         });
         expect(result.current.deviceType).toMatchObject({
           mobile: false,
-          desktop: deviceTypeClassNames.desktop.forced,
+          desktop: forcedProps,
         });
       });
     });