diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx index f4e7d735..33a7b2bd 100644 --- a/src/components/Alert/Alert.jsx +++ b/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, diff --git a/src/components/Alert/Alert.scss b/src/components/Alert/Alert.module.scss similarity index 100% rename from src/components/Alert/Alert.scss rename to src/components/Alert/Alert.module.scss diff --git a/src/components/Badge/Badge.jsx b/src/components/Badge/Badge.jsx index ed24635f..53869644 100644 --- a/src/components/Badge/Badge.jsx +++ b/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, diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.module.scss similarity index 100% rename from src/components/Badge/Badge.scss rename to src/components/Badge/Badge.module.scss diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx index 94675ecd..b93d455c 100644 --- a/src/components/Button/Button.jsx +++ b/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 { diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.module.scss similarity index 100% rename from src/components/Button/Button.scss rename to src/components/Button/Button.module.scss diff --git a/src/components/ButtonGroup/ButtonGroup.jsx b/src/components/ButtonGroup/ButtonGroup.jsx index b97642e4..a567d659 100644 --- a/src/components/ButtonGroup/ButtonGroup.jsx +++ b/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 = ({ diff --git a/src/components/ButtonGroup/ButtonGroup.scss b/src/components/ButtonGroup/ButtonGroup.module.scss similarity index 100% rename from src/components/ButtonGroup/ButtonGroup.scss rename to src/components/ButtonGroup/ButtonGroup.module.scss diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx index c733da5f..14bbdd08 100644 --- a/src/components/Card/Card.jsx +++ b/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, diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.module.scss similarity index 100% rename from src/components/Card/Card.scss rename to src/components/Card/Card.module.scss diff --git a/src/components/Card/CardBody.jsx b/src/components/Card/CardBody.jsx index 0c99b453..9c44ba43 100644 --- a/src/components/Card/CardBody.jsx +++ b/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, diff --git a/src/components/Card/CardFooter.jsx b/src/components/Card/CardFooter.jsx index 00388e78..df74695d 100644 --- a/src/components/Card/CardFooter.jsx +++ b/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, diff --git a/src/components/CheckboxField/CheckboxField.jsx b/src/components/CheckboxField/CheckboxField.jsx index 0ce6f715..33d4fc18 100644 --- a/src/components/CheckboxField/CheckboxField.jsx +++ b/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 { diff --git a/src/components/CheckboxField/CheckboxField.scss b/src/components/CheckboxField/CheckboxField.module.scss similarity index 100% rename from src/components/CheckboxField/CheckboxField.scss rename to src/components/CheckboxField/CheckboxField.module.scss diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx index 63993e4c..dfddfb36 100644 --- a/src/components/FileInputField/FileInputField.jsx +++ b/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 { diff --git a/src/components/FileInputField/FileInputField.scss b/src/components/FileInputField/FileInputField.module.scss similarity index 100% rename from src/components/FileInputField/FileInputField.scss rename to src/components/FileInputField/FileInputField.module.scss diff --git a/src/components/FormLayout/FormLayout.jsx b/src/components/FormLayout/FormLayout.jsx index f5fff9ad..097c2d0a 100644 --- a/src/components/FormLayout/FormLayout.jsx +++ b/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']; diff --git a/src/components/FormLayout/FormLayout.scss b/src/components/FormLayout/FormLayout.module.scss similarity index 100% rename from src/components/FormLayout/FormLayout.scss rename to src/components/FormLayout/FormLayout.module.scss diff --git a/src/components/FormLayout/FormLayoutCustomField.jsx b/src/components/FormLayout/FormLayoutCustomField.jsx index 04309262..bd76b37c 100644 --- a/src/components/FormLayout/FormLayoutCustomField.jsx +++ b/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) { diff --git a/src/components/FormLayout/FormLayoutCustomField.scss b/src/components/FormLayout/FormLayoutCustomField.module.scss similarity index 100% rename from src/components/FormLayout/FormLayoutCustomField.scss rename to src/components/FormLayout/FormLayoutCustomField.module.scss diff --git a/src/components/Grid/Grid.jsx b/src/components/Grid/Grid.jsx index 0e0799ff..d3f8f238 100644 --- a/src/components/Grid/Grid.jsx +++ b/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]; diff --git a/src/components/Grid/Grid.scss b/src/components/Grid/Grid.module.scss similarity index 100% rename from src/components/Grid/Grid.scss rename to src/components/Grid/Grid.module.scss diff --git a/src/components/Grid/GridSpan.jsx b/src/components/Grid/GridSpan.jsx index 4c6df1d8..7d778483 100644 --- a/src/components/Grid/GridSpan.jsx +++ b/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, diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx index 98a8a843..e68eb9bd 100644 --- a/src/components/InputGroup/InputGroup.jsx +++ b/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, diff --git a/src/components/InputGroup/InputGroup.scss b/src/components/InputGroup/InputGroup.module.scss similarity index 100% rename from src/components/InputGroup/InputGroup.scss rename to src/components/InputGroup/InputGroup.module.scss diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx index dfcd993f..b152754b 100644 --- a/src/components/Modal/Modal.jsx +++ b/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, diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.module.scss similarity index 100% rename from src/components/Modal/Modal.scss rename to src/components/Modal/Modal.module.scss diff --git a/src/components/Modal/ModalBody.jsx b/src/components/Modal/ModalBody.jsx index 8d4bf2dc..98063a03 100644 --- a/src/components/Modal/ModalBody.jsx +++ b/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, diff --git a/src/components/Modal/ModalBody.scss b/src/components/Modal/ModalBody.module.scss similarity index 100% rename from src/components/Modal/ModalBody.scss rename to src/components/Modal/ModalBody.module.scss diff --git a/src/components/Modal/ModalCloseButton.jsx b/src/components/Modal/ModalCloseButton.jsx index b6abde14..919d0fc5 100644 --- a/src/components/Modal/ModalCloseButton.jsx +++ b/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 { diff --git a/src/components/Modal/ModalCloseButton.scss b/src/components/Modal/ModalCloseButton.module.scss similarity index 100% rename from src/components/Modal/ModalCloseButton.scss rename to src/components/Modal/ModalCloseButton.module.scss diff --git a/src/components/Modal/ModalContent.jsx b/src/components/Modal/ModalContent.jsx index c5656a29..0bb26405 100644 --- a/src/components/Modal/ModalContent.jsx +++ b/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, diff --git a/src/components/Modal/ModalContent.scss b/src/components/Modal/ModalContent.module.scss similarity index 100% rename from src/components/Modal/ModalContent.scss rename to src/components/Modal/ModalContent.module.scss diff --git a/src/components/Modal/ModalFooter.jsx b/src/components/Modal/ModalFooter.jsx index 49e31149..525bd6cb 100644 --- a/src/components/Modal/ModalFooter.jsx +++ b/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, diff --git a/src/components/Modal/ModalFooter.scss b/src/components/Modal/ModalFooter.module.scss similarity index 100% rename from src/components/Modal/ModalFooter.scss rename to src/components/Modal/ModalFooter.module.scss diff --git a/src/components/Modal/ModalHeader.jsx b/src/components/Modal/ModalHeader.jsx index dbc1b35d..589cc897 100644 --- a/src/components/Modal/ModalHeader.jsx +++ b/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, diff --git a/src/components/Modal/ModalHeader.scss b/src/components/Modal/ModalHeader.module.scss similarity index 100% rename from src/components/Modal/ModalHeader.scss rename to src/components/Modal/ModalHeader.module.scss diff --git a/src/components/Modal/ModalTitle.jsx b/src/components/Modal/ModalTitle.jsx index 17efda65..f11dd825 100644 --- a/src/components/Modal/ModalTitle.jsx +++ b/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, diff --git a/src/components/Modal/ModalTitle.scss b/src/components/Modal/ModalTitle.module.scss similarity index 100% rename from src/components/Modal/ModalTitle.scss rename to src/components/Modal/ModalTitle.module.scss diff --git a/src/components/Paper/Paper.jsx b/src/components/Paper/Paper.jsx index e8b037a4..6f9621ca 100644 --- a/src/components/Paper/Paper.jsx +++ b/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, diff --git a/src/components/Paper/Paper.scss b/src/components/Paper/Paper.module.scss similarity index 100% rename from src/components/Paper/Paper.scss rename to src/components/Paper/Paper.module.scss diff --git a/src/components/Popover/Popover.jsx b/src/components/Popover/Popover.jsx index c30e9bb8..484970ca 100644 --- a/src/components/Popover/Popover.jsx +++ b/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 { diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.module.scss similarity index 100% rename from src/components/Popover/Popover.scss rename to src/components/Popover/Popover.module.scss diff --git a/src/components/Popover/PopoverWrapper.jsx b/src/components/Popover/PopoverWrapper.jsx index 9f248c71..63976492 100644 --- a/src/components/Popover/PopoverWrapper.jsx +++ b/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; - diff --git a/src/components/Popover/PopoverWrapper.scss b/src/components/Popover/PopoverWrapper.module.scss similarity index 100% rename from src/components/Popover/PopoverWrapper.scss rename to src/components/Popover/PopoverWrapper.module.scss diff --git a/src/components/Radio/Radio.jsx b/src/components/Radio/Radio.jsx index 67f4eb78..b1fb853f 100644 --- a/src/components/Radio/Radio.jsx +++ b/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, diff --git a/src/components/Radio/Radio.scss b/src/components/Radio/Radio.module.scss similarity index 100% rename from src/components/Radio/Radio.scss rename to src/components/Radio/Radio.module.scss diff --git a/src/components/ScrollView/ScrollView.jsx b/src/components/ScrollView/ScrollView.jsx index 985cd00a..eb1532c1 100644 --- a/src/components/ScrollView/ScrollView.jsx +++ b/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 diff --git a/src/components/ScrollView/ScrollView.scss b/src/components/ScrollView/ScrollView.module.scss similarity index 100% rename from src/components/ScrollView/ScrollView.scss rename to src/components/ScrollView/ScrollView.module.scss diff --git a/src/components/SelectField/SelectField.jsx b/src/components/SelectField/SelectField.jsx index 969ce0e2..d1cd1c34 100644 --- a/src/components/SelectField/SelectField.jsx +++ b/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 { diff --git a/src/components/SelectField/SelectField.scss b/src/components/SelectField/SelectField.module.scss similarity index 100% rename from src/components/SelectField/SelectField.scss rename to src/components/SelectField/SelectField.module.scss diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx index 7165ccc0..4b4f4103 100644 --- a/src/components/Table/Table.jsx +++ b/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, diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.module.scss similarity index 100% rename from src/components/Table/Table.scss rename to src/components/Table/Table.module.scss diff --git a/src/components/Table/_components/TableBodyCell/TableBodyCell.jsx b/src/components/Table/_components/TableBodyCell/TableBodyCell.jsx index d3dfd760..1ee1109e 100644 --- a/src/components/Table/_components/TableBodyCell/TableBodyCell.jsx +++ b/src/components/Table/_components/TableBodyCell/TableBodyCell.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styles from '../TableCell.scss'; +import styles from '../TableCell.module.scss'; export const TableBodyCell = ({ format, diff --git a/src/components/Table/_components/TableCell.scss b/src/components/Table/_components/TableCell.module.scss similarity index 100% rename from src/components/Table/_components/TableCell.scss rename to src/components/Table/_components/TableCell.module.scss diff --git a/src/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx b/src/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx index 482d32d3..f182468f 100644 --- a/src/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx +++ b/src/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Button } from '../../../Button'; -import styles from '../TableCell.scss'; +import styles from '../TableCell.module.scss'; export const TableHeaderCell = ({ column, diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx index 9a2ef918..449c8733 100644 --- a/src/components/Tabs/Tabs.jsx +++ b/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, diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.module.scss similarity index 100% rename from src/components/Tabs/Tabs.scss rename to src/components/Tabs/Tabs.module.scss diff --git a/src/components/Tabs/TabsItem.jsx b/src/components/Tabs/TabsItem.jsx index 2880a41e..35b7b5a9 100644 --- a/src/components/Tabs/TabsItem.jsx +++ b/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, diff --git a/src/components/Tabs/TabsItem.scss b/src/components/Tabs/TabsItem.module.scss similarity index 100% rename from src/components/Tabs/TabsItem.scss rename to src/components/Tabs/TabsItem.module.scss diff --git a/src/components/Text/Text.jsx b/src/components/Text/Text.jsx index e7861edd..64f1c73e 100644 --- a/src/components/Text/Text.jsx +++ b/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, diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.module.scss similarity index 100% rename from src/components/Text/Text.scss rename to src/components/Text/Text.module.scss diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx index f51a9709..f1c11ebe 100644 --- a/src/components/TextArea/TextArea.jsx +++ b/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 { diff --git a/src/components/TextArea/TextArea.scss b/src/components/TextArea/TextArea.module.scss similarity index 100% rename from src/components/TextArea/TextArea.scss rename to src/components/TextArea/TextArea.module.scss diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx index 4970d389..c3967256 100644 --- a/src/components/TextField/TextField.jsx +++ b/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; diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.module.scss similarity index 100% rename from src/components/TextField/TextField.scss rename to src/components/TextField/TextField.module.scss diff --git a/src/components/TextLink/TextLink.jsx b/src/components/TextLink/TextLink.jsx index 2b38081b..e98889b2 100644 --- a/src/components/TextLink/TextLink.jsx +++ b/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, diff --git a/src/components/TextLink/TextLink.scss b/src/components/TextLink/TextLink.module.scss similarity index 100% rename from src/components/TextLink/TextLink.scss rename to src/components/TextLink/TextLink.module.scss diff --git a/src/components/Toggle/Toggle.jsx b/src/components/Toggle/Toggle.jsx index 48081a9f..9af911a9 100644 --- a/src/components/Toggle/Toggle.jsx +++ b/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 { diff --git a/src/components/Toggle/Toggle.scss b/src/components/Toggle/Toggle.module.scss similarity index 100% rename from src/components/Toggle/Toggle.scss rename to src/components/Toggle/Toggle.module.scss diff --git a/src/components/Toolbar/Toolbar.jsx b/src/components/Toolbar/Toolbar.jsx index 770974d7..cef878f0 100644 --- a/src/components/Toolbar/Toolbar.jsx +++ b/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, diff --git a/src/components/Toolbar/Toolbar.scss b/src/components/Toolbar/Toolbar.module.scss similarity index 100% rename from src/components/Toolbar/Toolbar.scss rename to src/components/Toolbar/Toolbar.module.scss diff --git a/src/components/Toolbar/ToolbarGroup.jsx b/src/components/Toolbar/ToolbarGroup.jsx index 17944247..2f10a7af 100644 --- a/src/components/Toolbar/ToolbarGroup.jsx +++ b/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, diff --git a/src/components/Toolbar/ToolbarItem.jsx b/src/components/Toolbar/ToolbarItem.jsx index 98fcd6b1..88a500dd 100644 --- a/src/components/Toolbar/ToolbarItem.jsx +++ b/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, diff --git a/src/docs/contribute/css.md b/src/docs/contribute/css.md index aa770bf5..8b87bb65 100644 --- a/src/docs/contribute/css.md +++ b/src/docs/contribute/css.md @@ -56,10 +56,10 @@ There are three simple rules to follow when organizing React UI CSS: ├── * ├── ├── … - ├── _settings.scss Component's non-themeable Sass variables - ├── _theme.scss Component's Sass interface to its CSS custom properties in `theme.scss` - ├── _tools.scss Component's Sass mixins and functions - ├── Component.scss Component's main stylesheet + ├── _settings.scss Component's non-themeable Sass variables + ├── _theme.scss Component's Sass interface to its CSS custom properties in `theme.scss` + ├── _tools.scss Component's Sass mixins and functions + ├── Component.module.scss Component's main stylesheet loaded as CSS Module └── … ├── … ├── styles Partials for top-level Sass endpoints and shared styles @@ -79,9 +79,9 @@ There are three simple rules to follow when organizing React UI CSS: ## CSS Modules -React UI leverages [CSS modules] (not to be confused with [modular CSS -specification] of the same name) to take advantage of writing native CSS -(meaning “not JSS or CSS in JS”). Together with +For components, React UI leverages [CSS modules] (not to be confused with +[modular CSS specification] of the same name) to take advantage of writing +native CSS (meaning “not JSS or CSS in JS”). Together with [Sass](#preprocessing-with-sass), CSS modules represent flexibility and popular programming features needed to author modern stylesheets perfectly familiar to traditional CSS developers. @@ -109,7 +109,7 @@ For example, this JSX: … with this SCSS: ```scss -// Button.scss +// Button.module.scss .root { // … @@ -130,23 +130,16 @@ For example, this JSX: … produces following CSS class names: -- `Button__root__2yVxr5IZ` -- `Button__beforeLabel__1rrmrrWj` -- `Button__afterLabel__38eMTilM` -- `Button__label__23iTNlfS` +- `Button-module__root__2yVxr5IZ` +- `Button-module__beforeLabel__1rrmrrWj` +- `Button-module__afterLabel__38eMTilM` +- `Button-module__label__23iTNlfS` Resulting CSS class names are both unique and human-readable at the same time which is convenient for development. Class names are further shortened and obfuscated for production environments. -### Helpers and Utilities - -There are also global helper and utility classes (both documented as CSS Helpers -for the sake of comprehensibility for non-CSS guys) that can be used by -developers and thus remain unaltered by CSS modules. For example, -`:global(.display-block)` selector produces `display-block` CSS class. - -## Class Naming Rules +### Class Naming Rules Following rules make it clear both in JSX and CSS what is affected by a CSS class. @@ -200,6 +193,16 @@ There are three kinds of custom properties used: other custom property types. Refer to the [theming overview] to learn how their names are created. +## Helpers and Utilities + +There are also global helper and utility classes (both documented as CSS Helpers +for the sake of comprehensibility for non-CSS guys) that can be used by +developers and thus remain unaltered by CSS modules. + +### Class Naming Rules + +Class names must use kebab-case notation to be usable in HTML context. + ## Preprocessing with Sass All React UI CSS source is written in SCSS syntax of [Sass] preprocessor. diff --git a/src/styles/helpers/_animation.scss b/src/styles/helpers/_animation.scss index 25b2dd98..4bd6956d 100644 --- a/src/styles/helpers/_animation.scss +++ b/src/styles/helpers/_animation.scss @@ -12,10 +12,10 @@ $_spin-easing: cubic-bezier(0.31, 0.3, 0.34, -0.17); } } -:global(.animation-spin-clockwise) { +.animation-spin-clockwise { animation: spin $_spin-duration $_spin-easing infinite; } -:global(.animation-spin-counterclockwise) { +.animation-spin-counterclockwise { animation: spin $_spin-duration $_spin-easing infinite reverse; } diff --git a/src/styles/tools/_utilities.scss b/src/styles/tools/_utilities.scss index d60bb54f..a64a7676 100644 --- a/src/styles/tools/_utilities.scss +++ b/src/styles/tools/_utilities.scss @@ -20,7 +20,7 @@ // Don't prefix if value key is null (e.g. with shadow class) $property-class-modifier: if($key, "-" + $key, ""); - :global(.#{$property-class + $infix + $property-class-modifier}) { + .#{$property-class + $infix + $property-class-modifier} { @each $property in $properties { // stylelint-disable-next-line declaration-no-important #{$property}: $value !important; diff --git a/webpack.config.babel.js b/webpack.config.babel.js index 17f8bc0b..6130f7e7 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -45,6 +45,7 @@ module.exports = (env, argv) => ({ loader: 'css-loader', options: { modules: { + auto: true, // Enable CSS Modules only for files with `.module.*` extension localIdentName: argv.mode === 'production' ? '[hash:base64:8]' : '[name]__[local]__[hash:base64:8]',