chore: enforce files naming to use .styles.ts [teams-prg files]

change/@fluentui-react-alert-bf0a8560-2a11-4cbd-abab-090b17f2f115.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-alert",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-data-grid-react-window-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-data-grid-react-window",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-overflow-a55c8fa2-3e82-481d-9e24-f502760f0c87.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-overflow",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-portal-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-portal",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-provider-0530b7e5-56a7-4fee-be88-952cc1896cc8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toolbar-f331e95e-2241-42a7-8319-e27d78457cc5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-a7765c4b-3557-4927-9f74-96da76ce5ccb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move makeStyles() calls to .styles.ts files",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-alert/src/components/Alert/Alert.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { isConformant } from '../../testing/isConformant';
 import { Alert } from './Alert';
-import { alertClassNames } from './useAlertStyles';
+import { alertClassNames } from './useAlertStyles.styles';
 
 describe('Alert', () => {
   isConformant({

packages/react-components/react-alert/src/components/Alert/Alert.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { renderAlert_unstable } from './renderAlert';
 import { useAlert_unstable } from './useAlert';
-import { useAlertStyles_unstable } from './useAlertStyles';
+import { useAlertStyles_unstable } from './useAlertStyles.styles';
 
 import type { AlertProps } from './Alert.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-alert/src/components/Alert/index.ts

@@ -2,4 +2,4 @@ export * from './Alert';
 export * from './Alert.types';
 export * from './renderAlert';
 export * from './useAlert';
-export * from './useAlertStyles';
+export * from './useAlertStyles.styles';

packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useDataGrid_unstable } from './useDataGrid';
+import { useDataGrid_unstable } from './useDataGrid.styles';
 import {
   renderDataGrid_unstable,
   useDataGridStyles_unstable,

packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts

@@ -1,2 +1,2 @@
 export * from './DataGrid';
-export * from './useDataGrid';
+export * from './useDataGrid.styles';

packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles';
+import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';
 import { useDataGridBody_unstable } from './useDataGridBody';
 import { renderDataGridBody_unstable } from './renderDataGridBody';
 import type { DataGridBodyProps } from './DataGridBody.types';

packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useDataGridRowStyles_unstable, renderDataGridRow_unstable } from '@fluentui/react-table';
-import { useDataGridRow_unstable } from './useDataGridRow';
+import { useDataGridRow_unstable } from './useDataGridRow.styles';
 import type { DataGridRowProps } from '@fluentui/react-table';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 

packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts

@@ -1,2 +1,2 @@
 export * from './DataGridRow';
-export * from './useDataGridRow';
+export * from './useDataGridRow.styles';

packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogActions_unstable } from './useDialogActions';
 import { renderDialogActions_unstable } from './renderDialogActions';
-import { useDialogActionsStyles_unstable } from './useDialogActionsStyles';
+import { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';
 import type { DialogActionsProps } from './DialogActions.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-dialog/src/components/DialogActions/index.ts

@@ -2,4 +2,4 @@ export * from './DialogActions';
 export * from './DialogActions.types';
 export * from './renderDialogActions';
 export * from './useDialogActions';
-export * from './useDialogActionsStyles';
+export * from './useDialogActionsStyles.styles';

packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogBody_unstable } from './useDialogBody';
 import { renderDialogBody_unstable } from './renderDialogBody';
-import { useDialogBodyStyles_unstable } from './useDialogBodyStyles';
+import { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';
 import type { DialogBodyProps } from './DialogBody.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-dialog/src/components/DialogBody/index.ts

@@ -2,4 +2,4 @@ export * from './DialogBody';
 export * from './DialogBody.types';
 export * from './renderDialogBody';
 export * from './useDialogBody';
-export * from './useDialogBodyStyles';
+export * from './useDialogBodyStyles.styles';

packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogContent_unstable } from './useDialogContent';
 import { renderDialogContent_unstable } from './renderDialogContent';
-import { useDialogContentStyles_unstable } from './useDialogContentStyles';
+import { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';
 import type { DialogContentProps } from './DialogContent.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-dialog/src/components/DialogContent/index.ts

@@ -2,4 +2,4 @@ export * from './DialogContent';
 export * from './DialogContent.types';
 export * from './renderDialogContent';
 export * from './useDialogContent';
-export * from './useDialogContentStyles';
+export * from './useDialogContentStyles.styles';

packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogSurface_unstable } from './useDialogSurface';
 import { renderDialogSurface_unstable } from './renderDialogSurface';
-import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles';
+import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';
 import type { DialogSurfaceProps } from './DialogSurface.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';

packages/react-components/react-dialog/src/components/DialogSurface/index.ts

@@ -2,4 +2,4 @@ export * from './DialogSurface';
 export * from './DialogSurface.types';
 export * from './renderDialogSurface';
 export * from './useDialogSurface';
-export * from './useDialogSurfaceStyles';
+export * from './useDialogSurfaceStyles.styles';

packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDialogTitle_unstable } from './useDialogTitle';
 import { renderDialogTitle_unstable } from './renderDialogTitle';
-import { useDialogTitleStyles_unstable } from './useDialogTitleStyles';
+import { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';
 import type { DialogTitleProps } from './DialogTitle.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-dialog/src/components/DialogTitle/index.ts

@@ -2,4 +2,4 @@ export * from './DialogTitle';
 export * from './DialogTitle.types';
 export * from './renderDialogTitle';
 export * from './useDialogTitle';
-export * from './useDialogTitleStyles';
+export * from './useDialogTitleStyles.styles';

packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx

@@ -5,7 +5,7 @@ import { useDialogContext_unstable } from '../../contexts/dialogContext';
 import { Dismiss24Regular } from '@fluentui/react-icons';
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
-import { useDialogTitleInternalStyles } from './useDialogTitleStyles';
+import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
 
 /**
  * Create the state required to render DialogTitle.

packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useDialogTrigger_unstable } from './useDialogTrigger';
+import { useDialogTrigger_unstable } from './useDialogTrigger.styles';
 import { renderDialogTrigger_unstable } from './renderDialogTrigger';
 import type { DialogTriggerProps } from './DialogTrigger.types';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';

packages/react-components/react-dialog/src/components/DialogTrigger/index.ts

@@ -1,4 +1,4 @@
 export * from './DialogTrigger';
 export * from './DialogTrigger.types';
 export * from './renderDialogTrigger';
-export * from './useDialogTrigger';
+export * from './useDialogTrigger.styles';

packages/react-components/react-menu/src/components/Menu/Menu.test.tsx

@@ -144,7 +144,6 @@ describe('Menu', () => {
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            {/* eslint-disable-next-line @fluentui/max-len */}
             {/* @ts-expect-error - MenuItemComponent is union of 3 non-matching interfaces. Unnecessary narrowing logic would be needed which is out of scope for what is being tested  */}
             <MenuItemComponent disabled {...props}>
               Item

packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMenuDivider_unstable } from './useMenuDivider';
-import { useMenuDividerStyles_unstable } from './useMenuDividerStyles';
+import { useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles';
 import { renderMenuDivider_unstable } from './renderMenuDivider';
 import type { MenuDividerProps } from './MenuDivider.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-menu/src/components/MenuDivider/index.ts

@@ -2,4 +2,4 @@ export * from './MenuDivider.types';
 export * from './MenuDivider';
 export * from './renderMenuDivider';
 export * from './useMenuDivider';
-export * from './useMenuDividerStyles';
+export * from './useMenuDividerStyles.styles';

packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx

@@ -4,7 +4,7 @@ import { renderMenuGroup_unstable } from './renderMenuGroup';
 import { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';
 import type { MenuGroupProps } from './MenuGroup.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { useMenuGroupStyles_unstable } from './useMenuGroupStyles';
+import { useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**

packages/react-components/react-menu/src/components/MenuGroup/index.ts

@@ -3,4 +3,4 @@ export * from './MenuGroup';
 export * from './renderMenuGroup';
 export * from './useMenuGroup';
 export * from './useMenuGroupContextValues';
-export * from './useMenuGroupStyles';
+export * from './useMenuGroupStyles.styles';

packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMenuGroupHeader_unstable } from './useMenuGroupHeader';
-import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles';
+import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';
 import { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';
 import type { MenuGroupHeaderProps } from './MenuGroupHeader.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts

@@ -2,4 +2,4 @@ export * from './MenuGroupHeader.types';
 export * from './MenuGroupHeader';
 export * from './renderMenuGroupHeader';
 export * from './useMenuGroupHeader';
-export * from './useMenuGroupHeaderStyles';
+export * from './useMenuGroupHeaderStyles.styles';

packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMenuItem_unstable } from './useMenuItem';
 import { renderMenuItem_unstable } from './renderMenuItem';
-import { useMenuItemStyles_unstable } from './useMenuItemStyles';
+import { useMenuItemStyles_unstable } from './useMenuItemStyles.styles';
 import type { MenuItemProps } from './MenuItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-menu/src/components/MenuItem/index.ts

@@ -2,4 +2,4 @@ export * from './MenuItem';
 export * from './MenuItem.types';
 export * from './renderMenuItem';
 export * from './useMenuItem';
-export * from './useMenuItemStyles';
+export * from './useMenuItemStyles.styles';

packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';
 import { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';
-import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';
+import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles';
 import type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts

@@ -2,4 +2,4 @@ export * from './MenuItemCheckbox.types';
 export * from './MenuItemCheckbox';
 export * from './renderMenuItemCheckbox';
 export * from './useMenuItemCheckbox';
-export * from './useMenuItemCheckboxStyles';
+export * from './useMenuItemCheckboxStyles.styles';

packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts → packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts

@@ -1,6 +1,6 @@
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
-import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
+import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { MenuItemSlots } from '../index';
 import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';

packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMenuItemRadio_unstable } from './useMenuItemRadio';
 import { renderMenuItemRadio_unstable } from './renderMenuItemRadio';
-import { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';
+import { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles.styles';
 import type { MenuItemRadioProps } from './MenuItemRadio.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-menu/src/components/MenuItemRadio/index.ts

@@ -2,4 +2,4 @@ export * from './MenuItemRadio.types';
 export * from './MenuItemRadio';
 export * from './renderMenuItemRadio';
 export * from './useMenuItemRadio';
-export * from './useMenuItemRadioStyles';
+export * from './useMenuItemRadioStyles.styles';

packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts → packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts

@@ -1,6 +1,6 @@
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
-import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
+import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { MenuItemSlots } from '../index';
 import type { MenuItemRadioState } from './MenuItemRadio.types';

packages/react-components/react-menu/src/components/MenuList/MenuList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useMenuList_unstable } from './useMenuList';
 import { renderMenuList_unstable } from './renderMenuList';
 import { useMenuListContextValues_unstable } from './useMenuListContextValues';
-import { useMenuListStyles_unstable } from './useMenuListStyles';
+import { useMenuListStyles_unstable } from './useMenuListStyles.styles';
 import type { MenuListProps } from './MenuList.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-menu/src/components/MenuList/index.ts

@@ -2,5 +2,5 @@ export * from './MenuList';
 export * from './MenuList.types';
 export * from './renderMenuList';
 export * from './useMenuList';
-export * from './useMenuListStyles';
+export * from './useMenuListStyles.styles';
 export * from './useMenuListContextValues';

packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMenuPopover_unstable } from './useMenuPopover';
-import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';
+import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles';
 import { renderMenuPopover_unstable } from './renderMenuPopover';
 import type { MenuPopoverProps } from './MenuPopover.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';

packages/react-components/react-menu/src/components/MenuPopover/index.ts

@@ -2,4 +2,4 @@ export * from './MenuPopover';
 export * from './MenuPopover.types';
 export * from './renderMenuPopover';
 export * from './useMenuPopover';
-export * from './useMenuPopoverStyles';
+export * from './useMenuPopoverStyles.styles';

packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMenuSplitGroup_unstable } from './useMenuSplitGroup';
 import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';
-import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';
+import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';
 import type { MenuSplitGroupProps } from './MenuSplitGroup.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';

packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts

@@ -2,4 +2,4 @@ export * from './MenuSplitGroup';
 export * from './MenuSplitGroup.types';
 export * from './renderMenuSplitGroup';
 export * from './useMenuSplitGroup';
-export * from './useMenuSplitGroupStyles';
+export * from './useMenuSplitGroupStyles.styles';