From 0bdcd38270425d7ea104e238f4f894fe2edcf01e Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Thu, 8 Oct 2020 16:46:57 -0600
Subject: [PATCH] Remove need for css-loader by moving all imported styles from
react-mosaic to jss inside of the application fixes #3282
---
.eslintignore | 1 +
package.json | 2 -
src/components/WorkspaceMosaic.js | 1 -
src/containers/WorkspaceMosaic.js | 2 +
src/styles/react-mosaic-component.js | 286 +++++++++++++++++++++++++++
webpack.config.js | 4 -
6 files changed, 289 insertions(+), 7 deletions(-)
create mode 100644 src/styles/react-mosaic-component.js
diff --git a/.eslintignore b/.eslintignore
index 0cdbd5053..5a63ab0d5 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
dist/
config/
coverage/
+styles/
diff --git a/package.json b/package.json
index ee80b7674..0d11099bc 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,6 @@
"chalk": "^4.1.0",
"codecov": "^3.7.0",
"core-js": "^3.4.8",
- "css-loader": "^3.6.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^6.0.0",
@@ -120,7 +119,6 @@
"react-refresh": "^0.8.3",
"redux-mock-store": "^1.5.1",
"redux-saga-test-plan": "^4.0.0-rc.3",
- "style-loader": "^1.2.1",
"supertest": "^4.0.2",
"terser-webpack-plugin": "^3.0.6",
"unfetch": "^4.1.0",
diff --git a/src/components/WorkspaceMosaic.js b/src/components/WorkspaceMosaic.js
index f065ac600..275ac7952 100644
--- a/src/components/WorkspaceMosaic.js
+++ b/src/components/WorkspaceMosaic.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import {
MosaicWithoutDragDropContext, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
} from 'react-mosaic-component';
-import 'react-mosaic-component/react-mosaic-component.css';
import difference from 'lodash/difference';
import isEqual from 'lodash/isEqual';
import classNames from 'classnames';
diff --git a/src/containers/WorkspaceMosaic.js b/src/containers/WorkspaceMosaic.js
index 46ad650e4..b66e2f4aa 100644
--- a/src/containers/WorkspaceMosaic.js
+++ b/src/containers/WorkspaceMosaic.js
@@ -5,6 +5,7 @@ import { withPlugins } from '../extend/withPlugins';
import { getWorkspace } from '../state/selectors';
import * as actions from '../state/actions';
import { WorkspaceMosaic } from '../components/WorkspaceMosaic';
+import globalReactMosaicStyles from '../styles/react-mosaic-component';
/**
* mapStateToProps - to hook up connect
@@ -41,6 +42,7 @@ const styles = {
display: 'none !important',
},
},
+ ...globalReactMosaicStyles,
};
const enhance = compose(
diff --git a/src/styles/react-mosaic-component.js b/src/styles/react-mosaic-component.js
new file mode 100644
index 000000000..23d46a4fb
--- /dev/null
+++ b/src/styles/react-mosaic-component.js
@@ -0,0 +1,286 @@
+// Generated using jss convert node_modules/react-mosaic-component/react-mosaic-component.css > src/styles/react-mosaic-component.js
+// .mosaic-blueprint-theme styles have also been removed
+const globalReactMosaicStyles = {
+ '@global': {
+ '.mosaic': {
+ height: '100%',
+ width: '100%',
+ },
+ '.mosaic, .mosaic > *': {
+ boxSizing: 'border-box',
+ },
+ '.mosaic .mosaic-zero-state': {
+ position: 'absolute',
+ top: 6,
+ right: 6,
+ bottom: 6,
+ left: 6,
+ width: 'auto',
+ height: 'auto',
+ zIndex: '1',
+ },
+ '.mosaic-root': {
+ position: 'absolute',
+ top: 3,
+ right: 3,
+ bottom: 3,
+ left: 3,
+ },
+ '.mosaic-split': {
+ position: 'absolute',
+ zIndex: '1',
+ touchAction: 'none',
+ },
+ '.mosaic-split:hover': {
+ background: 'black',
+ },
+ '.mosaic-split .mosaic-split-line': {
+ position: 'absolute',
+ },
+ '.mosaic-split.-row': {
+ marginLeft: -3,
+ width: 6,
+ cursor: 'ew-resize',
+ },
+ '.mosaic-split.-row .mosaic-split-line': {
+ top: '0',
+ bottom: '0',
+ left: 3,
+ right: 3,
+ },
+ '.mosaic-split.-column': {
+ marginTop: -3,
+ height: 6,
+ cursor: 'ns-resize',
+ },
+ '.mosaic-split.-column .mosaic-split-line': {
+ top: 3,
+ bottom: 3,
+ left: '0',
+ right: '0',
+ },
+ '.mosaic-tile': {
+ position: 'absolute',
+ margin: 3,
+ },
+ '.mosaic-tile > *': {
+ height: '100%',
+ width: '100%',
+ },
+ '.mosaic-drop-target': {
+ position: 'relative',
+ },
+ '.mosaic-drop-target.drop-target-hover .drop-target-container': {
+ display: 'block',
+ },
+ '.mosaic-drop-target.mosaic > .drop-target-container .drop-target.left': {
+ right: 'calc(100% - 10px )',
+ },
+ '.mosaic-drop-target.mosaic > .drop-target-container .drop-target.right': {
+ left: 'calc(100% - 10px )',
+ },
+ '.mosaic-drop-target.mosaic > .drop-target-container .drop-target.bottom': {
+ top: 'calc(100% - 10px )',
+ },
+ '.mosaic-drop-target.mosaic > .drop-target-container .drop-target.top': {
+ bottom: 'calc(100% - 10px )',
+ },
+ '.mosaic-drop-target .drop-target-container': {
+ position: 'absolute',
+ top: '0',
+ right: '0',
+ bottom: '0',
+ left: '0',
+ display: 'none',
+ },
+ '.mosaic-drop-target .drop-target-container.-dragging': {
+ display: 'block',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target': {
+ position: 'absolute',
+ top: '0',
+ right: '0',
+ bottom: '0',
+ left: '0',
+ background: 'rgba(0, 0, 0, 0.2)',
+ border: '2px solid black',
+ opacity: '0',
+ zIndex: '5',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target.left': {
+ right: 'calc(100% - 30% )',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target.right': {
+ left: 'calc(100% - 30% )',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target.bottom': {
+ top: 'calc(100% - 30% )',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target.top': {
+ bottom: 'calc(100% - 30% )',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target.drop-target-hover': {
+ opacity: '1',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target.drop-target-hover.left': {
+ right: 'calc(100% - 50% )',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target.drop-target-hover.right': {
+ left: 'calc(100% - 50% )',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target.drop-target-hover.bottom': {
+ top: 'calc(100% - 50% )',
+ },
+ '.mosaic-drop-target .drop-target-container .drop-target.drop-target-hover.top': {
+ bottom: 'calc(100% - 50% )',
+ },
+ '.mosaic-window, .mosaic-preview': {
+ position: 'relative',
+ display: 'flex',
+ fallbacks: [
+ {
+ display: '-webkit-box',
+ },
+ ],
+ webkitBoxOrient: 'vertical',
+ webkitBoxDirection: 'normal',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ boxShadow: '0 0 1px rgba(0, 0, 0, 0.2)',
+ },
+ '.mosaic-window .mosaic-window-toolbar, .mosaic-preview .mosaic-window-toolbar': {
+ zIndex: '4',
+ display: 'flex',
+ fallbacks: [
+ {
+ display: '-webkit-box',
+ },
+ ],
+ webkitBoxPack: 'justify',
+ justifyContent: 'space-between',
+ webkitBoxAlign: 'center',
+ alignItems: 'center',
+ flexShrink: '0',
+ height: 30,
+ background: 'white',
+ boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2)',
+ },
+ '.mosaic-window .mosaic-window-toolbar.draggable, .mosaic-preview .mosaic-window-toolbar.draggable': {
+ cursor: 'move',
+ },
+ '.mosaic-window .mosaic-window-title, .mosaic-preview .mosaic-window-title': {
+ paddingLeft: 15,
+ webkitBoxFlex: '1',
+ flex: '1',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ minHeight: 18,
+ },
+ '.mosaic-window .mosaic-window-controls, .mosaic-preview .mosaic-window-controls': {
+ display: 'flex',
+ fallbacks: [
+ {
+ display: '-webkit-box',
+ },
+ ],
+ height: '100%',
+ },
+ '.mosaic-window .mosaic-window-controls .separator, .mosaic-preview .mosaic-window-controls .separator': {
+ height: 20,
+ borderLeft: '1px solid black',
+ margin: '5px 4px',
+ },
+ '.mosaic-window .mosaic-window-body, .mosaic-preview .mosaic-window-body': {
+ position: 'relative',
+ webkitBoxFlex: '1',
+ flex: '1',
+ height: '0',
+ background: 'white',
+ zIndex: '1',
+ overflow: 'hidden',
+ },
+ '.mosaic-window .mosaic-window-additional-actions-bar, .mosaic-preview .mosaic-window-additional-actions-bar': {
+ position: 'absolute',
+ top: 30,
+ right: '0',
+ bottom: 'initial',
+ left: '0',
+ height: '0',
+ overflow: 'hidden',
+ background: 'white',
+ webkitBoxPack: 'end',
+ justifyContent: 'flex-end',
+ display: 'flex',
+ fallbacks: [
+ {
+ display: '-webkit-box',
+ },
+ ],
+ zIndex: '3',
+ },
+ '.mosaic-window .mosaic-window-additional-actions-bar .bp3-button, .mosaic-preview .mosaic-window-additional-actions-bar .bp3-button': {
+ margin: '0',
+ },
+ '.mosaic-window .mosaic-window-additional-actions-bar .bp3-button:after, .mosaic-preview .mosaic-window-additional-actions-bar .bp3-button:after': {
+ display: 'none',
+ },
+ '.mosaic-window .mosaic-window-body-overlay, .mosaic-preview .mosaic-window-body-overlay': {
+ position: 'absolute',
+ top: '0',
+ right: '0',
+ bottom: '0',
+ left: '0',
+ opacity: '0',
+ background: 'white',
+ display: 'none',
+ zIndex: '2',
+ },
+ '.mosaic-window.additional-controls-open .mosaic-window-additional-actions-bar, .mosaic-preview.additional-controls-open .mosaic-window-additional-actions-bar': {
+ height: 30,
+ },
+ '.mosaic-window.additional-controls-open .mosaic-window-body-overlay, .mosaic-preview.additional-controls-open .mosaic-window-body-overlay': {
+ display: 'block',
+ },
+ '.mosaic-window .mosaic-preview, .mosaic-preview .mosaic-preview': {
+ height: '100%',
+ width: '100%',
+ position: 'absolute',
+ zIndex: '0',
+ border: '1px solid black',
+ maxHeight: 400,
+ },
+ '.mosaic-window .mosaic-preview .mosaic-window-body, .mosaic-preview .mosaic-preview .mosaic-window-body': {
+ display: 'flex',
+ fallbacks: [
+ {
+ display: '-webkit-box',
+ },
+ ],
+ webkitBoxOrient: 'vertical',
+ webkitBoxDirection: 'normal',
+ flexDirection: 'column',
+ webkitBoxAlign: 'center',
+ alignItems: 'center',
+ webkitBoxPack: 'center',
+ justifyContent: 'center',
+ },
+ '.mosaic-window .mosaic-preview h4, .mosaic-preview .mosaic-preview h4': {
+ marginBottom: 10,
+ },
+ '.mosaic:not(.mosaic-blueprint-theme) .mosaic-default-control.close-button:before': {
+ content: '\'Close\'',
+ },
+ '.mosaic:not(.mosaic-blueprint-theme) .mosaic-default-control.split-button:before': {
+ content: '\'Split\'',
+ },
+ '.mosaic:not(.mosaic-blueprint-theme) .mosaic-default-control.replace-button:before': {
+ content: '\'Replace\'',
+ },
+ '.mosaic:not(.mosaic-blueprint-theme) .mosaic-default-control.expand-button:before': {
+ content: '\'Expand\'',
+ },
+ },
+};
+
+export default globalReactMosaicStyles;
diff --git a/webpack.config.js b/webpack.config.js
index 2709a77cd..9db5d2079 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,10 +21,6 @@ const baseConfig = mode => ({
},
test: /\.(js|mjs|jsx)$/,
},
- {
- test: /\.css$/i,
- use: ['style-loader', 'css-loader'],
- },
],
},
optimization: {
--
GitLab