Overview
This rule detects the use of CSS selectors with spaces in the class name, which is no longer supported starting from Spring ‘25. The use of class selectors with spaces is deprecated in Spring ‘25 and will no longer work. This change impacts how styles are applied to Lightning Web Components (LWC) and other custom UI elements, ensuring adherence to modern CSS standards and preventing unexpected styling issues.
To show the effect of deprecated class selectors, Here is an example of a Lightning Web Component (LWC) that highlights the visual change. The goal is a red border (as seen in the second screenshot). However, without the necessary code update, no border will appear (as shown in the first screenshot).
The key changes in the LWC's JavaScript file are:
Before (prevents red border due to Salesforce change):
const targetElement = this.template.querySelector('[class=" slds box my custom highlight "]');
After (allows red border):
const targetElement = this.template.querySelector('.slds box.my custom highlight');
Starting in Spring ’25, Salesforce no longer renders extra spaces between classes or empty class="" or style="" attributes. For example, if your component markup is <div class=" slds var m around_medium highlight yellow ">, it will now render as <div class="slds var m around_medium highlight yellow"> without the extra whitespace. Additionally, empty class and style attributes like div class="" or div style=" " will be removed from the DOM entirely during rendering.
Code Reviews classifies this issue as an Error, Continued reliance on this deprecated syntax will directly cause styling failures and visual inconsistencies in your application from Spring '25 onwards, impacting user experience. These issues can place the application at risk and contribute to technical debt.
Why This Matters
Using spaces in attribute class selectors after Spring ‘25 can lead to:
Styling Failures: Components relying on this deprecated CSS syntax will no longer apply their intended styles, leading to broken UI and visual inconsistencies. This means selectors like
document.querySelector('[class=" highlight yellow "]');will fail to find matching elements in the DOM because these queries rely on the presence of whitespace that no longer exists.Application Instability: Incorrectly rendered components can disrupt user interactions and lead to a poor user experience.
Deployment Blockers: While not explicitly stated to block deployments, maintaining code with deprecated syntax increases the risk of future validation or compilation errors.
Increased Technical Debt: Relying on outdated CSS practices contributes to technical debt, requiring rework and refactoring to align with current standards.
Inconsistent Behavior: Across different browser versions or Salesforce API versions, the behavior of unsupported CSS might be unpredictable even before full deprecation.
What Triggers This Rule
This rule flags JavaScript code within Lightning Web Components (LWC) that uses querySelector or other DOM methods to select elements based on class attributes containing spaces. Specifically, it targets queries where the class attribute is an exact string match that includes extra whitespace between class names or leading/trailing spaces.
The rule looks for a literal string class= followed by quotes, and then specifically looks for a space ( ``) within the quoted class value. This pattern ensures that only selectors with spaces inside the class string are identified.
Recommended Safeguards
To ensure your CSS remains compatible and your application displays correctly:
Eliminate Spaces in Class Names: Ensure all CSS class names are single, continuous strings without spaces. If you intend to apply multiple classes, list them separately in the HTML class attribute (e.g.,
<div class="my class another class">).Use More Flexible Selectors: Revise your JavaScript selectors to ignore whitespace. Instead of exact string matches, use more flexible and reliable selectors like
document.querySelector('.highlight.yellow');.Use Proper Class Naming Conventions: Adopt and enforce consistent CSS class naming conventions (e.g., kebab case like
my component styleor BEM likeblock__element modifier) to avoid ambiguities.Update Markup and Stylesheets: Review all LWC templates and static resource CSS files to identify and correct any class selectors with spaces.
Upgrade LWC API Version: Ensure your LWC components are using the latest API version (e.g., 62.0 or later). The platform constantly introduces enhancements and stricter validation rules. For example, LWC API version 62.0 and later allows you to provide multiple classes on an element with a JavaScript array or object, eliminating the need to concatenate strings for multiple classes. This is a more robust approach for dynamic class binding. In LWC API version 62.0 and later, if a class evaluates to false, true, or a number, the template renders
class="", whereas in earlier versions, it converted the values to a string.Thorough Testing: After making changes, perform comprehensive UI testing to ensure all styles are applied as intended across different components and browsers.
Summary
Using CSS selectors with spaces in the class name is an Error that will no longer be supported from Spring ‘25, causing styling failures. Code Reviews detects the use of class selectors with spaces to prevent deployment errors and ensure visual consistency in your application. Adopting proper, space free class naming conventions and leveraging modern LWC styling capabilities are crucial for maintaining a robust and visually correct Salesforce UI. This change removes inconsistencies in the rendering of extra whitespace and ensures that empty class and style attributes are no longer rendered.