fix: A state cannot be named 'scope'.

The attribute 'scope' is selected by :scope.

Author: chriseppstein

packages/@css-blocks/core/src/BlockParser/features/construct-block.ts

@@ -287,6 +287,12 @@ function assertBlockObject(configuration: Configuration, block: Block, sel: Comp
             range(configuration, block.stylesheet, file, rule, n),
           );
         }
+        if (n.attribute === "scope") {
+          throw new errors.InvalidBlockSyntax(
+            `A state cannot be named 'scope'.`,
+            range(configuration, block.stylesheet, file, rule, n),
+          );
+        }
         if (!found) {
           throw new errors.InvalidBlockSyntax(
             `States without an explicit :scope or class selector are not supported: ${rule.selector}`,

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

@@ -0,0 +1,24 @@
+// import { assert } from "chai";
+import { suite, test } from "mocha-typescript";
+
+import { assertError } from "../util/assertError";
+import { BEMProcessor } from "../util/BEMProcessor";
+import { MockImportRegistry } from "../util/MockImportRegistry";
+
+const { InvalidBlockSyntax } = require("../util/postcss-helper");
+
+@suite("Block Attributes")
+export class BlockAttributesTest extends BEMProcessor {
+
+  @test "An attribute cannot be named 'scope'"() {
+    let imports = new MockImportRegistry();
+
+    let filename = "foo/bar/test-block.css";
+    let inputCSS = `:scope[scope] { color: red; }`;
+
+    return assertError(
+      InvalidBlockSyntax,
+      `A state cannot be named 'scope'. (foo/bar/test-block.css:1:7)`,
+      this.process(filename, inputCSS, {importer: imports.importer()}));
+  }
+}