bug#50345: 28.0.50; [PATCH] Filling holes in css-mode.el

bug#50345: 28.0.50; [PATCH] Filling holes in css-mode.el

[Theodor Thornhill via Bug reports for GNU Emacs, the Swiss army knife of text editors]

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


Hello!

In $DAYJOB, right now we are working on a larger redesign of our
customer facing web app.  As such I'm knee deep in css these days.  I've
noticed there are some holes in the completion keywords, and I'd like to
start addressing those.  Hence the first, simple starting-point patch.
Before I continue adding patches, I'd like some pointers as to how I
should structure them.  For example - lots of keywords are now shared
between grid and flex. An example is `align-content', which is now
under a section devoted to flex.  However, there are some newer,
grid-related completion keywords that are not in this section, nor
anywhere else.  See line 306 in css-mode.el. I guess the solution here
is to add `start' and `end' there, but I want to check first.

Should I add several, smaller patches, or one big correction of most of
the things I see at the moment?  

Best,
Theodor Thornhill



[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-Add-selection-to-css-pseudo-element-ids.patch --]
[-- Type: text/x-patch, Size: 853 bytes --]

From b0a4ec120d3371982878e523f33c34bed59c1371 Mon Sep 17 00:00:00 2001
From: Theodor Thornhill <theo@thornhill.no>
Date: Thu, 2 Sep 2021 20:27:19 +0200
Subject: [PATCH] Add selection to css-pseudo-element-ids

 * lisp/textmodes/css-mode.el (css-pseudo-element-ids): Add selection
 as an element id
