GNU bug report logs - #61472
29.0.60; css{-ts}-mode highlight problem

Previous Next

Package: emacs;

Reported by: 牟 桐 <mou.tong <at> outlook.com>

Date: Mon, 13 Feb 2023 09:16:02 UTC

Severity: normal

Found in version 29.0.60

To reply to this bug, email your comments to 61472 AT debbugs.gnu.org.

Toggle the display of automated, internal messages from the tracker.

View this report as an mbox folder, status mbox, maintainer mbox


Report forwarded to bug-gnu-emacs <at> gnu.org:
bug#61472; Package emacs. (Mon, 13 Feb 2023 09:16:02 GMT) Full text and rfc822 format available.

Acknowledgement sent to 牟 桐 <mou.tong <at> outlook.com>:
New bug report received and forwarded. Copy sent to bug-gnu-emacs <at> gnu.org. (Mon, 13 Feb 2023 09:16:02 GMT) Full text and rfc822 format available.

Message #5 received at submit <at> debbugs.gnu.org (full text, mbox):

From: 牟 桐 <mou.tong <at> outlook.com>
To: "bug-gnu-emacs <at> gnu.org" <bug-gnu-emacs <at> gnu.org>
Subject: 29.0.60; css{-ts}-mode highlight problem
Date: Mon, 13 Feb 2023 09:10:46 +0000
Hi there,

I met a css-mode's highlight problem.

Create a test.css file:

``` css-ts-mode
.test\.123 {
  color: red;
}
.test\#123 {
  color: blue;
}
.test\@123 {
  color: green;
}
.test\<123 {
  color: brown;
}
.test\`123 {
  color: purple;
}
.test\~123 {
  color: tomato;
}
```

Then import the css file in the test.html file:

``` html-ts-mode
<head>
  <link rel="stylesheet" type="text/css" href="./test.css"  />
</head>
<body>
  <div class="test.123">test.123</div>
  <div class="test#123">test#123</div>
  <div class="test <at> 123">test <at> 123</div>
  <div class="test<123">test<123</div>
  <div class="test`123">test`123</div>
  <div class="test~123">test~123</div>
</body>
```

We can see all of the div inner text are colored correctly, but when
using css-ts-mode, there will be an error face after the escaped
character `\.123` and so on; on `css-mode`, these css class names are not
highlighted.

When I'm checking the [offical
doc](https://www.w3.org/TR/CSS21/syndata.html#characters), I saw that

> In CSS, identifiers can contain only the characters [a-zA-Z0-9] and
> ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the
> underscore (_)

I don't know whether the major mode is designed to work like this (since
the official said the `.` `#` ... are invalid, perhaps the browser made
them work) or is the major mode's bug.

Thanks ;)


In GNU Emacs 29.0.60 (build 1, x86_64-apple-darwin21.6.0, NS
appkit-2113.60 Version 12.6.3 (Build 21G419)) of 2023-02-13 built on
dalum.local
Repository revision: f49caaa892576e5fa95373c38e6a99904249551c
Repository branch: emacs-29
Windowing system distributor 'Apple', version 10.3.2113
System Description:  macOS 12.6.3

Configured using:
'configure --with-native-compilation=aot'

Configured features:
ACL DBUS GIF GLIB GMP GNUTLS JPEG JSON LCMS2 LIBXML2 MODULES NATIVE_COMP
NOTIFY KQUEUE NS PDUMPER PNG RSVG SQLITE3 THREADS TIFF
TOOLKIT_SCROLL_BARS TREE_SITTER WEBP XIM ZLIB

Important settings:
  value of $LANG: en_US.UTF-8
  locale-coding-system: utf-8-unix

Major mode: CSS

