Common CSS not applying when specifying platform specific

从 issue 中链接的平台特定 CSS 指南开始，并使用 items.component.css、items.component.android.css、items.component.ios.css 和 items.component.ts 重现该行为。调查为什么公共样式表会解析为 Android 变体，然后验证共享的大写规则和每个平台特定的颜色规则是否会同时应用。

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

{
  "name": "stackblitz-nativescript-angular",
  "main": "./src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "~19.0.0",
    "@angular/common": "~19.0.0",
    "@angular/compiler": "~19.0.0",
    "@angular/core": "~19.0.0",
    "@angular/forms": "~19.0.0",
    "@angular/platform-browser": "~19.0.0",
    "@angular/platform-browser-dynamic": "~19.0.0",
    "@angular/router": "~19.0.0",
    "@nativescript/angular": "^19.0.0",
    "@nativescript/core": "~8.8.0",
    "rxjs": "~7.8.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~19.0.0",
    "@angular/compiler-cli": "~19.0.0",
    "@nativescript/preview-cli": "^1.0.14",
    "@nativescript/stackblitz": "0.0.8",
    "@nativescript/tailwind": "^2.1.0",
    "@nativescript/types": "~8.8.0",
    "@nativescript/webpack": "~5.0.0",
    "@ngtools/webpack": "~19.0.0",
    "tailwindcss": "~3.4.0",
    "typescript": "~5.6.0"
  }
}

Describe the bug
When adding platform specific css then the common.css is not being applied e.g: I have 3 css according to the docs: https://docs.nativescript.org/guide/styling#platform-specific-css

items.component.css
items.component.ios.css
items.component.android.css

When items.component.css is imported into the items.component.android.css then items.component.css rule aren't applied.

To Reproduce

Add 3 css

items.component.css
items.component.ios.css
items.component.android.css

Add styleUrl: 'items.component.css', into items.component.ts

Update items.component.html:

<ActionBar title="My App"> </ActionBar>

<GridLayout rows="*,*">
  <Label row="0" text="Test" class="test"></Label>
  <ListView row="1" [items]="itemService.items()">
    <ng-template let-item="item">
      <StackLayout [nsRouterLink]="['/item', item.id]">
        <Label [text]="item.name" class="text-lg text-gray-500 p-4"></Label>
      </StackLayout>
    </ng-template>
  </ListView>
</GridLayout>

Update 3 css file each with different rules:

items.component.css

.test {
  text-transform: uppercase;
}

items.component.android.css

.test {
  color: purple;
}

items.component.ios.css

.test {
  color: green;
}

Expected behavior

Expect thar the items.component.css rule be applied for Test word be in Uppercase but only color changes in ios and android correctly.

Sample project

Additional context

What I noticed is that it prints this in the console: resolving "/home/projects/nativescript-stackblitz-templates-7sgpxgkm/src/app/item/items.component.css" to "/home/projects/nativescript-stackblitz-templates-7sgpxgkm/src/app/item/items.component.android.css"

More info on this video as well: https://www.youtube.com/watch?v=v5g6irUI704