Summer 20 – Share CSS Styles Among Lightning Web Components

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>

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);
});
}
}

Reference: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_resources

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:WorkspaceSakthiLWCWeek3SakthiLWCWeek3force-appmaindefaultlwc