Use CSS Modules naming convention

polaris-react/.storybook/GridOverlay/GridOverlay.tsx

@@ -3,7 +3,7 @@ import React, {useState} from 'react';
 import {EventListener} from '../../src';
 import {classNames} from '../../src/utilities/css';
 
-import './GridOverlay.module.css';
+import './GridOverlay.css';
 
 const COLUMNS_SMALL = 4;
 const COLUMNS_LARGE = 12;

polaris-react/playground/DetailsPage.tsx

@@ -46,7 +46,7 @@ import {
 } from '../src';
 import type {DropZoneProps, PageProps} from '../src';
 
-import styles from './DetailsPage.scss';
+import styles from './DetailsPage.module.scss';
 
 export function DetailsPage() {
   const defaultState = useRef({

polaris-react/src/components/ActionList/components/Item/Item.tsx

@@ -8,7 +8,7 @@ import {Icon} from '../../../Icon';
 import {UnstyledLink} from '../../../UnstyledLink';
 import {Badge} from '../../../Badge';
 import {Text} from '../../../Text';
-import styles from '../../ActionList.scss';
+import styles from '../../ActionList.module.scss';
 import {handleMouseUpByBlurring} from '../../../../utilities/focus';
 import {HorizontalStack} from '../../../HorizontalStack';
 import {Box} from '../../../Box';

polaris-react/src/components/ActionMenu/ActionMenu.tsx

@@ -8,7 +8,7 @@ import type {
 } from '../../types';
 
 import {Actions, RollupActions} from './components';
-import styles from './ActionMenu.scss';
+import styles from './ActionMenu.module.scss';
 
 export interface ActionMenuProps {
   /** Collection of page-level secondary actions */

polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx

@@ -15,7 +15,7 @@ import {useEventListener} from '../../../../utilities/use-event-listener';
 import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect';
 import {useFeatures} from '../../../../utilities/features';
 
-import styles from './Actions.scss';
+import styles from './Actions.module.scss';
 
 interface Props {
   /** Collection of page-level secondary actions */

polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx

@@ -5,7 +5,7 @@ import {ActionList} from '../../../ActionList';
 import {Popover} from '../../../Popover';
 import {SecondaryAction} from '../SecondaryAction';
 
-import styles from './MenuGroup.scss';
+import styles from './MenuGroup.module.scss';
 
 export interface MenuGroupProps extends MenuGroupDescriptor {
   /** Visually hidden menu description for screen readers */

polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx

@@ -11,7 +11,7 @@ import {ActionList} from '../../../ActionList';
 import {Button} from '../../../Button';
 import {Popover} from '../../../Popover';
 
-import styles from './RollupActions.scss';
+import styles from './RollupActions.module.scss';
 
 export interface RollupActionsProps {
   /** Accessibilty label */

polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.tsx

@@ -5,7 +5,7 @@ import {Tooltip} from '../../../Tooltip';
 import {Button} from '../../../Button';
 import type {ButtonProps} from '../../../Button';
 
-import styles from './SecondaryAction.scss';
+import styles from './SecondaryAction.module.scss';
 
 interface SecondaryAction extends ButtonProps {
   helpText?: React.ReactNode;

polaris-react/src/components/AppProvider/AppProvider.tsx

@@ -22,8 +22,8 @@ import {
 } from '../../utilities/features';
 import type {FeaturesConfig} from '../../utilities/features';
 
-import './AppProvider.scss';
-import './global.scss';
+import './AppProvider.module.scss';
+import './global.module.scss';
 
 interface State {
   intl: I18n;

polaris-react/src/components/Autocomplete/Autocomplete.tsx

@@ -12,7 +12,7 @@ import {Combobox} from '../Combobox';
 import {Listbox, AutoSelection} from '../Listbox';
 
 import {MappedAction, MappedOption} from './components';
-import styles from './Autocomplete.scss';
+import styles from './Autocomplete.module.scss';
 
 export interface AutocompleteProps {
   /** A unique identifier for the Autocomplete */

polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx

@@ -9,7 +9,7 @@ import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
 import {useI18n} from '../../../../utilities/i18n';
 
-import styles from './MappedAction.scss';
+import styles from './MappedAction.module.scss';
 
 interface MappedAction extends ActionListItemDescriptor {
   wrapOverflow?: boolean;

polaris-react/src/components/Autocomplete/components/MappedOption/MappedOption.tsx

@@ -4,7 +4,7 @@ import type {OptionDescriptor, ArrayElement} from '../../../../types';
 import {Listbox} from '../../../Listbox';
 import {classNames} from '../../../../utilities/css';
 
-import styles from './MappedOption.scss';
+import styles from './MappedOption.module.scss';
 
 type MappedOption = ArrayElement<OptionDescriptor[]> & {
   selected: boolean;

polaris-react/src/components/Avatar/Avatar.tsx

@@ -7,7 +7,7 @@ import {useI18n} from '../../utilities/i18n';
 import {useIsAfterInitialMount} from '../../utilities/use-is-after-initial-mount';
 import {Image} from '../Image';
 
-import styles from './Avatar.scss';
+import styles from './Avatar.module.scss';
 
 type Size =
   | 'extraSmall'

polaris-react/src/components/Backdrop/Backdrop.tsx

@@ -4,7 +4,7 @@ import type {Dispatch, SetStateAction} from 'react';
 import {classNames} from '../../utilities/css';
 import {ScrollLock} from '../ScrollLock';
 
-import styles from './Backdrop.scss';
+import styles from './Backdrop.module.scss';
 
 export interface BackdropProps {
   belowNavigation?: boolean;

polaris-react/src/components/Badge/Badge.tsx

@@ -8,7 +8,7 @@ import {Icon} from '../Icon';
 import type {IconSource} from '../../types';
 import {useFeatures} from '../../utilities/features';
 
-import styles from './Badge.scss';
+import styles from './Badge.module.scss';
 import type {Progress, Size, Status} from './types';
 import {Pip} from './components';
 import {getDefaultAccessibilityLabel} from './utils';

polaris-react/src/components/Badge/components/Pip/Pip.tsx

@@ -6,7 +6,7 @@ import {Text} from '../../../Text';
 import {useI18n} from '../../../../utilities/i18n';
 import {getDefaultAccessibilityLabel} from '../../utils';
 
-import styles from './Pip.scss';
+import styles from './Pip.module.scss';
 
 export interface PipProps {
   status?: Status;

polaris-react/src/components/Banner/Banner.tsx

@@ -29,7 +29,7 @@ import {Text} from '../Text';
 import {Box} from '../Box';
 import {useFeatures} from '../../utilities/features';
 
-import styles from './Banner.scss';
+import styles from './Banner.module.scss';
 import {BannerExperimental} from './components';
 
 export type BannerStatus = 'success' | 'info' | 'warning' | 'critical';

polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx

@@ -25,7 +25,7 @@ import {Icon} from '../../../Icon';
 import {useEventListener} from '../../../../utilities/use-event-listener';
 
 import {bannerAttributes} from './utilities';
-import styles from './BannerExperimental.scss';
+import styles from './BannerExperimental.module.scss';
 
 interface BannerLayoutProps {
   backgroundColor: BoxProps['background'];

polaris-react/src/components/Bleed/Bleed.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../utilities/css';
 import type {ResponsiveProp} from '../../utilities/css';
 
-import styles from './Bleed.scss';
+import styles from './Bleed.module.scss';
 
 type Spacing = ResponsiveProp<SpaceScale>;
 

polaris-react/src/components/Box/Box.tsx

@@ -16,7 +16,7 @@ import {
 } from '../../utilities/css';
 import type {ResponsiveProp} from '../../utilities/css';
 
-import styles from './Box.scss';
+import styles from './Box.module.scss';
 
 type Element = 'div' | 'span' | 'section' | 'legend' | 'ul' | 'li';
 

polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -9,7 +9,7 @@ import {Text} from '../Text';
 import {Button} from '../Button';
 import {useFeatures} from '../../utilities/features';
 
-import styles from './Breadcrumbs.scss';
+import styles from './Breadcrumbs.module.scss';
 
 export interface BreadcrumbsProps {
   /** Back action link */

polaris-react/src/components/BulkActions/BulkActions.tsx

@@ -18,7 +18,7 @@ import {HorizontalStack} from '../HorizontalStack';
 import {EventListener} from '../EventListener';
 
 import {BulkActionButton, BulkActionMenu} from './components';
-import styles from './BulkActions.scss';
+import styles from './BulkActions.module.scss';
 
 export type BulkAction = DisableableAction & BadgeAction;
 

polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx

@@ -7,7 +7,7 @@ import {Icon} from '../../../Icon';
 import {Indicator} from '../../../Indicator';
 import {Tooltip} from '../../../Tooltip';
 import {useComponentDidMount} from '../../../../utilities/use-component-did-mount';
-import styles from '../../BulkActions.scss';
+import styles from '../../BulkActions.module.scss';
 
 export type BulkActionButtonProps = {
   disclosure?: boolean;

polaris-react/src/components/Button/Button.tsx

@@ -21,7 +21,7 @@ import type {UnstyledButtonProps} from '../UnstyledButton';
 import {useDisableClick} from '../../utilities/use-disable-interaction';
 import {useFeatures} from '../../utilities/features';
 
-import styles from './Button.scss';
+import styles from './Button.module.scss';
 
 export interface ButtonProps extends BaseButton {
   /** The content to display inside the button */

polaris-react/src/components/Button/tests/Button.test.tsx

@@ -14,7 +14,7 @@ import {Spinner} from '../../Spinner';
 import {UnstyledButton} from '../../UnstyledButton';
 import {Button} from '../Button';
 import en from '../../../../locales/en.json';
-import styles from '../Button.scss';
+import styles from '../Button.module.scss';
 
 describe('<Button />', () => {
   let warnSpy: jest.SpyInstance | null = null;

polaris-react/src/components/ButtonGroup/ButtonGroup.tsx

@@ -4,7 +4,7 @@ import {classNames} from '../../utilities/css';
 import {elementChildren} from '../../utilities/components';
 
 import {Item} from './components';
-import styles from './ButtonGroup.scss';
+import styles from './ButtonGroup.module.scss';
 
 type Spacing = 'extraTight' | 'tight' | 'loose';
 

polaris-react/src/components/ButtonGroup/components/Item/Item.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {useToggle} from '../../../../utilities/use-toggle';
 import {classNames} from '../../../../utilities/css';
-import styles from '../../ButtonGroup.scss';
+import styles from '../../ButtonGroup.module.scss';
 
 export interface ItemProps {
   button: React.ReactElement;

polaris-react/src/components/CalloutCard/CalloutCard.tsx

@@ -12,7 +12,7 @@ import {Text} from '../Text';
 import {Image} from '../Image';
 import {useFeatures} from '../../utilities/features';
 
-import styles from './CalloutCard.scss';
+import styles from './CalloutCard.module.scss';
 
 export interface CalloutCardProps {
   /** The content to display inside the callout card. */

polaris-react/src/components/CheckableButton/CheckableButton.tsx

@@ -4,7 +4,7 @@ import type {CheckboxHandles} from '../../types';
 import {classNames} from '../../utilities/css';
 import {Checkbox} from '../Checkbox';
 
-import styles from './CheckableButton.scss';
+import styles from './CheckableButton.module.scss';
 
 export interface CheckableButtonProps {
   accessibilityLabel?: string;

polaris-react/src/components/Checkbox/Checkbox.tsx

@@ -17,7 +17,7 @@ import type {Error, CheckboxHandles} from '../../types';
 import {WithinListboxContext} from '../../utilities/listbox/context';
 import {useFeatures} from '../../utilities/features';
 
-import styles from './Checkbox.scss';
+import styles from './Checkbox.module.scss';
 
 export interface CheckboxProps extends ChoiceBleedProps {
   /** Indicates the ID of the element that is controlled by the checkbox */

polaris-react/src/components/Choice/Choice.tsx

@@ -13,7 +13,7 @@ import {InlineError} from '../InlineError';
 import {Text} from '../Text';
 import {useFeatures} from '../../utilities/features';
 
-import styles from './Choice.scss';
+import styles from './Choice.module.scss';
 
 type Spacing = ResponsiveProp<SpaceScale>;
 
@@ -157,7 +157,7 @@ export function Choice({
       <Text
         as="span"
         // `undefined` means color: inherit
-        // the nearest ancestor with a specified color is .Descriptions in Choice.scss
+        // the nearest ancestor with a specified color is .Descriptions in Choice.module.scss
         color={disabled && polarisSummerEditions2023 ? undefined : 'subdued'}
       >
         {helpText}

polaris-react/src/components/ChoiceList/ChoiceList.tsx

@@ -8,7 +8,7 @@ import {VerticalStack} from '../VerticalStack';
 import {Box} from '../Box';
 import {Bleed} from '../Bleed';
 
-import styles from './ChoiceList.scss';
+import styles from './ChoiceList.module.scss';
 
 interface Choice {
   /** Value of the choice */

polaris-react/src/components/Collapsible/Collapsible.tsx

@@ -2,7 +2,7 @@ import React, {useState, useRef, useEffect, useCallback} from 'react';
 
 import {classNames} from '../../utilities/css';
 
-import styles from './Collapsible.scss';
+import styles from './Collapsible.module.scss';
 
 interface Transition {
   /** Assign a transition duration to the collapsible animation. */

polaris-react/src/components/ColorPicker/ColorPicker.tsx

@@ -10,7 +10,7 @@ import {EventListener} from '../EventListener';
 
 import {AlphaPicker, HuePicker, Slidable} from './components';
 import type {SlidableProps} from './components';
-import styles from './ColorPicker.scss';
+import styles from './ColorPicker.module.scss';
 
 interface State {
   pickerSize: {

polaris-react/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx

@@ -4,7 +4,7 @@ import {Slidable} from '../Slidable';
 import type {SlidableProps} from '../Slidable';
 import type {HSBColor} from '../../../../utilities/color-types';
 import {hsbToRgb} from '../../../../utilities/color-transformers';
-import styles from '../../ColorPicker.scss';
+import styles from '../../ColorPicker.module.scss';
 
 import {calculateDraggerY, alphaForDraggerY} from './utilities';
 

polaris-react/src/components/ColorPicker/components/HuePicker/HuePicker.tsx

@@ -2,7 +2,7 @@ import React, {PureComponent} from 'react';
 
 import {Slidable} from '../Slidable';
 import type {SlidableProps} from '../Slidable';
-import styles from '../../ColorPicker.scss';
+import styles from '../../ColorPicker.module.scss';
 
 import {calculateDraggerY, hueForDraggerY} from './utilities';
 

polaris-react/src/components/ColorPicker/components/Slidable/Slidable.tsx

@@ -3,7 +3,7 @@ import React, {PureComponent} from 'react';
 import {isServer} from '../../../../utilities/target';
 // eslint-disable-next-line import/no-deprecated
 import {EventListener} from '../../../EventListener';
-import styles from '../../ColorPicker.scss';
+import styles from '../../ColorPicker.module.scss';
 
 interface Position {
   x: number;

polaris-react/src/components/Combobox/Combobox.tsx

@@ -15,7 +15,7 @@ import type {
   ComboboxListboxOptionType,
 } from '../../utilities/combobox';
 
-import styles from './Combobox.scss';
+import styles from './Combobox.module.scss';
 import {TextField} from './components';
 
 export interface ComboboxProps {

polaris-react/src/components/Connected/Connected.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Item} from './components';
-import styles from './Connected.scss';
+import styles from './Connected.module.scss';
 
 export interface ConnectedProps {
   /** Content to display on the left */

polaris-react/src/components/Connected/components/Item/Item.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {classNames} from '../../../../utilities/css';
 import {useToggle} from '../../../../utilities/use-toggle';
-import styles from '../../Connected.scss';
+import styles from '../../Connected.module.scss';
 
 type ItemPosition = 'left' | 'right' | 'primary';
 

polaris-react/src/components/DataTable/DataTable.tsx

@@ -15,7 +15,7 @@ import {Cell, Navigation} from './components';
 import type {CellProps} from './components';
 import {measureColumn, getPrevAndCurrentColumns} from './utilities';
 import type {DataTableState, SortDirection, VerticalAlign} from './types';
-import styles from './DataTable.scss';
+import styles from './DataTable.module.scss';
 
 export type {SortDirection};
 

polaris-react/src/components/DataTable/components/Cell/Cell.tsx

@@ -7,7 +7,7 @@ import {useI18n} from '../../../../utilities/i18n';
 import {headerCell} from '../../../shared';
 import {Icon} from '../../../Icon';
 import type {SortDirection, VerticalAlign} from '../../types';
-import styles from '../../DataTable.scss';
+import styles from '../../DataTable.module.scss';
 import {Tooltip} from '../../../Tooltip';
 
 export interface CellProps {

polaris-react/src/components/DataTable/components/Navigation/Navigation.tsx

@@ -5,7 +5,7 @@ import {classNames} from '../../../../utilities/css';
 import {useI18n} from '../../../../utilities/i18n';
 import {Button} from '../../../Button';
 import type {ColumnVisibilityData} from '../../types';
-import styles from '../../DataTable.scss';
+import styles from '../../DataTable.module.scss';
 import {useFeatures} from '../../../../utilities/features';
 
 export interface NavigationProps {