NativeScript / NativeScript/angular
Common CSS not applying when specifying platform specific
還沒有人認領這個 Issue。
- 主要語言
- TypeScript
- 星號
- 55
- 分支
- 13
- 平均合併
- 16 分鐘
- 30 天內合併 PR
- 1
描述
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
貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
研究方向
從 issue 中連結的平台特定 CSS 指南開始,並使用 items.component.css、items.component.android.css、items.component.ios.css 和 items.component.ts 重現該行為。調查為什麼共用樣式表會解析為 Android 變體,然後確認共用的大寫規則和每個平台特定的色彩規則是否會同時套用。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- angular, typescript
- 領域
- frontend, mobile
- Issue 類型
- 缺陷
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 活躍度
- 停滯
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100