From 39c9f6da7e8ae60fc18ee58df5704a1d5681b78d Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Thu, 25 Aug 2022 10:51:55 +0530 Subject: [PATCH] Optimise plugin css --- plugin/assets/css/src/_frontend.css | 35 +++++++++++++++++++ .../css/src/front-end-with-active-theme.css | 21 +++++++++++ plugin/assets/css/src/front-end.css | 16 ++------- .../material-components-with-active-theme.css | 28 +++++++++++++++ plugin/assets/css/src/material-components.css | 2 +- plugin/php/class-plugin.php | 21 +++++++---- webpack.config.js | 8 +++++ 7 files changed, 110 insertions(+), 21 deletions(-) create mode 100644 plugin/assets/css/src/_frontend.css create mode 100644 plugin/assets/css/src/front-end-with-active-theme.css create mode 100644 plugin/assets/css/src/material-components-with-active-theme.css diff --git a/plugin/assets/css/src/_frontend.css b/plugin/assets/css/src/_frontend.css new file mode 100644 index 00000000..0528d79b --- /dev/null +++ b/plugin/assets/css/src/_frontend.css @@ -0,0 +1,35 @@ +/* + * + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * + */ + +/* + * All Frontend CSS without importing material-components.css. + */ +@import "./base/variables.css"; +@import "./conf/index.css"; +@import "typography.css"; +@import "./components/contact-form.css"; +@import "./components/masonry-grid.css"; +@import "./components/card.css"; +@import "./components/core.css"; +@import "../../src/block-editor/blocks/common-posts-list/style.css"; +@import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css"; +@import "../../src/block-editor/blocks/card/style.css"; +@import "./block/style/masonry.css"; +@import "./overrides.css"; +@import "./tokens/index.css"; diff --git a/plugin/assets/css/src/front-end-with-active-theme.css b/plugin/assets/css/src/front-end-with-active-theme.css new file mode 100644 index 00000000..deda2ab6 --- /dev/null +++ b/plugin/assets/css/src/front-end-with-active-theme.css @@ -0,0 +1,21 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* + * All Frontend CSS. + */ +@import "material-components-with-active-theme.css"; +@import "_frontend.css"; diff --git a/plugin/assets/css/src/front-end.css b/plugin/assets/css/src/front-end.css index deb435a4..181a643f 100644 --- a/plugin/assets/css/src/front-end.css +++ b/plugin/assets/css/src/front-end.css @@ -17,17 +17,5 @@ /* * All Frontend CSS. */ -@import "./base/variables.css"; -@import "./conf/index.css"; -@import "typography.css"; -@import "./material-components.css"; -@import "./components/contact-form.css"; -@import "./components/masonry-grid.css"; -@import "./components/card.css"; -@import "./components/core.css"; -@import "../../src/block-editor/blocks/common-posts-list/style.css"; -@import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css"; -@import "../../src/block-editor/blocks/card/style.css"; -@import "./block/style/masonry.css"; -@import "./overrides.css"; -@import "./tokens/index.css"; +@import "material-components.css"; +@import "_frontend.css"; diff --git a/plugin/assets/css/src/material-components-with-active-theme.css b/plugin/assets/css/src/material-components-with-active-theme.css new file mode 100644 index 00000000..404e7253 --- /dev/null +++ b/plugin/assets/css/src/material-components-with-active-theme.css @@ -0,0 +1,28 @@ +/** + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* + * Required Material components when material theme is active. + */ + +@import "mixins.css"; +@import "@material/icon-button/dist/mdc.icon-button.css"; +@import "@material/layout-grid/dist/mdc.layout-grid.css"; +@import "@material/tab-bar/dist/mdc.tab-bar.css"; +@import "@material/tab-scroller/dist/mdc.tab-scroller.css"; +@import "./components/material.css"; +@import "./components/datatable.css"; +@import "./components/tooltip.css"; diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css index 4282da9f..6e568f02 100644 --- a/plugin/assets/css/src/material-components.css +++ b/plugin/assets/css/src/material-components.css @@ -22,7 +22,7 @@ @import "@material/layout-grid/dist/mdc.layout-grid.css"; @import "@material/tab-bar/dist/mdc.tab-bar.css"; @import "@material/tab-scroller/dist/mdc.tab-scroller.css"; -@import "components/image-card.css"; +@import "./components/image-card.css"; @import "./components/material.css"; @import "./components/datatable.css"; @import "./components/text-field.css"; diff --git a/plugin/php/class-plugin.php b/plugin/php/class-plugin.php index 99df0213..9e3957a9 100644 --- a/plugin/php/class-plugin.php +++ b/plugin/php/class-plugin.php @@ -263,12 +263,21 @@ public function enqueue_front_end_assets() { wp_localize_script( 'material-front-end-js', 'materialDesign', $wp_localized_script_data ); - wp_enqueue_style( - 'material-front-end-css', - $this->asset_url( 'assets/css/front-end-compiled.css' ), - [], - $this->asset_version() - ); + if ( self::THEME_SLUG === get_template() ) { + wp_enqueue_style( + 'material-front-end-css', + $this->asset_url( 'assets/css/front-end-w-theme-compiled.css' ), + [], + $this->asset_version() + ); + } else { + wp_enqueue_style( + 'material-front-end-css', + $this->asset_url( 'assets/css/front-end-compiled.css' ), + [], + $this->asset_version() + ); + } /** * Enqueue material style overrides if the theme is not material. diff --git a/webpack.config.js b/webpack.config.js index 3f50045f..24801930 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -84,6 +84,14 @@ const assets = { './plugin/assets/css/src/front-end.css', ], }, + { + name: 'Front End with material theme ', // Remove duplicate css from theme when theme is active. + chunk: 'front-end-w-theme', + entry: [ + './plugin/assets/src/front-end/index.js', + './plugin/assets/css/src/front-end-with-active-theme.css', + ], + }, { name: 'Admin', chunk: 'admin',