neos · markusguenther · Mar 8, 2023 · Feb 22, 2023 · Feb 22, 2023 · Feb 22, 2023
diff --git a/esbuild.js b/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

diff --git a/packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/EditorToolbar.js b/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 => ({

diff --git a/packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/LinkButton.js b/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

diff --git a/...bindings/src/EditorToolbar/LinkButton.css → ...s/src/EditorToolbar/LinkButton.module.css b/...bindings/src/EditorToolbar/LinkButton.css → ...s/src/EditorToolbar/LinkButton.module.css
diff --git a/packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableButton.js b/packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableButton.js
@@ -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);

diff --git a/...indings/src/EditorToolbar/TableButton.css → .../src/EditorToolbar/TableButton.module.css b/...indings/src/EditorToolbar/TableButton.css → .../src/EditorToolbar/TableButton.module.css
diff --git a/packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableDropDown.js b/packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableDropDown.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'),

diff --git a/...dings/src/EditorToolbar/TableDropDown.css → ...rc/EditorToolbar/TableDropDown.module.css b/...dings/src/EditorToolbar/TableDropDown.css → ...rc/EditorToolbar/TableDropDown.module.css
diff --git a/...tor5-bindings/src/EditorToolbar/index.css → ...ndings/src/EditorToolbar/index.module.css b/...tor5-bindings/src/EditorToolbar/index.css → ...ndings/src/EditorToolbar/index.module.css
diff --git a/packages/neos-ui-containers/src/InsertModeSelector/index.js b/packages/neos-ui-containers/src/InsertModeSelector/index.js
@@ -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';

diff --git a/...ntainers/src/InsertModeSelector/style.css → ...s/src/InsertModeSelector/style.module.css b/...ntainers/src/InsertModeSelector/style.css → ...s/src/InsertModeSelector/style.module.css
diff --git a/packages/neos-ui-editors/src/EditorEnvelope/index.js b/packages/neos-ui-editors/src/EditorEnvelope/index.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';
 

diff --git a/...s-ui-editors/src/EditorEnvelope/style.css → ...itors/src/EditorEnvelope/style.module.css b/...s-ui-editors/src/EditorEnvelope/style.css → ...itors/src/EditorEnvelope/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/AssetEditor/Components/Controls/index.js b/packages/neos-ui-editors/src/Editors/AssetEditor/Components/Controls/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 IconButton from '@neos-project/react-ui-components/src/IconButton/';
 import {neos} from '@neos-project/neos-ui-decorators';
 

diff --git a/...AssetEditor/Components/Controls/style.css → ...itor/Components/Controls/style.module.css b/...AssetEditor/Components/Controls/style.css → ...itor/Components/Controls/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/Boolean/index.js b/packages/neos-ui-editors/src/Editors/Boolean/index.js
@@ -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 => {

diff --git a/...-ui-editors/src/Editors/Boolean/style.css → ...tors/src/Editors/Boolean/style.module.css b/...-ui-editors/src/Editors/Boolean/style.css → ...tors/src/Editors/Boolean/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/CodeMirror/index.js b/packages/neos-ui-editors/src/Editors/CodeMirror/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')

diff --git a/...-editors/src/Editors/CodeMirror/style.css → ...s/src/Editors/CodeMirror/style.module.css b/...-editors/src/Editors/CodeMirror/style.css → ...s/src/Editors/CodeMirror/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/Image/Components/Controls/index.js b/packages/neos-ui-editors/src/Editors/Image/Components/Controls/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 IconButton from '@neos-project/react-ui-components/src/IconButton/';
 import {neos} from '@neos-project/neos-ui-decorators';
 

diff --git a/...itors/Image/Components/Controls/style.css → ...mage/Components/Controls/style.module.css b/...itors/Image/Components/Controls/style.css → ...mage/Components/Controls/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/index.js b/packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/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 = {

diff --git a/.../Image/Components/PreviewScreen/style.css → ...Components/PreviewScreen/style.module.css b/.../Image/Components/PreviewScreen/style.css → ...Components/PreviewScreen/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/Image/Components/ResizeControls/index.js b/packages/neos-ui-editors/src/Editors/Image/Components/ResizeControls/index.js
@@ -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,

diff --git a/...Image/Components/ResizeControls/style.css → ...omponents/ResizeControls/style.module.css b/...Image/Components/ResizeControls/style.css → ...omponents/ResizeControls/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/Image/index.js b/packages/neos-ui-editors/src/Editors/Image/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,

diff --git a/...os-ui-editors/src/Editors/Image/style.css → ...ditors/src/Editors/Image/style.module.css b/...os-ui-editors/src/Editors/Image/style.css → ...ditors/src/Editors/Image/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/NodeType/index.js b/packages/neos-ui-editors/src/Editors/NodeType/index.js
@@ -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'),

diff --git a/...ui-editors/src/Editors/NodeType/style.css → ...ors/src/Editors/NodeType/style.module.css b/...ui-editors/src/Editors/NodeType/style.css → ...ors/src/Editors/NodeType/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/PluginViews/index.js b/packages/neos-ui-editors/src/Editors/PluginViews/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 {

diff --git a/...editors/src/Editors/PluginViews/style.css → .../src/Editors/PluginViews/style.module.css b/...editors/src/Editors/PluginViews/style.css → .../src/Editors/PluginViews/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/Range/index.js b/packages/neos-ui-editors/src/Editors/Range/index.js
@@ -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 {

diff --git a/...os-ui-editors/src/Editors/Range/style.css → ...ditors/src/Editors/Range/style.module.css b/...os-ui-editors/src/Editors/Range/style.css → ...ditors/src/Editors/Range/style.module.css
diff --git a/packages/neos-ui-editors/src/Editors/UriPathSegment/index.js b/packages/neos-ui-editors/src/Editors/UriPathSegment/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,

diff --git a/...tors/src/Editors/UriPathSegment/style.css → ...c/Editors/UriPathSegment/style.module.css b/...tors/src/Editors/UriPathSegment/style.css → ...c/Editors/UriPathSegment/style.module.css
diff --git a/packages/neos-ui-editors/src/Library/AssetUpload.js b/packages/neos-ui-editors/src/Library/AssetUpload.js
@@ -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({

diff --git a/packages/neos-ui-editors/src/Library/LinkInput.js b/packages/neos-ui-editors/src/Library/LinkInput.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);

diff --git a/...neos-ui-editors/src/Library/LinkInput.css → ...-editors/src/Library/LinkInput.module.css b/...neos-ui-editors/src/Library/LinkInput.css → ...-editors/src/Library/LinkInput.module.css
diff --git a/packages/neos-ui-editors/src/Library/LinkInputOptions.js b/packages/neos-ui-editors/src/Library/LinkInputOptions.js
@@ -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,

diff --git a/...ges/neos-ui-editors/src/Library/style.css → ...s-ui-editors/src/Library/style.module.css b/...ges/neos-ui-editors/src/Library/style.css → ...s-ui-editors/src/Library/style.module.css
diff --git a/packages/neos-ui-editors/src/SecondaryEditors/CKEditorWrap/index.js b/packages/neos-ui-editors/src/SecondaryEditors/CKEditorWrap/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,

diff --git a/...c/SecondaryEditors/CKEditorWrap/index.css → ...daryEditors/CKEditorWrap/index.module.css b/...c/SecondaryEditors/CKEditorWrap/index.css → ...daryEditors/CKEditorWrap/index.module.css
diff --git a/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/AspectRatioDropDown/index.js b/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/AspectRatioDropDown/index.js
@@ -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 = {

diff --git a/...mageCropper/AspectRatioDropDown/style.css → ...pper/AspectRatioDropDown/style.module.css b/...mageCropper/AspectRatioDropDown/style.css → ...pper/AspectRatioDropDown/style.module.css
diff --git a/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/index.js b/packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/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';
 

diff --git a/...c/SecondaryEditors/ImageCropper/style.css → ...daryEditors/ImageCropper/style.module.css b/...c/SecondaryEditors/ImageCropper/style.css → ...daryEditors/ImageCropper/style.module.css
diff --git a/packages/neos-ui-editors/src/SecondaryEditors/MediaDetailsScreen/index.js b/packages/neos-ui-editors/src/SecondaryEditors/MediaDetailsScreen/index.js
@@ -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 {

diff --git a/...ndaryEditors/MediaDetailsScreen/style.css → ...itors/MediaDetailsScreen/style.module.css b/...ndaryEditors/MediaDetailsScreen/style.css → ...itors/MediaDetailsScreen/style.module.css
diff --git a/packages/neos-ui-editors/src/SecondaryEditors/MediaSelectionScreen/index.js b/packages/neos-ui-editors/src/SecondaryEditors/MediaSelectionScreen/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 {

diff --git a/...aryEditors/MediaSelectionScreen/style.css → ...ors/MediaSelectionScreen/style.module.css b/...aryEditors/MediaSelectionScreen/style.css → ...ors/MediaSelectionScreen/style.module.css
diff --git a/packages/neos-ui-guest-frame/src/InlineUI/InlineValidationErrors/index.js b/packages/neos-ui-guest-frame/src/InlineUI/InlineValidationErrors/index.js
@@ -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';
 

diff --git a/...InlineUI/InlineValidationErrors/style.css → ...I/InlineValidationErrors/style.module.css b/...InlineUI/InlineValidationErrors/style.css → ...I/InlineValidationErrors/style.module.css
diff --git a/packages/neos-ui-guest-frame/src/InlineUI/NodeToolbar/index.js b/packages/neos-ui-guest-frame/src/InlineUI/NodeToolbar/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'),

diff --git a/...-frame/src/InlineUI/NodeToolbar/style.css → ...src/InlineUI/NodeToolbar/style.module.css b/...-frame/src/InlineUI/NodeToolbar/style.css → ...src/InlineUI/NodeToolbar/style.module.css
diff --git a/packages/neos-ui-guest-frame/src/InlineUI/index.js b/packages/neos-ui-guest-frame/src/InlineUI/index.js
@@ -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';
 

diff --git a/...eos-ui-guest-frame/src/InlineUI/style.css → ...guest-frame/src/InlineUI/style.module.css b/...eos-ui-guest-frame/src/InlineUI/style.css → ...guest-frame/src/InlineUI/style.module.css
diff --git a/packages/neos-ui-guest-frame/src/dom.js b/packages/neos-ui-guest-frame/src/dom.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

diff --git a/packages/neos-ui-guest-frame/src/initializeContentDomNode.js b/packages/neos-ui-guest-frame/src/initializeContentDomNode.js
@@ -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');

diff --git a/packages/neos-ui-guest-frame/src/initializeGuestFrame.js b/packages/neos-ui-guest-frame/src/initializeGuestFrame.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';
 
 //

diff --git a/packages/neos-ui-guest-frame/src/style.css → .../neos-ui-guest-frame/src/style.module.css b/packages/neos-ui-guest-frame/src/style.css → .../neos-ui-guest-frame/src/style.module.css
diff --git a/packages/neos-ui-inspector/src/SecondaryInspector/index.js b/packages/neos-ui-inspector/src/SecondaryInspector/index.js
@@ -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);

diff --git a/...nspector/src/SecondaryInspector/style.css → ...r/src/SecondaryInspector/style.module.css b/...nspector/src/SecondaryInspector/style.css → ...r/src/SecondaryInspector/style.module.css
@@ -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);

diff --git a/packages/neos-ui-views/src/Data/ColumnView/column.js b/packages/neos-ui-views/src/Data/ColumnView/column.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.css';
 
 export default class Column extends PureComponent {
     static propTypes = {

diff --git a/...s-ui-views/src/Data/ColumnView/column.css → ...ews/src/Data/ColumnView/column.module.css b/...s-ui-views/src/Data/ColumnView/column.css → ...ews/src/Data/ColumnView/column.module.css
diff --git a/packages/neos-ui-views/src/Data/ColumnView/hero.js b/packages/neos-ui-views/src/Data/ColumnView/hero.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 = {

diff --git a/...eos-ui-views/src/Data/ColumnView/hero.css → ...views/src/Data/ColumnView/hero.module.css b/...eos-ui-views/src/Data/ColumnView/hero.css → ...views/src/Data/ColumnView/hero.module.css
diff --git a/packages/neos-ui-views/src/Data/ColumnView/index.js b/packages/neos-ui-views/src/Data/ColumnView/index.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';

diff --git a/...os-ui-views/src/Data/ColumnView/style.css → ...iews/src/Data/ColumnView/style.module.css b/...os-ui-views/src/Data/ColumnView/style.css → ...iews/src/Data/ColumnView/style.module.css
diff --git a/packages/neos-ui-views/src/Data/DataLoader/index.js b/packages/neos-ui-views/src/Data/DataLoader/index.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.css';
 import isEqual from 'lodash.isequal';
 
 /*

diff --git a/...os-ui-views/src/Data/DataLoader/style.css → ...iews/src/Data/DataLoader/style.module.css b/...os-ui-views/src/Data/DataLoader/style.css → ...iews/src/Data/DataLoader/style.module.css
diff --git a/packages/neos-ui-views/src/Data/TableView/index.js b/packages/neos-ui-views/src/Data/TableView/index.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/';
 

diff --git a/...eos-ui-views/src/Data/TableView/style.css → ...views/src/Data/TableView/style.module.css b/...eos-ui-views/src/Data/TableView/style.css → ...views/src/Data/TableView/style.module.css
diff --git a/packages/neos-ui-views/src/NodeInfoView/index.js b/packages/neos-ui-views/src/NodeInfoView/index.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.css';
 
 @connect(state => ({
     focusedNodeContextPath: selectors.CR.Nodes.focusedNodePathSelector(state),

diff --git a/.../neos-ui-views/src/NodeInfoView/style.css → ...i-views/src/NodeInfoView/style.module.css b/.../neos-ui-views/src/NodeInfoView/style.css → ...i-views/src/NodeInfoView/style.module.css
diff --git a/packages/neos-ui-views/src/Widget/index.js b/packages/neos-ui-views/src/Widget/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 {

diff --git a/packages/neos-ui-views/src/Widget/style.css → ...neos-ui-views/src/Widget/style.module.css b/packages/neos-ui-views/src/Widget/style.css → ...neos-ui-views/src/Widget/style.module.css
diff --git a/packages/neos-ui/src/Containers/App.js b/packages/neos-ui/src/Containers/App.js
@@ -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';
 

diff --git a/packages/neos-ui/src/Containers/ContentCanvas/index.js b/packages/neos-ui/src/Containers/ContentCanvas/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'),

diff --git a/...ui/src/Containers/ContentCanvas/style.css → ...Containers/ContentCanvas/style.module.css b/...ui/src/Containers/ContentCanvas/style.css → ...Containers/ContentCanvas/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);

diff --git a/packages/neos-ui/src/Containers/Drawer/MenuItem/index.js b/packages/neos-ui/src/Containers/Drawer/MenuItem/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 {