Summer 20 – Share CSS Styles Among Lightning Web Components

For this blog post & video described about to Sharing the CSS Styles among the Lightning Web Components. This feature available from Summer 20 Salesforce Release. We can add style in Lightning Web Components using CSS (Cascading Style Sheets) style.

In Lightning Web Components, we can apply styling with 4 ways now:

  • Applying Style using Inline CSS in LWC
  • Applying Style using External CSS file from Static resources
  • Create CSS file from LWC Component bundle level
  • Summer 20 > Common CSS module  (Summer 20)

Share CSS Styles in LWC and this applies to Lightning web components in Lightning Experience and all versions of the Salesforce app.

Applying Style using Inline CSS in LWC

Inline CSS for apply a style for a individual HTML element used to apply with HTML style attribute. Likely

 <h1 style=”color: rebeccapurple; font-weight: bold; “>Share CSS Styles Among Components</h1&gt;

Applying Style using External CSS file from Static resources in Lightning Web Component

Upload this external css file as a static resources and it will be included in Lightning web component while import the @salesforce/resourceUrl/ module from LWC JS File. likely

Uploaded the CSS File into Static Resources (Setup -> Static Resources -> LWCCommonCSS (Static Resource Name)

Example to Apply Static Resource Styles in Lightning Web Component

import { LightningElement } from ‘lwc’;
import lwcStyleResource from ‘@salesforce/resourceUrl/LWCCommonCSS’;
import { loadStyle } from ‘lightning/platformResourceLoader’;
export default class Demo29SharedCSS extends LightningElement {

connectedCallback() {
Promise.all([
loadStyle(this,lwcStyleResource)
]).then(() => {
alert(‘Files loaded.’);
})
.catch(error => {
alert(error.body.message);
});
}
}

Example to Apply Style  from Static Resources to AURA Component:
<ltng:require styles=”{!join(‘,’,
$Resource + ‘/LWCCommonCSS/CommonCSS.css’,
)}” />
Applying Style to Create CSS file in the Lightning Web Component bundle
This is another way adding CSS to individual lightning web components level.  We can add CSS to a lightning web component bundle by creating the new css file under the LWC Component Folder. Likely
Share CSS Styles Among Lightning Web Components – Summer 20 Salesforce Release Feature

with Summer ’20 it’s now easier to share CSS styles to to among different Lightning Web Components. Its called CSS-only module. A CSS-only module contains a CSS file and a configuration file/metadata file (only 2 files). Create a LWC Component then delete the HTML and JS file from the folder. (refer the screenshots for the CSS-only module file structure)

Create Lightning Component without HTML & JS File (like below):

commonCSS
->commonCSS.css
->commonCSS.js-meta.xml

Using this new summer 20 release features, we can create a consistent look and feel for Lightning web components by using a common CSS module.
Define styles in the CSS module, and import the module into the main lightning web components to share those styles.

/* import to the css only module to main LWC Component CSS file */
@import ‘c/commonStyle’;
/* Define other style rules for here */

Important Notes for Share CSS Styles Among Lightning Web Components:

  • we can import many common CSS module In main Lightning Web Component CSS file
  • Make sure to have both components saved under API version 49 or Above (Summer 20 release API Version is 49.0)
  • there seem to be a bug with Summer 20 release while deploying the components, when sharing a common CSS file with import function into another LWC component, so I hope Salesforce Team will fix this shortly, but we have the following workaround to deploy
    •  try to deploy both components all together (or) try to deploy with entire LWC folders (force-app/main/default/lwc)   from your explorer bar, right click the LWC folder and deploy (or) use with the SFDX command to deploy from Visual Studio Terminal  sfdx force:source:deploy –sourcepath C:\Workspace\SakthiLWCWeek3\SakthiLWCWeek3\force-app\main\default\lwc

Reference Links:

Share CSS Style Rules – https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_share

Summer 20 – Share CSS Styles Among Lightning Web Components Release Notes – https://releasenotes.docs.salesforce.com/en-us/summer20/release-notes/rn_lwc_css_share.htm

Learn MOAR: Lightning Web Components Features in Summer ’20 – https://developer.salesforce.com/blogs/2020/06/learn-moar-lightning-web-components-features-in-summer-20.html

 

Please check the below video for more info about Summer 20 – Share CSS Styles Among Lightning Web Components:

Reference Links from stackexchange:

https://salesforce.stackexchange.com/questions/310879/lwc-share-css-style-rules-doesnt-work

https://salesforce.stackexchange.com/questions/313786/share-css-styles-among-lightning-web-components-nested-css-not-working

https://salesforce.stackexchange.com/questions/315662/not-able-to-import-css-in-lwc-no-module-named-markup

Written by 

Salesforce MVP | Lightning Champion | 17x Salesforce Certified | Application Architect | 7x Trailhead Ranger | Techforce Services | Australia

4 thoughts on “Summer 20 – Share CSS Styles Among Lightning Web Components

Leave a Reply

Your email address will not be published. Required fields are marked *

*