Dev server doesn't respect Drupal's CSS organization (SMACSS)

Created on 19 August 2024, 3 months ago

Problem/Motivation

Stylesheets in Drupal follow a specific file organization, the SMACSS-style categorization of its CSS rules → . This works with production builds where CSS assets are loaded as CSS files using <link rel="stylesheet">, but not with Vite dev server which loads CSS assets as JavaScript code that injects the CSS into the page. The order of the CSS styles can be incorrect. In my case a base style of a custom Drupal library gets loaded after the component styles of my theme, overriding the theme rules.

Steps to reproduce

Setup a Drupal site with a custom Drupal module and custom Drupal theme both using Vite (see 3349311#comment-15657697 📌 Example configurations/starting points Active for details about my exact setup), maybe just a theme could do it as well.

In the module create a library:

typography:
  css:
    base:
      src/css/typography.css: { }

In the theme create a library

global_styles:
  css:
    component:
      src/css/style.css: { }

and load both libraries globally:

libraries:
  - my_module/typography
  - my_theme/global_styles

In the typography.css add

h1 {
  color: red;
  font-size: 10px;
}

and in the style.css add

h1 {
  color: green;
  font-size: 36px;
}

In my case, the H1 is small and red while it should be large and green (component styles must override base styles according to SMACSS).

I'm not sure whether this is an issue of the Drupal Vite module or Vite itself. I'm using Vite 5.4.0.

🐛 Bug report

Status

Active

Version

1.2

Component

Code

Created by

🇦🇹Austria mvonfrie

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @mvonfrie
Comment 3 months ago →
🇦🇹Austria mvonfrie
Addition: I had this problem already with 1.1.3 but just updated to 1.2.1 to check if it is still there.
Comment 28 days ago →
🇺🇸United States mortona2k Seattle
I think I have been working around this by writing component code with more specific selectors.

But I have had all kinds of problems with this as well. I don't know how to get around it because vite doesn't know about drupal's library layers and weights.

If you load stylesheets into a main js file, you can specify the order, but that will bundle them all together.

Maybe it makes sense to bundle them and load in the theme layer? Or component for modules?

Maybe use @layers to specify the order, however these will precede all drupal libraries in the cascade.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024