fix: Allow quotes surrounding block-name.

Definition file output wraps the block-name in quotes, but there are
existing rules in CSS Blocks disallowing this. This removes this rule,
using stripQuotes() to unwrap the block-name value. With this change,
block-name, block-id, and block-class will all behave in the same way.

Author: Timothy Lindvall

packages/@css-blocks/core/src/BlockParser/features/add-preset-selectors.ts

@@ -30,7 +30,7 @@ export function addPresetSelectors(configuration: Configuration, root: postcss.R
 
     // Find the block-class declaration...
     rule.walkDecls("block-class", decl => {
-      const val = stripQuotes(decl.value);
+      const val = stripQuotes(decl.value.trim());
 
       // Test that this actually could be a class name.
       if (!CLASS_NAME_IDENT.test(val)) {

packages/@css-blocks/core/src/BlockParser/features/discover-name.ts

@@ -4,6 +4,7 @@ import { BLOCK_NAME, CLASS_NAME_IDENT } from "../../BlockSyntax";
 import { Configuration } from "../../configuration";
 import * as errors from "../../errors";
 import { sourceRange } from "../../SourceLocation";
+import { stripQuotes } from "../utils";
 
 export async function discoverName(configuration: Configuration, root: postcss.Root, file: string, isDfnFile: boolean, defaultName: string): Promise<string> {
   let foundName: string | undefined;
@@ -13,14 +14,15 @@ export async function discoverName(configuration: Configuration, root: postcss.R
   root.walkRules(":scope", (rule) => {
     scopeRule = rule;
     rule.walkDecls(BLOCK_NAME, (decl) => {
-      if (!CLASS_NAME_IDENT.test(decl.value)) {
+      const unquotedVal = stripQuotes(decl.value.trim());
+      if (!CLASS_NAME_IDENT.test(unquotedVal)) {
         throw new errors.InvalidBlockSyntax(
           `Illegal block name. '${decl.value}' is not a legal CSS identifier.`,
           sourceRange(configuration, root, file, decl),
         );
       }
 
-      foundName = decl.value.trim();
+      foundName = unquotedVal;
 
     });
   });

packages/@css-blocks/core/test/BlockParser/block-name-test.ts

@@ -1,6 +1,7 @@
 import { assert } from "chai";
 import { skip, suite, test } from "mocha-typescript";
 import { postcss } from "opticss";
+import { outdent } from "outdent";
 
 import { CascadingError } from "../../src/errors";
 import { assertMultipleErrorsRejection } from "../util/assertError";
@@ -13,60 +14,58 @@ const { InvalidBlockSyntax } = require("../util/postcss-helper");
 @suite("Block Names")
 export class BlockNames extends BEMProcessor {
 
-  @test "block names in double quotes fail parse with helpful error"(): Promise<postcss.Result | void> {
+  @test "block names in double quotes work"(): Promise<postcss.Result | void> {
     let imports = new MockImportRegistry();
     imports.registerSource(
       "foo/bar/imported.css",
-      `:scope { block-name: "snow-flake"; }`,
+      outdent`
+        :scope { block-name: "snow-flake"; }
+      `,
     );
 
     let filename = "foo/bar/test-block.css";
-    let inputCSS = `@block a-block from "./imported.css";
-                    @block-debug a-block to comment;`;
+    let inputCSS = outdent`
+                     @block a-block from "./imported.css";
+                     @block-debug a-block to comment;
+                   `;
 
-    return assertMultipleErrorsRejection(
-      [
-        {
-          type: CascadingError,
-          message: "Error in imported block. (foo/bar/test-block.css:1:1)",
-          cause: {
-            type: InvalidBlockSyntax,
-            message: "Illegal block name. '\"snow-flake\"' is not a legal CSS identifier. (foo/bar/imported.css:1:10)",
-          },
-        }
-        ,
-        {
-        type: InvalidBlockSyntax,
-        message: `Invalid block debug: No Block named "a-block" found in scope. (foo/bar/test-block.css:2:21)`,
-      }],
-      this.process(filename, inputCSS, {importer: imports.importer()}));
+    return this.process(filename, inputCSS, {importer: imports.importer()}).then((result) => {
+      assert.deepEqual(
+        result.css.toString(),
+        outdent`
+          /* Source: foo/bar/imported.css
+           * :scope (.snow-flake)
+           */
+
+        `,
+      );
+    });
   }
 
-  @test "block names in single quotes fail parse with helpful error"(): Promise<postcss.Result | void> {
+  @test "block names in single quotes work"(): Promise<postcss.Result | void> {
     let imports = new MockImportRegistry();
     imports.registerSource(
       "foo/bar/imported.css",
       `:scope { block-name: 'snow-flake'; }`,
     );
 
     let filename = "foo/bar/test-block.css";
-    let inputCSS = `@block imported from "./imported.css";
-                    @block-debug snow-flake to comment;`;
+    let inputCSS = outdent`
+                     @block snow-flake from "./imported.css";
+                     @block-debug snow-flake to comment;
+                   `;
 
-    return assertMultipleErrorsRejection(
-      [{
-        type: CascadingError,
-        message: "Error in imported block. (foo/bar/test-block.css:1:1)",
-        cause: {
-          type: InvalidBlockSyntax,
-          message: `Illegal block name. \'\'snow-flake\'\' is not a legal CSS identifier. (foo/bar/imported.css:1:10)`,
-        },
-      },
-       {
-        type: InvalidBlockSyntax,
-        message: `Invalid block debug: No Block named "snow-flake" found in scope. (foo/bar/test-block.css:2:21)`,
-      }],
-      this.process(filename, inputCSS, {importer: imports.importer()}));
+    return this.process(filename, inputCSS, {importer: imports.importer()}).then((result) => {
+      assert.deepEqual(
+        result.css.toString(),
+        outdent`
+          /* Source: foo/bar/imported.css
+           * :scope (.snow-flake)
+           */
+
+        `,
+      );
+    });
   }
 
   @test "block-name property only works in the root ruleset"() {