feat: Basic preprocessor support.

Author: chriseppstein

packages/@css-blocks/language-server/package.json

@@ -13,9 +13,11 @@
     "url": "https://github.com/LinkedIn/css-blocks"
   },
   "dependencies": {
-    "@css-blocks/core": "^0.24.0",
     "@css-blocks/config": "^0.24.0",
+    "@css-blocks/core": "^0.24.0",
     "@glimmer/syntax": "^0.42.1",
+    "glob": "^7.1.6",
+    "glob-escape": "^0.0.2",
     "opticss": "^0.6.2",
     "vscode-languageserver": "^5.2.1",
     "vscode-uri": "^2.0.3"

packages/@css-blocks/language-server/src/Server.ts

@@ -1,5 +1,5 @@
 import { search as searchForConfig } from "@css-blocks/config";
-import { BlockFactory, Configuration, CssBlockError, resolveConfiguration } from "@css-blocks/core";
+import { BlockFactory, Configuration, CssBlockError, Syntax, resolveConfiguration } from "@css-blocks/core";
 import { CompletionItem, Definition, DidChangeConfigurationNotification, DocumentLink, DocumentLinkParams, IConnection, InitializeParams, InitializeResult, TextDocumentChangeEvent, TextDocumentPositionParams, TextDocuments } from "vscode-languageserver";
 import { URI } from "vscode-uri";
 
@@ -9,6 +9,7 @@ import { emberDefinitionProvider } from "./definitionProviders/emberDefinitionPr
 import { blockLinksProvider } from "./documentLinksProviders/blockLinkProvider";
 import { documentContentChange } from "./eventHandlers/documentContentChange";
 import { LSImporter } from "./Importer";
+import { EmberClassicTransformer } from "./pathTransformers/EmberClassicTransformer";
 import { PathTransformer } from "./pathTransformers/PathTransformer";
 import { SERVER_CAPABILITIES } from "./serverCapabilities";
 import { isBlockFile } from "./util/blockUtils";
@@ -18,16 +19,15 @@ import { isTemplateFile, validateTemplates } from "./util/hbsUtils";
 export class Server {
   _blockFactory: BlockFactory | undefined;
   _config: Readonly<Configuration> | undefined;
+  _pathTransformer: PathTransformer | undefined;
   connection: IConnection;
   documents: TextDocuments;
-  pathTransformer: PathTransformer;
   hasConfigurationCapability = false;
   hasWorkspaceFolderCapability = false;
 
-  constructor(connection: IConnection, documents: TextDocuments, pathTransformer: PathTransformer) {
+  constructor(connection: IConnection, documents: TextDocuments) {
     this.connection = connection;
     this.documents = documents;
-    this.pathTransformer = pathTransformer;
 
     this.registerDocumentEvents();
     this.registerConnectionEvents();
@@ -47,6 +47,23 @@ export class Server {
     return this._blockFactory;
   }
 
+  get pathTransformer(): PathTransformer {
+    if (!this._pathTransformer) {
+      let syntaxes = new Array<Syntax>();
+      let keys = Object.keys(this.config.preprocessors);
+      for (let k of keys) {
+        if (Syntax[k]) {
+          syntaxes.push(Syntax[k]);
+        }
+      }
+      if (!syntaxes.includes(Syntax.css)) {
+        syntaxes.push(Syntax.css);
+      }
+      this._pathTransformer = new EmberClassicTransformer(syntaxes);
+    }
+    return this._pathTransformer;
+  }
+
   listen() {
     this.documents.listen(this.connection);
     this.connection.listen();
@@ -61,7 +78,7 @@ export class Server {
   async onDidChangeContent(e: TextDocumentChangeEvent) {
       // only track incremental changes within block files
       this.blockFactory.reset();
-      if (isBlockFile(e.document.uri)) {
+      if (isBlockFile(e.document.uri, this.config)) {
         const cssBlockErrors = await documentContentChange(e, this.blockFactory);
         this.sendDiagnostics(cssBlockErrors, e.document.uri);
 
@@ -95,7 +112,7 @@ export class Server {
     });
 
     this.connection.onDocumentLinks(async (params: DocumentLinkParams): Promise<DocumentLink[]> => {
-      return await blockLinksProvider(this.documents, params);
+      return await blockLinksProvider(this.documents, params, this.config);
     });
   }
 
@@ -126,6 +143,8 @@ export class Server {
     }
     options = result || (rootDir ? {rootDir} : {});
     options.importer = new LSImporter(this.documents, options.importer);
+    // We set both of these explicitly here just in case they were accessed
+    // before initialization.
     this._config = resolveConfiguration(options);
     this._blockFactory = createBlockFactory(this._config);
 

packages/@css-blocks/language-server/src/completionProviders/emberCompletionProvider.ts

@@ -1,4 +1,4 @@
-import { BlockFactory } from "@css-blocks/core/dist/src";
+import { BlockFactory } from "@css-blocks/core";
 import { CompletionItem, TextDocumentPositionParams, TextDocuments } from "vscode-languageserver";
 
 import { PathTransformer } from "../pathTransformers/PathTransformer";
@@ -15,7 +15,7 @@ export async function emberCompletionProvider(documents: TextDocuments, factory:
 
   if (isTemplateFile(document.uri)) {
     return await getHbsCompletions(document, params.position, factory, pathTransformer);
-  } else if (isBlockFile(document.uri)) {
+  } else if (isBlockFile(document.uri, factory.configuration)) {
     return await getBlockCompletions(document, params.position);
   } else {
     return [];

packages/@css-blocks/language-server/src/createBlockFactory.ts

@@ -1,4 +1,4 @@
-import { BlockFactory, Options } from "@css-blocks/core/dist/src";
+import { BlockFactory, Options } from "@css-blocks/core";
 import { postcss } from "opticss";
 
 export function createBlockFactory(config: Options) {

packages/@css-blocks/language-server/src/definitionProviders/emberDefinitionProvider.ts

@@ -1,4 +1,4 @@
-import { BlockFactory } from "@css-blocks/core/dist/src";
+import { BlockFactory } from "@css-blocks/core";
 import { Definition, TextDocumentPositionParams, TextDocuments } from "vscode-languageserver";
 
 import { PathTransformer } from "../pathTransformers/PathTransformer";

packages/@css-blocks/language-server/src/documentLinksProviders/blockLinkProvider.ts

@@ -1,3 +1,4 @@
+import { Configuration } from "@css-blocks/core";
 import * as path from "path";
 import { DocumentLinkParams, TextDocuments } from "vscode-languageserver";
 import { DocumentLink } from "vscode-languageserver-types";
@@ -7,10 +8,10 @@ import { isBlockFile } from "../util/blockUtils";
 
 const LINK_REGEX = /from\s+(['"])([^'"]+)\1;/;
 
-export async function blockLinksProvider(documents: TextDocuments, params: DocumentLinkParams): Promise<DocumentLink[]> {
+export async function blockLinksProvider(documents: TextDocuments, params: DocumentLinkParams, config: Readonly<Configuration>): Promise<DocumentLink[]> {
   let { uri } = params.textDocument;
 
-  if (!isBlockFile(uri)) {
+  if (!isBlockFile(uri, config)) {
     return [];
   }
 

packages/@css-blocks/language-server/src/eventHandlers/documentContentChange.ts

@@ -1,4 +1,4 @@
-import { BlockFactory, CssBlockError } from "@css-blocks/core/dist/src";
+import { BlockFactory, CssBlockError } from "@css-blocks/core";
 import { TextDocumentChangeEvent } from "vscode-languageserver";
 import { URI } from "vscode-uri";
 
@@ -7,7 +7,7 @@ import { isBlockFile } from "../util/blockUtils";
 export async function documentContentChange(e: TextDocumentChangeEvent, blockFactory: BlockFactory): Promise<CssBlockError[]> {
   const { uri } = e.document;
 
-  if (isBlockFile(uri)) {
+  if (isBlockFile(uri, blockFactory.configuration)) {
     try {
       // parses the block file to get the block and errors if there's a problem
       // along the way. The importer ensures that we're getting live contents if

packages/@css-blocks/language-server/src/pathTransformers/EmberClassicTransformer.ts

@@ -1,32 +1,60 @@
-import { Syntax } from "@css-blocks/core/dist/src";
+import { Syntax } from "@css-blocks/core";
+import { existsSync } from "fs";
+import * as glob from "glob";
+import * as globEscape from "glob-escape";
 import * as path from "path";
 
 import { PathTransformer } from "./PathTransformer";
 
+const TEMPLATES_DIR_RE = new RegExp(`${path.sep}templates${path.sep}`);
+const STYLES_DIR_RE = new RegExp(`${path.sep}styles${path.sep}`);
+
 export class EmberClassicTransformer implements PathTransformer {
-  _syntax: Syntax;
+  _syntaxes: Array<Syntax>;
   _templateExtension = "hbs";
+  _allowsAnySyntax: boolean;
+
+  constructor(syntaxes: Array<Syntax>) {
+    this._syntaxes = syntaxes.filter(s => s !== Syntax.other);
+    this._allowsAnySyntax = syntaxes.includes(Syntax.other);
+  }
 
-  // TODO: Accept an array of syntaxes that are set up in the preprocessor configuration.
-  constructor(syntax: Syntax) {
-    this._syntax = syntax;
+  _blockSyntaxSupported(extension: string): boolean {
+    if (this._allowsAnySyntax || extension === "css") {
+      return true;
+    } else {
+      return !!this._syntaxes.find(s => s === extension);
+    }
   }
 
-  templateToBlock(templatePath: string): string {
-    return templatePath
-      .replace(/.hbs$/, `.block.${this._syntax}`)
-      .replace(
-        new RegExp(`${path.sep}templates${path.sep}`),
-        `${path.sep}styles${path.sep}`,
-      );
+  templateToBlock(templatePath: string): string | null {
+    let pathObj = path.parse(templatePath.replace(TEMPLATES_DIR_RE, `${path.sep}styles${path.sep}`));
+    let dir = pathObj.dir;
+    let filename = pathObj.name;
+    let pattern = `${globEscape(filename)}.block.*`;
+    let files = glob.sync(pattern, {cwd: dir});
+    for (let file of files) {
+      let ext = path.extname(file).substring(1);
+      if (this._blockSyntaxSupported(ext)) {
+        return path.join(dir, file);
+      }
+    }
+    return null;
   }
 
-  blockToTemplate(blockPath: string): string {
-    return blockPath
-      .replace(new RegExp(`\.block\.${this._syntax}$`), `.${this._templateExtension}`)
-      .replace(
-        new RegExp(`${path.sep}styles${path.sep}`),
-        `${path.sep}templates${path.sep}`,
-      );
+  blockToTemplate(blockPath: string): string | null {
+    let pathObj = path.parse(blockPath);
+    delete pathObj.base;
+    pathObj.ext = `.${this._templateExtension}`;
+    if (pathObj.name.endsWith(".block")) {
+      pathObj.name = pathObj.name.substring(0, pathObj.name.length - 6);
+    }
+    pathObj.dir = pathObj.dir.replace(STYLES_DIR_RE, `${path.sep}templates${path.sep}`);
+    let templatePath = path.format(pathObj);
+    if (existsSync(templatePath)) {
+      return templatePath;
+    } else {
+      return null;
+    }
   }
 }

packages/@css-blocks/language-server/src/pathTransformers/PathTransformer.ts

@@ -1,7 +1,4 @@
-import { Syntax } from "@css-blocks/core/dist/src";
-
 export interface PathTransformer {
-  _syntax: Syntax;
-  templateToBlock(templatePath: string): string;
-  blockToTemplate(blockPath: string): string;
+  templateToBlock(templatePath: string): string | null;
+  blockToTemplate(blockPath: string): string | null;
 }

packages/@css-blocks/language-server/src/run.ts

@@ -1,16 +1,10 @@
-import { Syntax } from "@css-blocks/core";
 import { ProposedFeatures, TextDocuments, createConnection } from "vscode-languageserver";
 
-import { EmberClassicTransformer } from "./pathTransformers/EmberClassicTransformer";
 import { Server } from "./Server";
 
-// TODO: We will eventually need to support different path transformations
-// and block syntax depending on configuration. For now we are just assuming
-// an ember classic project and css syntax.
-const pathTransformer = new EmberClassicTransformer(Syntax.css);
 const connection = createConnection(ProposedFeatures.all);
 const documents = new TextDocuments();
 
-let server = new Server(connection, documents, pathTransformer);
+let server = new Server(connection, documents);
 
 server.listen();