Fix custom property parsing in plain CSS

Closes #1104

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.26.13
+
+* Fix a bug where custom property values in plain CSS were being parsed as
+  normal property values.
+
 ## 1.26.12
 
 * Fix a bug where nesting properties beneath a Sass-syntax custom property

lib/src/ast/css/declaration.dart

@@ -31,7 +31,8 @@ abstract class CssDeclaration extends CssNode {
   /// opposed to using something like `#{--foo}: ...` to cause it to be parsed
   /// as a normal Sass declaration.
   ///
-  /// If this is `true`, [isCustomProperty] will also be `true`.
+  /// If this is `true`, [isCustomProperty] will also be `true` and [value] will
+  /// contain a [SassString].
   bool get parsedAsCustomProperty;
 
   T accept<T>(CssVisitor<T> visitor);

lib/src/ast/css/modifiable/declaration.dart

@@ -27,10 +27,16 @@ class ModifiableCssDeclaration extends ModifiableCssNode
       {@required bool parsedAsCustomProperty, FileSpan valueSpanForMap})
       : parsedAsCustomProperty = parsedAsCustomProperty,
         valueSpanForMap = valueSpanForMap ?? span {
-    if (!isCustomProperty && parsedAsCustomProperty) {
-      throw ArgumentError(
-          'sassSyntaxCustomProperty must be false if name doesn\'t begin with '
-          '"--".');
+    if (parsedAsCustomProperty) {
+      if (!isCustomProperty) {
+        throw ArgumentError(
+            'parsedAsCustomProperty must be false if name doesn\'t begin with '
+            '"--".');
+      } else if (value.value is! SassString) {
+        throw ArgumentError(
+            'If parsedAsCustomProperty is true, value contain a SassString '
+            '(was `$value` of type ${value.value.runtimeType}).');
+      }
     }
   }
 

lib/src/ast/sass/statement/declaration.dart

@@ -6,6 +6,7 @@ import 'package:source_span/source_span.dart';
 
 import '../../../visitor/interface/statement.dart';
 import '../expression.dart';
+import '../expression/string.dart';
 import '../interpolation.dart';
 import '../statement.dart';
 import 'parent.dart';
@@ -25,10 +26,19 @@ class Declaration extends ParentStatement {
   /// Note that this can return `false` for declarations that will ultimately be
   /// serialized as custom properties if they aren't *parsed as* custom
   /// properties, such as `#{--foo}: ...`.
+  ///
+  /// If this is `true`, then `value` will be a [StringExpression].
   bool get isCustomProperty => name.initialPlain.startsWith('--');
 
   Declaration(this.name, this.span, {this.value, Iterable<Statement> children})
-      : super(children = children == null ? null : List.unmodifiable(children));
+      : super(
+            children = children == null ? null : List.unmodifiable(children)) {
+    if (isCustomProperty && value is! StringExpression) {
+      throw ArgumentError(
+          'Declarations whose names begin with "--" must have StringExpression '
+          'values (was `${value}` of type ${value.runtimeType}).');
+    }
+  }
 
   T accept<T>(StatementVisitor<T> visitor) => visitor.visitDeclaration(this);
 }

lib/src/parse/stylesheet.dart

@@ -503,8 +503,11 @@ abstract class StylesheetParser extends Parser {
   /// This is only used in contexts where declarations are allowed but style
   /// rules are not, such as nested declarations. Otherwise,
   /// [_declarationOrStyleRule] is used instead.
-  @protected
-  Statement _propertyOrVariableDeclaration() {
+  ///
+  /// If [parseCustomProperties] is `true`, properties that begin with `--` will
+  /// be parsed using custom property parsing rules.
+  Statement _propertyOrVariableDeclaration(
+      {bool parseCustomProperties = true}) {
     var start = scanner.state;
 
     Interpolation name;
@@ -533,6 +536,13 @@ abstract class StylesheetParser extends Parser {
 
     whitespace();
     scanner.expectChar($colon);
+
+    if (parseCustomProperties && name.initialPlain.startsWith('--')) {
+      var value = _interpolatedDeclarationValue();
+      expectStatementSeparator("custom property");
+      return Declaration(name, scanner.spanFrom(start), value: value);
+    }
+
     whitespace();
 
     if (lookingAtChildren()) {
@@ -562,7 +572,7 @@ abstract class StylesheetParser extends Parser {
   /// Consumes a statement that's allowed within a declaration.
   Statement _declarationChild() {
     if (scanner.peekChar() == $at) return _declarationAtRule();
-    return _propertyOrVariableDeclaration();
+    return _propertyOrVariableDeclaration(parseCustomProperties: false);
   }
 
   // ## At Rules

pubspec.yaml

@@ -1,5 +1,5 @@
 name: sass
-version: 1.26.12
+version: 1.26.13-dev
 description: A Sass implementation in Dart.
 author: Sass Team
 homepage: https://github.com/sass/dart-sass