tech: bump prettier from 2.8.8 to 3.3.2; use stylelint-prettier (#7037)

h2. Описание **Stylelint** не учитывал конфигурацию **Prettier** из-за чего сохранение в IDE приводило к неправильному форматированию, т.к. по умолчанию используется `stylelint --fix`. Из-за этого `prettier --check` ругался на не корректное форматирование CSS. h2. Изменения - обновил **Prettier**, т.к. **stylelint-prettier** требует `prettier: >= 3` > **Note** > > Из-за `@storybook/core-common`, который использует ссылка на `prettier` через `prettier-fallback`, **Yarn** не смог зарезолвить версии между `prettier` и `prettier-fallback` корректно, `yarn dedupe` тоже не помог. Поэтому вручную удалил `prettier-fallback` из `yarn.lock` и запустил `yarn install`, чтобы встала нужная версия `prettier`. > <details><summary>diff yarn.lock</summary> > <p> > > ```diff > - "prettier-fallback@npm:prettier@^3": > - version: 3.2.5 > - resolution: "prettier@npm:3.2.5" > > -"prettier@npm:^3.1.1, prettier@npm:^3.3.2": > - version: 3.3.2 > - resolution: "prettier@npm:3.3.2" > > + "prettier-fallback@npm:prettier@^3, prettier@npm:^3.1.1, prettier@npm:^3.3.2": > + version: 3.3.2 > + resolution: "prettier@npm:3.3.2" > ``` > </p> > </details> - в `lint:prettier` добавил флаги `--cache` и `--cache-location` для единообразия с `lint:es` и `lint:stylelint` - применил `prettier --write` (b501d5b)
VKCOM · Jun 20, 2024 · 4e8fa2e · 4e8fa2e
1 parent 40e3e10
commit 4e8fa2e
Show file tree

Hide file tree

Showing 27 changed files with 113 additions and 81 deletions.
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "postcss-logical": "^7.0.1",
     "postcss-modules": "^6.0.0",
     "postcss-value-parser": "^4.2.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.2",
     "process": "^0.11.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -79,6 +79,7 @@
     "stylelint": "^16.6.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-media-use-custom-media": "^4.0.0",
+    "stylelint-prettier": "^5.0.0",
     "stylelint-use-logical": "^2.1.2",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "swc-loader": "^0.2.6",
@@ -111,7 +112,7 @@
     "lint:es": "eslint . --ext .jsx,.js,.ts,.tsx --cache --cache-location .cache/.eslintcache",
     "lint:es:ci": "yarn lint:es -o lint-results.json -f json",
     "lint:style": "cross-env LINT_PRECOMMIT_RUN=1 stylelint '**/*.css' --cache --cache-location .cache/.stylelintcache",
-    "lint:prettier": "prettier --check --ignore-unknown .",
+    "lint:prettier": "prettier --check --ignore-unknown --cache --cache-location .cache/.prettiercache .",
     "lint:types": "tsc --incremental --emitDeclarationOnly --declaration --tsBuildInfoFile .cache/.tsbuildinfo",
     "lint:generated-files": "yarn workspace @vkontakte/vkui run lint:generated-files",
     "prepare": "husky",

diff --git a/packages/vkui/playwright-ct.config.ts b/packages/vkui/playwright-ct.config.ts
@@ -61,8 +61,8 @@ export default defineConfig<VKUITestOptions>({
   workers: process.env.CI
     ? 1
     : typeof process.env.PLAYWRIGHT_WORKERS === 'string'
-    ? Number(process.env.PLAYWRIGHT_WORKERS)
-    : undefined,
+      ? Number(process.env.PLAYWRIGHT_WORKERS)
+      : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI
     ? [['github'], ['dot'], ['blob'], ...DEFAULT_REPORTERS]

diff --git a/packages/vkui/playwright/index.html b/packages/vkui/playwright/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- Вручную указали класс "vkui" (см. ../src/styles/common.css) -->
 <html lang="en" class="vkui">
   <head>

diff --git a/packages/vkui/src/components/ActionSheetItem/ActionSheetItem.module.css b/packages/vkui/src/components/ActionSheetItem/ActionSheetItem.module.css
@@ -131,7 +131,9 @@
   block-size: 100%;
   background-color: var(--vkui--color_background_modal);
   content: '';
-  transition: opacity 0.15s ease-out, background-color 0.15s ease-out;
+  transition:
+    opacity 0.15s ease-out,
+    background-color 0.15s ease-out;
 }
 
 .ActionSheetItem--ios::after {

diff --git a/packages/vkui/src/components/Alert/Alert.module.css b/packages/vkui/src/components/Alert/Alert.module.css
@@ -256,7 +256,9 @@
  */
 
 .Alert--vkcom {
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 96px rgba(0, 0, 0, 0.16);
+  box-shadow:
+    0 0 2px rgba(0, 0, 0, 0.12),
+    0 0 96px rgba(0, 0, 0, 0.16);
   inline-size: 400px;
 }
 

diff --git a/packages/vkui/src/components/Button/Button.module.css b/packages/vkui/src/components/Button/Button.module.css
@@ -9,7 +9,9 @@
   border-radius: var(--vkui--size_border_radius--regular);
   max-inline-size: 100%;
   min-inline-size: var(--vkui--size_button_minimum_width--regular);
-  transition: background-color 0.15s ease-out, color 0.15s ease-out;
+  transition:
+    background-color 0.15s ease-out,
+    color 0.15s ease-out;
 }
 
 .Button--rounded {

diff --git a/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css b/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css
@@ -51,7 +51,9 @@
   block-size: 100%;
   background-color: var(--vkui--color_icon_medium);
   border-radius: 12px;
-  transition: transform 200ms, opacity 200ms;
+  transition:
+    transform 200ms,
+    opacity 200ms;
 }
 
 .CustomScrollView__trackerY:hover::before,

diff --git a/packages/vkui/src/components/FixedLayout/Readme.md b/packages/vkui/src/components/FixedLayout/Readme.md
@@ -35,13 +35,13 @@ const Example = () => {
             fringilla volutpat in sed velit. Aenean aliquet bibendum pretium.
             <br />
             <br />
-            Cras pulvinar lobortis purus. Donec placerat suscipit leo vitae sodales. Phasellus convallis
-            lorem vitae arcu finibus pellentesque. In imperdiet vel leo a euismod. Nam sed odio a neque
-            venenatis suscipit a placerat magna. Mauris magna nisl, consequat nec augue vitae, ultricies
-            scelerisque ante. Phasellus pharetra risus eget imperdiet sodales. Integer dignissim auctor
-            semper. Nulla odio odio, euismod ut interdum in, bibendum sed massa. Proin rutrum molestie
-            massa in ultrices. Donec eu euismod turpis, eget lobortis lorem. Nulla facilisi. Nam lacinia
-            posuere turpis, sed laoreet turpis auctor nec.
+            Cras pulvinar lobortis purus. Donec placerat suscipit leo vitae sodales. Phasellus
+            convallis lorem vitae arcu finibus pellentesque. In imperdiet vel leo a euismod. Nam sed
+            odio a neque venenatis suscipit a placerat magna. Mauris magna nisl, consequat nec augue
+            vitae, ultricies scelerisque ante. Phasellus pharetra risus eget imperdiet sodales.
+            Integer dignissim auctor semper. Nulla odio odio, euismod ut interdum in, bibendum sed
+            massa. Proin rutrum molestie massa in ultrices. Donec eu euismod turpis, eget lobortis
+            lorem. Nulla facilisi. Nam lacinia posuere turpis, sed laoreet turpis auctor nec.
             <br />
             <br />
             Curabitur eu fermentum mauris. Phasellus malesuada consectetur mollis. Pellentesque
@@ -56,9 +56,10 @@ const Example = () => {
             <br />
             In hac habitasse platea dictumst. Etiam luctus erat metus, quis efficitur quam vulputate
             quis. Duis ultricies non mauris condimentum molestie. Maecenas sollicitudin ex sem, quis
-            ultrices libero blandit eu. Vivamus in turpis pulvinar, malesuada enim at, hendrerit magna.
-            Proin eu nulla eget arcu pretium pharetra. Sed ullamcorper pulvinar est eu dapibus. Cras
-            at varius justo. In ex odio, condimentum id pellentesque a, sodales ut diam.
+            ultrices libero blandit eu. Vivamus in turpis pulvinar, malesuada enim at, hendrerit
+            magna. Proin eu nulla eget arcu pretium pharetra. Sed ullamcorper pulvinar est eu
+            dapibus. Cras at varius justo. In ex odio, condimentum id pellentesque a, sodales ut
+            diam.
             <br />
             <br />
             Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

diff --git a/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.module.css b/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.module.css
@@ -109,7 +109,9 @@
 }
 
 .PanelHeaderContext--sizeX-regular .PanelHeaderContext__content {
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
+  box-shadow:
+    0 0 4px rgba(0, 0, 0, 0.08),
+    0 8px 8px rgba(0, 0, 0, 0.16);
 }
 
 @media (--sizeX-regular) {
@@ -123,7 +125,9 @@
   }
 
   .PanelHeaderContext--sizeX-none .PanelHeaderContext__content {
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.08),
+      0 8px 8px rgba(0, 0, 0, 0.16);
   }
 }
 

diff --git a/packages/vkui/src/components/PullToRefresh/PullToRefresh.module.css b/packages/vkui/src/components/PullToRefresh/PullToRefresh.module.css
@@ -26,7 +26,9 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  transition: transform 300ms cubic-bezier(0.1, 0, 0.25, 1), opacity 220ms ease-out;
+  transition:
+    transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
+    opacity 220ms ease-out;
   opacity: 0;
   background: var(--vkui--color_background_modal);
   border-radius: 50%;

diff --git a/packages/vkui/src/components/PullToRefresh/PullToRefresh.stories.tsx b/packages/vkui/src/components/PullToRefresh/PullToRefresh.stories.tsx
@@ -33,10 +33,13 @@ export const Example: Story = {
     const onRefresh = React.useCallback(() => {
       setFetching(true);
 
-      setTimeout(() => {
-        setFetching(false);
-        setUsers((prevUsers) => [getRandomUser(), ...prevUsers]);
-      }, getRandomInt(600, 2000));
+      setTimeout(
+        () => {
+          setFetching(false);
+          setUsers((prevUsers) => [getRandomUser(), ...prevUsers]);
+        },
+        getRandomInt(600, 2000),
+      );
     }, []);
 
     return (

diff --git a/packages/vkui/src/components/PullToRefresh/Readme.md b/packages/vkui/src/components/PullToRefresh/Readme.md
@@ -19,10 +19,13 @@ const Example = () => {
   const onRefresh = React.useCallback(() => {
     setFetching(true);
 
-    setTimeout(() => {
-      setFetching(false);
-      setUsers((prevUsers) => [getRandomUser(), ...prevUsers]);
-    }, getRandomInt(600, 2000));
+    setTimeout(
+      () => {
+        setFetching(false);
+        setUsers((prevUsers) => [getRandomUser(), ...prevUsers]);
+      },
+      getRandomInt(600, 2000),
+    );
   }, []);
 
   return (

diff --git a/packages/vkui/src/components/Search/Search.module.css b/packages/vkui/src/components/Search/Search.module.css
@@ -164,7 +164,8 @@
   min-inline-size: initial;
   max-inline-size: min-content;
   pointer-events: none;
-  transition: flex 0.3s var(--vkui--animation_easing_platform),
+  transition:
+    flex 0.3s var(--vkui--animation_easing_platform),
     transform 0.3s var(--vkui--animation_easing_platform);
   overflow: hidden;
 }

diff --git a/packages/vkui/src/components/SegmentedControl/SegmentedControl.module.css b/packages/vkui/src/components/SegmentedControl/SegmentedControl.module.css
@@ -28,7 +28,9 @@
   transition: transform 150ms;
   transform-origin: 0 0;
   border-radius: inherit;
-  box-shadow: inset 0 0 0 0.5px var(--vkui--color_image_border_alpha), 0 3px 8px rgba(0, 0, 0, 0.12),
+  box-shadow:
+    inset 0 0 0 0.5px var(--vkui--color_image_border_alpha),
+    0 3px 8px rgba(0, 0, 0, 0.12),
     0 3px 1px rgba(0, 0, 0, 0.04);
 }
 

diff --git a/packages/vkui/src/components/TabsItem/TabsItem.module.css b/packages/vkui/src/components/TabsItem/TabsItem.module.css
@@ -66,7 +66,9 @@
 
 /* mode="accent" */
 .TabsItem--mode-accent {
-  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
+  transition:
+    background-color 150ms ease-out,
+    box-shadow 150ms ease-out;
 }
 
 .TabsItem--selected.TabsItem--mode-accent {

diff --git a/packages/vkui/src/components/Touch/Touch.test.tsx b/packages/vkui/src/components/Touch/Touch.test.tsx
@@ -13,7 +13,7 @@ import { Touch } from './Touch';
 
 // Настоящего Touch нет в jsdom: https://github.com/jsdom/jsdom/issues/1508
 const asClientPos = ([clientX = 0, clientY = 0] = []): Touch & MouseEvent =>
-  ({ clientX, clientY } as any);
+  ({ clientX, clientY }) as any;
 
 function fireMouseSwipe(
   e: HTMLElement,

diff --git a/packages/vkui/src/components/View/Readme.md b/packages/vkui/src/components/View/Readme.md
@@ -309,8 +309,8 @@ const Content = () => {
         {direction === 'forwards'
           ? 'вперёд'
           : direction === 'backwards'
-          ? 'назад'
-          : 'не определено'}
+            ? 'назад'
+            : 'не определено'}
       </Headline>
       {spinner}
     </Div>

diff --git a/packages/vkui/src/components/View/View.tsx b/packages/vkui/src/components/View/View.tsx
@@ -472,8 +472,8 @@ export const View = ({
           iOSSwipeBackSimulationEnabled
             ? handleTouchMoveXForIOSSwipeBackSimulation
             : platform === 'ios'
-            ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
-            : undefined
+              ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
+              : undefined
         }
         onEnd={iOSSwipeBackSimulationEnabled ? handleTouchEndForIOSSwipeBackSimulation : undefined}
       >

diff --git a/packages/vkui/src/components/View/ViewInfinite.tsx b/packages/vkui/src/components/View/ViewInfinite.tsx
@@ -613,8 +613,8 @@ class ViewInfiniteComponent extends React.Component<
             iOSSwipeBackSimulationEnabled
               ? this.handleTouchMoveXForIOSSwipeBackSimulation
               : platform === 'ios'
-              ? this.handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
-              : undefined
+                ? this.handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext
+                : undefined
           }
           onEnd={
             iOSSwipeBackSimulationEnabled ? this.handleTouchEndForIOSSwipeBackSimulation : undefined

diff --git a/packages/vkui/src/hooks/useAdaptivityConditionalRender/helpers.ts b/packages/vkui/src/hooks/useAdaptivityConditionalRender/helpers.ts
@@ -25,14 +25,14 @@ export const getAdaptiveSizeType = (
       type === undefined
         ? compactClassNames.mq
         : type === 'compact'
-        ? compactClassNames[type]
-        : false,
+          ? compactClassNames[type]
+          : false,
     regular:
       type === undefined
         ? regularClassNames.mq
         : type === 'regular'
-        ? regularClassNames[type]
-        : false,
+          ? regularClassNames[type]
+          : false,
   };
 };
 
@@ -45,14 +45,14 @@ export const getAdaptiveViewWidth = (
       viewWidth === undefined
         ? viewWidthClassNames.tabletMinus.mq
         : viewWidth < ViewWidth.TABLET
-        ? viewWidthClassNames.tabletMinus.forced
-        : false,
+          ? viewWidthClassNames.tabletMinus.forced
+          : false,
     tabletPlus:
       viewWidth === undefined
         ? viewWidthClassNames.tabletPlus.mq
         : viewWidth >= ViewWidth.TABLET
-        ? viewWidthClassNames.tabletPlus.forced
-        : false,
+          ? viewWidthClassNames.tabletPlus.forced
+          : false,
   };
 };
 

diff --git a/packages/vkui/src/hooks/useFocusVisible.test.tsx b/packages/vkui/src/hooks/useFocusVisible.test.tsx
@@ -9,17 +9,16 @@ import { useFocusVisible } from './useFocusVisible';
 
 const wrapper =
   (keyboardInput: boolean) =>
-  ({ children }: { children?: React.ReactNode }) =>
-    (
-      <AppRootContext.Provider
-        value={{
-          ...DEFAULT_APP_ROOT_CONTEXT_VALUE,
-          keyboardInput,
-        }}
-      >
-        {children}
-      </AppRootContext.Provider>
-    );
+  ({ children }: { children?: React.ReactNode }) => (
+    <AppRootContext.Provider
+      value={{
+        ...DEFAULT_APP_ROOT_CONTEXT_VALUE,
+        keyboardInput,
+      }}
+    >
+      {children}
+    </AppRootContext.Provider>
+  );
 
 describe('useFocusVisible', () => {
   it('Sets focusVisible: true onFocus', () => {

diff --git a/packages/vkui/src/hooks/usePatchChildren.ts b/packages/vkui/src/hooks/usePatchChildren.ts
@@ -82,8 +82,8 @@ export const usePatchChildren = <ElementType extends HTMLElement = HTMLElement>(
   const props = shouldUseRef
     ? { ref: childRef, ...injectProps, ...mergedEventsByInjectProps }
     : isValidElementResult
-    ? { getRootRef: childRef, ...injectProps, ...mergedEventsByInjectProps }
-    : undefined;
+      ? { getRootRef: childRef, ...injectProps, ...mergedEventsByInjectProps }
+      : undefined;
 
   useEffectDev(() => {
     if (!childRef.current) {

diff --git a/packages/vkui/src/lib/dom.tsx b/packages/vkui/src/lib/dom.tsx
@@ -151,8 +151,8 @@ export const getNearestOverflowAncestor = (childEl: Node): HTMLElement | Window
   return isBody(foundAncestor)
     ? getWindow(foundAncestor)
     : isHTMLElement(childEl)
-    ? foundAncestor
-    : null;
+      ? foundAncestor
+      : null;
 };
 
 export const getScrollHeight = (node: Element | Window) => {

diff --git a/packages/vkui/src/testing/e2e/ComponentPlayground.tsx b/packages/vkui/src/testing/e2e/ComponentPlayground.tsx
@@ -48,8 +48,8 @@ export const ComponentPlayground = <
   const wrapperWidth = adaptivityProviderProps.viewWidth
     ? getAdaptivePxWidth(adaptivityProviderProps.viewWidth)
     : isVKCOM
-    ? 'auto'
-    : BREAKPOINTS.MOBILE;
+      ? 'auto'
+      : BREAKPOINTS.MOBILE;
 
   return (
     <ConfigProvider appearance={appearance} platform={platform}>

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -8,8 +8,10 @@ module.exports = {
     'stylelint-media-use-custom-media',
     'stylelint-value-no-unknown-custom-properties',
     'stylelint-use-logical',
+    'stylelint-prettier',
   ],
   rules: {
+    'prettier/prettier': true,
     'block-no-empty': null,
     'declaration-block-no-redundant-longhand-properties': null,
     'comment-empty-line-before': null,

diff --git a/tools/storybook-addon-cartesian/src/Tool.tsx b/tools/storybook-addon-cartesian/src/Tool.tsx
@@ -13,8 +13,8 @@ const getOptionsFromArgTypes = (argTypes: ArgTypes) =>
       typeof argValue.control === 'string'
         ? argValue.control
         : typeof argValue.control === 'object'
-        ? argValue.control.type
-        : undefined;
+          ? argValue.control.type
+          : undefined;
     const hasOptions = argValue.options && argValue.options.length > 0;
 
     if ('boolean' === controlType || hasOptions) {