bug: "ion-no-padding" does not work, until "!important" (ion-list)

[infacto]

Bug Report

Ionic version:
5.3.2

Current behavior:

Adding the class name ion-no-padding has not effect. It's overwritten by .list-md (padding-top, padding-bottom).

Expected behavior:
ion-no-padding should work on ion-list. Remove the padding.

Steps to reproduce:
Use the ion-list with ion-no-padding. See that the padding is not removed.

Related code:

<ion-content>
  <ion-list class="ion-no-padding">
    <ion-item-group>
      <ion-item-divider sticky><ion-label>Demo</ion-label></ion-item-divider>
      <ion-item>
        <ion-icon name="bug"slot="start"></ion-icon>
        <ion-label>Demo</ion-label>
      </ion-item>
    </ion-item-group>
  </ion-list>
</ion-content>

Chrome inspect:

You can see that the .md-list is dominant. .ion-no-padding should have !important.

Maybe it has to do with the order of css load. I cannot reproduce in Stackblitz. But I have nothing special in my workspace. I going insane, what's wrong? Any idea? Should we use !important? ... I have no other custom styles on it. I have no idea. It's weird. Any guess may help. ↓ Demo project below. ↓

Ionic info:
Ionic Angular (without Ionic CLI)

Demo Project

(I cannot reproduce it in Stackblitz) So please download this zip. It's a minimalist project (Angular Multi-App).
Download issue-demo.zip
Use ng serve --project=demo-app to run this app.

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #17425 (same underlying issue).

[infacto]

It's not about user styles. It's the build-in styles from the Ionic framework. The weird thing is that it's generally work.

The demo from my initial post does not work. But this works: issue-demo-2.zip

I have no idea what the problem is. ... Any guess about the reason? I have no solution yet. Because this is the Ionic CSS Utilities. A workaround is to use own styles with important flag. ... I don't like it. Why is "issue-demo-2" working and "issue-demo" (1) not? 🤔

[liamdebeasi]

Hmm actually I took a closer look and tried to simplify your app. In both I have the following in app.component.html:

<ion-app>
  <ion-content>
    <ion-list class="ion-no-padding">
      Hello
    </ion-list>
  </ion-content>
</ion-app>

But in issue-demo ion-no-padding does not work, but in issue-demo-2 it does work. Going to look into this a bit more.

[liamdebeasi]

In issue-demo, the style element containing the .ion-no-padding styles is added to the DOM after the style element containing ion-list/.list-md, but in issue-demo-2 it's the other way around.

It looks like this is the reason for the discrepancy. Here is an example for better clarification:

I have two CodePens, each one with a square. In the head I apply two separate style elements. One makes the square blue and one makes the square green.

The square is blue here because the "blue" style is applied after the "green" style: https://codepen.io/liamdebeasi/pen/gOMbObo
The square is green here because the "green" style is applied after the "blue" style: https://codepen.io/liamdebeasi/pen/jOrEOEX

So the issue here is still a specificity issue similar to #17425, but it doesn't seem related to anything Ionic Framework is doing. I need to look into why this is happening to get a better sense of the source.

[liamdebeasi]

I updated each app to the latest version of Angular and Ionic Framework. My best guess right now is that maybe something with your monorepo setup is causing some styles to be loaded out of order.

Does this issue happen in a blank Ionic Framework starter application?

[infacto]

Thanks you very much for investigation. ❤️ Yes, the second issue-demo is created from a blank Ionic project. The first one is from an Angular multi-app repository which contains a bunch of Ionic apps with single dependencies (inlc. Cordova). I don't use the Ionic CLI, because it cannot handle this mono-repo with shared Cordova setup. But anyway...
Interesting... 🤔 I understand that the the style order is important to avoid things like !important. This is the topic of the referred issue. ... But I cannot understand what the problem is in my workspace. It's an official Angular multi-app workspace with Ionic. I build both projects with ng build. So the Ionic CLI does not matter. ... just think aloud ... sigh I continue debugging. I'll take a look at the files that were created by ng build and comparing the setup files, again. The loading order should be visible in devtools of Chromium. E.g. the style-tags are added by Angular js-files. ... I use the same version and same sources. Maybe an Angular multi-app issue? The style-tags order is different in head-tag. But why?

[infacto]

Ok, I compared the rendered html in Chromium dev-tools. The style-tags order is different.
The following is a table with the order of all style-tags and a short code snippet inside. The style-tags itself have no id. So, only the code snippet can identify it.

Style-Tags

Working Demo	Problem Demo
1 (data-styles) ion-select-popover ...	1 (data-styles) ion-select-popover ...
2 html.plt-mobile ion-app ...	7 :root { --ion-color-primary ...
3 ion-header ...	8 // App Global CSS ... html.ios ...
4 ion-list ...	2 html.plt-mobile ion-app ...
5 ion-item-group ...	3 ion-header ...
6 .sc-ion-buttons-md-h ...	6 .sc-ion-buttons-md-h ...
7 :root { --ion-color-primary ...	4 ion-list ...
8 // App Global CSS ... html.ios ...	5 ion-item-group ...

Ok, I think the global css includes the css utilities (.ion-no-padding) and the ion-list is loaded after that declaration. In the working demo the order is inverted (correct). First ion-list then Global CSS. sigh I manually moved the "global" style-tag in the Chrome inspector with the mouse, and it works. But wtf, why is the order wrong?

How to ensure the correct order? It's the same config / source code. I already tested the extract-css build flag. No solution yet. 🤪 Is that a bug in the matrix?

[liamdebeasi]

Yeah I am a little confused on this one as well. For your mono-repo setup, did you need to modify angular.json at all? I know that file tells the Angular CLI where to load certain Ionic Framework styles from, so maybe something got changed there?

[infacto]

I compared the angular.json files. I cannot see any related difference. They are equal. More or less. Just the e2e and unit test stuff is missing and the path of course. I also removed the includes from tsconfig and tested other files with the same version. I synced the files. Maybe I'm missing something? It's really disapointing ...

[infacto]

Long story short: It's better with the upcoming Angular 11. Especially for the serve-mode. For the prod build you can set the extractCss flag in angular.json. It's not supported for serve. And for dev you have to pass it to the command line as argument like ng build --extractCss=true. This is maybe not the best solution. Until the order of styles is not 100% ensured yet. That's ridiculous. But anyway... I hope this "solution" (workaround) will work for long time. I'm not entirely satisfied with that. ...

[liamdebeasi]

I am going to check with the team to see if anyone has run into something like this before with monorepos.