fix: Don't allow blocks to be imported with a well-known namespace.

Author: chriseppstein

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

@@ -1,7 +1,7 @@
 import { ObjectDictionary } from "@opticss/util";
 import { postcss } from "opticss";
 
-import { BLOCK_IMPORT, CLASS_NAME_IDENT, DEFAULT_EXPORT } from "../../BlockSyntax";
+import { BLOCK_IMPORT, CLASS_NAME_IDENT, DEFAULT_EXPORT, RESERVED_BLOCK_NAMES } from "../../BlockSyntax";
 import { Block } from "../../BlockTree";
 import * as errors from "../../errors";
 import { sourceRange } from "../../SourceLocation";
@@ -73,9 +73,9 @@ export async function importBlocks(block: Block, factory: BlockFactory, file: st
           sourceRange(factory.configuration, block.stylesheet, file, atRule),
         );
       }
-      if (localName === DEFAULT_EXPORT) {
+      if (RESERVED_BLOCK_NAMES.has(localName)) {
         throw new errors.InvalidBlockSyntax(
-          `Can not import "${remoteName}" as reserved word "${DEFAULT_EXPORT}"`,
+          `Can not import "${remoteName}" as reserved word "${localName}"`,
           sourceRange(factory.configuration, block.stylesheet, file, atRule),
         );
       }

packages/@css-blocks/core/src/BlockSyntax/BlockSyntax.ts

@@ -66,3 +66,9 @@ export const ROOT_CLASS = ":scope";
 
 // The string `default` is used throughout the system to represent the default export of a block file.
 export const DEFAULT_EXPORT = "default";
+
+/**
+ * Names that a block cannot have lest it collides with other syntax.
+ */
+export const RESERVED_BLOCK_NAMES = new Set<string>([DEFAULT_EXPORT, "html", "svg", "math"]);
+Object.freeze(RESERVED_BLOCK_NAMES);

packages/@css-blocks/core/test/BlockParser/import-export-test.ts

@@ -563,6 +563,38 @@ export class BlockImportExport extends BEMProcessor {
     );
   }
 
+  @test async "html is a reserved word – named imports"() {
+    let imports = new MockImportRegistry();
+    imports.registerSource(
+      "a.css",
+      `:scope { block-name: block-a; }`,
+    );
+
+    let inputCSS = `@block ( a as html ) from "./a.css";`;
+
+    return assertError(
+      InvalidBlockSyntax,
+      `Can not import "a" as reserved word "html" (test.css:1:1)`,
+      this.process("test.css", inputCSS, {importer: imports.importer()}),
+    );
+  }
+
+  @test async "html filename is a reserved word – named imports"() {
+    let imports = new MockImportRegistry();
+    imports.registerSource(
+      "html.block.css",
+      `:scope { color: red; }`,
+    );
+
+    let inputCSS = `@block html from "./html.block.css";`;
+
+    return assertError(
+      InvalidBlockSyntax,
+      `Can not import "default" as reserved word "html" (test.css:1:1)`,
+      this.process("test.css", inputCSS, {importer: imports.importer()}),
+    );
+  }
+
   @test async "default is a reserved word – bare exports"() {
     let imports = new MockImportRegistry();