Problem/Motivation

So the CSS files are being loaded in wrong order when there is multiple themes. Lets say Seven has base theme classy the order at the moment would be Seven -> Classy.

Proposed resolution

Fix the order of the CSS files so that the base theme CSS files are being loaded before subtheme and that way the CSS on the base themes can be overrided in its child themes.

Remaining tasks

Write tests
Fix it
Test it
-> Profit!

User interface changes

API changes

CommentFileSizeAuthor
#8 css_files_from_themes-2474091-8.patch317 byteslauriii
#7 css-loading.png219.2 KBsqndr
#6 2474091-do-not-test.patch1.15 KBsqndr
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

star-szr’s picture

star-szr
he/him
Primary language English
CreditAttribution: star-szr commented
Priority: Normal » Major

I think this is major, specificity wars are no fun.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Druid commented
Assigned: Unassigned » lauriii

I can take a look on this.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Druid commented
Assigned: lauriii » Unassigned

I think this has been fixed by something else. I think I'll try to find that issue and make sure there is test coverage for this.

sqndr’s picture

sqndr CreditAttribution: sqndr as a volunteer commented

It's still broken. I'm working on a patch that demonstrates this being broken. I'll upload in a second.

sqndr’s picture

sqndr CreditAttribution: sqndr as a volunteer commented

It's still broken. I'm working on a patch that demonstrates this being broken. I'll upload in a second.

Update: So … if you don't remove the layout.css from classy ('@classy/css/layout.css'), it will be loaded in last, after the seven layout stylesheet.

sqndr’s picture

sqndr CreditAttribution: sqndr as a volunteer commented
FileSize
2474091-do-not-test.patch1.15 KB

Here's an example:

diff --git a/core/themes/classy/css/layout.css b/core/themes/classy/css/layout.css
index 4c9867d..ed3fea6 100644
--- a/core/themes/classy/css/layout.css
+++ b/core/themes/classy/css/layout.css
@@ -4,3 +4,7 @@
  *
  * @see \Drupal\system\Tests\Installer\InstallerTranslationTest::testInstaller()
  */
+
+body {
+  background: darkcyan;
+}
diff --git a/core/themes/seven/css/base/elements.css b/core/themes/seven/css/base/elements.css
index 0189645..40ac5c3 100644
--- a/core/themes/seven/css/base/elements.css
+++ b/core/themes/seven/css/base/elements.css
@@ -3,7 +3,7 @@
  */
 body {
   color: #333;
-  background: #fff;
+  background: pink;
   font: normal 81.3%/1.538em "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida Sans", sans-serif;
 }
 a,
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 8ee0914..d4f2ef7 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -10,7 +10,6 @@ libraries:
  - seven/global-styling
 stylesheets-remove:
   - core/assets/vendor/jquery.ui/themes/base/dialog.css
-  - '@classy/css/layout.css'
 quickedit_stylesheets:
   - css/components/quickedit.css
 regions:

So … you'd expect the page to be pink (the color set in seven), while it's actually blue. The classy layout.css file is loaded last.

sqndr’s picture

sqndr CreditAttribution: sqndr as a volunteer commented
FileSize
css-loading.png219.2 KB
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Druid commented
FileSize
css_files_from_themes-2474091-8.patch317 bytes

So this isn't as clear as it seems. There is different components css types such as base, component and theme. Base is loaded first and theme last and there and Bartik and Seven uses these clearly differently which causes this to happen.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Druid commented
Status: Active » Needs review
jstoller’s picture

jstoller
he/him
CreditAttribution: jstoller as a volunteer and at California Science Center commented

Perhaps I'm confused, but shouldn't all the Css in a theme be loaded as "theme?" It doesn't seem like "base" would ever be an appropriate designation for theme styling.

joelpittet’s picture

joelpittet
Primary language English
Location Vancouver
CreditAttribution: joelpittet commented

@jstoller base is for element styles (usually not classes), 'components' are for self contained parts of the page, like search form or login block and 'theme' is about providing colors and sizing on those components. 

form { base }
form.search-form {component}
form.search-form--header-style-blue {theme}

Does that help?
@see https://www.drupal.org/node/1887922

davidhernandez’s picture

davidhernandez
Primary language English
Location USA
CreditAttribution: davidhernandez as a volunteer commented

What Joel said. Also, I was just thinking about this. If we confirm what lauriii discovered (I didn't take the time to test it yet,) then we can probably close this issue. There is no need to rename the layout file. As soon as a worthy CSS file gets moved to Classy, like one of the System ones (#2395853: Split system.module.css and system.theme.css files into SMACSS style components,) we can use that for tests and get rid of layout.css.

davidhernandez’s picture

davidhernandez
Primary language English
Location USA
CreditAttribution: davidhernandez as a volunteer commented

P.S. Unless someone wants to use this to write tests around the ordering.

sqndr’s picture

sqndr CreditAttribution: sqndr as a volunteer commented

I manually tested the loading order at DrupalCon LA. I create two simple themes, a base theme and a subtheme. I included stylesheets for all 5 SMACSS components. The order was correct. First the base from the base theme, then from the sub theme … same for rest of the categories.

davidhernandez’s picture

davidhernandez
Primary language English
Location USA
CreditAttribution: davidhernandez as a volunteer commented
Status: Needs review » Closed (works as designed)

I think we are seeing this work correctly now.

hass’s picture

hass CreditAttribution: hass commented
Status: Closed (works as designed) » Closed (duplicate)

Fixed somewhere else.