bug#21328: 25.0.50; css-mode: Indenting brackets in presence of pseudo-selectors

bug#21328: 25.0.50; css-mode: Indenting brackets in presence of pseudo-selectors

[Simen Heggestøyl]

[-- Attachment #1: Type: text/plain, Size: 1603 bytes --]

The current indentation rules in css-mode work well both for a style
where opening brackets are put at the the same line of selectors, like
so: "body { …", and when they are put on their own line, like in the
following example:

body
{
    background: white;

    main
    {
        background: green;
    }
}

However in the presence of a pseudo-class or pseudo-element, the
opening bracket that follows runs amok:

body
{
    background: white;

    main:first
             {
                 background: green;
             }
}

This should be fixed to accommodate both styles. It seems to me that
removing the `smie-rule-hanging-p' test from the following rule fixes
the problem:

(`(:before . "{")
 (when (smie-rule-hanging-p)
   (smie-backward-sexp ";")
   (smie-indent-virtual)))

However I haven't been able to fully understand how SMIE works yet, so
I'm not sure what that check was meant for in the first place, or
whether it breaks some other cases (though I haven't been able to find
such a case).

-- Simen


In GNU Emacs 25.0.50.15 (x86_64-unknown-linux-gnu, GTK+ Version 3.16.6)
 of 2015-08-23 on x240
Repository revision: 7372c1ab067ba93054fbb042cd13211042b83614
Windowing system distributor `The X.Org Foundation', version 
11.0.11702000
System Description:	Debian GNU/Linux testing (stretch)

Configured features:
XPM JPEG TIFF GIF PNG SOUND DBUS GSETTINGS NOTIFY LIBXML2 FREETYPE XFT
ZLIB TOOLKIT_SCROLL_BARS GTK3 X11

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

Major mode: CSS

[-- Attachment #2: Type: text/html, Size: 2492 bytes --]

bug#21328: 25.0.50; css-mode: Indenting brackets in presence of pseudo-selectors

[Stefan Monnier]

>    main:first
>             {
>                 background: green;
>             }
> }
[...]
> (`(:before . "{")
>   (when (smie-rule-hanging-p)
>     (smie-backward-sexp ";")
>     (smie-indent-virtual)))

The (smie-rule-hanging-p) test checks if the "{" is at the end of the
line (and with text before it on the same line).  I guess you could use
something like

   (when (or (smie-rule-hanging-p) (smie-rule-bolp))

tho for the bolp case, maybe some people like

   main:first
     {
       background: green;
     }

since that's the "standard GNU style" in C/C++ (so for the bolp case, we
might like to add the indentation step to the return value of
smie-indent-virtual).
The current behavior is "almost" like this standard, except that it
indents relatively to the "first" instead of doing it relatively to the
"main", because it misparses the above as

   main : (first {...})

i.s.o

   (main : first) {...}

[ Where I added parentheses just to clarify the grouping.  ]

> However I haven't been able to fully understand how SMIE works yet, so
> I'm not sure what that check was meant for in the first place, or
> whether it breaks some other cases (though I haven't been able to find
> such a case).

You could also remove the (smie-rule-hanging-p) test
altogether, indeed.  This could lead to mis-indentations in some cases,
tho I can't think of any right now that would show up in CSS.  E.g. things
where we'd want

   main:first {toto}
              (tutu)

because the "(tutu)" is like a "second argument" to "main:first", and
we'd instead get

   main:first {toto}
   (tutu)

because the `(:before . "{") case also triggers here when we compute the
(virtual) indentation of {toto}.


        Stefan

bug#21328: 25.0.50; css-mode: Indenting brackets in presence of pseudo-selectors

[Simen Heggestøyl]

[-- Attachment #1: Type: text/plain, Size: 2082 bytes --]

Thanks for the thorough explanations.

On Tue, Aug 25, 2015 at 3:06 PM, Stefan Monnier 
<monnier@iro.umontreal.ca> wrote:
> The (smie-rule-hanging-p) test checks if the "{" is at the end of the
> line (and with text before it on the same line).  I guess you could 
> use
> something like
> 
>    (when (or (smie-rule-hanging-p) (smie-rule-bolp))

That sounds good!

> tho for the bolp case, maybe some people like
> 
>    main:first
>      {
>        background: green;
>      }
> 
> since that's the "standard GNU style" in C/C++ [...]

I'm familiar with the GNU style for indenting C and C++ code, however
I've never seen CSS or Sass code indented that way; it seems to me
that CSS code is always indented in one of the two styles I described
in the previous email.

In sum, I propose the following patch:


 From cede79d7afe038290988070891367825f5b8c5d8 Mon Sep 17 00:00:00 2001
 From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?= <simenheg@gmail.com>
Date: Sun, 23 Aug 2015 12:51:57 +0200
Subject: [PATCH] Fix indentation rule in css-mode

* lisp/textmodes/css-mode.el (css-smie-rules): Fix indentation of
brackets in presence of pseudo-selectors.
---
 lisp/textmodes/css-mode.el | 2 +-
 test/indent/css-mode.css   | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index d73780c..639456d 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -344,7 +344,7 @@
     (`(:elem . arg) 0)
     (`(:list-intro . ,(or `";" `"")) t) ;"" stands for BOB (bug#15467).
     (`(:before . "{")
-     (when (smie-rule-hanging-p)
+     (when (or (smie-rule-hanging-p) (smie-rule-bolp))
        (smie-backward-sexp ";")
        (smie-indent-virtual)))
     (`(:before . ,(or "{" "("))
diff --git a/test/indent/css-mode.css b/test/indent/css-mode.css
index 67a6b1e..2f04e96 100644
--- a/test/indent/css-mode.css
+++ b/test/indent/css-mode.css
@@ -36,3 +36,8 @@ 
a.b:c,d.e:f,g[h]:i,j[k]:l,.m.n:o,.p.q:r,.s[t]:u,.v[w]:x { /* bug:20282 
*/
 div.x3
 {
 }
+
+article:hover
+{
+    color: black;
+}
-- 
2.5.0



[-- Attachment #2: Type: text/html, Size: 3000 bytes --]

bug#21328: 25.0.50; css-mode: Indenting brackets in presence of pseudo-selectors

[Stefan Monnier]

> I'm familiar with the GNU style for indenting C and C++ code, however
> I've never seen CSS or Sass code indented that way; it seems to me
> that CSS code is always indented in one of the two styles I described
> in the previous email.

OK.

> In sum, I propose the following patch:

Looks good, feel free to install it,
thank you,


        Stefan

bug#21328: 25.0.50; css-mode: Indenting brackets in presence of pseudo-selectors

[Simen Heggestøyl]

[-- Attachment #1: Type: text/plain, Size: 2 bytes --]




[-- Attachment #2: Type: text/html, Size: 4 bytes --]