Only process component styles as CSS Modules

`css-loader` now only treats `*.module.*` files as CSS Modules.

src/components/Alert/Alert.jsx

@@ -7,7 +7,7 @@ import {
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
-import styles from './Alert.scss';
+import styles from './Alert.module.scss';
 
 export const Alert = ({
   children,

src/components/Badge/Badge.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
-import styles from './Badge.scss';
+import styles from './Badge.module.scss';
 
 export const Badge = ({
   color,

src/components/Button/Button.jsx

@@ -10,7 +10,7 @@ import { ButtonGroupContext } from '../ButtonGroup';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
-import styles from './Button.scss';
+import styles from './Button.module.scss';
 
 export const Button = React.forwardRef((props, ref) => {
   const {

src/components/ButtonGroup/ButtonGroup.jsx

@@ -7,7 +7,7 @@ import { classNames } from '../../utils/classNames';
 import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ButtonGroup.scss';
+import styles from './ButtonGroup.module.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 
 export const ButtonGroup = ({

src/components/Card/Card.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
-import styles from './Card.scss';
+import styles from './Card.module.scss';
 
 export const Card = ({
   children,

src/components/Card/CardBody.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './Card.scss';
+import styles from './Card.module.scss';
 
 export const CardBody = ({
   children,

src/components/Card/CardFooter.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './Card.scss';
+import styles from './Card.module.scss';
 
 export const CardFooter = ({
   children,

src/components/CheckboxField/CheckboxField.jsx

@@ -5,7 +5,7 @@ import { classNames } from '../../utils/classNames';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import styles from './CheckboxField.scss';
+import styles from './CheckboxField.module.scss';
 
 export const CheckboxField = React.forwardRef((props, ref) => {
   const {

src/components/FileInputField/FileInputField.jsx

@@ -6,7 +6,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import styles from './FileInputField.scss';
+import styles from './FileInputField.module.scss';
 
 export const FileInputField = React.forwardRef((props, ref) => {
   const {

src/components/FormLayout/FormLayout.jsx

@@ -5,7 +5,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
-import styles from './FormLayout.scss';
+import styles from './FormLayout.module.scss';
 
 const PREDEFINED_LABEL_WIDTH_VALUES = ['auto', 'default', 'limited'];
 

src/components/FormLayout/FormLayoutCustomField.jsx

@@ -7,7 +7,7 @@ import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
-import styles from './FormLayoutCustomField.scss';
+import styles from './FormLayoutCustomField.module.scss';
 
 const renderLabel = (id, label, labelForId) => {
   if (labelForId && label) {

src/components/Grid/Grid.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
-import styles from './Grid.scss';
+import styles from './Grid.module.scss';
 
 const SPACING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7];
 

src/components/Grid/GridSpan.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
-import styles from './Grid.scss';
+import styles from './Grid.module.scss';
 
 export const GridSpan = ({
   children,

src/components/InputGroup/InputGroup.jsx

@@ -13,7 +13,7 @@ import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from './InputGroupContext';
-import styles from './InputGroup.scss';
+import styles from './InputGroup.module.scss';
 
 export const InputGroup = ({
   children,

src/components/Modal/Modal.jsx

@@ -8,7 +8,7 @@ import { getPositionClassName } from './_helpers/getPositionClassName';
 import { getSizeClassName } from './_helpers/getSizeClassName';
 import { useModalFocus } from './_hooks/useModalFocus';
 import { useModalScrollPrevention } from './_hooks/useModalScrollPrevention';
-import styles from './Modal.scss';
+import styles from './Modal.module.scss';
 
 const preRender = (
   children,

src/components/Modal/ModalBody.jsx

@@ -5,7 +5,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getScrollingClassName } from './_helpers/getScrollingClassName';
-import styles from './ModalBody.scss';
+import styles from './ModalBody.module.scss';
 
 export const ModalBody = ({
   children,

src/components/Modal/ModalCloseButton.jsx

@@ -5,7 +5,7 @@ import {
   withGlobalProps,
 } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ModalCloseButton.scss';
+import styles from './ModalCloseButton.module.scss';
 
 export const ModalCloseButton = React.forwardRef((props, ref) => {
   const {

src/components/Modal/ModalContent.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ModalContent.scss';
+import styles from './ModalContent.module.scss';
 
 export const ModalContent = ({
   children,

src/components/Modal/ModalFooter.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
-import styles from './ModalFooter.scss';
+import styles from './ModalFooter.module.scss';
 
 export const ModalFooter = ({
   children,

src/components/Modal/ModalHeader.jsx

@@ -6,7 +6,7 @@ import {
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
-import styles from './ModalHeader.scss';
+import styles from './ModalHeader.module.scss';
 
 export const ModalHeader = ({
   children,

src/components/Modal/ModalTitle.jsx

@@ -4,7 +4,7 @@ import {
   withGlobalProps,
 } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ModalTitle.scss';
+import styles from './ModalTitle.module.scss';
 
 export const ModalTitle = ({
   children,

src/components/Paper/Paper.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './Paper.scss';
+import styles from './Paper.module.scss';
 
 export const Paper = ({
   children,

src/components/Popover/Popover.jsx

@@ -6,7 +6,7 @@ import { classNames } from '../../utils/classNames';
 import { transferProps } from '../_helpers/transferProps';
 import getRootSideClassName from './_helpers/getRootSideClassName';
 import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName';
-import styles from './Popover.scss';
+import styles from './Popover.module.scss';
 
 export const Popover = React.forwardRef((props, ref) => {
   const {

src/components/Popover/PopoverWrapper.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './PopoverWrapper.scss';
+import styles from './PopoverWrapper.module.scss';
 
 export const PopoverWrapper = ({
   children,
@@ -36,4 +36,3 @@ PopoverWrapper.propTypes = {
 export const PopoverWrapperWithContext = withGlobalProps(PopoverWrapper, 'PopoverWrapper');
 
 export default PopoverWrapperWithContext;
-

src/components/Radio/Radio.jsx

@@ -6,7 +6,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import styles from './Radio.scss';
+import styles from './Radio.module.scss';
 
 export const Radio = ({
   disabled,

src/components/ScrollView/ScrollView.jsx

@@ -15,7 +15,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
 import { useLoadResize } from './_hooks/useLoadResizeHook';
 import { useScrollPosition } from './_hooks/useScrollPositionHook';
-import styles from './ScrollView.scss';
+import styles from './ScrollView.module.scss';
 
 // Function `getElementsPositionDifference` sometimes returns floating point values that results
 // in inaccurate detection of start/end. It is necessary to accept this inaccuracy and take

src/components/SelectField/SelectField.jsx

@@ -9,7 +9,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import { Option } from './_components/Option';
-import styles from './SelectField.scss';
+import styles from './SelectField.module.scss';
 
 export const SelectField = React.forwardRef((props, ref) => {
   const {

src/components/Table/Table.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { TableHeaderCell } from './_components/TableHeaderCell';
 import { TableBodyCell } from './_components/TableBodyCell';
-import styles from './Table.scss';
+import styles from './Table.module.scss';
 
 export const Table = ({
   columns,

src/components/Tabs/Tabs.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './Tabs.scss';
+import styles from './Tabs.module.scss';
 
 export const Tabs = ({
   children,

src/components/Tabs/TabsItem.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
-import styles from './TabsItem.scss';
+import styles from './TabsItem.module.scss';
 
 export const TabsItem = ({
   afterLabel,

src/components/Text/Text.jsx

@@ -7,7 +7,7 @@ import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getRootClampClassName } from './_helpers/getRootClampClassName';
 import { getRootHyphensClassName } from './_helpers/getRootHyphensClassName';
 import { getRootWordWrappingClassName } from './_helpers/getRootWordWrappingClassName';
-import styles from './Text.scss';
+import styles from './Text.module.scss';
 
 export const Text = ({
   blockLevel,

src/components/TextArea/TextArea.jsx

@@ -7,7 +7,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import styles from './TextArea.scss';
+import styles from './TextArea.module.scss';
 
 export const TextArea = React.forwardRef((props, ref) => {
   const {

src/components/TextField/TextField.jsx

@@ -8,7 +8,7 @@ import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
-import styles from './TextField.scss';
+import styles from './TextField.module.scss';
 
 const SMALL_INPUT_SIZE = 10;
 

src/components/TextLink/TextLink.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './TextLink.scss';
+import styles from './TextLink.module.scss';
 
 export const TextLink = ({
   href,

src/components/Toggle/Toggle.jsx

@@ -5,7 +5,7 @@ import { classNames } from '../../utils/classNames';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import styles from './Toggle.scss';
+import styles from './Toggle.module.scss';
 
 export const Toggle = React.forwardRef((props, ref) => {
   const {

src/components/Toolbar/Toolbar.jsx

@@ -6,7 +6,7 @@ import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getAlignClassName } from './_helpers/getAlignClassName';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
-import styles from './Toolbar.scss';
+import styles from './Toolbar.module.scss';
 
 export const Toolbar = ({
   align,

src/components/Toolbar/ToolbarGroup.jsx

@@ -5,7 +5,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getAlignClassName } from './_helpers/getAlignClassName';
-import styles from './Toolbar.scss';
+import styles from './Toolbar.module.scss';
 
 export const ToolbarGroup = ({
   align,

src/components/Toolbar/ToolbarItem.jsx

@@ -4,7 +4,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import styles from './Toolbar.scss';
+import styles from './Toolbar.module.scss';
 
 export const ToolbarItem = ({
   children,