Preserve -webkit-box-orient when -webkit-line-clamp is present (#1511)

postcss · Mar 1, 2024 · ec68b52 · ec68b52
1 parent 46cd2cc
commit ec68b52
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 2 deletions.
diff --git a/lib/processor.js b/lib/processor.js
@@ -712,7 +712,13 @@ class Processor {
    * Some rare old values, which is not in standard
    */
   withHackValue(decl) {
-    return decl.prop === '-webkit-background-clip' && decl.value === 'text'
+    return (
+      (decl.prop === '-webkit-background-clip' && decl.value === 'text') ||
+      // Do not remove -webkit-box-orient when -webkit-line-clamp is present.
+      // https://github.com/postcss/autoprefixer/issues/1510
+      (decl.prop === '-webkit-box-orient' &&
+        decl.parent.some(d => d.prop === '-webkit-line-clamp'))
+    )
   }
 }
 

diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js
@@ -1178,8 +1178,10 @@ test('supports text-decoration shorthand', () => {
 
 test('supports -webkit-line-clamp', () => {
   let input = read('webkit-line-clamp')
+  let output = read('webkit-line-clamp.out')
   let result = postcss([cleaner]).process(input)
-  equal(result.css, input)
+
+  equal(universalizer(result.css), universalizer(output))
   equal(result.warnings().length, 0)
 })
 

diff --git a/test/cases/webkit-line-clamp.css b/test/cases/webkit-line-clamp.css
@@ -5,3 +5,34 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
+.simple-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.clamp-with-flex-direction {
+  flex-direction: column;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.clamp-with-flex-direction-and-box-direction {
+  flex-direction: column;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-line-clamp: 2;
+}
+
+.clamp-display-webkit-box-only {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+}
+
+.clamp-display-webkit-box-orient-vertical-only {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
diff --git a/test/cases/webkit-line-clamp.out.css b/test/cases/webkit-line-clamp.out.css
@@ -0,0 +1,37 @@
+.limit-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.simple-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.clamp-with-flex-direction {
+  flex-direction: column;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.clamp-with-flex-direction-and-box-direction {
+  flex-direction: column;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.clamp-display-webkit-box-only {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+}
+
+.clamp-display-webkit-box-orient-vertical-only {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}