Merge pull request #3217 from neos/feature/esbuild-scss-modules

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

Author: markusguenther

esbuild.js

@@ -77,8 +77,6 @@ const options = {
         },
         cssModules(
             {
-                includeFilter: /\.css$/,
-                excludeFilter: /@ckeditor\/|@fortawesome\/fontawesome-svg-core\/|styleHostOnly\.css|normalize\.css/,
                 visitor: compileWithCssVariables(),
                 targets: {
                     chrome: 80 // aligns somewhat to es2020

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.css';
 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.css';
 
 @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.css

@@ -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.css';
 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.css';
 
 @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.css

@@ -8,7 +8,7 @@ import Icon from '@neos-project/react-ui-components/src/Icon/';
 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.css';
 
 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.css';
 
 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.css

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import style from './style.css';
+import style from './style.module.css';
 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.css

@@ -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.css';
 
 // 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.css';
 
 @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.css

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import style from './style.css';
+import style from './style.module.css';
 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.css';
 
 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.css

@@ -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.css';
 
 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.css';
 
 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.css

@@ -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.css';
 
 @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.css';
 
 @neos(globalRegistry => {
     return {

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

@@ -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.css';
 
 @neos(globalRegistry => {
     return {

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

@@ -6,7 +6,7 @@ import backend from '@neos-project/neos-ui-backend-connector';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {selectors} from '@neos-project/neos-ui-redux-store';
 import {TextInput, IconButton} from '@neos-project/react-ui-components';
-import style from './style.css';
+import style from './style.module.css';
 
 const defaultOptions = {
     autoFocus: false,

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

@@ -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.css';
 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.css';
 
 // 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.css

@@ -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.css';
 
 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.css';
 
 @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.css

@@ -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.css';
 
 class AspectRatioDropDownitem extends PureComponent {
     static propTypes = {

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

@@ -10,7 +10,7 @@ import {$get} from 'plow-js';
 
 import AspectRatioDropDown from './AspectRatioDropDown/index';
 import CropConfiguration, {CustomAspectRatioOption, LockedAspectRatioStrategy} from './model.js';
-import style from './style.css';
+import style from './style.module.css';
 
 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.css

@@ -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.css';
 
 @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.css';
 
 @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.css

@@ -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.css';
 
 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.css';
 
 @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.css

@@ -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.css';
 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.css';
 
 //
 // 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.css

@@ -8,7 +8,7 @@ import {
 } from './dom';
 import initializePropertyDomNode from './initializePropertyDomNode';
 
-import style from './style.css';
+import style from './style.module.css';
 
 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.css';
 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.css

@@ -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.css';
 
 @connect(state => {
     const isDirty = selectors.UI.Inspector.isDirty(state);

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

@@ -1,5 +1,5 @@
 .secondaryInspector {
-    composes: content from '@neos-project/neos-ui/src/Containers/style.css';
+    composes: content from '@neos-project/neos-ui/src/Containers/style.module.css';
     position: relative;
     background: var(--colors-ContrastDarker);
     border: 1px solid var(--colors-ContrastDark);

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

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

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

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

packages/neos-ui-editors/src/Library/LinkInput.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.css';
 import dataLoader from '../DataLoader/index';
 import Hero from './hero';
 import Column from './column';

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

@@ -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.css';
 import isEqual from 'lodash.isequal';
 
 /*

packages/neos-ui-editors/src/Library/LinkInputOptions.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.css';
 import dataLoader from '../DataLoader/index';
 import Icon from '@neos-project/react-ui-components/src/Icon/';
 

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

@@ -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.css';
 
 @connect(state => ({
     focusedNodeContextPath: selectors.CR.Nodes.focusedNodePathSelector(state),

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

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

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {$get, $transform} from 'plow-js';
 import mergeClassNames from 'classnames';
-import style from './style.css';
+import style from './style.module.css';
 
 import FlashMessages from './FlashMessages/index';
 

packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/AspectRatioDropDown/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.css';
 
 @connect($transform({
     isFringeLeft: $get('ui.leftSideBar.isHidden'),

packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/AspectRatioDropDown/style.css renamed to packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/AspectRatioDropDown/style.module.css

@@ -1,5 +1,5 @@
 .contentCanvas {
-    composes: content from '../style.css';
+    composes: content from '../style.module.css';
     height: 100%;
     width: 100%;
     background-color: var(--colors-ContrastDarker);

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

@@ -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.css';
 import {TARGET_WINDOW} from '../constants';
 
 export default class MenuItem extends PureComponent {