Optimise plugin css

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";

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";

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";

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";

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";

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.

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',