Common CSS not applying when specifying platform specific #149
Description
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