Incorrect color of * selector with (S)CSS and LESS when combined with brackets #192273
Assignees
Milestone
Comments
abcdabcabcabcd00
changed the title
|
It also affects right brackets after asterisks |
|
|
|
This is what I see in the latest insiders with a fresh profile (default theme, no settings or extensions installed):
I don't see that That's in the CSS language mode, but this also looks ok in LESS or SCSS |
{
"security.workspace.trust.banner": "always",
"workbench.iconTheme": "vscode-icons",
"vsicons.dontShowNewVersionMessage": true,
"liveServer.settings.donotShowInfoMsg": true,
"explorer.confirmDragAndDrop": false,
"livePreview.autoRefreshPreview": "On Changes to Saved Files",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
// "editor.defaultFormatter": "Vue.volar",
// "editor.defaultFormatter": "vscode.typescript-language-features"
},
"workbench.editor.untitled.hint": "hidden",
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
"files.associations": {
"*.ini-development": "ini",
"*.sql": "sql"
},
"[php]": {
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},
"php.suggest.basic": false,
"security.workspace.trust.enabled": false,
"[sql]": {
"editor.defaultFormatter": "mtxr.sqltools"
},
"redhat.telemetry.enabled": true,
"hexeditor.columnWidth": 16,
"hexeditor.showDecodedText": true,
"hexeditor.defaultEndianness": "little",
"hexeditor.inspectorType": "aside",
"snyk.yesWelcomeNotification": false,
"editor.snippetSuggestions": "none",
"editor.suggest.showSnippets": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"workbench.editorAssociations": {
"*.zip": "hexEditor.hexedit"
},
"markdown-preview-enhanced.previewTheme": "atom-dark.css",
"editor.linkedEditing": true,
"[python]": {
"editor.formatOnType": true
// "editor.formatOnType": true
},
// "editor.formatOnType": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"workbench.layoutControl.enabled": false,
"powershell.promptToUpdatePowerShell": false,
// "terminal.integrated.profiles.windows": {
// "PowerShell": {
// "source": "PowerShell",
// "icon": "terminal-powershell",
// "args": [
// "-noexit",
// "-file",
// "C:\\Users\\L\\Documents\\PowerShell\\vscode.ps1"
// ]
// },
// "Command Prompt": {
// "path": [
// "${env:windir}\\Sysnative\\cmd.exe",
// "${env:windir}\\System32\\cmd.exe"
// ],
// "args": [],
// "icon": "terminal-cmd"
// },
// "Git Bash": {
// "source": "Git Bash"
// }
// },
// "editor.largeFileOptimizations": false,
"editor.maxTokenizationLineLength": 200000,
// "editor.maxTokenizationLineLength": 0,
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "//",
"color": "#474747",
"strikethrough": true,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "todo",
"color": "#FF8C00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
}
],
"editor.fontFamily": "'Cascadia Code PL', 'Cascadia Mono', 'Segoe Fluent Icons', Consolas, monospace",
"terminal.integrated.fontFamily": "'Cascadia Code PL', Consolas, monospace",
"editor.fontLigatures": true, // Test: ===
"editor.accessibilitySupport": "off",
"snyk.trustedFolders": ["/mnt/c/Users/L/Documents/Gits/bun"],
"powershell.powerShellDefaultVersion": "PowerShell (x64)",
"arduino.useArduinoCli": true,
"git.enableSmartCommit": true,
"[xslt]": {
"editor.semanticHighlighting.enabled": true
},
"git.confirmSync": false,
//
//
//
// Custom theming
//
"editor.tokenColorCustomizations": {
"[Default Dark Modern]": {
"textMateRules": [
/**
* General
*/
{
"name": "Punctuation in numbers",
"scope": "meta.delimiter.decimal.period",
"settings": {
"foreground": "#8bb49c"
}
},
{
"name": "String customization (start and end)",
"scope": "punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end",
"settings": {
"foreground": "#955e47"
}
},
{
"name": "Value customization (start and end)",
"scope": "punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end",
"settings": {
"foreground": "#6dadce"
}
},
{
"name": "Accessors (periods)",
"scope": "punctuation.accessor, punctuation.separator.period",
"settings": {
"foreground": "#ebd3e6"
}
},
{
"name": "Operator (Logical)",
"scope": "keyword.operator.logical",
"settings": {
// "fontStyle": "bold"
}
},
{
"name": "Operator (Arithmetic, like +, -, /, *)",
"scope": "keyword.operator.arithmetic",
"settings": {
"foreground": "#d4d4d4"
}
},
{
"name": "Primitive types",
"scope": "support.type.primitive",
"settings": {
"foreground": "#d78049"
}
},
{
"name": "Namespace colors",
"scope": "entity.name.namespace, entity.name.type.module.ts",
"settings": {
"foreground": "#a286b7"
}
},
{
"name": "Block comments",
"scope": "comment.block.documentation, comment.documentation",
"settings": {
"foreground": "#588744"
}
},
{
// Applies to: Java, JavaScript/TypeScript, (S)CSS, C# and C/C++
"name": ";",
"scope": "punctuation.terminator.statement, punctuation.terminator",
"settings": {
"foreground": "#999"
// "fontStyle": "italic"
}
},
/**
* Python
*/
{
"name": "Python start punctuation (function/class/etc.)",
"scope": "punctuation.section.function.begin.python, punctuation.section.class.begin.python, punctuation.section.function.lambda.begin.python",
"settings": {
"foreground": "#7a78c1"
}
},
{
"name": "Python -> fix",
"scope": "punctuation.separator.annotation.result",
"settings": {
"foreground": "#7a78c1"
}
},
{
"name": "Python magic functions",
"scope": "support.function.magic.python",
"settings": {
"foreground": "#ffa4a4"
}
},
/**
* JavaScript/TypeScript
*/
/**
* Vue
*/
{
"name": "':' in Vue",
"scope": "punctuation.attribute-shorthand.bind",
"settings": {
"foreground": "#4FC1FF"
}
},
/**
* PlatformIO
*/
{
"name": "PlatformIO General registers",
"scope": "constant.language.registers.general-purpose",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"name": "PlatformIO Jump",
"scope": "keyword.mnemonic.general-purpose.control-transfer",
"settings": {
"foreground": "#569CD6"
}
},
/**
* ini
*/
{
"name": ".ini fix (name)",
"scope": "entity.name.section.group-title",
"settings": {
"foreground": "#4EC9B0"
}
},
/**
* PowerShell
*/
{
"name": "PowerShell color fix (Gb/Mb/etc.)",
"scope": "keyword.other.powershell",
"settings": {
"foreground": "#C586C0"
}
},
{
"name": "PowerShell $ fix",
"scope": "punctuation.definition.variable.powershell",
"settings": {
// "foreground": "#4EC9B0",
"fontStyle": "bold"
}
},
{
"scope": "support.constant.powershell",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"scope": "meta.group.simple.subexpression.powershell",
"settings": {
"foreground": "#DCDCAA"
}
},
{
"scope": "keyword.operator",
"settings": {
"foreground": "#569CD6"
}
},
/**
* CSS/SCSS/SASS
*/
{
"name": "SASS Color Fix",
"scope": "constant.other.color.rgb-value.hex, constant.language.color.rgb-value",
"settings": {
"foreground": "#569CD6"
}
},
// {
// // May also fix other languages (needs to be done this way to be future proof)
// "name": "SCSS Incorrect unit highlighting fix",
// "scope": "keyword.other.unit",
// "settings": {
// "foreground": "#C586C0"
// }
// },
// {
// "name": "SCSS non-existant Fix (consistency)",
// "scope": "meta.property-name.scss",
// "settings": {
// "foreground": "#9CDCFE"
// }
// },
{
"name": "Character name",
"scope": "constant.character.module.name",
"settings": {
"foreground": "#d4d4d4"
}
},
// {
// "name": "Hi",
// "scope": "punctuation.separator.key-value",
// "settings": {
// "foreground": "#4FC1FF"
// }
// },
{
"name": "LESS Non-existant properties Fix",
"scope": "entity.name.tag.custom.css",
"settings": {
"foreground": "#9CDCFE"
}
},
/**
* Java
*/
{
"name": "RedHat java package highlighting fix",
"scope": "storage.modifier.package.java",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"name": "RedHat java import highlighting fix",
"scope": "storage.modifier.import.java",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"name": "RedHat java punctuation (fixes a bug in the other fixes)",
"scope": "punctuation.separator.java",
"settings": {
"foreground": "#d4d4d4"
}
},
/**
* JSON5
*/
{
"name": "JSON5 Keys",
"scope": "string.key.json5",
"settings": {
"foreground": "#9CDCFE"
}
},
{
"name": "JSON5 Numeric constants (like 93.54)",
"scope": "constant.dec.numeric.json5",
"settings": {
"foreground": "#B5CEA8"
}
},
/**
* SQL
*/
{
"name": "Fix for SQL single quotes",
"scope": "punctuation.definition.string.end.sql",
"settings": {
"foreground": "#CE9178"
}
},
{
"name": "Fix for SQL double quotes",
"scope": "punctuation.definition.string.begin.sql",
"settings": {
"foreground": "#CE9178"
}
},
/**
* PHP
*/
{
"name": "PHP Namespaces",
"scope": "support.other.namespace.php",
"settings": {
"foreground": "#a286b7"
}
},
{
"name": "PHP Aliases",
"scope": "entity.other.alias.php",
"settings": {
"foreground": "#4EC9B0"
}
},
{
"scope": "keyword.operator.key",
"settings": {
"foreground": "#999999"
}
}
]
}
},
"editor.semanticTokenColorCustomizations": {
"[Default Dark+]": {}
},
"telemetry.telemetryLevel": "error",
"gitlens.telemetry.enabled": false,
"intelephense.telemetry.enabled": false,
"git.autofetch": true,
"workbench.startupEditor": "none",
"svg.preview.mode": "svg",
"[svg]": {
"editor.defaultFormatter": "redhat.vscode-xml"
},
"editor.minimap.showSlider": "always",
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"auto-close-tag.activationOnLanguage": [
"xml",
"php",
"blade",
"jinja",
"markdown",
"vue",
"liquid",
"erb",
"lang-cfml",
"cfml"
],
"workbench.colorCustomizations": {
"[Default Dark Modern]": {
"statusBar.background": "#181818",
"statusBar.noFolderBackground": "#181818",
"statusBar.debuggingBackground": "#181818",
// "titleBar.activeBackground": "#2a2a2a",
// "titleBar.inactiveBackground": "#2a2a2a",
// "statusBar.background": "#000000",
// "statusBar.noFolderBackground": "#000000",
// "statusBar.offlineBackground": "#000000",
// "statusBar.debuggingBackground": "#000000",
// "statusBar.border": "#101010",
// "editorBracketHighlight.foreground1": "#00B2FF",
// "editorBracketHighlight.foreground2": "#00E5BB",
// "editorBracketHighlight.foreground3": "#F8502D",
// "button.background": "#4cc2ff",
// "button.hoverBackground": "#47b1e8",
// "button.secondaryBackground": "#2d2d2d",
// "button.secondaryHoverBackground": "#323232",
// "button.foreground": "#000000",
// "textLink.foreground": "#99ebff",
// "titleBar.activeBackground": "#000000",
// "titleBar.inactiveBackground": "#000000",
// "titleBar.border": "#101010",
// "sideBar.background": "#000000",
// "panel.background": "#000000",
// "banner.background": "#FF0000",
// "editor.background": "#000000",
// "menubar.selectionBackground": "#202020",
// "editorGroupHeader.border": "#101010",
// "editorGroupHeader.tabsBackground": "#000000",
// "editorGroupHeader.noTabsBackground": "#000000",
// "editorGroupHeader.tabsBorder": "#000000",
// "editorGroup.border": "#101010",
// "tab.inactiveBackground": "#000000",
// "tab.border": "#101010",
// "tab.activeBackground": "#101010",
// "tab.activeBorder": "#101010",
// "activityBar.background": "#000000",
// "activityBar.border": "#101010",
// "editorCursor.background": "#FFFFFF",
// "editorCursor.foreground": "#404040",
// "selection.background": "#202020",
// "editor.selectionBackground": "#303030",
// "editor.selectionHighlightBorder": "#202020",
// "editor.selectionHighlightBackground": "#101010",
// "editorWarning.foreground": "#0000",
// "editorWarning.background": "#88884488",
// "editorError.foreground": "#0000",
// "editorError.background": "#FF000088",
// "editor.lineHighlightBackground": "#101010",
// "editor.lineHighlightBorder": "#202020",
// "menu.background": "#101010",
// "menu.border": "#101010",
// "menu.separatorBackground": "#202020",
// "menu.selectionBackground": "#202020",
// "editor.findMatchHighlightBackground": "#400040",
// "background"
}
},
// "editor.cursorStyle": "block",
// "editor.cursorBlinking": "solid",
"prettier.tabWidth": 4,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.bracketPairColorization.enabled": true,
"fluent-ui-vscode.enableWallpaper": false,
"workbench.enableExperiments": true,
"editor.inlayHints.enabled": "on",
"typescript.inlayHints.parameterNames.enabled": "all",
"typescript.inlayHints.enumMemberValues.enabled": true,
"typescript.inlayHints.functionLikeReturnTypes.enabled": true,
"typescript.inlayHints.parameterTypes.enabled": true,
"typescript.inlayHints.propertyDeclarationTypes.enabled": true,
"typescript.inlayHints.variableTypes.enabled": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}This is my current configuration |
|
This is due to the ligature pairs of the Cascadia Code font, similar to JetBrains/JetBrainsMono#643. The combined pair are colored the same way (either in the color of first character or the second one). You should probably report in https://github.com/microsoft/cascadia-code instead. There is a similar issue at microsoft/cascadia-code#443 but that's just one special case. Update: someone else reported at microsoft/cascadia-code#699 |
|
Thanks @stevenlele for figuring this out. Closing the issue. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
and others
Does this issue occur when all extensions are disabled?: Yes/No
Steps to Reproduce:
Without bracket colorization it looks like
The editor seems to think of them as the same token
It does not occur if you place a space:
It seems to be a bug in bracket pair highlighting? (Even when it is disabled)
It also occurs without bracket pair colorization (
"editor.bracketPairColorization.enabled": false)This is NOT an extension issue, with extensions disabled it still occurs
It only occurs with an asterisk (
*), a+is fineI found the issue when writing the query of
body:has(*:is(:not(p))), where the bug occursThe text was updated successfully, but these errors were encountered: