NativeScript / NativeScript/angular
Common CSS not applying when specifying platform specific
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 55
- Forks
- 13
- Ø Merge
- 16 Min.
- Gemergte PRs (30 T.)
- 1
Beschreibung
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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit der im Issue verlinkten plattformspezifischen CSS-Anleitung und reproduziere das Verhalten mit items.component.css, items.component.android.css, items.component.ios.css und items.component.ts. Untersuche, warum das gemeinsame Stylesheet in die Android-Variante aufgelöst wird, und überprüfe anschließend, dass die gemeinsame Regel für Großbuchstaben und jede plattformspezifische Farbvorschrift gemeinsam angewendet werden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend, mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100