Fixed template merging with variables #83

Author: FlorianRappl

CHANGELOG.md

@@ -5,6 +5,7 @@ Released on Thursday, November 4 2021.
 - Fixed issue with unbalanced grid areas and rows (#82)
 - Fixed small numbers to be transformed into negative exponentials (#80)
 - Fixed issue handling exponential unit values (#79)
+- Fixed `InvalidCastException` in template merging with CSS variables (#83)
 
 # 0.16.1
 

src/AngleSharp.Css.Tests/Parsing/StyleSheet.cs

@@ -113,6 +113,36 @@ @keyframes errorAnimation {
     input:invalid {
         color: red;
     }
+";
+            var parser = new CssParser();
+            var formatter = new MinifyStyleFormatter();
+            var ss = await parser.ParseStyleSheetAsync(css);
+            var newCss = ss.ToCss(formatter);
+            Assert.IsNotNull(newCss);
+        }
+
+        [Test]
+        public async Task CastingException_Issue83()
+        {
+            var css = @"
+ 	.kardex-wrapper {
+		height: 100vh;
+		width: 100vw;
+		display: grid;
+		grid-template-rows: var(--header-height) 10px 1fr;
+		grid-template-columns: var(--nav-width) 1fr;
+		grid-template-areas: ""navheader header"" ""navheader content"" ""nav content"";
+	}
+
+	header {
+		grid-area: header;
+		font-family: KardexMOT-Light, sans-serif;
+		background-color: var(--kx-bg);
+		color: var(--kx-text-light);
+		display: grid;
+		grid-template-rows: var(--header-height);
+		grid-template-columns: 1fr 1fr 1fr;
+	}
 ";
             var parser = new CssParser();
             var formatter = new MinifyStyleFormatter();

src/AngleSharp.Css/Declarations/GridTemplateDeclaration.cs

@@ -52,7 +52,10 @@ public ICssValue Merge(ICssValue[] values)
                 }
                 else if (cols != null || rows != null || areas != null)
                 {
-                    return new CssGridTemplateValue(rows, cols, areas);
+                    if (cols is not CssReferenceValue && rows is not CssReferenceValue && areas is not CssReferenceValue)
+                    {
+                        return new CssGridTemplateValue(rows, cols, areas);
+                    }
                 }
 
                 return null;

src/AngleSharp.Css/Values/Composites/CssGridTemplateValue.cs

@@ -67,20 +67,23 @@ public String CssText
                 }
                 else if (_areas != null)
                 {
-                    var areas = ((CssTupleValue)_areas).Items;
-                    var rowItems = ((CssTupleValue)_rows).Items;
+                    var areas = (_areas as CssTupleValue)?.Items;
+                    var rowItems = (_rows as CssTupleValue)?.Items;
                     var newRows = new List<ICssValue>();
 
-                    for (var i = 0; i < rowItems.Length; i++)
+                    if (rowItems != null && areas != null)
                     {
-                        var area = areas.Length > i ? areas[i] : null;
-                        var item = rowItems[i] as CssTupleValue;
-
-                        if (item != null && area != null)
+                        for (var i = 0; i < rowItems.Length; i++)
                         {
-                            var newItems = new List<ICssValue>(item.Items);
-                            newItems.Insert(1, area);
-                            newRows.Add(new CssTupleValue(newItems.ToArray()));
+                            var area = areas.Length > i ? areas[i] : null;
+                            var item = rowItems[i] as CssTupleValue;
+
+                            if (item != null && area != null)
+                            {
+                                var newItems = new List<ICssValue>(item.Items);
+                                newItems.Insert(1, area);
+                                newRows.Add(new CssTupleValue(newItems.ToArray()));
+                            }
                         }
                     }