Skip to content
Snippets Groups Projects
Commit 0bdcd382 authored by Jack Reed's avatar Jack Reed Committed by Chris Beer
Browse files

Remove need for css-loader by moving all imported styles from react-mosaic to... 

Remove need for css-loader by moving all imported styles from react-mosaic to jss inside of the application fixes #3282
parent 2cddf26d
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
.eslintignore
+ 1
− 0
View file @ 0bdcd382
dist/ dist/
config/ config/
coverage/ coverage/
styles/
package.json
+ 0
− 2
View file @ 0bdcd382
...@@ -95,7 +95,6 @@ ...@@ -95,7 +95,6 @@
"chalk": "^4.1.0", "chalk": "^4.1.0",
"codecov": "^3.7.0", "codecov": "^3.7.0",
"core-js": "^3.4.8", "core-js": "^3.4.8",
"css-loader": "^3.6.0",
"enzyme": "^3.10.0", "enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0", "enzyme-adapter-react-16": "^1.14.0",
"eslint": "^6.0.0", "eslint": "^6.0.0",
...@@ -120,7 +119,6 @@ ...@@ -120,7 +119,6 @@
"react-refresh": "^0.8.3", "react-refresh": "^0.8.3",
"redux-mock-store": "^1.5.1", "redux-mock-store": "^1.5.1",
"redux-saga-test-plan": "^4.0.0-rc.3", "redux-saga-test-plan": "^4.0.0-rc.3",
"style-loader": "^1.2.1",
"supertest": "^4.0.2", "supertest": "^4.0.2",
"terser-webpack-plugin": "^3.0.6", "terser-webpack-plugin": "^3.0.6",
"unfetch": "^4.1.0", "unfetch": "^4.1.0",
......
src/components/WorkspaceMosaic.js
+ 0
− 1
View file @ 0bdcd382
...@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; ...@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { import {
MosaicWithoutDragDropContext, MosaicWindow, getLeaves, createBalancedTreeFromLeaves, MosaicWithoutDragDropContext, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
} from 'react-mosaic-component'; } from 'react-mosaic-component';
import 'react-mosaic-component/react-mosaic-component.css';
import difference from 'lodash/difference'; import difference from 'lodash/difference';
import isEqual from 'lodash/isEqual'; import isEqual from 'lodash/isEqual';
import classNames from 'classnames'; import classNames from 'classnames';
......
src/containers/WorkspaceMosaic.js
+ 2
− 0
View file @ 0bdcd382
...@@ -5,6 +5,7 @@ import { withPlugins } from '../extend/withPlugins'; ...@@ -5,6 +5,7 @@ import { withPlugins } from '../extend/withPlugins';
import { getWorkspace } from '../state/selectors'; import { getWorkspace } from '../state/selectors';
import * as actions from '../state/actions'; import * as actions from '../state/actions';
import { WorkspaceMosaic } from '../components/WorkspaceMosaic'; import { WorkspaceMosaic } from '../components/WorkspaceMosaic';
import globalReactMosaicStyles from '../styles/react-mosaic-component';
/** /**
* mapStateToProps - to hook up connect * mapStateToProps - to hook up connect
...@@ -41,6 +42,7 @@ const styles = { ...@@ -41,6 +42,7 @@ const styles = {
display: 'none !important', display: 'none !important',
}, },
}, },
...globalReactMosaicStyles,
}; };
const enhance = compose( const enhance = compose(
......
src/styles/react-mosaic-component.js 0 → 100644
+ 286
− 0
View file @ 0bdcd382
// 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;
webpack.config.js
+ 0
− 4
View file @ 0bdcd382
...@@ -21,10 +21,6 @@ const baseConfig = mode => ({ ...@@ -21,10 +21,6 @@ const baseConfig = mode => ({
}, },
test: /\.(js|mjs|jsx)$/, test: /\.(js|mjs|jsx)$/,
}, },
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
], ],
}, },
optimization: { optimization: {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment