feat!: move to file-services/resolve as default resolver (#2907)

wix · Oct 1, 2023 · e668634 · e668634
1 parent 4c0c349
commit e668634
Show file tree

Hide file tree

Showing 58 changed files with 323 additions and 271 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cli/src/cli-codemod.ts b/packages/cli/src/cli-codemod.ts
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import fs from 'fs';
+import fs from '@file-services/node';
 import { resolve } from 'path';
 import yargs from 'yargs';
 import { codeMods } from './code-mods/code-mods';

diff --git a/packages/cli/src/code-format.ts b/packages/cli/src/code-format.ts
@@ -1,11 +1,10 @@
 #!/usr/bin/env node
 import yargs from 'yargs';
-import { nodeFs } from '@file-services/node';
+import fs from '@file-services/node';
 import { getDocumentFormatting, formatCSS } from '@stylable/code-formatter';
 import { createLogger } from './logger';
-import { writeFileSync } from 'fs';
 
-const { join } = nodeFs;
+const { join, writeFileSync } = fs;
 
 const argv = yargs
     .usage('$0 [options]')
@@ -134,7 +133,7 @@ for (const request of requires) {
 }
 
 function readDirectoryDeep(dirPath: string, fileSuffixFilter = '.st.css', res = new Set<string>()) {
-    const items = nodeFs.readdirSync(dirPath, { withFileTypes: true });
+    const items = fs.readdirSync(dirPath, { withFileTypes: true });
 
     for (const item of items) {
         const path = join(dirPath, item.name);
@@ -150,7 +149,7 @@ function readDirectoryDeep(dirPath: string, fileSuffixFilter = '.st.css', res =
 }
 
 function formatStylesheet(filePath: string) {
-    const fileContent = nodeFs.readFileSync(filePath, 'utf-8');
+    const fileContent = fs.readFileSync(filePath, 'utf-8');
 
     const newText = experimental
         ? formatCSS(fileContent, {
@@ -188,7 +187,7 @@ if (debug) {
     log('Starting code formatting');
 }
 
-const formatPathStats = nodeFs.statSync(target);
+const formatPathStats = fs.statSync(target);
 
 if (formatPathStats.isFile()) {
     if (target.endsWith('.st.css')) {

diff --git a/packages/cli/src/config/projects-config.ts b/packages/cli/src/config/projects-config.ts
@@ -14,7 +14,8 @@ import { processProjects } from './process-projects';
 import { createDefaultOptions, mergeBuildOptions, validateOptions } from './resolve-options';
 import { resolveNpmRequests } from './resolve-requests';
 import type { ModuleResolver } from '@stylable/core/dist/index-internal';
-import type { MinimalFS, processNamespace } from '@stylable/core';
+import type { processNamespace } from '@stylable/core';
+import type { IFileSystem } from '@file-services/types';
 
 interface StylableRuntimeConfigs {
     stcConfig?: Configuration<string> | undefined;
@@ -64,21 +65,21 @@ export async function projectsConfig(
 }
 
 // todo: make fs not optional next major version
-export function resolveConfig(context: string, request?: string, fs?: MinimalFS) {
+export function resolveConfig(context: string, request?: string, fs?: IFileSystem) {
     return request ? requireConfigFile(request, context, fs) : resolveConfigFile(context, fs);
 }
 
-function requireConfigFile(request: string, context: string, fs?: MinimalFS) {
+function requireConfigFile(request: string, context: string, fs?: IFileSystem) {
     const path = require.resolve(request, { paths: [context] });
     const config = resolveConfigValue(require(path), fs);
     return config ? { config, path } : undefined;
 }
 
-function resolveConfigFile(context: string, fs?: MinimalFS) {
+function resolveConfigFile(context: string, fs?: IFileSystem) {
     return loadStylableConfig(context, (config) => resolveConfigValue(config, fs));
 }
 
-function resolveConfigValue(config: any, fs?: MinimalFS) {
+function resolveConfigValue(config: any, fs?: IFileSystem) {
     return tryRun(
         (): StylableRuntimeConfigs => ({
             stcConfig: isSTCConfig(config)

diff --git a/packages/cli/test/assets.spec.ts b/packages/cli/test/assets.spec.ts
@@ -18,7 +18,7 @@ describe('assets', function () {
             '/src/other.st.css': '.other {}',
             '/node_modules/styles/3rd-party.css': '.third-party {}',
         });
-        const resolve = createDefaultResolver(fs, {});
+        const resolve = createDefaultResolver({ fs });
         const stylable = new Stylable({
             projectRoot: '/',
             fileSystem: fs,

diff --git a/packages/cli/test/build.spec.ts b/packages/cli/test/build.spec.ts
@@ -681,60 +681,6 @@ describe('build stand alone', () => {
         expect(dtsSourceMapContent).to.contain(`"sources": [`);
         expect(dtsSourceMapContent).to.contain(`"main.st.css"`);
     });
-
-    describe('resolver', () => {
-        it('should be able to build with enhanced-resolver alias configured', async () => {
-            const identifier = 'build-identifier';
-            const fs = createMemoryFs({
-                '/entry.st.css': `
-                    @st-import [green] from '@colors/green.st.css';
-                    
-                    .root { -st-mixin: green;}`,
-                '/colors/green.st.css': `
-                    .green { color: green; }`,
-            });
-
-            const diagnosticsManager = new DiagnosticsManager();
-            const stylable = new Stylable({
-                projectRoot: '/',
-                fileSystem: fs,
-                requireModule: () => ({}),
-                resolveOptions: {
-                    alias: {
-                        '@colors': '/colors',
-                    },
-                },
-            });
-
-            await build(
-                {
-                    outDir: '.',
-                    srcDir: '.',
-                    outputCSS: true,
-                    diagnostics: true,
-                },
-                {
-                    fs,
-                    stylable,
-                    rootDir: '/',
-                    projectRoot: '/',
-                    log,
-                    diagnosticsManager,
-                    identifier,
-                }
-            );
-
-            ['/entry.st.css', '/entry.css'].forEach((p) => {
-                expect(fs.existsSync(p), p).to.equal(true);
-            });
-
-            const messages = diagnosticsManager.get(identifier, '/entry.st.css')?.diagnostics;
-            expect(messages).to.eql(undefined);
-
-            const entryCSSContent = fs.readFileSync('/entry.css', 'utf8');
-            expect(entryCSSContent).to.contain(`color: green;`);
-        });
-    });
 });
 
 describe('build - bundle', () => {

diff --git a/packages/cli/test/cli.spec.ts b/packages/cli/test/cli.spec.ts
@@ -558,18 +558,18 @@ describe('Stylable Cli', function () {
         });
     });
 
-    describe('resolver', () => {
+    describe('resolver (cli)', () => {
         it('should be able to build with enhanced-resolver alias configured', () => {
             populateDirectorySync(tempDir.path, {
                 'package.json': `{"name": "test", "version": "0.0.0"}`,
                 'stylable.config.js': `
                     const { resolve } = require('node:path');
-                    const { createDefaultResolver } = require('@stylable/core');
+                    const { createWebpackResolver } = require('@stylable/webpack-plugin');
 
                     module.exports = {
                         defaultConfig(fs) {
                             return {
-                                resolveModule: createDefaultResolver(fs, {
+                                resolveModule: createWebpackResolver(fs, {
                                     alias: {
                                         '@colors': resolve(__dirname, './colors')
                                     }
@@ -618,12 +618,12 @@ describe('Stylable Cli', function () {
                 'stylable.config.js': `
                     const { join } = require('path');
                     const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
-                    const { createDefaultResolver } = require('@stylable/core');
+                    const { createWebpackResolver } = require('@stylable/webpack-plugin');
 
                     module.exports = {
                         defaultConfig(fs) {
                             return {
-                                resolveModule: createDefaultResolver(fs, {
+                                resolveModule: createWebpackResolver(fs, {
                                     plugins: [new TsconfigPathsPlugin({ configFile: join(${JSON.stringify(
                                         tempDir.path
                                     )},'tsconfig.json') })],

diff --git a/packages/core-test-kit/src/generate-test-util.ts b/packages/core-test-kit/src/generate-test-util.ts
@@ -19,6 +19,7 @@ import {
 import { isAbsolute } from 'path';
 import * as postcss from 'postcss';
 import { createMemoryFs } from '@file-services/memory';
+import type { IFileSystem } from '@file-services/types';
 import type { IDirectoryContents } from '@file-services/types';
 
 export interface File {
@@ -62,7 +63,7 @@ export function generateInfra(config: InfraConfig, diagnostics: Diagnostics = ne
         createDiagnostics: () => diagnostics,
     });
 
-    const resolveModule = createDefaultResolver(fs, {});
+    const resolveModule = createDefaultResolver({ fs });
     const resolvePath = (context: string | undefined = '/', moduleId: string) =>
         resolveModule(context, moduleId);
 
@@ -118,6 +119,24 @@ export function createProcess(
     return (path: string) => fileProcessor.process(path);
 }
 
+export function createResolveExtendsResults(
+    fileSystem: IFileSystem,
+    fileToProcess: string,
+    classNameToLookup: string,
+    isElement = false
+) {
+    const stylable = new Stylable({
+        fileSystem,
+        projectRoot: '/',
+    });
+
+    return stylable.resolver.resolveExtends(
+        stylable.analyze(fileToProcess),
+        classNameToLookup,
+        isElement
+    );
+}
+
 export function generateStylableResult(
     config: Config,
     diagnostics: Diagnostics = new Diagnostics()
@@ -140,7 +159,7 @@ export function generateStylableExports(config: Config) {
 
 export function generateStylableEnvironment(
     content: IDirectoryContents,
-    stylableConfig: Partial<StylableConfig> = {}
+    stylableConfig: Partial<Omit<StylableConfig, 'fileSystem'>> = {}
 ) {
     const fs = createMemoryFs(content);
 

diff --git a/packages/core-test-kit/src/index.ts b/packages/core-test-kit/src/index.ts
@@ -19,6 +19,7 @@ export {
     generateStylableRoot,
     processSource,
     generateStylableEnvironment,
+    createResolveExtendsResults,
 } from './generate-test-util';
 export { flatMatch } from './matchers/flat-match';
 export { matchCSSMatchers } from './matchers/match-css';

diff --git a/packages/core-test-kit/test/inline-expectations.spec.ts b/packages/core-test-kit/test/inline-expectations.spec.ts
@@ -1021,7 +1021,7 @@ describe('inline-expectations', () => {
             );
         });
         it(`should throw on possible location mismatch`, () => {
-            const resolveErrorMessage = `resolve './unknown.st.css' in '/'\n  No description file found in / or above\n  No description file found in / or above\n  no extension\n    /unknown.st.css doesn't exist\n  .js\n    /unknown.st.css.js doesn't exist\n  .json\n    /unknown.st.css.json doesn't exist\n  .node\n    /unknown.st.css.node doesn't exist\n  as directory\n    /unknown.st.css doesn't exist`;
+            const resolveErrorMessage = "Stylable could not resolve \"./unknown.st.css\" from \"/\"\nVisited paths:\n/unknown.st.css\n/unknown.st.css.js\n/unknown.st.css.mjs\n/unknown.st.css.cjs\n/unknown.st.css.ts\n/unknown.st.css.mts\n/unknown.st.css.cts\n/unknown.st.css.json"
             const result = generateStylableResult({
                 entry: `/style.st.css`,
                 files: {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -6,17 +6,14 @@
   "scripts": {
     "test": "mocha \"./dist/test/**/*.spec.js\""
   },
-  "browser": {
-    "module": false
-  },
   "dependencies": {
+    "@file-services/resolve": "^8.2.0",
     "@tokey/css-selector-parser": "^0.6.2",
     "@tokey/css-value-parser": "^0.1.4",
     "@tokey/imports-parser": "^1.0.0",
     "balanced-match": "^2.0.0",
     "css-selector-tokenizer": "^0.8.0",
     "cssesc": "^3.0.0",
-    "enhanced-resolve": "^5.15.0",
     "is-vendor-prefixed": "^4.0.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.clonedeepwith": "^4.5.0",

diff --git a/packages/core/src/cached-process-file.ts b/packages/core/src/cached-process-file.ts
@@ -6,9 +6,7 @@ export interface CacheItem<T> {
 }
 
 export interface MinimalFS {
-    statSync: (filePath: string) => { mtime: Date };
     readFileSync: (filePath: string, encoding: 'utf8') => string;
-    readlinkSync: (filePath: string) => string;
 }
 
 export interface FileProcessor<T> {

diff --git a/packages/core/src/enhanced-resolve-alias.ts b/packages/core/src/enhanced-resolve-alias.ts