feat: load resolver from user configuration file (#974)

fixtures/demo/alias-components/green.st.css

@@ -0,0 +1,5 @@
+.root {}
+
+.test {
+    color: green;
+}

fixtures/demo/import-alias.st.css

@@ -0,0 +1 @@
+@st-import [test] from "comps/green.st.css";

fixtures/demo/stylable.config.js

@@ -0,0 +1,15 @@
+//@ts-check
+const { join } = require('path');
+const { createDefaultResolver } = require('@stylable/core');
+
+module.exports = {
+    defaultConfig(fs) {
+        return {
+            resolveModule: createDefaultResolver(fs, {
+                alias: {
+                    comps: join(__dirname, 'alias-components'),
+                },
+            }),
+        };
+    },
+};

fixtures/e2e-cases/alias-components/comp.st.css

@@ -0,0 +1 @@
+.root {}

fixtures/e2e-cases/stylable.config.js

@@ -0,0 +1,14 @@
+const { join } = require('path');
+const { createDefaultResolver } = require('@stylable/core');
+
+module.exports = {
+    defaultConfig(fs) {
+        return {
+            resolveModule: createDefaultResolver(fs, {
+                alias: {
+                    comps: join(__dirname, 'alias-components'),
+                },
+            }),
+        };
+    },
+};

fixtures/e2e-cases/with-alias.st.css

@@ -0,0 +1,5 @@
+@st-import TestComp from "comps/comp.st.css";
+
+.root {
+    -st-extends: TestComp;
+}

package.json

@@ -12,15 +12,15 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "prebuild": "npm run clean",
     "build": "tsc",
+    "watch": "tsc -w",
     "pretest": "npm run lint",
     "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "mocha \"test/unit/**/*.spec.ts\" \"test/unit/*.spec.ts\"",
     "pretest:e2e": "npm run build",
     "test:e2e": "node ./run-e2e-tests",
     "lint": "eslint .",
-    "prepack": "npm run build"
+    "prepack": "npm run clean && npm run build"
   },
   "dependencies": {
     "@file-services/node": "^7.0.1",

run-e2e-tests.js

@@ -11,8 +11,15 @@ async function main() {
         // Passed to --extensionTestsPath
         const extensionTestsPath = path.join(__dirname, './dist/test/e2e/index');
 
+        // path to the test fixtures (root directory of test contexts)
+        const pathToOpen = path.join(extensionDevelopmentPath, 'fixtures', 'e2e-cases');
+
         // Download VS Code, unzip it and run the integration test
-        await runTests({ extensionDevelopmentPath, extensionTestsPath });
+        await runTests({
+            extensionDevelopmentPath,
+            extensionTestsPath,
+            launchArgs: [pathToOpen],
+        });
     } catch (err) {
         console.error('Failed to run tests');
         process.exit(1);

src/lib/server.ts

@@ -1,5 +1,5 @@
 import fs from '@file-services/node';
-import { Stylable } from '@stylable/core';
+import { MinimalFS, Stylable, StylableConfig } from '@stylable/core';
 import {
     createConnection,
     IPCMessageReader,
@@ -13,24 +13,33 @@ import { initializeResult } from './capabilities';
 import { VscodeStylableLanguageService } from './vscode-service';
 import { wrapFs } from './wrap-fs';
 import safeParse from 'postcss-safe-parser';
+import { URI } from 'vscode-uri';
+import { join } from 'path';
 
 const connection = createConnection(new IPCMessageReader(process), new IPCMessageWriter(process));
 let vscodeStylableLSP: VscodeStylableLanguageService;
 
 connection.listen();
-connection.onInitialize((params) => {
+connection.onInitialize(async (params) => {
     const docs = new TextDocuments(TextDocument);
     const wrappedFs = wrapFs(fs, docs);
 
+    const rootUri = params.rootUri;
+    const rootFsPath = rootUri && URI.parse(rootUri).fsPath;
+    const configPath = rootFsPath && join(rootFsPath, 'stylable.config.js');
+
+    const resolveModule = await loadConfigFile(configPath);
+
     vscodeStylableLSP = new VscodeStylableLanguageService(
         connection,
         docs,
         wrappedFs,
         new Stylable({
-            projectRoot: params.rootPath || '',
+            projectRoot: rootFsPath || '',
             fileSystem: wrappedFs,
             requireModule: require,
             cssParser: safeParse,
+            resolveModule,
         })
     );
 
@@ -58,3 +67,28 @@ connection.onInitialized(() => {
     connection.client.register(DidChangeConfigurationNotification.type, undefined).catch(console.error);
     vscodeStylableLSP.loadClientConfiguration().then(console.log).catch(console.error);
 });
+
+async function loadConfigFile(configPath: string | null) {
+    let resolveModule;
+
+    try {
+        if (configPath) {
+            const { defaultConfig } = (await import(configPath)) as {
+                defaultConfig: (fs: MinimalFS) => StylableConfig;
+            };
+
+            resolveModule =
+                defaultConfig && typeof defaultConfig === 'function' ? defaultConfig(fs).resolveModule : undefined;
+        }
+    } catch (e: unknown) {
+        console.warn(
+            new Error(
+                `Failed to load Stylable config from ${
+                    configPath || 'UNKNOWN PATH'
+                }, falling back to default config.\n${e as string}`
+            )
+        );
+    }
+
+    return resolveModule;
+}

test/e2e/diagnostics.test.ts

@@ -9,10 +9,15 @@ function collectDiagnostics(source: 'stylable' | 'css') {
     const diags = vscode.languages.getDiagnostics();
     const res = [];
 
-    for (const [_pathObj, fileDiags] of diags) {
+    for (const [pathObj, fileDiags] of diags) {
         for (const diag of fileDiags) {
             if (diag.source === source) {
-                res.push({ message: diag.message, range: diag.range, severity: diag.severity });
+                res.push({
+                    message: diag.message,
+                    range: diag.range,
+                    severity: diag.severity,
+                    filePath: pathObj.fsPath,
+                });
             }
         }
     }
@@ -45,10 +50,30 @@ suite('test diagnostics', function () {
                     range: new Range(0, 0, 0, 3),
                     message: CSSTypeDiagnostics.UNSCOPED_TYPE_SELECTOR('div').message,
                     severity: 1,
+                    filePath: casePath,
                 },
             ]);
         } else {
             throw new Error('Where is my extension?!!');
         }
     });
+
+    test('should resolve a configured alias with no diagnostics', async () => {
+        const casePath = path.join(rootDir, 'fixtures', 'e2e-cases', 'with-alias.st.css');
+        const ext = vscode.extensions.getExtension<LanguageClient>('wix.stylable-intelligence');
+
+        if (ext) {
+            const _client = await ext.activate();
+            const doc = await vscode.workspace.openTextDocument(casePath);
+
+            await vscode.window.showTextDocument(doc);
+
+            const diags = collectDiagnostics('stylable');
+            const diagnosticsInTestSource = diags.filter((diag) => diag.filePath === casePath);
+
+            expect(diagnosticsInTestSource).to.eql([]);
+        } else {
+            throw new Error('Where is my extension?!!');
+        }
+    });
 });