Contrib.social

Component styles in form-element.scss are not applied to form-element--label SDC component

Open on Drupal.org →
Created on 26 May 2025, 17 days ago

Problem/Motivation

In Radix, the CSS rules for required field indicators are currently defined in components/form-element/form-element.scss:

.form-item label.form-required::after {
  margin-inline: 0.15em;
  content: "*";
  color: var(--bs-form-invalid-color);
}

However, with Single Directory Components (SDC) system, when rendering the form-element--label component (e.g., via #component => 'form-element--label' or SDC Twig usage), this CSS is not auto-attached, because SDC only auto-includes the CSS that is placed in the same directory and matches the component name (e.g., components/form-element--label/form-element--label.css).

This results in required labels not being styled correctly when using SDC, unless the CSS is manually duplicated or included, which defeats the purpose of SDC’s per-component encapsulation.

Additionally, when a Radix subtheme uses the form-element--label component, the styles defined in the parent (Radix) theme are not automatically included with the component. SDC's auto-library system only attaches CSS that exists within the active theme's component directory. As a result, when a subtheme uses the form-element--label component without redefining or copying the CSS, the required field styling is missing on the front end. This issue further underscores the need for component styles to be colocated with their corresponding SDC components to ensure consistent behavior across subthemes.

Steps to reproduce

  1. Use a Radix subtheme with Drupal 11.
  2. Render the form-element--label component using SDC.
  3. Notice that the required asterisk (.form-required::after) is not styled.
  4. Move the relevant CSS rule from form-element.scss to form-element--label.scss, recompile, and clear cache.
  5. The style now applies correctly, confirming the issue.

Proposed resolution

Move the relevant CSS rule for .form-item label.form-required::after into components/form-element--label/form-element--label.scss so that it is picked up and auto-attached when using the SDC component.

Remaining tasks

Create patch with proposed resolution

User interface changes

  • Required field indicators on form labels will be correctly styled when using the form-element--label Single Directory Component (SDC), both in Radix and in any subtheme.
  • The required asterisk (*) and associated styling (such as color and spacing) will now consistently appear as intended on required form fields rendered using the SDC, even if the component is used from a subtheme.
  • There are no other visual changes or regressions expected; existing styles for other form elements remain unaffected.

API changes

None

Data model changes

None

🐛 Bug report
Status

Active

Version

6.0

Component

Code

Created by

🇺🇸United States sam711

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024