TASK: Rename all import style from "./style.css" to style.module.scss

Author: mhsdesign

esbuild.js

@@ -66,19 +66,7 @@ require('esbuild').build({
             },
         },
         stylePlugin({
-            // process all .css and .scss files
-            // but exclude those files that are in the dir
-            // - @ckeditor
-            // - @fortawesome/fontawesome-svg-core
-            cssModulesMatch: /^((?!\/@ckeditor|\/@fortawesome\/fontawesome-svg-core)).*\.s?css$/,
-            postcss: {
-                plugins: [
-                    require('postcss-import'),
-                    require('postcss-nested'),
-                    require('postcss-hexrgba'),
-                    require('autoprefixer'),
-                ]
-            }
+            cssModulesMatch: /\.module\.scss$/
         }),
     ],
     define: {

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/EditorToolbar.js

@@ -4,7 +4,7 @@ import mergeClassNames from 'classnames';
 
 import {neos} from '@neos-project/neos-ui-decorators';
 
-import style from './index.css';
+import style from './index.module.scss';
 import {renderToolbarComponents} from './Helpers/index';
 
 @neos(globalRegistry => ({

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/LinkButton.js

@@ -8,7 +8,7 @@ import {IconButton} from '@neos-project/react-ui-components';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {selectors, actions} from '@neos-project/neos-ui-redux-store';
 
-import style from './LinkButton.css';
+import style from './LinkButton.module.scss';
 
 @connect($transform({
     isOpen: selectors.UI.ContentCanvas.isLinkEditorOpen

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/LinkButton.css renamed to packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/LinkButton.module.scss

@@ -5,7 +5,7 @@ import {IconButton} from '@neos-project/react-ui-components';
 import mergeClassNames from 'classnames';
 import {neos} from '@neos-project/neos-ui-decorators';
 
-import style from './TableButton.css';
+import style from './TableButton.module.scss';
 import './TableStyles.vanilla-css';
 
 const numberRange = (start, end) => new Array(end - start + 1).fill().map((d, i) => i + start);

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableButton.js

@@ -6,7 +6,7 @@ import {$get} from 'plow-js';
 import {neos} from '@neos-project/neos-ui-decorators';
 import ckeIcons from './icons';
 
-import style from './TableDropDown.css';
+import style from './TableDropDown.module.scss';
 
 @neos(globalRegistry => ({
     nodeTypesRegistry: globalRegistry.get('@neos-project/neos-ui-contentrepository'),

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableButton.css renamed to packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableButton.module.scss

@@ -7,7 +7,7 @@ import IconButton from '@neos-project/react-ui-components/src/IconButton/';
 import {neos} from '@neos-project/neos-ui-decorators';
 import I18n from '@neos-project/neos-ui-i18n';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 const MODE_AFTER = 'after';
 const MODE_BEFORE = 'before';

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableDropDown.js

@@ -9,7 +9,7 @@ import {Tooltip} from '@neos-project/react-ui-components';
 import I18n from '@neos-project/neos-ui-i18n';
 import {neos} from '@neos-project/neos-ui-decorators';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 import {Icon} from '@neos-project/react-ui-components';
 

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableDropDown.css renamed to packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableDropDown.module.scss

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import style from './style.css';
+import style from './style.module.scss';
 import IconButton from '@neos-project/react-ui-components/src/IconButton/';
 import {neos} from '@neos-project/neos-ui-decorators';
 

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/index.css renamed to packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/index.module.scss

@@ -6,7 +6,7 @@ import CheckBox from '@neos-project/react-ui-components/src/CheckBox/';
 import Label from '@neos-project/react-ui-components/src/Label/';
 import I18n from '@neos-project/neos-ui-i18n';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 // ToDo: Move into re-usable fn - Maybe into `util-helpers`?
 const toBoolean = val => {

packages/neos-ui-containers/src/InsertModeSelector/index.js

@@ -8,7 +8,7 @@ import Label from '@neos-project/react-ui-components/src/Label/';
 import I18n from '@neos-project/neos-ui-i18n';
 import {neos} from '@neos-project/neos-ui-decorators';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 @neos(globalRegistry => ({
     secondaryEditorsRegistry: globalRegistry.get('inspector').get('secondaryEditors')

packages/neos-ui-containers/src/InsertModeSelector/style.css renamed to packages/neos-ui-containers/src/InsertModeSelector/style.module.scss

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import style from './style.css';
+import style from './style.module.scss';
 import IconButton from '@neos-project/react-ui-components/src/IconButton/';
 import {neos} from '@neos-project/neos-ui-decorators';
 

packages/neos-ui-editors/src/EditorEnvelope/index.js

@@ -5,7 +5,7 @@ import {AssetUpload} from '../../../../Library/index';
 
 import {Thumbnail} from '../../Utils/index';
 import {Icon} from '@neos-project/react-ui-components';
-import style from './style.css';
+import style from './style.module.scss';
 
 export default class PreviewScreen extends PureComponent {
     static propTypes = {

packages/neos-ui-editors/src/EditorEnvelope/style.css renamed to packages/neos-ui-editors/src/EditorEnvelope/style.module.scss

@@ -6,7 +6,7 @@ import TextInput from '@neos-project/react-ui-components/src/TextInput/';
 import CheckBox from '@neos-project/react-ui-components/src/CheckBox/';
 import I18n from '@neos-project/neos-ui-i18n';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 const buildResizeAdjustment = (width, height) => ({
     allowUpScaling: null,

packages/neos-ui-editors/src/Editors/AssetEditor/Components/Controls/index.js

@@ -9,7 +9,7 @@ import {neos} from '@neos-project/neos-ui-decorators';
 import {PreviewScreen, Controls, ResizeControls} from './Components/index';
 import {Image, CROP_IMAGE_ADJUSTMENT, RESIZE_IMAGE_ADJUSTMENT} from './Utils/index';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 const DEFAULT_FEATURES = {
     crop: true,

packages/neos-ui-editors/src/Editors/AssetEditor/Components/Controls/style.css renamed to packages/neos-ui-editors/src/Editors/AssetEditor/Components/Controls/style.module.scss

@@ -7,7 +7,7 @@ import mergeClassNames from 'classnames';
 import SelectBox from '@neos-project/react-ui-components/src/SelectBox/';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {selectors} from '@neos-project/neos-ui-redux-store';
-import style from './style.css';
+import style from './style.module.scss';
 
 @neos(globalRegistry => ({
     nodeTypesRegistry: globalRegistry.get('@neos-project/neos-ui-contentrepository'),

packages/neos-ui-editors/src/Editors/Boolean/index.js

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import {selectors, actions} from '@neos-project/neos-ui-redux-store';
 import mergeClassNames from 'classnames';
 import {$transform} from 'plow-js';
-import style from './style.css';
+import style from './style.module.scss';
 
 @neos(globalRegistry => {
     return {

packages/neos-ui-editors/src/Editors/Boolean/style.css renamed to packages/neos-ui-editors/src/Editors/Boolean/style.module.scss

@@ -1,7 +1,7 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {neos} from '@neos-project/neos-ui-decorators';
-import style from './style.css';
+import style from './style.module.scss';
 
 @neos(globalRegistry => {
     return {

packages/neos-ui-editors/src/Editors/CodeMirror/index.js

@@ -4,7 +4,7 @@ import unescape from 'lodash.unescape';
 import slugify from '@sindresorhus/slugify';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {TextInput, IconButton} from '@neos-project/react-ui-components';
-import style from './style.css';
+import style from './style.module.scss';
 
 const defaultOptions = {
     autoFocus: false,

packages/neos-ui-editors/src/Editors/CodeMirror/style.css renamed to packages/neos-ui-editors/src/Editors/CodeMirror/style.module.scss

@@ -6,7 +6,7 @@ import mergeClassNames from 'classnames';
 import Dropzone from 'react-dropzone';
 import Icon from '@neos-project/react-ui-components/src/Icon/';
 import backend from '@neos-project/neos-ui-backend-connector';
-import style from './style.css';
+import style from './style.module.scss';
 import {selectors} from '@neos-project/neos-ui-redux-store';
 
 @connect($transform({

packages/neos-ui-editors/src/Editors/Image/Components/Controls/index.js

@@ -12,7 +12,7 @@ import {selectors, actions} from '@neos-project/neos-ui-redux-store';
 import {isUri, isEmail} from '@neos-project/utils-helpers';
 
 import {sanitizeOptions, sanitizeOption} from './sanitizeOptions';
-import style from './LinkInput.css';
+import style from './LinkInput.module.scss';
 
 // TODO: extract this isInternalLink logic into a registry, possibly defining a schema and a custom data loader
 const isUriOrInternalLink = link => Boolean(isUri(link) || link.indexOf('node://') === 0 || link.indexOf('asset://') === 0);

packages/neos-ui-editors/src/Editors/Image/Components/Controls/style.css renamed to packages/neos-ui-editors/src/Editors/Image/Components/Controls/style.module.scss

@@ -3,7 +3,7 @@ import {$get} from 'plow-js';
 
 import {TextInput, CheckBox} from '@neos-project/react-ui-components';
 
-import style from './LinkInput.css';
+import style from './LinkInput.module.scss';
 
 const LinkInputOptions = ({
     i18nRegistry,

packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/index.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 import {$transform, $get} from 'plow-js';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {EditorToolbar} from '@neos-project/neos-ui-ckeditor5-bindings/src/EditorToolbar';
-import style from './index.css';
+import style from './index.module.scss';
 
 @neos(globalRegistry => ({
     globalRegistry,

packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/style.css renamed to packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/style.module.scss

@@ -5,7 +5,7 @@ import IconButton from '@neos-project/react-ui-components/src/IconButton/';
 import DropDown from '@neos-project/react-ui-components/src/DropDown/';
 
 import {AspectRatioOption, NullAspectRatioStrategy} from '../model';
-import style from './style.css';
+import style from './style.module.scss';
 
 class AspectRatioDropDownitem extends PureComponent {
     static propTypes = {

packages/neos-ui-editors/src/Editors/Image/Components/ResizeControls/index.js

@@ -9,7 +9,7 @@ import {neos} from '@neos-project/neos-ui-decorators';
 
 import AspectRatioDropDown from './AspectRatioDropDown/index';
 import CropConfiguration, {CustomAspectRatioOption, LockedAspectRatioStrategy} from './model.js';
-import style from './style.css';
+import style from './style.module.scss';
 
 import './react_crop.vanilla-css';
 

packages/neos-ui-editors/src/Editors/Image/Components/ResizeControls/style.css renamed to packages/neos-ui-editors/src/Editors/Image/Components/ResizeControls/style.module.scss

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {$get} from 'plow-js';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 @neos()
 class MediaDetailsScreen extends PureComponent {

packages/neos-ui-editors/src/Editors/Image/index.js

@@ -4,7 +4,7 @@ import {neos} from '@neos-project/neos-ui-decorators';
 import {$get} from 'plow-js';
 import {urlWithParams} from '@neos-project/utils-helpers/src/urlWithParams';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 @neos()
 class MediaSelectionScreen extends PureComponent {

packages/neos-ui-editors/src/Editors/Image/style.css renamed to packages/neos-ui-editors/src/Editors/Image/style.module.scss

@@ -6,7 +6,7 @@ import {selectors} from '@neos-project/neos-ui-redux-store';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {Tooltip} from '@neos-project/react-ui-components';
 import throttle from 'lodash.throttle';
-import style from './style.css';
+import style from './style.module.scss';
 
 import {findAllOccurrencesOfNodePropertyInGuestFrame, getAbsolutePositionOfElementInGuestFrame, getGuestFrameWindow, getGuestFrameBody} from '@neos-project/neos-ui-guest-frame/src/dom';
 

packages/neos-ui-editors/src/Editors/NodeType/index.js

@@ -12,7 +12,7 @@ import {
 } from '@neos-project/neos-ui-guest-frame/src/dom';
 
 import {neos} from '@neos-project/neos-ui-decorators';
-import style from './style.css';
+import style from './style.module.scss';
 
 @neos(globalRegistry => ({
     nodeTypesRegistry: globalRegistry.get('@neos-project/neos-ui-contentrepository'),

packages/neos-ui-editors/src/Editors/NodeType/style.css renamed to packages/neos-ui-editors/src/Editors/NodeType/style.module.scss

@@ -7,7 +7,7 @@ import {neos} from '@neos-project/neos-ui-decorators';
 
 import NodeToolbar from './NodeToolbar/index';
 
-import style from './style.css';
+import style from './style.module.scss';
 import InlineValidationErrors from './InlineValidationErrors/index';
 import {isEqualSet} from '@neos-project/utils-helpers';
 

packages/neos-ui-editors/src/Editors/PluginViews/index.js

@@ -4,7 +4,7 @@
 //
 import animate from 'amator';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 //
 // Get the guest frame's document object

packages/neos-ui-editors/src/Editors/PluginViews/style.css renamed to packages/neos-ui-editors/src/Editors/PluginViews/style.module.scss

@@ -8,7 +8,7 @@ import {
 } from './dom';
 import initializePropertyDomNode from './initializePropertyDomNode';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 export default ({store, globalRegistry, nodeTypesRegistry, inlineEditorRegistry, nodes}) => contentDomNode => {
     const contextPath = contentDomNode.getAttribute('data-__neos-node-contextpath');

packages/neos-ui-editors/src/Editors/Range/index.js

@@ -14,7 +14,7 @@ import {
     dispatchCustomEvent
 } from './dom';
 
-import style from './style.css';
+import style from './style.module.scss';
 import {SelectionModeTypes} from '@neos-project/neos-ts-interfaces';
 
 //

packages/neos-ui-editors/src/Editors/Range/style.css renamed to packages/neos-ui-editors/src/Editors/Range/style.module.scss

@@ -10,7 +10,7 @@ import {selectors} from '@neos-project/neos-ui-redux-store';
 import Icon from '@neos-project/react-ui-components/src/Icon/';
 import Button from '@neos-project/react-ui-components/src/Button/';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 @connect(state => {
     const isDirty = selectors.UI.Inspector.isDirty(state);

packages/neos-ui-editors/src/Editors/UriPathSegment/index.js

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import style from './column.css';
+import style from './column.module.scss';
 
 export default class Column extends PureComponent {
     static propTypes = {

packages/neos-ui-editors/src/Editors/UriPathSegment/style.css renamed to packages/neos-ui-editors/src/Editors/UriPathSegment/style.module.scss

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import style from './hero.css';
+import style from './hero.module.scss';
 
 export default class Hero extends PureComponent {
     static propTypes = {

packages/neos-ui-editors/src/Library/AssetUpload.js

@@ -1,7 +1,7 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {$get} from 'plow-js';
-import style from './style.css';
+import style from './style.module.scss';
 import dataLoader from '../DataLoader/index';
 import Hero from './hero';
 import Column from './column';

packages/neos-ui-editors/src/Library/LinkInput.js

@@ -6,7 +6,7 @@ import {selectors} from '@neos-project/neos-ui-redux-store';
 import Widget from '../../Widget/index';
 import Icon from '@neos-project/react-ui-components/src/Icon/';
 import I18n from '@neos-project/neos-ui-i18n';
-import style from './style.css';
+import style from './style.module.scss';
 import isEqual from 'lodash.isequal';
 
 /*

packages/neos-ui-editors/src/Library/LinkInput.css renamed to packages/neos-ui-editors/src/Library/LinkInput.module.scss

@@ -1,7 +1,7 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {$get} from 'plow-js';
-import style from './style.css';
+import style from './style.module.scss';
 import dataLoader from '../DataLoader/index';
 import Icon from '@neos-project/react-ui-components/src/Icon/';
 

packages/neos-ui-editors/src/Library/LinkInputOptions.js

@@ -4,7 +4,7 @@ import {connect} from 'react-redux';
 import {$get} from 'plow-js';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {selectors} from '@neos-project/neos-ui-redux-store';
-import style from './style.css';
+import style from './style.module.scss';
 
 @connect(state => ({
     focusedNodeContextPath: selectors.CR.Nodes.focusedNodePathSelector(state),

packages/neos-ui-editors/src/Library/style.css renamed to packages/neos-ui-editors/src/Library/style.module.scss

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import style from './style.css';
+import style from './style.module.scss';
 import I18n from '@neos-project/neos-ui-i18n';
 
 export default class Widget extends PureComponent {

packages/neos-ui-editors/src/SecondaryEditors/CKEditorWrap/index.js

@@ -10,7 +10,7 @@ import {neos} from '@neos-project/neos-ui-decorators';
 
 import Frame from '@neos-project/react-ui-components/src/Frame/';
 
-import style from './style.css';
+import style from './style.module.scss';
 
 @connect($transform({
     isFringeLeft: $get('ui.leftSideBar.isHidden'),

packages/neos-ui-editors/src/SecondaryEditors/CKEditorWrap/index.css renamed to packages/neos-ui-editors/src/SecondaryEditors/CKEditorWrap/index.module.scss

@@ -6,7 +6,7 @@ import Button from '@neos-project/react-ui-components/src/Button/';
 
 import I18n from '@neos-project/neos-ui-i18n';
 
-import style from '../style.css';
+import style from '../style.module.scss';
 import {TARGET_WINDOW} from '../constants';
 
 export default class MenuItem extends PureComponent {

packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/AspectRatioDropDown/index.js

@@ -9,7 +9,7 @@ import I18n from '@neos-project/neos-ui-i18n';
 
 import MenuItem from '../MenuItem/index';
 import {TARGET_WINDOW} from '../constants';
-import style from '../style.css';
+import style from '../style.module.scss';
 
 export default class MenuItemGroup extends PureComponent {
     static propTypes = {