Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Refactor .scss files import to one place

Browse Source 
This approach is used in the Gutenberg repository.
Our original approach, where we imported styles in index files in subdirectories, was a bit fragile
because such a file might be skipped in case a component is imported directly.

[MAILPOET-6320]
This commit is contained in:
Rostislav Wolny
2024-11-14 13:38:12 +01:00
committed by Oluwaseun Olorunsola
parent 67477dcc59
commit da5e90a429
9 changed files with 20 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/js/email-editor/src/components/block-editor/index.scss
View File

@@ -1,5 +1,18 @@
@import '~@wordpress/base-styles/colors'; @import '~@wordpress/base-styles/colors';
.spinner-container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
// Fix editor width. We don't use resizable editor wrapper so we need to set the width manually here
.editor-visual-editor > div {
width: 100%;
}
#mailpoet-email-editor { #mailpoet-email-editor {
.editor-header__toolbar { .editor-header__toolbar {
flex-grow: 1; flex-grow: 1;

2
packages/js/email-editor/src/components/block-editor/index.ts
View File

@@ -1,4 +1,2 @@
import './index.scss';
export * from './editor'; export * from './editor';
export * from './layout'; export * from './layout';

2
packages/js/email-editor/src/components/header/index.ts
View File

@@ -1,3 +1 @@
import './index.scss';
export * from './header'; export * from './header';

2
packages/js/email-editor/src/components/notices/index.ts
View File

@@ -1,5 +1,3 @@
import './index.scss';
export { EditorNotices } from './notices'; export { EditorNotices } from './notices';
export { EditorSnackbars } from './snackbars'; export { EditorSnackbars } from './snackbars';
export { SentEmailNotice } from './sent-email-notice'; export { SentEmailNotice } from './sent-email-notice';

2
packages/js/email-editor/src/components/preview/index.ts
View File

@@ -1,4 +1,2 @@
import './index.scss';
export * from './preview-dropdown'; export * from './preview-dropdown';
export * from './send-preview-email'; export * from './send-preview-email';

2
packages/js/email-editor/src/components/sidebar/index.ts
View File

@@ -1,4 +1,2 @@
import './index.scss';
export * from './block-compatibility-warnings'; export * from './block-compatibility-warnings';
export * from './sidebar'; export * from './sidebar';

2
packages/js/email-editor/src/components/styles-sidebar/index.ts
View File

@@ -1,3 +1 @@
import './index.scss';
export * from './styles-sidebar'; export * from './styles-sidebar';

2
packages/js/email-editor/src/components/template-select/index.ts
View File

@@ -1,4 +1,2 @@
import './index.scss';
export * from './select-modal'; export * from './select-modal';
export * from './template-selection'; export * from './template-selection';

19
packages/js/email-editor/src/index.scss
View File

@@ -1,12 +1,7 @@
.spinner-container { @import "./components/block-editor/index.scss";
align-items: center; @import "./components/header/index.scss";
display: flex; @import "./components/notices/index.scss";
height: 100%; @import "./components/preview/index.scss";
justify-content: center; @import "./components/sidebar/index.scss";
width: 100%; @import "./components/styles-sidebar/index.scss";
} @import "./components/template-select/index.scss";
// Fix editor width. We don't use resizable editor wrapper so we need to set the width manually here
.editor-visual-editor > div {
width: 100%;
}