---
 lisp/textmodes/css-mode.el | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index 61a2f6b3bc..3bcd9c9766 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -57,7 +57,7 @@
   "Identifiers for pseudo-classes.")
 
 (defconst css-pseudo-element-ids
-  '("after" "before" "first-letter" "first-line")
+  '("after" "before" "first-letter" "first-line" "selection")
   "Identifiers for pseudo-elements.")
 
 (defconst css-at-ids
-- 
2.30.1 (Apple Git-130)

bug#50345: 28.0.50; [PATCH] Filling holes in css-mode.el

[Theodor Thornhill via Bug reports for GNU Emacs, the Swiss army knife of text editors]

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


Hi again!

I took the liberty to add the keywords from [0].

I moved the justify and align parts out from the flex block and into its
own block.  I also took the liberty to add the `place' variants as well.
These are used a lot when using grid to set up your web page.  I hope
this is usable.  I see that some properties are extracted out into
variables, but not sure what is standard practice here.

Good evening,
Theodor


[0]: https://www.w3.org/TR/css-align-3


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-Add-CSS-Box-Alignment-Module-Level-3-to-css-mode.patch --]
[-- Type: text/x-patch, Size: 3482 bytes --]

From dccf92224cbe37805ae53edb49be4c098df47d0c Mon Sep 17 00:00:00 2001
From: Theodor Thornhill <theo@thornhill.no>
Date: Thu, 2 Sep 2021 23:13:02 +0200
Subject: [PATCH] Add CSS Box Alignment Module Level 3 to css-mode

* lisp/textmodes/css-mode.el (css-property-alist): Consolidate
`align-{contents, items, self}', as well as the corresponding values
for `justify-{contents, items, self}' and `place-{contents, items,
self}'.  Values extracted from the flex part and into its own block.
---
 lisp/textmodes/css-mode.el | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/lisp/textmodes/css-mode.el b/lisp/textmodes/css-mode.el
index 3bcd9c9766..f406afb7b6 100644
--- a/lisp/textmodes/css-mode.el
+++ b/lisp/textmodes/css-mode.el
@@ -301,14 +301,38 @@
     ("grid-template-columns" "none" track-list auto-track-list)
     ("grid-template-rows" "none" track-list auto-track-list)
 
+    ;; CSS Box Alignment Module Level 3
+    ;; (https://www.w3.org/TR/css-align-3/#alignment-values)
+    ("align-content" "center" "start" "end" "flex-start" "flex-end"
+     "normal" "first" "last" "baseline" "space-between" "space-around"
+     "space-evenly" "stretch" "safe" "unsafe")
+    ("align-items" "normal" "stretch" "center" "start" "end"
+     "flex-start" "flex-end" "baseline" "first" "last" "baseline"
+     "safe" "unsafe")
+    ("align-self" "auto" "normal" "center" "start" "end"
+     "self-start" "self-end" "flex-start" "flex-end"
+     "baseline" "first" "last" "stretch" "safe" "unsafe")
+    ("justify-content" "center" "start" "end" "flex-start" "flex-end"
+     "left" "right" "normal" "space-between" "space-around"
+     "space-evenly"  "stretch" "safe" "unsafe")
+    ("justify-items" "auto" "normal" "stretch" "center" "start" "end"
+     "flex-start" "flex-end" "self-start" "self-end" "left" "right"
+     "baseline" "first" "last" "legacy" "safe" "unsafe")
+    ("justify-self" "auto" "normal" "stretch" "center" "start" "end"
+     "flex-start" "flex-end" "self-start" "self-end" "left" "right"
+     "baseline" "first" "last" "safe" "unsafe")
+    ("place-content" "center" "start" "end" "left" "right" "flex-start"
+     "flex-end" "baseline" "first" "last" "space-evenly" "space-around"
+     "space-between")
+    ("place-items" "auto" "normal" "center" "start" "end"
+     "self-start" "self-end" "flex-start" "flex-end"
+     "left" "right" "baseline" "first" "last" "stretch")
+    ("place-self" "auto" "center" "start" "end" "self-start" "self-end"
+     "flex-start" "flex-end" "normal" "left" "right" "baseline"
+     "first" "last" "stretch")
+
     ;; CSS Flexible Box Layout Module Level 1
     ;; (https://www.w3.org/TR/css-flexbox-1/#property-index)
-    ("align-content" "flex-start" "flex-end" "center" "space-between"
-     "space-around" "stretch")
-    ("align-items" "flex-start" "flex-end" "center" "baseline"
-     "stretch")
-    ("align-self" "auto" "flex-start" "flex-end" "center" "baseline"
-     "stretch")
     ("flex" "none" flex-grow flex-shrink flex-basis)
     ("flex-basis" "auto" "content" width)
     ("flex-direction" "row" "row-reverse" "column" "column-reverse")
@@ -316,8 +340,6 @@
     ("flex-grow" number)
     ("flex-shrink" number)
     ("flex-wrap" "nowrap" "wrap" "wrap-reverse")
-    ("justify-content" "flex-start" "flex-end" "center"
-     "space-between" "space-around")
     ("order" integer)
 
     ;; CSS Fonts Module Level 3
-- 
2.30.1 (Apple Git-130)

bug#50345: 28.0.50; [PATCH] Filling holes in css-mode.el

[Lars Ingebrigtsen]

Theodor Thornhill <theo@thornhill.no> writes:

> Should I add several, smaller patches, or one big correction of most of
> the things I see at the moment?  

Smaller patches are best, I think.

Theodor Thornhill <theo@thornhill.no> writes:

> I moved the justify and align parts out from the flex block and into its
> own block.  I also took the liberty to add the `place' variants as well.
> These are used a lot when using grid to set up your web page.  I hope
> this is usable.  I see that some properties are extracted out into
> variables, but not sure what is standard practice here.

Both patches look good to me; pushed to Emacs 28 now.

-- 
(domestic pets only, the antidote for overdose, milk.)
   bloggy blog: http://lars.ingebrigtsen.no

bug#50345: 28.0.50; [PATCH] Filling holes in css-mode.el

[Simen Heggestøyl]

Hi Theodor,

Theodor Thornhill <theo@thornhill.no> <bug-gnu-emacs@gnu.org> writes:

> I took the liberty to add the keywords from [0].

Thanks!

> I see that some properties are extracted out into variables, but not
> sure what is standard practice here.

I've previously tried keeping them one-to-one with the property index
grammars (https://www.w3.org/TR/css-align-3/#property-index).

So for instance `place-content` would just refer back to `align-content`
and `justify-content` without the need to repeat their properties:

  ("place-content" align-content justify-content)

`align-content` is a bit more convoluted, with a mix of a literal value
and value classes in the grammar:

  ("align-content" "normal" baseline-position content-distribution
   overflow-position content-position)

The value classes aren't properties, so their values go into
`css-value-class-alist`. For instance, `baseline-position` can take
values:

  (baseline-position "first" "last" "baseline")

This can then be reused by other properties again.

Does this make sense? I should probably document this practice a bit
better. 😅

-- Simen

bug#50345: 28.0.50; [PATCH] Filling holes in css-mode.el

[Theodor Thornhill via Bug reports for GNU Emacs, the Swiss army knife of text editors]

Hi, Simen!

>
> Thanks!

My pleasure!

>
>> I see that some properties are extracted out into variables, but not
>> sure what is standard practice here.
>
> I've previously tried keeping them one-to-one with the property index
> grammars (https://www.w3.org/TR/css-align-3/#property-index).
>
> So for instance `place-content` would just refer back to `align-content`
> and `justify-content` without the need to repeat their properties:
>
>   ("place-content" align-content justify-content)
>
> `align-content` is a bit more convoluted, with a mix of a literal value
> and value classes in the grammar:
>
>   ("align-content" "normal" baseline-position content-distribution
>    overflow-position content-position)
>
> The value classes aren't properties, so their values go into
> `css-value-class-alist`. For instance, `baseline-position` can take
> values:
>
>   (baseline-position "first" "last" "baseline")
>
> This can then be reused by other properties again.
>
> Does this make sense? I should probably document this practice a bit
> better. 😅
>

Yeah, this is the answer I wanted. I'll look into doing this in the next
patches I send.  I think it would be nice to document this down the line
as well, yes.  I can see what I can do about that too :)

Have a nice weekend!

Theodor