{"checkedOn":"2026-10-28","npm":{"latest":"0.64.0","published":"2024-10-20T07:12:10.493Z","gitHead":"d6f55c19bc0181eaab472752af2504dc2448a44d"},"issues":[{"url":"https://github.com/stylus/stylus/issues/2750","title":"Wrong compiling for :is, :has, :where","state":"open","state_reason":null,"created_at":"2023-01-11T07:52:46Z","updated_at":"2024-10-12T10:31:14Z","closed_at":null,"body":"```stylus\r\n:is(section.is-styling, aside.is-styling, footer.is-styling) {\r\n  a {\r\n    color: red;\r\n  }\r\n}\r\n```\r\n\r\nis wrongly composed as \r\n\r\n```stylus\r\n:is(section.is-styling a, aside.is-styling a, footer.is-styling) a{\r\n  color: red;\r\n}\r\n```\r\n\r\n<img width=\"736\" alt=\"Screen Shot 2023-01-11 at 16 50 35\" src=\"https://user-images.githubusercontent.com/44498510/211748659-6068793d-5cb2-4d80-bb09-494cef26283c.png\">\r\n"},{"url":"https://github.com/stylus/stylus/issues/2581","title":":is(a,b) selector doesn't parse correctly","state":"closed","state_reason":"completed","created_at":"2021-03-15T10:55:45Z","updated_at":"2022-05-26T11:54:15Z","closed_at":"2022-05-26T11:54:15Z","body":"it does work in some circumstances, but since the comma is taken as a sign that a new selector has started, the following problems arise:\r\n\r\n### stylus\r\n```css\r\na{\r\n  &:is(.this,.that){\r\n    color:red;\r\n  }\r\n}\r\nb,c{\r\n  &:is(.this,.that){\r\n    color:blue;\r\n  }\r\n}\r\nd,e{\r\n  &:is(.this\\,/.that){\r\n    color:green;\r\n  }\r\n}\r\n```\r\n### expected result\r\n```css\r\na:is(.this,.that){\r\n  color:#f00;\r\n}\r\nb:is(.this,.that),\r\nc:is(.this,.that){\r\n  color:#00f;\r\n}\r\nd:is(.this,.that),\r\ne:is(.this,.that){\r\n  color:#008000;\r\n}\r\n```\r\n### actual result:\r\n```css\r\na:is(.this,\r\na .that) {\r\n  color: #f00;\r\n}\r\nb:is(.this,\r\nc:is(.this,\r\nb .that),\r\nc .that) {\r\n  color: #00f;\r\n}\r\nd:is(.this,\r\ne:is(.this,\r\n.that) {\r\n  color: #008000;\r\n}\r\n```\r\n### workarounds\r\n```css\r\na{\r\n  &:is(.this,/.that){\r\n    color:red;\r\n  }\r\n}\r\nb,c{\r\n  &.this,\r\n  &.that{\r\n    color:blue;\r\n  }\r\n}\r\n```\r\n### workaround results\r\n```css\r\na:is(.this,\r\n.that) {\r\n  color: #f00;\r\n}\r\nb.this,\r\nc.this,\r\nb.that,\r\nc.that {\r\n  color: #00f;\r\n}\r\n```\r\n\r\nIt would be nice to at least have the possiblity to actually escape the comma, but that isn't currently possible.\r\nAlso, using the :is() operator in parsing could reduce style size, but that's not as important as properly being able to use the selector manually."}],"pullRequests":[{"url":"https://github.com/stylus/stylus/pull/2684","title":"feat: support full css level 4 logical combination selectors","state":"closed","merged":true,"created_at":"2022-05-26T11:45:25Z","updated_at":"2023-01-11T08:11:05Z","closed_at":"2022-05-26T11:54:15Z","merged_at":"2022-05-26T11:54:15Z","base_sha":"2bf86ff830c0ee1c9e39d6ebcf51db29ac3b3e64","head_sha":"99a9f9f9bb0fdd0da16ab13e8523d56b03cc5e2b","merge_commit_sha":"6a1fb55c5b3695ca8a5d463ad79d5eef72099375","diff":"@@ -66,8 +66,11 @@ var selectorTokens = [\n  */\n \n var pseudoSelectors = [\n+  // https://www.w3.org/TR/selectors-4/#logical-combination\n   // Logical Combinations\n-    'matches'\n+    'is'\n+  , 'has'\n+  , 'where'\n   , 'not'\n \n   // Linguistic Pseudo-classes\n@@ -94,3 +94,32 @@ label input:blank,\n label span {\n   color: #014;\n }\n+:is(header,\n+main,\n+footer) p:hover {\n+  color: #f00;\n+  cursor: pointer;\n+}\n+:where(header,\n+main,\n+footer) p:hover {\n+  color: #f00;\n+  cursor: pointer;\n+}\n+a:where(:not(:hover)) {\n+  text-decoration: none;\n+}\n+a:has(> img) {\n+  color: #f00;\n+}\n+input {\n+  color: #a7a7a7;\n+}\n+input:not(:last-child) {\n+  color: #000;\n+}\n+@media (min-width: 0px) {\n+  div :not(.icon) {\n+    display: none;\n+  }\n+}\n\\ No newline at end of file\n@@ -83,3 +83,23 @@ label\n   input:blank\n   span\n     color #014\n+\n+:is(header, main, footer) p:hover\n+  color: red;\n+  cursor: pointer;\n+:where(header, main, footer) p:hover\n+  color: red\n+  cursor: pointer\n+a:where(:not(:hover))\n+  text-decoration: none\n+a:has(> img)\n+  color: red\n+\n+input\n+  color #a7a7a7\n+  &:not(:last-child)\n+    color #000\n+\n+@media (min-width: 0px)\n+  div :not(.icon)\n+    display: none"},{"url":"https://github.com/stylus/stylus/pull/2650","title":"Do not target comma's that are between quotes or parentheses","state":"open","merged":false,"created_at":"2021-12-27T18:00:16Z","updated_at":"2022-12-01T21:29:36Z","closed_at":null,"merged_at":null,"base_sha":"14462ea7e7bffce8f192f7a933114ffbf577aa84","head_sha":"435f06e926ed767c6278b1bc4ee3085c215a9da4","merge_commit_sha":null,"diff":"@@ -246,16 +246,19 @@ Normalizer.prototype.visitGroup = function(group){\n \n   // normalize interpolated selectors with comma\n   group.nodes.forEach(function(selector, i){\n-    if (!~selector.val.indexOf(',')) return;\n+    // Don't match `,` that are within \"\" or ().\n+    if (!/\\,(?![^\\(|\\\"]*(\\)|\\\"))/.test(selector.val)) return;\n     if (~selector.val.indexOf('\\\\,')) {\n       selector.val = selector.val.replace(/\\\\,/g, ',');\n       return;\n     }\n-    parts = selector.val.split(',');\n+    parts = selector.val.split(/\\,(?![^\\(|\\\"]*(\\)|\\\"))/);\n     var root = '/' == selector.val.charAt(0)\n       , part, s;\n-    for (var k = 0, len = parts.length; k < len; ++k){\n-      part = parts[k].trim();\n+    for (var k = 0, len = parts.length; k < len; ++k) {\n+      part = parts[k]\n+      if (!part) continue\n+      part = part.trim();\n       if (root && k > 0 && !~part.indexOf('&')) {\n         part = '/' + part;\n       }\n@@ -132,3 +132,6 @@ paper {\n paper paper-input::shadow .color {\n   background: #f00;\n }\n+[style=\"color: rgb(0, 186, 124)\"] {\n+  color: #f00;\n+}\n@@ -125,3 +125,6 @@ paper\n \n   paper-input::shadow .color\n     background red\n+\n+[style=\"color: rgb(0, 186, 124)\"]\n+  color red"}],"comments":[{"url":"https://github.com/stylus/stylus/issues/2750#issuecomment-1378454272","body":"https://stylus-lang.com/try.html\r\n\r\nSame result in official playground.\r\n<img width=\"901\" alt=\"Screen Shot 2023-01-11 at 18 19 54\" src=\"https://user-images.githubusercontent.com/44498510/211767191-41c57588-0107-402e-8079-920efe606de5.png\">\r\n\r\n"},{"url":"https://github.com/stylus/stylus/issues/2750#issuecomment-1378498822","body":"Currently I am doing this way to ensure the correct compiling output.\r\n\r\n```stylus\r\nbuildL4(type, args...) {\r\n    st1 = join('', ':', type, '(', join('\\, ', args), ')')\r\n    selector(st1)\r\n}\r\n```\r\n\r\n<img width=\"724\" alt=\"Screen Shot 2023-01-11 at 18 57 02\" src=\"https://user-images.githubusercontent.com/44498510/211775759-be64e815-3d5d-4c94-98e6-a29ecf861012.png\">\r\n<img width=\"777\" alt=\"Screen Shot 2023-01-11 at 18 57 07\" src=\"https://user-images.githubusercontent.com/44498510/211775783-039de97b-91eb-4c69-b49f-685e33c9dd01.png\">\r\n"},{"url":"https://github.com/stylus/stylus/issues/2750#issuecomment-1565591453","body":"This is still an issue today, even with simpler examples:\r\n\r\n```stylus\r\n.menu-item:is(:hover, :focus)\r\n    color red\r\n```\r\n\r\nShould render:\r\n```css\r\n.menu-item:is(:hover, :focus) { color: red; }\r\n```\r\n\r\nBut render this instead:\r\n```css\r\n.menu-item:is(:hover, .menu-item :focus) { color: red; }\r\n```"},{"url":"https://github.com/stylus/stylus/issues/2750#issuecomment-1703767692","body":"This problem also appears to occur when `:not` is used\r\n\r\nFrom this I can infer that the problem is apparently occurring in pseudo-classes that accept a list of selectors in general.\r\n\r\n![image](https://github.com/stylus/stylus/assets/70838736/ce27bba2-6057-428c-9e7c-9967a95c33e9)\r\n"},{"url":"https://github.com/stylus/stylus/issues/2750#issuecomment-1703773033","body":"Hello, everyone. I don't have enough bandwidth to fix it, so you can use [`@css`](https://stylus-lang.com/docs/literal.html) as a workaround."},{"url":"https://github.com/stylus/stylus/issues/2750#issuecomment-1703793968","body":"> Hello, everyone. I don't have enough bandwidth to fix it, so you can use [`@css`](https://stylus-lang.com/docs/literal.html) as a workaround.\r\n\r\ncan use this function to avoid the problem, but I just want it to be fixed officially.\r\n\r\n```css\r\nbuildL4(type, args...) {\r\n    st1 = join('', ':', type, '(', join('\\, ', args), ')')\r\n    selector(st1)\r\n}\r\n\r\n{buildL4('is', 'section.is-styling', 'aside.is-styling', 'footer.is-styling')} {\r\n  a {\r\n    color: red;\r\n  }\r\n}\r\n\r\n\r\n.is-styling{buildL4('is', 'section', 'aside', 'footer')} {\r\n  b {\r\n    color: blue;\r\n  }\r\n}\r\n\r\n```\r\nIt is proven working since I created this issue.\r\n"},{"url":"https://github.com/stylus/stylus/issues/2750#issuecomment-2033110511","body":"@iChenLei, can you please point me in the direction where the codebase might break on this issue? I want to try and fix it."},{"url":"https://github.com/stylus/stylus/issues/2750#issuecomment-2201728635","body":"Unfortunately, the use of  [`@css`](https://stylus-lang.com/docs/literal.html) means that a functional selector wrapping a long(ish) section of nested (AKA stylus, not CSS) selectors is a no-go … except for @cyfung1031's  outsanding workaround.\r\n\r\nWe no longer have to wait for this one to be adopted and fixed by a caring volunteer. Thanks!"},{"url":"https://github.com/stylus/stylus/issues/2750#issuecomment-2408512108","body":"`:is(a\\\\\\,b)` might simply solve the problem in most cases."}]}