NativeScript / NativeScript/angular

Common CSS not applying when specifying platform specific

Abierto
#149 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
TypeScript
Estrellas
55
Forks
13
Merge medio
16 min
PR fusionados (30 d)
1

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con las indicaciones de CSS específicas de la plataforma enlazadas en el issue y reproduce el comportamiento usando items.component.css, items.component.android.css, items.component.ios.css y items.component.ts. Investiga por qué la hoja de estilos común se resuelve en la variante de Android y, después, verifica que la regla compartida de mayúsculas y cada regla de color específica de la plataforma se apliquen conjuntamente.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend, mobile
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.