Minor modes in effect:
  global-avy-zh-mode: t
  avy-zh-mode: t
  global-git-commit-mode: t
  shell-dirtrack-mode: t
  subword-mode: t
  rainbow-delimiters-mode: t
  editorconfig-mode: t
  eyebrowse-mode: t
  diff-hl-flydiff-mode: t
  global-diff-hl-mode: t
  diff-hl-mode: t
  vertico-mode: t
  corfu-popupinfo-mode: t
  global-corfu-mode: t
  corfu-mode: t
  global-hl-todo-mode: t
  hl-todo-mode: t
  yas-global-mode: t
  yas-minor-mode: t
  global-evil-zh-mode: t
  evil-zh-mode: t
  global-evil-surround-mode: t
  evil-surround-mode: t
  evil-mode: t
  evil-local-mode: t
  windmove-mode: t
  treesit-explore-mode: t
  treesit-inspect-mode: t
  winum-mode: t
  marginalia-mode: t
  auto-compile-on-load-mode: t
  auto-compile-on-save-mode: t
  override-global-mode: t
  pixel-scroll-precision-mode: t
  display-time-mode: t
  winner-mode: t
  electric-pair-mode: t
  global-auto-revert-mode: t
  save-place-mode: t
  global-so-long-mode: t
  delete-selection-mode: t
  recentf-mode: t
  tooltip-mode: t
  global-eldoc-mode: t
  show-paren-mode: t
  electric-indent-mode: t
  mouse-wheel-mode: t
  tool-bar-mode: t
  menu-bar-mode: t
  file-name-shadow-mode: t
  global-font-lock-mode: t
  font-lock-mode: t
  size-indication-mode: t
  column-number-mode: t
  line-number-mode: t
  transient-mark-mode: t
  auto-composition-mode: t
  auto-encryption-mode: t
  auto-compression-mode: t

Load-path shadows:
/Users/mou/.emacs.d/etc/abbrev hides /Applications/Emacs.app/Contents/Resources/lisp/abbrev

