[PATCH v2] userdiff: expand detected chunk headers for css

From: Sohom Datta via GitGitGadget <gitgitgadget@gmail.com>
Date: Oct 8, 2020, 08:36 UTC
Message-ID: <pull.866.v2.git.git.1602146164799.gitgitgadget@gmail.com>
In-Reply-To: <pull.866.git.git.1602062726316.gitgitgadget@gmail.com>

From: Sohom <sohom.datta@learner.manipal.edu>

The regex used for the CSS builtin diff driver in git is only able to show chunk headers for lines that start with a number, a letter or an underscore.

However, the regex fails to detect classes (starts with a .), ids (starts with a #), :root and attribute-value based selectors (for example [class*="col-"]), as well as @based block-level statements like @page,@keyframes and @media since all of them, start with a special character.

Allow the selectors and block level statements to begin with these special characters.

Signed-off-by: Sohom Datta <sohom.datta@learner.manipal.edu>
---
    userdiff: Expand detected chunk headers for css
    
    Changes since v1
    
     * Updated commit message as suggested by Johannes Sixt and Junio C
       Hamano
     * Simplified the regex as suggested by Junio C Hamano

Published-As: https://github.com/gitgitgadget/git/releases/tag/pr-git-866%2Fsohomdatta1%2Fcss-userdiff-fix-test-v2
Fetch-It-Via: git fetch https://github.com/gitgitgadget/git pr-git-866/sohomdatta1/css-userdiff-fix-test-v2
Pull-Request: https://github.com/git/git/pull/866

Range-diff vs v1:

 1:  ca178c0cda ! 1:  a76703d4ac userdiff: expand detected chunk headers for css
     @@ Metadata
       ## Commit message ##
          userdiff: expand detected chunk headers for css
      
     -    Added support for classes, ids, :root selectors
     -    as well as @-based statements (ex: @page, @media
     -    and @keyframes ).
     +    The regex used for the CSS builtin diff driver in git is only
     +    able to show chunk headers for lines that start with a number,
     +    a letter or an underscore.
      
     -    Also added tests for the same.
     +    However, the regex fails to detect classes (starts with a .), ids
     +    (starts with a #), :root and attribute-value based selectors (for
     +    example [class*="col-"]), as well as @based block-level statements
     +    like @page,@keyframes and @media since all of them, start with a
     +    special character.
     +
     +    Allow the selectors and block level statements to begin with these
     +    special characters.
      
          Signed-off-by: Sohom Datta <sohom.datta@learner.manipal.edu>
      
     @@ userdiff.c: PATTERNS("csharp",
       IPATTERN("css",
       	 "![:;][[:space:]]*$\n"
      -	 "^[_a-z0-9].*$",
     -+	 "^(([_a-z0-9]|[:[@.#][_a-z0-9]).*)$",
     ++	 "^[:[@.#]?[_a-z0-9].*$",
       	 /* -- */
       	 /*
       	  * This regex comes from W3C CSS specs. Should theoretically also

 t/t4018/css-attribute-value-selector |  4 ++++
 t/t4018/css-block-level-@-statements | 10 ++++++++++
 t/t4018/css-class-selector           |  4 ++++
 t/t4018/css-id-selector              |  4 ++++
 t/t4018/css-root-selector            |  4 ++++
 userdiff.c                           |  2 +-
 6 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 t/t4018/css-attribute-value-selector
 create mode 100644 t/t4018/css-block-level-@-statements
 create mode 100644 t/t4018/css-class-selector
 create mode 100644 t/t4018/css-id-selector
 create mode 100644 t/t4018/css-root-selector

diff --git a/t/t4018/css-attribute-value-selector b/t/t4018/css-attribute-value-selector
new file mode 100644
index 0000000000..918256b20c
--- /dev/null
+++ b/t/t4018/css-attribute-value-selector
@@ -0,0 +1,4 @@
+[class*="RIGHT"] {
+    background : #000;
+    border : 10px ChangeMe #C6C6C6;
+}
diff --git a/t/t4018/css-block-level-@-statements b/t/t4018/css-block-level-@-statements
new file mode 100644
index 0000000000..d6755f2f3d
--- /dev/null
+++ b/t/t4018/css-block-level-@-statements
@@ -0,0 +1,10 @@
+@keyframes RIGHT {
+    from {
+        background : #000;
+        border : 10px ChangeMe #C6C6C6;
+    }
+    to {
+        background : #fff;
+        border : 10px solid #C6C6C6;
+    }
+}
diff --git a/t/t4018/css-class-selector b/t/t4018/css-class-selector
new file mode 100644
index 0000000000..f790a0062f
--- /dev/null
+++ b/t/t4018/css-class-selector
@@ -0,0 +1,4 @@
+.RIGHT {
+    background : #000;
+    border : 10px ChangeMe #C6C6C6;
+}
diff --git a/t/t4018/css-id-selector b/t/t4018/css-id-selector
new file mode 100644
index 0000000000..17c5111052
--- /dev/null
+++ b/t/t4018/css-id-selector
@@ -0,0 +1,4 @@
+#RIGHT {
+    background : #000;
+    border : 10px ChangeMe #C6C6C6;
+}
diff --git a/t/t4018/css-root-selector b/t/t4018/css-root-selector
new file mode 100644
index 0000000000..22b958e369
--- /dev/null
+++ b/t/t4018/css-root-selector
@@ -0,0 +1,4 @@
+:RIGHT {
+    background : #000;
+    border : 10px ChangeMe #C6C6C6;
+}
diff --git a/userdiff.c b/userdiff.c
index fde02f225b..f6a4b0fb2e 100644
--- a/userdiff.c
+++ b/userdiff.c
@@ -200,7 +200,7 @@ PATTERNS("csharp",
 	 "|[-+*/<>%&^|=!]=|--|\\+\\+|<<=?|>>=?|&&|\\|\\||::|->"),
 IPATTERN("css",
 	 "![:;][[:space:]]*$\n"
-	 "^[_a-z0-9].*$",
+	 "^[:[@.#]?[_a-z0-9].*$",
 	 /* -- */
 	 /*
 	  * This regex comes from W3C CSS specs. Should theoretically also

base-commit: d98273ba77e1ab9ec755576bc86c716a97bf59d7

-- 
gitgitgadget