René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Common CSS not applying when specifying platform specific","articleBody":"**Environment**\nProvide 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):\n```\n{\n  \"name\": \"stackblitz-nativescript-angular\",\n  \"main\": \"./src/main.ts\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@angular/animations\": \"~19.0.0\",\n    \"@angular/common\": \"~19.0.0\",\n    \"@angular/compiler\": \"~19.0.0\",\n    \"@angular/core\": \"~19.0.0\",\n    \"@angular/forms\": \"~19.0.0\",\n    \"@angular/platform-browser\": \"~19.0.0\",\n    \"@angular/platform-browser-dynamic\": \"~19.0.0\",\n    \"@angular/router\": \"~19.0.0\",\n    \"@nativescript/angular\": \"^19.0.0\",\n    \"@nativescript/core\": \"~8.8.0\",\n    \"rxjs\": \"~7.8.0\",\n    \"zone.js\": \"~0.15.0\"\n  },\n  \"devDependencies\": {\n    \"@angular-devkit/build-angular\": \"~19.0.0\",\n    \"@angular/compiler-cli\": \"~19.0.0\",\n    \"@nativescript/preview-cli\": \"^1.0.14\",\n    \"@nativescript/stackblitz\": \"0.0.8\",\n    \"@nativescript/tailwind\": \"^2.1.0\",\n    \"@nativescript/types\": \"~8.8.0\",\n    \"@nativescript/webpack\": \"~5.0.0\",\n    \"@ngtools/webpack\": \"~19.0.0\",\n    \"tailwindcss\": \"~3.4.0\",\n    \"typescript\": \"~5.6.0\"\n  }\n}\n```\n \n**Describe the bug**\nWhen 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\n\n**items.component.css**\n**items.component.ios.css**\n**items.component.android.css**\n\nWhen  `items.component.css` is imported into the  `items.component.android.css`  then `items.component.css` rule aren't applied.\n\n**To Reproduce**\n\u003c!-- Add commands used or steps taken to reproduce the behaviour. --\u003e\nAdd 3 css \n\n**items.component.css**\n**items.component.ios.css**\n**items.component.android.css**\n\nAdd styleUrl: 'items.component.css',  into items.component.ts\n\nUpdate items.component.html:\n\n```\n\u003cActionBar title=\"My App\"\u003e \u003c/ActionBar\u003e\n\n\u003cGridLayout rows=\"*,*\"\u003e\n  \u003cLabel row=\"0\" text=\"Test\" class=\"test\"\u003e\u003c/Label\u003e\n  \u003cListView row=\"1\" [items]=\"itemService.items()\"\u003e\n    \u003cng-template let-item=\"item\"\u003e\n      \u003cStackLayout [nsRouterLink]=\"['/item', item.id]\"\u003e\n        \u003cLabel [text]=\"item.name\" class=\"text-lg text-gray-500 p-4\"\u003e\u003c/Label\u003e\n      \u003c/StackLayout\u003e\n    \u003c/ng-template\u003e\n  \u003c/ListView\u003e\n\u003c/GridLayout\u003e\n```\nUpdate 3 css file each with different rules: \n\nitems.component.css \n```\n.test {\n  text-transform: uppercase;\n}\n```\nitems.component.android.css\n\n```\n.test {\n  color: purple;\n}\n```\nitems.component.ios.css\n```\n.test {\n  color: green;\n}\n```\n\n**Expected behavior**\n\nExpect thar the items.component.css  rule be applied for Test word be in Uppercase but only color changes in ios and android correctly.\n\n**Sample project**\n\u003c!-- If possible, provide a link from the [Playground](https://play.nativescript.org) with reproduction of the problem. If not, consider attaching a sample project or link to a repository with such project. --\u003e\n\n**Additional context**\n\u003c!-- Add any other context about the problem here. --\u003e\n\nWhat 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\"\n\nMore info on this video as well: https://www.youtube.com/watch?v=v5g6irUI704 \n","author":{"url":"https://github.com/lano-vargas","@type":"Person","name":"lano-vargas"},"datePublished":"2025-01-29T11:41:53.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/149/angular/issues/149"}