Features:
(shadow sort mail-extr emacsbug tabify evil-nerd-commenter
evil-nerd-commenter-operator evil-nerd-commenter-sdk eglot
external-completion array jsonrpc ert debug backtrace find-func xref
flymake-proc flymake ace-window avy-zh avy files-x color-rg grep compile
css-mode smie sgml-mode facemenu eww xdg url-queue shr pixel-fill
kinsoku url-file svg xml dom mm-url gnus nnheader range face-remap
forge-list forge-commands forge-semi forge-bitbucket buck forge-gogs
gogs forge-gitea gtea forge-gitlab glab forge-github ghub-graphql treepy
gsexp ghub url-http url-gw nsm url-auth let-alist gnutls forge-notify
forge-revnote forge-pullreq forge-issue forge-topic yaml parse-time
iso8601 bug-reference forge-post markdown-mode edit-indirect noutline
outline forge-repo forge forge-core forge-db closql emacsql-sqlite
emacsql emacsql-compiler magit-bookmark magit-submodule magit-obsolete
magit-blame magit-stash magit-reflog magit-bisect magit-push magit-pull
magit-fetch magit-clone magit-remote magit-commit magit-sequence
magit-notes magit-worktree magit-tag magit-merge magit-branch
magit-reset magit-files magit-refs magit-status magit magit-repos
magit-apply magit-wip magit-log which-func magit-diff smerge-mode
git-commit log-edit message sendmail yank-media puny rfc822 mml mml-sec
epa epg rfc6068 epg-config gnus-util mm-decode mm-bodies mm-encode
mail-parse rfc2231 rfc2047 rfc2045 mm-util ietf-drums mail-prsvr
mailabbrev mail-utils gmm-utils mailheader add-log magit-core
magit-autorevert magit-margin magit-transient magit-process with-editor
shell pcomplete comint ansi-osc server ansi-color magit-mode transient
magit-git magit-base magit-section crm shortdoc help-fns dabbrev
cape-keyword cape apheleia typescript-ts-mode vc-hg vc-bzr vc-src
vc-sccs vc-cvs vc-rcs diff-hl-dired misearch multi-isearch js
c-ts-common imenu citre-lang-c cc-mode cc-fonts cc-guess cc-menus
cc-cmds cc-styles cc-align cc-engine cc-vars cc-defs json-ts-mode vc-git
vc-svn citre citre-global emmet-mode web-mode disp-table time-date
gruvbox-theme gruvbox autothemer tango-theme consult-vertico consult
bookmark text-property-search pp jka-compr cap-words superword subword
rainbow-delimiters editorconfig package browse-url url url-proxy
url-privacy url-expand url-methods url-history url-cookie url-domsuf
url-util mailcap url-handlers url-parse auth-source eieio eieio-core
password-cache json map url-vars editorconfig-core
editorconfig-core-handle editorconfig-fnmatch eyebrowse format-spec
diff-hl-flydiff diff diff-hl log-view pcvs-util vc-dir ewoc vc
vc-dispatcher diff-mode orderless vertico corfu-popupinfo corfu hl-todo
yasnippet init-lsp init-python init-dart init-web derived init-lua
init-js init-tex init-sexp init-chinese init-snippet init-markup
init-evil general evil-zh evil-surround evil evil-keybindings
evil-integration evil-maps evil-commands reveal evil-jumps
evil-command-window evil-search evil-ex evil-types evil-macros
evil-repeat evil-states evil-core advice evil-common windmove calc
calc-loaddefs calc-macs thingatpt rect evil-digraphs evil-vars init-irc
init-reader init-misc init-check flyspell ispell init-prog citre-config
citre-lang-fileref citre-tags citre-ctags citre-readtags
citre-readtags-tables citre-backend-interface citre-ui-peek color
citre-ui-jump citre-common-tag citre-common-util project byte-opt
treesit init-corfu init-vertico init-vc init-edit winum dash edmacro
kmacro marginalia zh-lib init-package no-littering compat auto-compile
comp comp-cstr warnings icons use-package use-package-ensure
use-package-delight use-package-diminish use-package-bind-key bind-key
use-package-core zh-lib-autoloads zenburn-theme-autoloads
yasnippet-autoloads yaml-autoloads xr-autoloads with-editor-autoloads
winum-autoloads wgrep-autoloads websocket-autoloads web-mode-autoloads
vundo-autoloads vertico-autoloads valign-autoloads treepy-autoloads
tomelr-autoloads toc-org-autoloads tao-theme-autoloads tablist-autoloads
subed-autoloads srcery-theme-autoloads spacemacs-theme-autoloads
solarized-theme-autoloads sinolor-themes-autoloads separedit-autoloads
search-dired-autoloads s-autoloads request-autoloads
rainbow-mode-autoloads rainbow-delimiters-autoloads
pyim-basedict-autoloads pyim-autoloads pug-mode-autoloads
posframe-autoloads popon-autoloads polymode-autoloads php-mode-autoloads
pdf-tools-autoloads ox-hugo-autoloads organic-green-theme-autoloads
orderless-autoloads nord-theme-autoloads no-littering-autoloads
monokai-theme-autoloads moe-theme-autoloads material-theme-autoloads
markdown-mode-autoloads marginalia-autoloads magit-autoloads
lua-mode-autoloads llama-autoloads leuven-theme-autoloads
kaolin-themes-autoloads htmlize-autoloads hl-todo-autoloads
gruvbox-theme-autoloads green-is-the-new-black-theme-autoloads
goto-chg-autoloads git-modes-autoloads git-link-autoloads ghub-autoloads
ggtags-autoloads general-autoloads geiser-mit-autoloads
geiser-guile-autoloads geiser-autoloads forge-autoloads f-autoloads
eyebrowse-autoloads expand-region-autoloads evil-zh-autoloads
evil-surround-autoloads evil-nerd-commenter-autoloads evil-autoloads
epkg-marginalia-autoloads epkg-autoloads embark-autoloads
emacsql-autoloads elfeed-org-autoloads elfeed-autoloads ein-autoloads
ef-themes-autoloads editorconfig-autoloads edit-indirect-autoloads
dracula-theme-autoloads doom-themes-autoloads diff-hl-autoloads
deferred-autoloads dash-autoloads dart-mode-autoloads
darktooth-theme-autoloads darkroom-autoloads cyberpunk-theme-autoloads
corfu-autoloads consult-autoloads compat-autoloads
color-theme-sanityinc-tomorrow-autoloads
color-theme-sanityinc-solarized-autoloads color-rg-autoloads
closql-autoloads citre-autoloads chocolate-theme-autoloads
challenger-deep-theme-autoloads cape-autoloads borg-autoloads
avy-zh-autoloads avy-autoloads autothemer-autoloads
auto-yasnippet-autoloads auto-compile-autoloads
atom-one-dark-theme-autoloads async-autoloads apheleia-autoloads
anti-zenburn-theme-autoloads anaphora-autoloads ample-theme-autoloads
all-the-icons-autoloads alect-themes-autoloads cl-extra help-mode
ace-window-autoloads cl-seq borg loaddefs-gen generate-lisp-file
lisp-mnt radix-tree info bytecomp byte-compile init-gui pixel-scroll
cua-base subr-x init-ibuffer ibuf-macs init-org init-dired dired-aux
dired-x dired dired-loaddefs init-funcs rx easy-mmode cl-macs gv pcase
init-modeline time init-utils whitespace winner ring midnight elec-pair
autorevert filenotify saveplace so-long delsel recentf tree-widget
wid-edit cl-loaddefs cl-lib rmc iso-transl tooltip cconv eldoc paren
electric uniquify ediff-hook vc-hooks lisp-float-type elisp-mode mwheel
term/ns-win ns-win ucs-normalize mule-util term/common-win tool-bar dnd
fontset image regexp-opt fringe tabulated-list replace newcomment
text-mode lisp-mode prog-mode register page tab-bar menu-bar rfn-eshadow
isearch easymenu timer select scroll-bar mouse jit-lock font-lock syntax
font-core term/tty-colors frame minibuffer nadvice seq simple cl-generic
indonesian philippine cham georgian utf-8-lang misc-lang vietnamese
tibetan thai tai-viet lao korean japanese eucjp-ms cp51932 hebrew greek
romanian slovak czech european ethiopic indian cyrillic chinese
composite emoji-zwj charscript charprop case-table epa-hook
jka-cmpr-hook help abbrev obarray oclosure cl-preloaded button loaddefs
theme-loaddefs faces cus-face macroexp files window text-properties
overlay sha1 md5 base64 format env code-pages mule custom widget keymap
hashtable-print-readable backquote threads dbusbind kqueue cocoa ns
lcms2 multi-tty make-network-process native-compile emacs)

