Skip to content

Commit

Permalink
Optimise plugin css
Browse files Browse the repository at this point in the history
  • Loading branch information
PatelUtkarsh committed Aug 25, 2022
1 parent cc643c5 commit 39c9f6d
Show file tree
Hide file tree
Showing 7 changed files with 110 additions and 21 deletions.
35 changes: 35 additions & 0 deletions plugin/assets/css/src/_frontend.css
Original file line number Diff line number Diff line change
@@ -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";
21 changes: 21 additions & 0 deletions plugin/assets/css/src/front-end-with-active-theme.css
Original file line number Diff line number Diff line change
@@ -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";
16 changes: 2 additions & 14 deletions plugin/assets/css/src/front-end.css
Original file line number Diff line number Diff line change
Expand Up @@ -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";
28 changes: 28 additions & 0 deletions plugin/assets/css/src/material-components-with-active-theme.css
Original file line number Diff line number Diff line change
@@ -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";
2 changes: 1 addition & 1 deletion plugin/assets/css/src/material-components.css
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
21 changes: 15 additions & 6 deletions plugin/php/class-plugin.php
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
8 changes: 8 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit 39c9f6d

Please sign in to comment.