René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"CSS selectors don't support escape sequence","articleBody":"**Environment**\r\n\r\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):\r\n - CLI: 6.0.3\r\n - Cross-platform modules: 6.0.6\r\n - Android Runtime: 6.0.1\r\n - iOS Runtime: 6.0.2\r\n - Plugin(s): [nativescript-tailwind](https://github.com/rigor789/nativescript-tailwind), ... (N/A)\r\n\r\n**Describe the bug**\r\n\r\nGiven we have a css selector like this:\r\n```css\r\n.w-1\\/2 {\r\n  width: 50%;\r\n}\r\n```\r\nThis is fully supported in browsers, however in NativeScript when the css parser parses it, the selector is parsed as `.w-1` completely ignoring the `\\/2` part. \r\n\r\nIn practice you would use these selectors as `\u003cElement class=\"w-1/2\" /\u003e`.\r\n\r\nThe issue with them parsing as just `.w-1` is that if you already have a `.w-1` class, it will override it's properties and lead to undesired results.\r\n\u003c!-- A clear and concise description of what the bug is. Please, explain whether it's a build time error or a runtime error. More detailed logs can be easily obtained by following the instructions in this guide: https://docs.nativescript.org/get-support#how-to-obtain-diagnostic-reports. --\u003e\r\n\r\n**To Reproduce**\r\n\r\nAdd the following css to any NativeScript app\r\n```css\r\n.w-1 {\r\n  width: 25;\r\n}\r\n.w-1\\/2 {\r\n  width: 50%;\r\n}\r\n```\r\n\r\nAnd use this simple layout to see the issue\r\n```HTML\r\n\u003cStackLayout\u003e\r\n  \u003cLabel class=\"w-1\" backgroundColor=\"red\" /\u003e\r\n  \u003cLabel class=\"w-1/2\" backgroundColor=\"blue\" /\u003e\r\n\u003c/StackLayout\u003e\r\n```\r\n\u003c!-- Add commands used or steps taken to reproduce the behaviour. --\u003e\r\n\r\n**Expected behavior**\r\n\r\nI would expect the `red` label to be `width: 25` and the `blue` label to be `width: 50%`.\r\n\r\nWhat is actually happening:\r\n * `red` is `width: 50%`\r\n * `blue` is `width: auto` (or whatever is default)\r\n\r\n**Sample project**\r\n\r\nhttps://play.nativescript.org/?template=play-vue\u0026id=kMFahL\r\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\r\n\r\n**Additional context**\r\n\r\nI have tracked the issue down to the css parser, more specifically this part:\r\n\r\nhttps://github.com/NativeScript/NativeScript/blob/c0b8db40982825f8e14b70f5a5d2fece17d06337/tns-core-modules/css/parser.ts#L737-L750\r\n\r\nI'm working on a PR to fix this issue.\r\n\u003c!-- Add any other context about the problem here. --\u003e\r\n","author":{"url":"https://github.com/rigor789","@type":"Person","name":"rigor789"},"datePublished":"2019-08-17T11:55:01.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/7688/NativeScript/issues/7688"}