Memory information:
((conses 16 792520 441243)
(symbols 48 40733 22)
(strings 32 151490 77073)
(string-bytes 1 5490587)
(vectors 16 94385)
(vector-slots 8 2370699 636685)
(floats 8 569 1493)
(intervals 56 18288 7932)
(buffers 984 60))




Information forwarded to bug-gnu-emacs <at> gnu.org:
bug#61472; Package emacs. (Tue, 14 Feb 2023 01:27:01 GMT) Full text and rfc822 format available.

Message #8 received at 61472 <at> debbugs.gnu.org (full text, mbox):

From: Dmitry Gutov <dgutov <at> yandex.ru>
To: 牟 桐 <mou.tong <at> outlook.com>, 61472 <at> debbugs.gnu.org
Subject: Re: bug#61472: 29.0.60; css{-ts}-mode highlight problem
Date: Tue, 14 Feb 2023 03:26:04 +0200
On 13/02/2023 11:10, 牟 桐 wrote:
> When I'm checking the [offical
> doc](https://www.w3.org/TR/CSS21/syndata.html#characters), I saw that
> 
>> In CSS, identifiers can contain only the characters [a-zA-Z0-9] and
>> ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the
>> underscore (_)
> I don't know whether the major mode is designed to work like this (since
> the official said the `.` `#` ... are invalid, perhaps the browser made
> them work) or is the major mode's bug.
> 
> Thanks 😉

The parser indeed doesn't seem to be able to parse that text. I'm not 
sure whether it's an unofficial extension, or it's simply not expected 
to work in CSS files.

If it's the former, and the browsers support it, filing an issue at the 
grammar repo could help: 
https://github.com/tree-sitter/tree-sitter-css/issues

If it's the latter, here's some advice at the end of this answer: 
https://stackoverflow.com/a/32273294/615245 (to use ~=).




Information forwarded to bug-gnu-emacs <at> gnu.org:
bug#61472; Package emacs. (Thu, 30 Mar 2023 04:40:02 GMT) Full text and rfc822 format available.

Message #11 received at 61472 <at> debbugs.gnu.org (full text, mbox):

From: 牟 桐 <mou.tong <at> outlook.com>
To: Dmitry Gutov <dgutov <at> yandex.ru>, "61472 <at> debbugs.gnu.org"
 <61472 <at> debbugs.gnu.org>
Subject: bug#61472: 29.0.60; css{-ts}-mode highlight problem
Date: Thu, 30 Mar 2023 04:39:44 +0000
[Message part 1 (text/plain, inline)]
> The parser indeed doesn't seem to be able to parse that text.

I apologize for not responding to your message earlier; I did not
receive a notification from my email. Upon checking the website archive,
I realized that you had responded to my question.

It is recommended to avoid using behaviors that are not defined in
official documents. As I am not familiar with tree-sitter, I may need
some time to investigate whether the issue is related to the parser or
not. Thx for your advice ;)
[Message part 2 (text/html, inline)]

This bug report was last modified 1 year and 239 days ago.

Previous Next


GNU bug tracking system
Copyright (C) 1999 Darren O. Benham, 1997,2003 nCipher Corporation Ltd, 1994-97 Ian Jackson.