@stylable/core - npm Package Compare versions

Comparing version 5.16.1 to 6.0.0-rc.1

dist/cached-process-file.d.ts

@@ -7,7 +7,3 @@ export type processFn<T> = (fullpath: string, content: string) => T;
 export interface MinimalFS {
-    statSync: (filePath: string) => {
-        mtime: Date;
-    };
     readFileSync: (filePath: string, encoding: 'utf8') => string;
-    readlinkSync: (filePath: string) => string;
 }
@@ -14,0 +10,0 @@ export interface FileProcessor<T> {

dist/features/css-class.d.ts

@@ -69,2 +69,7 @@ import { FeatureContext, FeatureTransformContext } from './feature';
     };
+    UNSUPPORTED_COMPLEX_SELECTOR: {
+        (): import("../diagnostics").DiagnosticBase;
+        code: string;
+        severity: import("../diagnostics").DiagnosticSeverity;
+    };
     IMPORT_ISNT_EXTENDABLE: {
@@ -99,3 +104,6 @@ (): import("../diagnostics").DiagnosticBase;
     IMMUTABLE_SELECTOR: ImmutableClass;
-    RESOLVED: Record<string, string>;
+    RESOLVED: Record<string, {
+        classes: string;
+        isLocal: boolean;
+    }>;
 }>;
@@ -102,0 +110,0 @@ export declare class StylablePublicApi {

dist/features/css-class.js

@@ -63,2 +63,3 @@ "use strict";
     UNSUPPORTED_MULTI_SELECTORS_ST_GLOBAL: (0, diagnostics_2.createDiagnosticReporter)('00004', 'error', () => `unsupported multi selector in -st-global`),
+    UNSUPPORTED_COMPLEX_SELECTOR: (0, diagnostics_2.createDiagnosticReporter)('00010', 'error', () => `unsupported complex selector`),
     IMPORT_ISNT_EXTENDABLE: (0, diagnostics_2.createDiagnosticReporter)('00005', 'error', () => 'import is not extendable'),
@@ -143,3 +144,5 @@ CANNOT_EXTEND_UNKNOWN_SYMBOL: (0, diagnostics_2.createDiagnosticReporter)('00006', 'error', (name) => `cannot extend unknown symbol "${name}"`),
             if (classNames) {
-                locals[localName] = classNames;
+                const directResolve = resolved[0];
+                const isLocal = directResolve.meta === context.meta && !directResolve.symbol.alias;
+                locals[localName] = { classes: classNames, isLocal };
             }
@@ -169,3 +172,7 @@ }
     transformJSExports({ exports, resolved }) {
-        Object.assign(exports.classes, resolved);
+        for (const [localName, { classes, isLocal }] of Object.entries(resolved)) {
+            if (isLocal) {
+                exports.classes[localName] = classes;
+            }
+        }
     },
@@ -506,5 +513,16 @@ });
         });
+        return;
     }
+    else {
+        for (const node of selector[0].nodes) {
+            if (node.type === 'combinator') {
+                context.diagnostics.report(exports.diagnostics.UNSUPPORTED_COMPLEX_SELECTOR(), {
+                    node: decl,
+                });
+                return;
+            }
+        }
+    }
     return selector[0].nodes;
 }
 //# sourceMappingURL=css-class.js.map

dist/features/css-contains.d.ts

@@ -57,4 +57,8 @@ import * as STImport from './st-import';
 };
+interface ResolvedSymbols {
+    record: Record<string, ResolvedContainer>;
+    locals: Set<string>;
+}
 export declare const hooks: import("./feature").FeatureHooks<{
-    RESOLVED: Record<string, ResolvedContainer>;
+    RESOLVED: ResolvedSymbols;
 }>;
@@ -64,2 +68,3 @@ export declare function get(meta: StylableMeta, name: string): ContainerSymbol | undefined;
 export declare function getDefinition(meta: StylableMeta, name: string): postcss.Declaration | postcss.AtRule | postcss.Rule | undefined;
+export {};
 //# sourceMappingURL=css-contains.d.ts.map

dist/features/css-contains.js

@@ -141,3 +141,6 @@ "use strict";
         const symbols = STSymbol.getAllByType(context.meta, `container`);
-        const resolved = {};
+        const resolved = {
+            record: {},
+            locals: new Set(),
+        };
         const resolvedSymbols = context.getResolvedSymbols(context.meta);
@@ -147,3 +150,6 @@ for (const [name, symbol] of Object.entries(symbols)) {
             if (res) {
-                resolved[name] = res;
+                resolved.record[name] = res;
+                if (res.meta === context.meta) {
+                    resolved.locals.add(name);
+                }
             }
@@ -168,4 +174,4 @@ else if (symbol.import) {
         decl.value = bucket[value].transformNames((name) => {
-            const resolve = resolved[name];
-            return resolve ? getTransformedName(resolved[name]) : name;
+            const resolve = resolved.record[name];
+            return resolve ? getTransformedName(resolved.record[name]) : name;
         });
@@ -186,3 +192,3 @@ },
             else if (node.type === 'word') {
-                const resolve = resolved[node.value];
+                const resolve = resolved.record[node.value];
                 if (resolve) {
@@ -224,4 +230,4 @@ node.value = getTransformedName(resolve);
     transformJSExports({ exports, resolved }) {
-        for (const [name, resolve] of Object.entries(resolved)) {
-            exports.containers[name] = getTransformedName(resolve);
+        for (const name of resolved.locals) {
+            exports.containers[name] = getTransformedName(resolved.record[name]);
         }
@@ -228,0 +234,0 @@ },

dist/features/css-custom-property.d.ts

@@ -62,4 +62,8 @@ import type { ImportSymbol } from './st-import';
 };
+interface ResolvedSymbols {
+    localToGlobal: Record<string, string>;
+    locals: Set<string>;
+}
 export declare const hooks: import("./feature").FeatureHooks<{
-    RESOLVED: Record<string, string>;
+    RESOLVED: ResolvedSymbols;
 }>;
@@ -70,2 +74,3 @@ export declare function get(meta: StylableMeta, name: string): CSSVarSymbol | undefined;
 export declare function scopeCSSVar(resolver: StylableResolver, meta: StylableMeta, symbolName: string): string;
+export {};
 //# sourceMappingURL=css-custom-property.d.ts.map

dist/features/css-custom-property.js

@@ -49,3 +49,2 @@ "use strict";
 const dataKey = plugable_record_1.plugableRecord.key('custom-property');
-// HOOKS
 exports.hooks = (0, feature_1.createFeature)({
@@ -136,12 +135,13 @@ metaInit({ meta }) {
     transformResolve({ context: { meta, getResolvedSymbols } }) {
-        const customPropsMapping = {};
+        const customPropsMapping = {
+            localToGlobal: {},
+            locals: new Set(),
+        };
         const resolvedSymbols = getResolvedSymbols(meta);
         for (const [localVarName, localSymbol] of Object.entries(STSymbol.getAllByType(meta, `cssVar`))) {
-            const resolve = resolvedSymbols.cssVar[localVarName] || {
-                // fallback to local namespace
-                _kind: `css`,
-                symbol: localSymbol,
-                meta,
-            };
-            customPropsMapping[localVarName] = getTransformedName(resolve);
+            const resolve = resolveFinalSymbol(meta, localSymbol, resolvedSymbols);
+            customPropsMapping.localToGlobal[localVarName] = getTransformedName(resolve);
+            if (resolve.meta === meta) {
+                customPropsMapping.locals.add(localVarName);
+            }
         }
@@ -156,4 +156,4 @@ return customPropsMapping;
             const propName = (0, global_1.globalValue)(atRule.params) || atRule.params;
-            if (resolved[propName]) {
-                atRule.params = resolved[propName] || atRule.params;
+            if (resolved.localToGlobal[propName]) {
+                atRule.params = resolved.localToGlobal[propName] || atRule.params;
             }
@@ -167,10 +167,12 @@ }
     transformDeclaration({ decl, resolved }) {
-        decl.prop = resolved[decl.prop] || decl.prop;
+        decl.prop = resolved.localToGlobal[decl.prop] || decl.prop;
     },
-    transformValue({ node, data: { cssVarsMapping } }) {
+    transformValue({ node, data: { meta }, context: { getResolvedSymbols } }) {
         const { value } = node;
         const varWithPrefix = node.nodes[0]?.value || ``;
         if ((0, css_custom_property_1.validateCustomPropertyName)(varWithPrefix)) {
-            if (cssVarsMapping && cssVarsMapping[varWithPrefix]) {
-                node.nodes[0].value = cssVarsMapping[varWithPrefix];
+            const resolvedSymbols = getResolvedSymbols(meta);
+            const localSymbol = STSymbol.get(meta, varWithPrefix, `cssVar`);
+            if (localSymbol) {
+                node.nodes[0].value = getTransformedName(resolveFinalSymbol(meta, localSymbol, resolvedSymbols));
             }
@@ -184,4 +186,4 @@ }
     transformJSExports({ exports, resolved }) {
-        for (const varName of Object.keys(resolved)) {
-            exports.vars[varName.slice(2)] = resolved[varName];
+        for (const varName of resolved.locals) {
+            exports.vars[varName.slice(2)] = resolved.localToGlobal[varName];
         }
@@ -195,2 +197,10 @@ },
 exports.get = get;
+function resolveFinalSymbol(meta, localSymbol, resolvedSymbols) {
+    return (resolvedSymbols.cssVar[localSymbol.name] || {
+        // fallback to local namespace
+        _kind: `css`,
+        symbol: localSymbol,
+        meta,
+    });
+}
 function addCSSProperty({ context, node, name, global, final, alias, }) {
@@ -197,0 +207,0 @@ // validate indent

dist/features/css-keyframes.d.ts

@@ -43,4 +43,8 @@ import type { Imported } from './st-import';
 };
+interface ResolvedSymbols {
+    record: Record<string, KeyframesResolve>;
+    locals: Set<string>;
+}
 export declare const hooks: import("./feature").FeatureHooks<{
-    RESOLVED: Record<string, KeyframesResolve>;
+    RESOLVED: ResolvedSymbols;
 }>;
@@ -50,2 +54,3 @@ export declare function getKeyframesStatements({ data }: StylableMeta): ReadonlyArray<postcss.AtRule>;
 export declare function getAll(meta: StylableMeta): Record<string, KeyframesSymbol>;
+export {};
 //# sourceMappingURL=css-keyframes.d.ts.map

dist/features/css-keyframes.js

@@ -136,3 +136,6 @@ "use strict";
         const symbols = STSymbol.getAllByType(context.meta, `keyframes`);
-        const resolved = {};
+        const resolved = {
+            record: {},
+            locals: new Set(),
+        };
         const resolvedSymbols = context.getResolvedSymbols(context.meta);
@@ -142,3 +145,6 @@ for (const [name, symbol] of Object.entries(symbols)) {
             if (res) {
-                resolved[name] = res;
+                resolved.record[name] = res;
+                if (res.meta === context.meta) {
+                    resolved.locals.add(name);
+                }
             }
@@ -160,3 +166,3 @@ else if (symbol.import) {
         }
-        const resolve = resolved[name];
+        const resolve = resolved.record[name];
         /* js keyframes mixins won't have resolved keyframes */
@@ -172,3 +178,3 @@ atRule.params = resolve
         parsed.nodes.forEach((node) => {
-            const resolve = resolved[node.value];
+            const resolve = resolved.record[node.value];
             const scoped = resolve && getTransformedName(resolve);
@@ -182,4 +188,4 @@ if (scoped) {
     transformJSExports({ exports, resolved }) {
-        for (const [name, resolve] of Object.entries(resolved)) {
-            exports.keyframes[name] = getTransformedName(resolve);
+        for (const name of resolved.locals) {
+            exports.keyframes[name] = getTransformedName(resolved.record[name]);
         }
@@ -186,0 +192,0 @@ },

dist/features/css-layer.d.ts

@@ -47,4 +47,8 @@ import * as STImport from './st-import';
 };
+interface ResolvedSymbols {
+    record: Record<string, ResolvedLayer>;
+    locals: Set<string>;
+}
 export declare const hooks: import("./feature").FeatureHooks<{
-    RESOLVED: Record<string, ResolvedLayer>;
+    RESOLVED: ResolvedSymbols;
 }>;
@@ -54,2 +58,3 @@ export declare function get(meta: StylableMeta, name: string): LayerSymbol | undefined;
 export declare function getDefinition(meta: StylableMeta, name: string): postcss.AtRule | postcss.Rule | undefined;
+export {};
 //# sourceMappingURL=css-layer.d.ts.map

dist/features/css-layer.js

@@ -96,3 +96,6 @@ "use strict";
         const symbols = STSymbol.getAllByType(context.meta, `layer`);
-        const resolved = {};
+        const resolved = {
+            record: {},
+            locals: new Set(),
+        };
         const resolvedSymbols = context.getResolvedSymbols(context.meta);
@@ -102,3 +105,6 @@ for (const [name, symbol] of Object.entries(symbols)) {
             if (res) {
-                resolved[name] = res;
+                resolved.record[name] = res;
+                if (res.meta === context.meta) {
+                    resolved.locals.add(name);
+                }
             }
@@ -120,3 +126,3 @@ else if (symbol.import) {
             // native css import
-            transformCSSImportLayer(context, atRule, resolved);
+            transformCSSImportLayer(context, atRule, resolved.record);
         }
@@ -129,4 +135,4 @@ else if (atRule.name === 'layer') {
                 atRule.params = analyzed.transformNames((name) => {
-                    const resolve = resolved[name];
-                    return resolve ? getTransformedName(resolved[name]) : name;
+                    const resolve = resolved.record[name];
+                    return resolve ? getTransformedName(resolved.record[name]) : name;
                 });
@@ -137,4 +143,4 @@ }
     transformJSExports({ exports, resolved }) {
-        for (const [name, resolve] of Object.entries(resolved)) {
-            exports.layers[name] = getTransformedName(resolve);
+        for (const name of resolved.locals) {
+            exports.layers[name] = getTransformedName(resolved.record[name]);
         }
@@ -141,0 +147,0 @@ },

dist/features/feature.d.ts

@@ -100,3 +100,2 @@ import type { StylableMeta } from '../stylable-meta';
         transformer: StylableTransformer;
-        cssVarsMapping: Record<string, string>;
         path: string[];
@@ -103,0 +102,0 @@ }) => void;

dist/features/st-custom-selector.js

@@ -87,3 +87,3 @@ "use strict";
     prepareAST({ context, node, toRemove }) {
-        // called without experimentalSelectorInference
+        // called with experimentalSelectorInference=false
         // split selectors & remove definitions
@@ -90,0 +90,0 @@ if (node.type === 'rule' && node.selector.match(exports.CUSTOM_SELECTOR_RE)) {

dist/features/st-import.js

@@ -140,6 +140,8 @@ "use strict";
 function calcCssDepth(context) {
-    let cssDepth = 0;
-    const deepDependencies = (0, import_1.tryCollectImportsDeep)(context.resolver, context.meta, new Set(), ({ depth }) => {
-        cssDepth = Math.max(cssDepth, depth);
-    }, 1);
+    let cssDepth = 1;
+    const deepDependencies = (0, import_1.tryCollectImportsDeep)(context.resolver, context.meta, new Set(), ({ depth, request }) => {
+        if (request.endsWith('.css')) {
+            cssDepth = Math.max(cssDepth, depth);
+        }
+    }, 2);
     context.meta.transformCssDepth = { cssDepth, deepDependencies };
@@ -146,0 +148,0 @@ }

dist/features/st-mixin.js

@@ -73,4 +73,4 @@ "use strict";
     },
-    transformLastPass({ context, ast, transformer, cssVarsMapping, path }) {
-        ast.walkRules((rule) => appendMixins(context, transformer, rule, cssVarsMapping, path));
+    transformLastPass({ context, ast, transformer, path }) {
+        ast.walkRules((rule) => appendMixins(context, transformer, rule, path));
     },
@@ -144,3 +144,3 @@ });
 exports.StylablePublicApi = StylablePublicApi;
-function appendMixins(context, transformer, rule, cssPropertyMapping, path = []) {
+function appendMixins(context, transformer, rule, path = []) {
     const [decls, mixins] = collectRuleMixins(context, rule);
@@ -152,3 +152,3 @@ if (!mixins || mixins.length === 0) {
         if (mixin.valid) {
-            appendMixin(context, { transformer, mixDef: mixin, rule, path, cssPropertyMapping });
+            appendMixin(context, { transformer, mixDef: mixin, rule, path });
         }
@@ -267,6 +267,6 @@ }
     else if (resolvedType === `js`) {
-        const resolvedMixin = resolvedSymbols.js[symbolName];
-        if (typeof resolvedMixin.symbol === 'function') {
+        const jsValue = resolvedSymbols.js[symbolName].symbol;
+        if (typeof jsValue === 'function') {
             try {
-                handleJSMixin(context, config, resolvedMixin.symbol);
+                handleJSMixin(context, config, jsValue);
             }
@@ -334,3 +334,3 @@ catch (e) {
         // resolve override args
-        const resolvedArgs = (0, functions_1.resolveArgumentsValue)(namedArgs, config.transformer, context.meta, context.diagnostics, mixDef.data.originDecl, stVarOverride, config.path, config.cssPropertyMapping);
+        const resolvedArgs = (0, functions_1.resolveArgumentsValue)(namedArgs, config.transformer, context.meta, context.diagnostics, mixDef.data.originDecl, stVarOverride, config.path);
         collectOptionalArgs({ meta: resolved.meta, resolver: context.resolver }, mixinRoot, optionalArgs);
@@ -337,0 +337,0 @@ // transform mixin

dist/features/st-scope.js

@@ -55,3 +55,3 @@ "use strict";
     prepareAST({ node, toRemove }) {
-        // called without experimentalSelectorInference
+        // called with experimentalSelectorInference=false
         // flatten @st-scope before transformation
@@ -58,0 +58,0 @@ if (isStScopeStatement(node)) {

dist/features/st-var.js

@@ -200,3 +200,2 @@ "use strict";
     rule.walkDecls((decl) => {
-        collectUrls(context.meta, decl); // ToDo: remove
         warnOnDeprecatedCustomValues(context, decl);
@@ -239,11 +238,2 @@ // check type annotation
 }
-// ToDo: remove after moving :vars removal to end of analyze.
-// url collection should pickup vars value during general decls walk
-function collectUrls(meta, decl) {
-    (0, process_declaration_functions_1.processDeclarationFunctions)(decl, (node) => {
-        if (node.type === 'url') {
-            meta.urls.push(node.url);
-        }
-    }, false);
-}
 function evaluateValueCall(context, parsedNode, data) {
@@ -309,7 +299,7 @@ const { stVarOverride, value, node } = data;
                 const deepResolve = resolvedSymbols.js[varName];
-                const importedType = typeof deepResolve.symbol;
-                if (importedType === 'string') {
+                const jsValue = deepResolve.symbol;
+                if (typeof jsValue === 'string') {
                     parsedNode.resolvedValue = context.evaluator.valueHook
-                        ? context.evaluator.valueHook(deepResolve.symbol, varName, false, passedThrough)
-                        : deepResolve.symbol;
+                        ? context.evaluator.valueHook(jsValue, varName, false, passedThrough)
+                        : jsValue;
                 }
@@ -319,3 +309,3 @@ else if (node) {
                     // ToDo: provide actual exported id (default/named as x)
-                    context.diagnostics.report(exports.diagnostics.CANNOT_USE_JS_AS_VALUE(importedType, varName), {
+                    context.diagnostics.report(exports.diagnostics.CANNOT_USE_JS_AS_VALUE(typeof jsValue, varName), {
                         node,
@@ -382,3 +372,3 @@ word: varName,
                     const resolved = context.resolver.deepResolve(symbol);
-                    if (resolved?._kind === 'css' && resolved.symbol._kind === 'var') {
+                    if (resolved?._kind === 'css' && resolved.symbol?._kind === 'var') {
                         varsToCheck.push({ meta: resolved.meta, name: resolved.symbol.name });
@@ -385,0 +375,0 @@ }

dist/functions.d.ts

@@ -12,3 +12,2 @@ import type * as postcss from 'postcss';
     stVarOverride?: Record<string, string> | null;
-    cssVarsMapping?: Record<string, string>;
     args?: string[];
@@ -47,5 +46,5 @@ rootArgument?: string;
 };
-export declare function resolveArgumentsValue(options: Record<string, string>, transformer: StylableTransformer, meta: StylableMeta, diagnostics: Diagnostics, node: postcss.Node, variableOverride?: Record<string, string>, path?: string[], cssVarsMapping?: Record<string, string>): Record<string, string>;
-export declare function processDeclarationValue(resolver: StylableResolver, getResolvedSymbols: (meta: StylableMeta) => MetaResolvedSymbols, value: string, meta: StylableMeta, node?: postcss.Node, variableOverride?: Record<string, string> | null, valueHook?: replaceValueHook, diagnostics?: Diagnostics, passedThrough?: string[], cssVarsMapping?: Record<string, string>, args?: string[], rootArgument?: string, initialNode?: postcss.Node): EvalValueResult;
-export declare function evalDeclarationValue(resolver: StylableResolver, value: string, meta: StylableMeta, node?: postcss.Node, variableOverride?: Record<string, string> | null, valueHook?: replaceValueHook, diagnostics?: Diagnostics, passedThrough?: string[], cssVarsMapping?: Record<string, string>, args?: string[], getResolvedSymbols?: (meta: StylableMeta) => MetaResolvedSymbols): string;
+export declare function resolveArgumentsValue(options: Record<string, string>, transformer: StylableTransformer, meta: StylableMeta, diagnostics: Diagnostics, node: postcss.Node, variableOverride?: Record<string, string>, path?: string[]): Record<string, string>;
+export declare function processDeclarationValue(resolver: StylableResolver, getResolvedSymbols: (meta: StylableMeta) => MetaResolvedSymbols, value: string, meta: StylableMeta, node?: postcss.Node, variableOverride?: Record<string, string> | null, valueHook?: replaceValueHook, diagnostics?: Diagnostics, passedThrough?: string[], args?: string[], rootArgument?: string, initialNode?: postcss.Node): EvalValueResult;
+export declare function evalDeclarationValue(resolver: StylableResolver, value: string, meta: StylableMeta, node?: postcss.Node, variableOverride?: Record<string, string> | null, valueHook?: replaceValueHook, diagnostics?: Diagnostics, passedThrough?: string[], args?: string[], getResolvedSymbols?: (meta: StylableMeta) => MetaResolvedSymbols): string;
 //# sourceMappingURL=functions.d.ts.map

dist/functions.js

@@ -24,3 +24,3 @@ "use strict";
     evaluateValue(context, data) {
-        return processDeclarationValue(context.resolver, this.getResolvedSymbols, data.value, data.meta, data.node, data.stVarOverride || this.stVarOverride, this.valueHook, context.diagnostics, context.passedThrough, data.cssVarsMapping, data.args, data.rootArgument, data.initialNode);
+        return processDeclarationValue(context.resolver, this.getResolvedSymbols, data.value, data.meta, data.node, data.stVarOverride || this.stVarOverride, this.valueHook, context.diagnostics, context.passedThrough, data.args, data.rootArgument, data.initialNode);
     }
@@ -34,6 +34,6 @@ }
 };
-function resolveArgumentsValue(options, transformer, meta, diagnostics, node, variableOverride, path, cssVarsMapping) {
+function resolveArgumentsValue(options, transformer, meta, diagnostics, node, variableOverride, path) {
     const resolvedArgs = {};
     for (const k in options) {
-        resolvedArgs[k] = evalDeclarationValue(transformer.resolver, (0, escape_1.unescapeCSS)(options[k]), meta, node, variableOverride, transformer.replaceValueHook, diagnostics, path, cssVarsMapping, undefined);
+        resolvedArgs[k] = evalDeclarationValue(transformer.resolver, (0, escape_1.unescapeCSS)(options[k]), meta, node, variableOverride, transformer.replaceValueHook, diagnostics, path, undefined);
     }
@@ -43,3 +43,3 @@ return resolvedArgs;
 exports.resolveArgumentsValue = resolveArgumentsValue;
-function processDeclarationValue(resolver, getResolvedSymbols, value, meta, node, variableOverride, valueHook, diagnostics = new diagnostics_1.Diagnostics(), passedThrough = [], cssVarsMapping = {}, args = [], rootArgument, initialNode) {
+function processDeclarationValue(resolver, getResolvedSymbols, value, meta, node, variableOverride, valueHook, diagnostics = new diagnostics_1.Diagnostics(), passedThrough = [], args = [], rootArgument, initialNode) {
     const evaluator = new StylableEvaluator({
@@ -70,3 +70,2 @@ stVarOverride: variableOverride,
                         stVarOverride: variableOverride,
-                        cssVarsMapping,
                         args,
@@ -102,3 +101,4 @@ rootArgument,
                 try {
-                    parsedNode.resolvedValue = formatter.symbol.apply(null, formatterArgs);
+                    // ToDo: check if function instead of calling on a non function
+                    parsedNode.resolvedValue = formatter.symbol(...formatterArgs);
                     if (evaluator.valueHook && typeof parsedNode.resolvedValue === 'string') {
@@ -133,3 +133,2 @@ parsedNode.resolvedValue = evaluator.valueHook(parsedNode.resolvedValue, { name: parsedNode.value, args: formatterArgs }, true, passedThrough);
                         stVarOverride: variableOverride,
-                        cssVarsMapping,
                         args,
@@ -203,6 +202,6 @@ rootArgument,
 exports.processDeclarationValue = processDeclarationValue;
-function evalDeclarationValue(resolver, value, meta, node, variableOverride, valueHook, diagnostics, passedThrough = [], cssVarsMapping, args = [], getResolvedSymbols = (0, stylable_resolver_1.createSymbolResolverWithCache)(resolver, diagnostics || new diagnostics_1.Diagnostics())) {
-    return processDeclarationValue(resolver, getResolvedSymbols, value, meta, node, variableOverride, valueHook, diagnostics, passedThrough, cssVarsMapping, args).outputValue;
+function evalDeclarationValue(resolver, value, meta, node, variableOverride, valueHook, diagnostics, passedThrough = [], args = [], getResolvedSymbols = (0, stylable_resolver_1.createSymbolResolverWithCache)(resolver, diagnostics || new diagnostics_1.Diagnostics())) {
+    return processDeclarationValue(resolver, getResolvedSymbols, value, meta, node, variableOverride, valueHook, diagnostics, passedThrough, args).outputValue;
 }
 exports.evalDeclarationValue = evalDeclarationValue;
 //# sourceMappingURL=functions.js.map

dist/helpers/custom-state.js

@@ -160,3 +160,16 @@ "use strict";
         // simple template with no params
-        mappedStates[stateName] = template.trim().replace(/\\["']/g, '"');
+        const selectorStr = template.trim().replace(/\\["']/g, '"');
+        const selectorAst = (0, selector_1.parseSelectorWithCache)(selectorStr, { clone: true });
+        if (!validateTemplateSelector({
+            stateName,
+            selectorStr,
+            selectorAst,
+            cssNode: decl,
+            diagnostics,
+        })) {
+            return;
+        }
+        else {
+            mappedStates[stateName] = selectorStr;
+        }
     }
@@ -614,11 +627,23 @@ else if (argsFullValue.length === 2) {
 function transformMappedStateWithParam({ stateName, template, param, node, selectorNode, diagnostics, }) {
-    const targetSelectorStr = template.replace(/\$0/g, param);
-    const selectorAst = (0, selector_1.parseSelectorWithCache)(targetSelectorStr, { clone: true });
+    const selectorStr = template.replace(/\$0/g, param);
+    const selectorAst = (0, selector_1.parseSelectorWithCache)(selectorStr, { clone: true });
+    if (!validateTemplateSelector({
+        stateName,
+        selectorStr,
+        selectorAst,
+        cssNode: selectorNode,
+        diagnostics,
+    })) {
+        return;
+    }
+    (0, selector_1.convertToSelector)(node).nodes = selectorAst[0].nodes;
+}
+function validateTemplateSelector({ stateName, selectorStr, selectorAst, cssNode, diagnostics, }) {
     if (selectorAst.length > 1) {
-        if (selectorNode) {
-            diagnostics.report(exports.stateDiagnostics.UNSUPPORTED_MULTI_SELECTOR(stateName, targetSelectorStr), {
-                node: selectorNode,
+        if (cssNode) {
+            diagnostics.report(exports.stateDiagnostics.UNSUPPORTED_MULTI_SELECTOR(stateName, selectorStr), {
+                node: cssNode,
             });
         }
-        return;
+        return false;
     }
@@ -628,8 +653,8 @@ else {
         if (firstSelector?.type === 'type' || firstSelector?.type === 'universal') {
-            if (selectorNode) {
-                diagnostics.report(exports.stateDiagnostics.UNSUPPORTED_INITIAL_SELECTOR(stateName, targetSelectorStr), {
-                    node: selectorNode,
+            if (cssNode) {
+                diagnostics.report(exports.stateDiagnostics.UNSUPPORTED_INITIAL_SELECTOR(stateName, selectorStr), {
+                    node: cssNode,
                 });
             }
-            return;
+            return false;
         }
@@ -644,12 +669,12 @@ let unexpectedSelector = undefined;
         if (unexpectedSelector) {
-            if (selectorNode) {
+            if (cssNode) {
                 switch (unexpectedSelector.type) {
                     case 'combinator':
-                        diagnostics.report(exports.stateDiagnostics.UNSUPPORTED_COMPLEX_SELECTOR(stateName, targetSelectorStr), {
-                            node: selectorNode,
+                        diagnostics.report(exports.stateDiagnostics.UNSUPPORTED_COMPLEX_SELECTOR(stateName, selectorStr), {
+                            node: cssNode,
                         });
                         break;
                     case 'invalid':
-                        diagnostics.report(exports.stateDiagnostics.INVALID_SELECTOR(stateName, targetSelectorStr), {
-                            node: selectorNode,
+                        diagnostics.report(exports.stateDiagnostics.INVALID_SELECTOR(stateName, selectorStr), {
+                            node: cssNode,
                         });
@@ -659,6 +684,6 @@ break;
             }
-            return;
+            return false;
         }
     }
-    (0, selector_1.convertToSelector)(node).nodes = selectorAst[0].nodes;
+    return true;
 }
@@ -665,0 +690,0 @@ function resolveParam(meta, resolver, diagnostics, node, nodeContent) {

dist/helpers/import.d.ts

@@ -99,4 +99,4 @@ import { Diagnostics } from '../diagnostics';
 };
-export declare function tryCollectImportsDeep(resolver: StylableResolver, meta: StylableMeta, imports?: Set<string>, onImport?: undefined | ((e: ImportEvent) => void), depth?: number): Set<string>;
+export declare function tryCollectImportsDeep(resolver: StylableResolver, meta: StylableMeta, imports?: Set<string>, onImport?: undefined | ((e: ImportEvent) => void), depth?: number, origin?: string): Set<string>;
 export {};
 //# sourceMappingURL=import.d.ts.map

dist/helpers/import.js

@@ -438,6 +438,9 @@ "use strict";
 }
-function tryCollectImportsDeep(resolver, meta, imports = new Set(), onImport = undefined, depth = 0) {
+function tryCollectImportsDeep(resolver, meta, imports = new Set(), onImport = undefined, depth = 1, origin = meta.source) {
     for (const { context, request } of meta.getImportStatements()) {
         try {
             const resolved = resolver.resolvePath(context, request);
+            if (resolved === origin) {
+                continue;
+            }
             onImport?.({ context, request, resolved, depth });
@@ -447,3 +450,3 @@ if (!imports.has(resolved)) {
                 if (resolved.endsWith('.st.css')) {
-                    tryCollectImportsDeep(resolver, resolver.analyze(resolved), imports, onImport, depth + 1);
+                    tryCollectImportsDeep(resolver, resolver.analyze(resolved), imports, onImport, depth + 1, origin);
                 }
@@ -450,0 +453,0 @@ }

dist/index-internal.d.ts

@@ -15,3 +15,3 @@ export { safeParse } from './parser';
 export { emitDiagnostics, DiagnosticsMode, EmitDiagnosticsContext, reportDiagnostic, } from './report-diagnostic';
-export { StylableResolver, StylableResolverCache } from './stylable-resolver';
+export { StylableResolver, StylableResolverCache, isValidCSSResolve, CSSResolveMaybe, } from './stylable-resolver';
 export { CacheItem, FileProcessor, cachedProcessFile, processFn } from './cached-process-file';
@@ -18,0 +18,0 @@ export { createStylableFileProcessor } from './create-stylable-processor';

dist/index-internal.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.plugableRecord = exports.processDeclarationFunctions = exports.createAtImportProps = exports.parsePseudoImport = exports.tryCollectImportsDeep = exports.createCustomValue = exports.packageNamespaceFactory = exports.createStylableFileProcessor = exports.cachedProcessFile = exports.StylableResolver = exports.reportDiagnostic = exports.emitDiagnostics = exports.parseSelectorWithCache = exports.namespaceDelimiter = exports.namespace = exports.fixRelativeUrls = exports.isRelativeNativeCss = exports.makeAbsolute = exports.isAsset = exports.knownPseudoClassesWithNestedSelectors = exports.nativePseudoElements = exports.nativePseudoClasses = exports.cssParse = exports.murmurhash3_32_gc = exports.STStructure = exports.CSSCustomProperty = exports.CSSContains = exports.CSSLayer = exports.CSSKeyframes = exports.CSSType = exports.CSSClass = exports.STCustomState = exports.STCustomSelector = exports.STNamespace = exports.STGlobal = exports.STImport = exports.STSymbol = exports.validateDefaultConfig = exports.InferredSelector = exports.transformerDiagnostics = exports.StylableTransformer = exports.StylableProcessor = exports.safeParse = void 0;
+exports.plugableRecord = exports.processDeclarationFunctions = exports.createAtImportProps = exports.parsePseudoImport = exports.tryCollectImportsDeep = exports.createCustomValue = exports.packageNamespaceFactory = exports.createStylableFileProcessor = exports.cachedProcessFile = exports.isValidCSSResolve = exports.StylableResolver = exports.reportDiagnostic = exports.emitDiagnostics = exports.parseSelectorWithCache = exports.namespaceDelimiter = exports.namespace = exports.fixRelativeUrls = exports.isRelativeNativeCss = exports.makeAbsolute = exports.isAsset = exports.knownPseudoClassesWithNestedSelectors = exports.nativePseudoElements = exports.nativePseudoClasses = exports.cssParse = exports.murmurhash3_32_gc = exports.STStructure = exports.CSSCustomProperty = exports.CSSContains = exports.CSSLayer = exports.CSSKeyframes = exports.CSSType = exports.CSSClass = exports.STCustomState = exports.STCustomSelector = exports.STNamespace = exports.STGlobal = exports.STImport = exports.STSymbol = exports.validateDefaultConfig = exports.InferredSelector = exports.transformerDiagnostics = exports.StylableTransformer = exports.StylableProcessor = exports.safeParse = void 0;
 var parser_1 = require("./parser");
@@ -51,2 +51,3 @@ Object.defineProperty(exports, "safeParse", { enumerable: true, get: function () { return parser_1.safeParse; } });
 Object.defineProperty(exports, "StylableResolver", { enumerable: true, get: function () { return stylable_resolver_1.StylableResolver; } });
+Object.defineProperty(exports, "isValidCSSResolve", { enumerable: true, get: function () { return stylable_resolver_1.isValidCSSResolve; } });
 var cached_process_file_1 = require("./cached-process-file");
@@ -53,0 +54,0 @@ Object.defineProperty(exports, "cachedProcessFile", { enumerable: true, get: function () { return cached_process_file_1.cachedProcessFile; } });

dist/module-resolver.d.ts

@@ -0,4 +1,5 @@
+import { IRequestResolverOptions, IResolutionFileSystem } from '@file-services/resolve';
 import type { ModuleResolver } from './types';
-import type { MinimalFS } from './cached-process-file';
-export declare function createDefaultResolver(fileSystem: MinimalFS, resolveOptions: any): ModuleResolver;
+export type { IRequestResolverOptions, IResolutionFileSystem };
+export declare function createDefaultResolver(options: IRequestResolverOptions): ModuleResolver;
 //# sourceMappingURL=module-resolver.d.ts.map

dist/module-resolver.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createDefaultResolver = void 0;
-// importing the factory directly, as we feed it our own fs, and don't want graceful-fs to be implicitly imported
-// this allows @stylable/core to be bundled for browser usage without special custom configuration
-const ResolverFactory_js_1 = __importDefault(require("enhanced-resolve/lib/ResolverFactory.js"));
-function bundleSafeRequireExtensions() {
-    let extensions;
-    try {
-        // we use eval here to avoid bundling warnings about require.extensions we always has fallback for browsers
-        extensions = Object.keys(require('module')._extensions);
-    }
-    catch (e) {
-        extensions = [];
-    }
-    return extensions.length ? extensions : ['.js', '.json'];
-}
-const resolverContext = {};
-function createDefaultResolver(fileSystem, resolveOptions) {
-    const extensions = resolveOptions.extensions && resolveOptions.extensions.length
-        ? resolveOptions.extensions
-        : bundleSafeRequireExtensions();
-    const eResolver = ResolverFactory_js_1.default.createResolver({
-        ...resolveOptions,
-        extensions,
-        useSyncFileSystemCalls: true,
-        cache: false,
-        fileSystem,
+const resolve_1 = require("@file-services/resolve");
+function createDefaultResolver(options) {
+    const resolver = (0, resolve_1.createRequestResolver)({
+        extensions: ['.js', '.mjs', '.cjs', '.ts', '.mts', '.cts', '.json'],
+        ...options,
     });
     return (directoryPath, request) => {
-        const res = eResolver.resolveSync(resolverContext, directoryPath, request);
-        if (res === false) {
+        const { resolvedFile, visitedPaths } = resolver(directoryPath, request);
+        if (resolvedFile === false) {
             throw new Error(`Stylable does not support browser field 'false' values. ${request} resolved to 'false' from ${directoryPath}`);
         }
-        return res;
+        if (typeof resolvedFile !== 'string') {
+            throw new Error(`Stylable could not resolve ${JSON.stringify(request)} from ${JSON.stringify(directoryPath)}` + (visitedPaths.size ? `\nVisited paths:\n${[...visitedPaths].join('\n')}` : ''));
+        }
+        return resolvedFile;
     };
@@ -40,0 +20,0 @@ }

dist/stylable-js-module-source.js

@@ -48,7 +48,3 @@ "use strict";
     const importInjectCSS = injectOptions?.css ? `, injectCSS` : '';
-    const request = JSON.stringify(runtimeRequest ??
-        // TODO: we use direct requests here since we don't know how this will be resolved
-        (moduleType === 'esm'
-            ? '@stylable/runtime/esm/runtime.js'
-            : '@stylable/runtime/dist/runtime.js'));
+    const request = JSON.stringify(runtimeRequest ?? '@stylable/runtime');
     return moduleType === 'esm'
@@ -55,0 +51,0 @@ ? `import { classesRuntime, statesRuntime${importInjectCSS} } from ${request};`

dist/stylable-processor.js

@@ -32,11 +32,3 @@ "use strict";
         });
-        const isStylable = this.meta.type === 'stylable';
         root.walkDecls((decl) => {
-            const parent = decl.parent;
-            if (parent.type === 'rule' && parent.selector === ':vars' && isStylable) {
-                // ToDo: remove once
-                // - custom property definition is allowed in var value
-                // - url collection is removed from st-var
-                return;
-            }
             features_2.CSSClass.hooks.analyzeDeclaration({ context: this, decl });
@@ -43,0 +35,0 @@ features_1.CSSCustomProperty.hooks.analyzeDeclaration({ context: this, decl });

dist/stylable-resolver.d.ts

@@ -5,3 +5,2 @@ import type { FileProcessor } from './cached-process-file';
 import { ImportSymbol, ClassSymbol, ElementSymbol, Imported, StylableSymbol, STSymbol, VarSymbol, CSSVarSymbol, KeyframesSymbol, LayerSymbol, ContainerSymbol, STStructure } from './features';
-import type { StylableTransformer } from './stylable-transformer';
 import type { ModuleResolver } from './types';
@@ -38,2 +37,7 @@ import { CustomValueExtension } from './custom-values';
 export type StylableResolverCache = Map<string, CachedModuleEntity>;
+export interface CSSResolveMaybe<T extends StylableSymbol | STStructure.PartSymbol = StylableSymbol> {
+    _kind: 'css';
+    symbol: T | undefined;
+    meta: StylableMeta;
+}
 export interface CSSResolve<T extends StylableSymbol | STStructure.PartSymbol = StylableSymbol> {
@@ -44,6 +48,7 @@ _kind: 'css';
 }
+export declare function isValidCSSResolve(resolved: CSSResolveMaybe): resolved is CSSResolve;
 export type CSSResolvePath = Array<CSSResolve<ClassSymbol | ElementSymbol>>;
 export interface JSResolve {
     _kind: 'js';
-    symbol: any;
+    symbol: unknown;
     meta: null;
@@ -64,3 +69,3 @@ }
 }
-export type ReportError = (res: CSSResolve | JSResolve | null, extend: ImportSymbol | ClassSymbol | ElementSymbol, extendPath: Array<CSSResolve<ClassSymbol | ElementSymbol>>, meta: StylableMeta, name: string, isElement: boolean) => void;
+export type ReportError = (res: CSSResolveMaybe | JSResolve | null, extend: ImportSymbol | ClassSymbol | ElementSymbol, extendPath: Array<CSSResolve<ClassSymbol | ElementSymbol>>, meta: StylableMeta, name: string, isElement: boolean) => void;
 export declare class StylableResolver {
@@ -75,11 +80,11 @@ protected fileProcessor: FileProcessor<StylableMeta>;
     resolvePath(directoryPath: string, request: string): string;
-    resolveImported(imported: Imported, name: string, subtype?: 'mappedSymbols' | 'mappedKeyframes' | STSymbol.Namespaces): CSSResolve | JSResolve | null;
-    resolveImport(importSymbol: ImportSymbol): JSResolve | CSSResolve<StylableSymbol> | null;
-    resolve(maybeImport: StylableSymbol | undefined): CSSResolve | JSResolve | null;
-    deepResolve(maybeImport: StylableSymbol | undefined, path?: StylableSymbol[]): CSSResolve | JSResolve | null;
+    resolveImported(imported: Imported, name: string, subtype?: 'mappedSymbols' | 'mappedKeyframes' | STSymbol.Namespaces): CSSResolveMaybe | JSResolve | null;
+    resolveImport(importSymbol: ImportSymbol): CSSResolveMaybe<StylableSymbol> | JSResolve | null;
+    resolve(maybeImport: StylableSymbol | undefined): CSSResolveMaybe | JSResolve | null;
+    deepResolve(maybeImport: StylableSymbol | undefined, path?: StylableSymbol[]): CSSResolveMaybe | JSResolve | null;
     resolveSymbolOrigin(symbol: StylableSymbol | undefined, meta: StylableMeta, path?: StylableSymbol[]): CSSResolve | null;
     resolveSymbols(meta: StylableMeta, diagnostics: Diagnostics): MetaResolvedSymbols;
-    resolveExtends(meta: StylableMeta, nameOrSymbol: string | ClassSymbol | ElementSymbol, isElement?: boolean, transformer?: StylableTransformer, reportError?: ReportError): CSSResolvePath;
+    resolveExtends(meta: StylableMeta, nameOrSymbol: string | ClassSymbol | ElementSymbol, isElement?: boolean, reportError?: ReportError): CSSResolvePath;
 }
 export declare function createSymbolResolverWithCache(resolver: StylableResolver, diagnostics: Diagnostics): (meta: StylableMeta) => MetaResolvedSymbols;
 //# sourceMappingURL=stylable-resolver.d.ts.map

dist/stylable-resolver.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSymbolResolverWithCache = exports.StylableResolver = void 0;
+exports.createSymbolResolverWithCache = exports.StylableResolver = exports.isValidCSSResolve = void 0;
 const features_1 = require("./features");
 const rule_1 = require("./helpers/rule");
 const custom_values_1 = require("./custom-values");
+function isValidCSSResolve(resolved) {
+    return resolved.symbol !== undefined;
+}
+exports.isValidCSSResolve = isValidCSSResolve;
 function isInPath(extendPath, { symbol: { name: name1 }, meta: { source: source1 } }) {
@@ -254,5 +258,6 @@ return extendPath.find(({ symbol: { name }, meta: { source } }) => {
             }
+            // deepResolved symbol is resolved by this point
             switch (deepResolved.symbol._kind) {
                 case `class`:
-                    resolvedSymbols.class[name] = this.resolveExtends(meta, deepResolved.symbol, false, undefined, validateClassResolveExtends(meta, name, diagnostics, deepResolved));
+                    resolvedSymbols.class[name] = this.resolveExtends(meta, deepResolved.symbol, false, validateClassResolveExtends(meta, name, diagnostics, deepResolved));
                     break;
@@ -306,3 +311,3 @@ case `element`:
     }
-    resolveExtends(meta, nameOrSymbol, isElement = false, transformer, reportError) {
+    resolveExtends(meta, nameOrSymbol, isElement = false, reportError) {
         const name = typeof nameOrSymbol === `string` ? nameOrSymbol : nameOrSymbol.name;
@@ -314,17 +319,2 @@ const symbol = typeof nameOrSymbol === `string`
             : nameOrSymbol;
-        const customSelector = isElement
-            ? null
-            : features_1.STCustomSelector.getCustomSelectorExpended(meta, name);
-        if (!symbol && !customSelector) {
-            return [];
-        }
-        if (customSelector && transformer) {
-            const parsed = transformer.resolveSelectorElements(meta, customSelector);
-            if (parsed.length === 1) {
-                return parsed[0][parsed[0].length - 1].resolved;
-            }
-            else {
-                return [];
-            }
-        }
         if (!symbol) {
@@ -406,3 +396,3 @@ return [];
         else {
-            if (deepResolved?.symbol.alias) {
+            if (deepResolved.symbol.alias) {
                 meta.sourceAst.walkRules(new RegExp('\\.' + name), (rule) => {
@@ -409,0 +399,0 @@ diagnostics.report(features_1.CSSClass.diagnostics.UNKNOWN_IMPORT_ALIAS(name), {

dist/stylable-transformer.js

@@ -219,3 +219,2 @@ "use strict";
                 node: decl,
-                cssVarsMapping,
             }).outputValue;
@@ -253,3 +252,2 @@ };
             transformer: this,
-            cssVarsMapping,
             path,
@@ -256,0 +254,0 @@ };

dist/stylable.d.ts

@@ -9,19 +9,13 @@ import type { CacheItem, FileProcessor, MinimalFS } from './cached-process-file';
 import type { IStylableOptimizer, ModuleResolver } from './types';
+import { IRequestResolverOptions, IResolutionFileSystem } from './module-resolver';
 import { STImport, STScope, STVar, STMixin, CSSClass } from './features';
 import { Dependency } from './visit-meta-css-dependencies';
-export interface StylableConfig {
+export interface StylableConfigBase {
     projectRoot: string;
-    fileSystem: MinimalFS;
     requireModule?: (path: string) => any;
     onProcess?: (meta: StylableMeta, path: string) => StylableMeta;
     hooks?: TransformHooks;
-    resolveOptions?: {
-        alias?: any;
-        symlinks?: boolean;
-        [key: string]: any;
-    };
     optimizer?: IStylableOptimizer;
     mode?: 'production' | 'development';
     resolveNamespace?: typeof processNamespace;
-    resolveModule?: ModuleResolver;
     cssParser?: CssParser;
@@ -32,2 +26,9 @@ resolverCache?: StylableResolverCache;
 }
+export type StylableConfig = StylableConfigBase & ({
+    fileSystem: MinimalFS;
+    resolveModule: ModuleResolver;
+} | {
+    fileSystem: IResolutionFileSystem;
+    resolveModule?: ModuleResolver | Omit<IRequestResolverOptions, 'fs'>;
+});
 export declare function validateDefaultConfig(defaultConfigObj: any): void;
@@ -47,3 +48,3 @@ interface InitCacheParams {
     projectRoot: string;
-    protected fileSystem: MinimalFS;
+    protected fileSystem: IResolutionFileSystem | MinimalFS;
     protected requireModule: (path: string) => any;
@@ -53,3 +54,2 @@ protected onProcess?: (meta: StylableMeta, path: string) => StylableMeta;
     protected hooks: TransformHooks;
-    protected resolveOptions: any;
     optimizer?: IStylableOptimizer;
@@ -64,2 +64,3 @@ protected mode: 'production' | 'development';
     constructor(config: StylableConfig);
+    private initModuleResolver;
     getDependencies(meta: StylableMeta): Dependency[];
@@ -66,0 +67,0 @@ initCache({ filter }?: InitCacheParams): void;

dist/stylable.js

@@ -37,2 +37,3 @@ "use strict";
 const postcss = __importStar(require("postcss"));
+const deprecation_1 = require("./helpers/deprecation");
 // This defines and validates known configs for the defaultConfig in 'stylable.config.js
@@ -62,3 +63,7 @@ const globalDefaultSupportedConfigs = new Set([
         this.diagnostics = new diagnostics_1.Diagnostics();
-        this.experimentalSelectorInference = !!config.experimentalSelectorInference;
+        this.experimentalSelectorInference =
+            config.experimentalSelectorInference === false ? false : true;
+        if (this.experimentalSelectorInference === false) {
+            (0, deprecation_1.warnOnce)('Stylable is running in a deprecated mode that will be removed in a future 6.x.x release. Please set experimentalSelectorInference=true to avoid this warning.');
+        }
         this.projectRoot = config.projectRoot;
@@ -69,14 +74,12 @@ this.fileSystem = config.fileSystem;
                 (() => {
-                    throw new Error('Javascript files are not supported without requireModule options');
+                    throw new Error('Javascript files are not supported without Stylable `requireModule` option');
                 });
         this.onProcess = config.onProcess;
         this.hooks = config.hooks || {};
-        this.resolveOptions = config.resolveOptions || {};
         this.optimizer = config.optimizer;
         this.mode = config.mode || `production`;
         this.resolveNamespace = config.resolveNamespace;
-        this.moduleResolver =
-            config.resolveModule || (0, module_resolver_1.createDefaultResolver)(this.fileSystem, this.resolveOptions);
+        this.moduleResolver = this.initModuleResolver(config);
         this.cssParser = config.cssParser || parser_1.cssParse;
-        this.resolverCache = config.resolverCache; // ToDo: v5 default to `new Map()`
+        this.resolverCache = config.resolverCache || new Map();
         this.fileProcessorCache = config.fileProcessorCache;
@@ -92,2 +95,11 @@ this.fileProcessor = (0, create_stylable_processor_1.createStylableFileProcessor)({
     }
+    initModuleResolver(config) {
+        return typeof config.resolveModule === 'function'
+            ? config.resolveModule
+            : (0, module_resolver_1.createDefaultResolver)({
+                fs: this
+                    .fileSystem /* we force to provide resolveModule when using MinimalFS */,
+                ...config.resolveModule,
+            });
+    }
     getDependencies(meta) {
@@ -94,0 +106,0 @@ const dependencies = [];

package.json

 {
   "name": "@stylable/core",
-  "version": "5.16.1",
+  "version": "6.0.0-rc.1",
   "description": "CSS for Components",
@@ -9,13 +9,9 @@ "main": "dist/index.js",
   },
-  "browser": {
-    "module": "./dist/module-with-extensions.js"
-  },
   "dependencies": {
+    "@file-services/resolve": "^8.3.2",
     "@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",
@@ -27,3 +23,3 @@ "lodash.clonedeep": "^4.5.0",
     "postcss-nested": "^6.0.1",
-    "postcss-safe-parser": "^6.0.0",
+    "postcss-safe-parser": "^7.0.0",
     "postcss-value-parser": "^4.2.0"
@@ -38,3 +34,3 @@ },
   "engines": {
-    "node": ">=14.14.0"
+    "node": ">=18.12.0"
   },
@@ -41,0 +37,0 @@ "publishConfig": {

src/cached-process-file.ts

@@ -9,5 +9,3 @@ export type processFn<T> = (fullpath: string, content: string) => T;
 export interface MinimalFS {
-    statSync: (filePath: string) => { mtime: Date };
     readFileSync: (filePath: string, encoding: 'utf8') => string;
-    readlinkSync: (filePath: string) => string;
 }
@@ -14,0 +12,0 @@

src/features/css-class.ts

@@ -102,2 +102,7 @@ import { createFeature, FeatureContext, FeatureTransformContext } from './feature';
     ),
+    UNSUPPORTED_COMPLEX_SELECTOR: createDiagnosticReporter(
+        '00010',
+        'error',
+        () => `unsupported complex selector`
+    ),
     IMPORT_ISNT_EXTENDABLE: createDiagnosticReporter(
@@ -149,3 +154,3 @@ '00005',
     IMMUTABLE_SELECTOR: ImmutableClass;
-    RESOLVED: Record<string, string>;
+    RESOLVED: Record<string, { classes: string; isLocal: boolean }>;
 }>({
@@ -177,3 +182,3 @@ metaInit({ meta }) {
         const resolvedSymbols = context.getResolvedSymbols(context.meta);
-        const locals: Record<string, string> = {};
+        const locals: Record<string, { classes: string; isLocal: boolean }> = {};
         for (const [localName, resolved] of Object.entries(resolvedSymbols.class)) {
@@ -219,3 +224,5 @@ const exportedClasses = [];
             if (classNames) {
-                locals[localName] = classNames;
+                const directResolve = resolved[0];
+                const isLocal = directResolve.meta === context.meta && !directResolve.symbol.alias;
+                locals[localName] = { classes: classNames, isLocal };
             }
@@ -251,3 +258,7 @@ }
     transformJSExports({ exports, resolved }) {
-        Object.assign(exports.classes, resolved);
+        for (const [localName, { classes, isLocal }] of Object.entries(resolved)) {
+            if (isLocal) {
+                exports.classes[localName] = classes;
+            }
+        }
     },
@@ -665,4 +676,14 @@ });
         });
+        return;
+    } else {
+        for (const node of selector[0].nodes) {
+            if (node.type === 'combinator') {
+                context.diagnostics.report(diagnostics.UNSUPPORTED_COMPLEX_SELECTOR(), {
+                    node: decl,
+                });
+                return;
+            }
+        }
     }
     return selector[0].nodes;
 }

src/features/css-contains.ts

@@ -94,4 +94,9 @@ import { createFeature, FeatureContext } from './feature';
 
+interface ResolvedSymbols {
+    record: Record<string, ResolvedContainer>;
+    locals: Set<string>;
+}
+
 export const hooks = createFeature<{
-    RESOLVED: Record<string, ResolvedContainer>;
+    RESOLVED: ResolvedSymbols;
 }>({
@@ -174,3 +179,6 @@ metaInit({ meta }) {
         const symbols = STSymbol.getAllByType(context.meta, `container`);
-        const resolved: Record<string, ResolvedContainer> = {};
+        const resolved: ResolvedSymbols = {
+            record: {},
+            locals: new Set(),
+        };
         const resolvedSymbols = context.getResolvedSymbols(context.meta);
@@ -180,3 +188,6 @@ for (const [name, symbol] of Object.entries(symbols)) {
             if (res) {
-                resolved[name] = res;
+                resolved.record[name] = res;
+                if (res.meta === context.meta) {
+                    resolved.locals.add(name);
+                }
             } else if (symbol.import) {
@@ -203,4 +214,4 @@ context.diagnostics.report(
         decl.value = bucket[value].transformNames((name) => {
-            const resolve = resolved[name];
-            return resolve ? getTransformedName(resolved[name]) : name;
+            const resolve = resolved.record[name];
+            return resolve ? getTransformedName(resolved.record[name]) : name;
         });
@@ -220,3 +231,3 @@ },
             } else if (node.type === 'word') {
-                const resolve = resolved[node.value];
+                const resolve = resolved.record[node.value];
                 if (resolve) {
@@ -255,4 +266,4 @@ node.value = getTransformedName(resolve);
     transformJSExports({ exports, resolved }) {
-        for (const [name, resolve] of Object.entries(resolved)) {
-            exports.containers[name] = getTransformedName(resolve);
+        for (const name of resolved.locals) {
+            exports.containers[name] = getTransformedName(resolved.record[name]);
         }
@@ -259,0 +270,0 @@ },

src/features/css-custom-property.ts

@@ -1,2 +0,2 @@
-import { createFeature, FeatureContext } from './feature';
+import { createFeature, FeatureContext, FeatureTransformContext } from './feature';
 import * as STSymbol from './st-symbol';
@@ -72,4 +72,9 @@ import type { ImportSymbol } from './st-import';
 
+interface ResolvedSymbols {
+    localToGlobal: Record<string, string>;
+    locals: Set<string>;
+}
+
 export const hooks = createFeature<{
-    RESOLVED: Record<string, string>;
+    RESOLVED: ResolvedSymbols;
 }>({
@@ -168,3 +173,6 @@ metaInit({ meta }) {
     transformResolve({ context: { meta, getResolvedSymbols } }) {
-        const customPropsMapping: Record<string, string> = {};
+        const customPropsMapping: ResolvedSymbols = {
+            localToGlobal: {},
+            locals: new Set(),
+        };
         const resolvedSymbols = getResolvedSymbols(meta);
@@ -174,9 +182,7 @@ for (const [localVarName, localSymbol] of Object.entries(
         )) {
-            const resolve = resolvedSymbols.cssVar[localVarName] || {
-                // fallback to local namespace
-                _kind: `css`,
-                symbol: localSymbol,
-                meta,
-            };
-            customPropsMapping[localVarName] = getTransformedName(resolve);
+            const resolve = resolveFinalSymbol(meta, localSymbol, resolvedSymbols);
+            customPropsMapping.localToGlobal[localVarName] = getTransformedName(resolve);
+            if (resolve.meta === meta) {
+                customPropsMapping.locals.add(localVarName);
+            }
         }
@@ -193,4 +199,4 @@
             const propName = globalValue(atRule.params) || atRule.params;
-            if (resolved[propName]) {
-                atRule.params = resolved[propName] || atRule.params;
+            if (resolved.localToGlobal[propName]) {
+                atRule.params = resolved.localToGlobal[propName] || atRule.params;
             }
@@ -203,10 +209,14 @@ } else if (context.meta.type === 'stylable') {
     transformDeclaration({ decl, resolved }) {
-        decl.prop = resolved[decl.prop] || decl.prop;
+        decl.prop = resolved.localToGlobal[decl.prop] || decl.prop;
     },
-    transformValue({ node, data: { cssVarsMapping } }) {
+    transformValue({ node, data: { meta }, context: { getResolvedSymbols } }) {
         const { value } = node;
         const varWithPrefix = node.nodes[0]?.value || ``;
         if (validateCustomPropertyName(varWithPrefix)) {
-            if (cssVarsMapping && cssVarsMapping[varWithPrefix]) {
-                node.nodes[0].value = cssVarsMapping[varWithPrefix];
+            const resolvedSymbols = getResolvedSymbols(meta);
+            const localSymbol = STSymbol.get(meta, varWithPrefix, `cssVar`);
+            if (localSymbol) {
+                node.nodes[0].value = getTransformedName(
+                    resolveFinalSymbol(meta, localSymbol, resolvedSymbols)
+                );
             }
@@ -220,4 +230,4 @@ }
     transformJSExports({ exports, resolved }) {
-        for (const varName of Object.keys(resolved)) {
-            exports.vars[varName.slice(2)] = resolved[varName];
+        for (const varName of resolved.locals) {
+            exports.vars[varName.slice(2)] = resolved.localToGlobal[varName];
         }
@@ -233,2 +243,17 @@ },
 
+function resolveFinalSymbol(
+    meta: StylableMeta,
+    localSymbol: CSSVarSymbol,
+    resolvedSymbols: ReturnType<FeatureTransformContext['getResolvedSymbols']>
+) {
+    return (
+        resolvedSymbols.cssVar[localSymbol.name] || {
+            // fallback to local namespace
+            _kind: `css`,
+            symbol: localSymbol,
+            meta,
+        }
+    );
+}
+
 function addCSSProperty({
@@ -235,0 +260,0 @@ context,

src/features/css-keyframes.ts

@@ -105,4 +105,9 @@ import { createFeature, FeatureContext } from './feature';
 
+interface ResolvedSymbols {
+    record: Record<string, KeyframesResolve>;
+    locals: Set<string>;
+}
+
 export const hooks = createFeature<{
-    RESOLVED: Record<string, KeyframesResolve>;
+    RESOLVED: ResolvedSymbols;
 }>({
@@ -157,3 +162,6 @@ metaInit({ meta }) {
         const symbols = STSymbol.getAllByType(context.meta, `keyframes`);
-        const resolved: Record<string, KeyframesResolve> = {};
+        const resolved: ResolvedSymbols = {
+            record: {},
+            locals: new Set(),
+        };
         const resolvedSymbols = context.getResolvedSymbols(context.meta);
@@ -163,3 +171,6 @@ for (const [name, symbol] of Object.entries(symbols)) {
             if (res) {
-                resolved[name] = res;
+                resolved.record[name] = res;
+                if (res.meta === context.meta) {
+                    resolved.locals.add(name);
+                }
             } else if (symbol.import) {
@@ -184,3 +195,3 @@ context.diagnostics.report(
         }
-        const resolve = resolved[name];
+        const resolve = resolved.record[name];
         /* js keyframes mixins won't have resolved keyframes */
@@ -196,3 +207,3 @@ atRule.params = resolve
         parsed.nodes.forEach((node) => {
-            const resolve = resolved[node.value];
+            const resolve = resolved.record[node.value];
             const scoped = resolve && getTransformedName(resolve);
@@ -206,4 +217,4 @@ if (scoped) {
     transformJSExports({ exports, resolved }) {
-        for (const [name, resolve] of Object.entries(resolved)) {
-            exports.keyframes[name] = getTransformedName(resolve);
+        for (const name of resolved.locals) {
+            exports.keyframes[name] = getTransformedName(resolved.record[name]);
         }
@@ -210,0 +221,0 @@ },

src/features/css-layer.ts

@@ -83,4 +83,9 @@ import { createFeature, FeatureContext } from './feature';
 
+interface ResolvedSymbols {
+    record: Record<string, ResolvedLayer>;
+    locals: Set<string>;
+}
+
 export const hooks = createFeature<{
-    RESOLVED: Record<string, ResolvedLayer>;
+    RESOLVED: ResolvedSymbols;
 }>({
@@ -127,3 +132,6 @@ metaInit({ meta }) {
         const symbols = STSymbol.getAllByType(context.meta, `layer`);
-        const resolved: Record<string, ResolvedLayer> = {};
+        const resolved: ResolvedSymbols = {
+            record: {},
+            locals: new Set(),
+        };
         const resolvedSymbols = context.getResolvedSymbols(context.meta);
@@ -133,3 +141,6 @@ for (const [name, symbol] of Object.entries(symbols)) {
             if (res) {
-                resolved[name] = res;
+                resolved.record[name] = res;
+                if (res.meta === context.meta) {
+                    resolved.locals.add(name);
+                }
             } else if (symbol.import) {
@@ -153,3 +164,3 @@ context.diagnostics.report(
             // native css import
-            transformCSSImportLayer(context, atRule, resolved);
+            transformCSSImportLayer(context, atRule, resolved.record);
         } else if (atRule.name === 'layer') {
@@ -161,4 +172,4 @@ // layer atrule
                 atRule.params = analyzed.transformNames((name) => {
-                    const resolve = resolved[name];
-                    return resolve ? getTransformedName(resolved[name]) : name;
+                    const resolve = resolved.record[name];
+                    return resolve ? getTransformedName(resolved.record[name]) : name;
                 });
@@ -169,4 +180,4 @@ }
     transformJSExports({ exports, resolved }) {
-        for (const [name, resolve] of Object.entries(resolved)) {
-            exports.layers[name] = getTransformedName(resolve);
+        for (const name of resolved.locals) {
+            exports.layers[name] = getTransformedName(resolved.record[name]);
         }
@@ -173,0 +184,0 @@ },

src/features/feature.ts

@@ -101,3 +101,2 @@ import type { StylableMeta } from '../stylable-meta';
         transformer: StylableTransformer;
-        cssVarsMapping: Record<string, string>;
         path: string[];
@@ -104,0 +103,0 @@ }) => void;

src/features/st-custom-selector.ts

@@ -80,3 +80,3 @@ import { plugableRecord } from '../helpers/plugable-record';
     prepareAST({ context, node, toRemove }) {
-        // called without experimentalSelectorInference
+        // called with experimentalSelectorInference=false
         // split selectors & remove definitions
@@ -83,0 +83,0 @@ if (node.type === 'rule' && node.selector.match(CUSTOM_SELECTOR_RE)) {

src/features/st-import.ts

@@ -200,3 +200,3 @@ import { createFeature, FeatureContext, FeatureTransformContext } from './feature';
 function calcCssDepth(context: FeatureTransformContext) {
-    let cssDepth = 0;
+    let cssDepth = 1;
     const deepDependencies = tryCollectImportsDeep(
@@ -206,6 +206,8 @@ context.resolver,
         new Set(),
-        ({ depth }) => {
-            cssDepth = Math.max(cssDepth, depth);
+        ({ depth, request }) => {
+            if (request.endsWith('.css')) {
+                cssDepth = Math.max(cssDepth, depth);
+            }
         },
-        1
+        2
     );
@@ -212,0 +214,0 @@ context.meta.transformCssDepth = { cssDepth, deepDependencies };

src/features/st-mixin.ts

@@ -125,4 +125,4 @@ import { createFeature, FeatureTransformContext } from './feature';
     },
-    transformLastPass({ context, ast, transformer, cssVarsMapping, path }) {
-        ast.walkRules((rule) => appendMixins(context, transformer, rule, cssVarsMapping, path));
+    transformLastPass({ context, ast, transformer, path }) {
+        ast.walkRules((rule) => appendMixins(context, transformer, rule, path));
     },
@@ -187,3 +187,3 @@ });
                     args: [],
-                    func: resolvedSymbols.js[name].symbol,
+                    func: resolvedSymbols.js[name].symbol as (...args: any[]) => any,
                 };
@@ -217,3 +217,2 @@ for (const arg of Object.values(data.options)) {
     rule: postcss.Rule,
-    cssPropertyMapping: Record<string, string>,
     path: string[] = []
@@ -227,3 +226,3 @@ ) {
         if (mixin.valid) {
-            appendMixin(context, { transformer, mixDef: mixin, rule, path, cssPropertyMapping });
+            appendMixin(context, { transformer, mixDef: mixin, rule, path });
         }
@@ -366,3 +365,2 @@ }
     path: string[];
-    cssPropertyMapping: Record<string, string>;
 }
@@ -382,6 +380,6 @@
     } else if (resolvedType === `js`) {
-        const resolvedMixin = resolvedSymbols.js[symbolName];
-        if (typeof resolvedMixin.symbol === 'function') {
+        const jsValue = resolvedSymbols.js[symbolName].symbol;
+        if (typeof jsValue === 'function') {
             try {
-                handleJSMixin(context, config, resolvedMixin.symbol);
+                handleJSMixin(context, config, jsValue as (...args: any[]) => any);
             } catch (e) {
@@ -484,4 +482,3 @@ context.diagnostics.report(diagnostics.FAILED_TO_APPLY_MIXIN(String(e)), {
                 stVarOverride,
-                config.path,
-                config.cssPropertyMapping
+                config.path
             );
@@ -488,0 +485,0 @@ collectOptionalArgs(

src/features/st-scope.ts

@@ -38,3 +38,3 @@ import { createFeature } from './feature';
     prepareAST({ node, toRemove }) {
-        // called without experimentalSelectorInference
+        // called with experimentalSelectorInference=false
         // flatten @st-scope before transformation
@@ -41,0 +41,0 @@ if (isStScopeStatement(node)) {

src/features/st-var.ts

@@ -274,3 +274,2 @@ import { createFeature, FeatureContext, FeatureTransformContext } from './feature';
     rule.walkDecls((decl) => {
-        collectUrls(context.meta, decl); // ToDo: remove
         warnOnDeprecatedCustomValues(context, decl);
@@ -323,16 +322,2 @@
 
-// ToDo: remove after moving :vars removal to end of analyze.
-// url collection should pickup vars value during general decls walk
-function collectUrls(meta: StylableMeta, decl: postcss.Declaration) {
-    processDeclarationFunctions(
-        decl,
-        (node) => {
-            if (node.type === 'url') {
-                meta.urls.push(node.url);
-            }
-        },
-        false
-    );
-}
-
 function evaluateValueCall(
@@ -405,12 +390,7 @@ context: FeatureTransformContext,
                 const deepResolve = resolvedSymbols.js[varName];
-                const importedType = typeof deepResolve.symbol;
-                if (importedType === 'string') {
+                const jsValue = deepResolve.symbol;
+                if (typeof jsValue === 'string') {
                     parsedNode.resolvedValue = context.evaluator.valueHook
-                        ? context.evaluator.valueHook(
-                              deepResolve.symbol,
-                              varName,
-                              false,
-                              passedThrough
-                          )
-                        : deepResolve.symbol;
+                        ? context.evaluator.valueHook(jsValue, varName, false, passedThrough)
+                        : jsValue;
                 } else if (node) {
@@ -420,3 +400,3 @@ // unsupported Javascript value
                     context.diagnostics.report(
-                        diagnostics.CANNOT_USE_JS_AS_VALUE(importedType, varName),
+                        diagnostics.CANNOT_USE_JS_AS_VALUE(typeof jsValue, varName),
                         {
@@ -487,3 +467,3 @@ node,
                     const resolved = context.resolver.deepResolve(symbol);
-                    if (resolved?._kind === 'css' && resolved.symbol._kind === 'var') {
+                    if (resolved?._kind === 'css' && resolved.symbol?._kind === 'var') {
                         varsToCheck.push({ meta: resolved.meta, name: resolved.symbol.name });
@@ -490,0 +470,0 @@ }

src/functions.ts

@@ -26,3 +26,2 @@ import { dirname, relative } from 'path';
     stVarOverride?: Record<string, string> | null;
-    cssVarsMapping?: Record<string, string>;
     args?: string[];
@@ -67,3 +66,2 @@ rootArgument?: string;
             context.passedThrough,
-            data.cssVarsMapping,
             data.args,
@@ -99,4 +97,3 @@ data.rootArgument,
     variableOverride?: Record<string, string>,
-    path?: string[],
-    cssVarsMapping?: Record<string, string>
+    path?: string[]
 ) {
@@ -114,3 +111,2 @@ const resolvedArgs = {} as Record<string, string>;
             path,
-            cssVarsMapping,
             undefined
@@ -132,3 +128,2 @@ );
     passedThrough: string[] = [],
-    cssVarsMapping: Record<string, string> = {},
     args: string[] = [],
@@ -163,3 +158,2 @@ rootArgument?: string,
                         stVarOverride: variableOverride,
-                        cssVarsMapping,
                         args,
@@ -195,3 +189,6 @@ rootArgument,
                 try {
-                    parsedNode.resolvedValue = formatter.symbol.apply(null, formatterArgs);
+                    // ToDo: check if function instead of calling on a non function
+                    parsedNode.resolvedValue = (formatter.symbol as (...args: any[]) => any)(
+                        ...formatterArgs
+                    );
                     if (evaluator.valueHook && typeof parsedNode.resolvedValue === 'string') {
@@ -235,3 +232,2 @@ parsedNode.resolvedValue = evaluator.valueHook(
                         stVarOverride: variableOverride,
-                        cssVarsMapping,
                         args,
@@ -320,3 +316,2 @@ rootArgument,
     passedThrough: string[] = [],
-    cssVarsMapping?: Record<string, string>,
     args: string[] = [],
@@ -338,5 +333,4 @@ getResolvedSymbols: (meta: StylableMeta) => MetaResolvedSymbols = createSymbolResolverWithCache(
         passedThrough,
-        cssVarsMapping,
         args
     ).outputValue;
 }

src/helpers/custom-state.ts

@@ -7,3 +7,3 @@ import type * as postcss from 'postcss';
 import cssesc from 'cssesc';
-import type { PseudoClass, SelectorNode } from '@tokey/css-selector-parser';
+import type { PseudoClass, SelectorList, SelectorNode } from '@tokey/css-selector-parser';
 import { createDiagnosticReporter, Diagnostics } from '../diagnostics';
@@ -342,3 +342,17 @@ import {
         // simple template with no params
-        mappedStates[stateName] = template.trim().replace(/\\["']/g, '"');
+        const selectorStr = template.trim().replace(/\\["']/g, '"');
+        const selectorAst = parseSelectorWithCache(selectorStr, { clone: true });
+        if (
+            !validateTemplateSelector({
+                stateName,
+                selectorStr,
+                selectorAst,
+                cssNode: decl,
+                diagnostics,
+            })
+        ) {
+            return;
+        } else {
+            mappedStates[stateName] = selectorStr;
+        }
     } else if (argsFullValue.length === 2) {
@@ -1080,26 +1094,53 @@ // single parameter template
 }) {
-    const targetSelectorStr = template.replace(/\$0/g, param);
-    const selectorAst = parseSelectorWithCache(targetSelectorStr, { clone: true });
+    const selectorStr = template.replace(/\$0/g, param);
+    const selectorAst = parseSelectorWithCache(selectorStr, { clone: true });
+    if (
+        !validateTemplateSelector({
+            stateName,
+            selectorStr,
+            selectorAst,
+            cssNode: selectorNode,
+            diagnostics,
+        })
+    ) {
+        return;
+    }
+    convertToSelector(node).nodes = selectorAst[0].nodes;
+}
+
+function validateTemplateSelector({
+    stateName,
+    selectorStr,
+    selectorAst,
+    cssNode,
+    diagnostics,
+}: {
+    stateName: string;
+    selectorStr: string;
+    selectorAst: SelectorList;
+    cssNode?: postcss.Node;
+    diagnostics: Diagnostics;
+}): boolean {
     if (selectorAst.length > 1) {
-        if (selectorNode) {
+        if (cssNode) {
             diagnostics.report(
-                stateDiagnostics.UNSUPPORTED_MULTI_SELECTOR(stateName, targetSelectorStr),
+                stateDiagnostics.UNSUPPORTED_MULTI_SELECTOR(stateName, selectorStr),
                 {
-                    node: selectorNode,
+                    node: cssNode,
                 }
             );
         }
-        return;
+        return false;
     } else {
         const firstSelector = selectorAst[0].nodes.find(({ type }) => type !== 'comment');
         if (firstSelector?.type === 'type' || firstSelector?.type === 'universal') {
-            if (selectorNode) {
+            if (cssNode) {
                 diagnostics.report(
-                    stateDiagnostics.UNSUPPORTED_INITIAL_SELECTOR(stateName, targetSelectorStr),
+                    stateDiagnostics.UNSUPPORTED_INITIAL_SELECTOR(stateName, selectorStr),
                     {
-                        node: selectorNode,
+                        node: cssNode,
                     }
                 );
             }
-            return;
+            return false;
         }
@@ -1114,12 +1155,9 @@ let unexpectedSelector: undefined | SelectorNode = undefined;
         if (unexpectedSelector) {
-            if (selectorNode) {
+            if (cssNode) {
                 switch (unexpectedSelector.type) {
                     case 'combinator':
                         diagnostics.report(
-                            stateDiagnostics.UNSUPPORTED_COMPLEX_SELECTOR(
-                                stateName,
-                                targetSelectorStr
-                            ),
+                            stateDiagnostics.UNSUPPORTED_COMPLEX_SELECTOR(stateName, selectorStr),
                             {
-                                node: selectorNode,
+                                node: cssNode,
                             }
@@ -1130,5 +1168,5 @@ );
                         diagnostics.report(
-                            stateDiagnostics.INVALID_SELECTOR(stateName, targetSelectorStr),
+                            stateDiagnostics.INVALID_SELECTOR(stateName, selectorStr),
                             {
-                                node: selectorNode,
+                                node: cssNode,
                             }
@@ -1139,6 +1177,6 @@ );
             }
-            return;
+            return false;
         }
     }
-    convertToSelector(node).nodes = selectorAst[0].nodes;
+    return true;
 }
@@ -1145,0 +1183,0 @@

src/helpers/import.ts

@@ -601,3 +601,4 @@ import path from 'path';
     onImport: undefined | ((e: ImportEvent) => void) = undefined,
-    depth = 0
+    depth = 1,
+    origin = meta.source
 ) {
@@ -607,2 +608,5 @@ for (const { context, request } of meta.getImportStatements()) {
             const resolved = resolver.resolvePath(context, request);
+            if (resolved === origin) {
+                continue;
+            }
             onImport?.({ context, request, resolved, depth });
@@ -618,3 +622,4 @@
                         onImport,
-                        depth + 1
+                        depth + 1,
+                        origin
                     );
@@ -621,0 +626,0 @@ }

src/index-internal.ts

@@ -50,3 +50,8 @@ export { safeParse } from './parser';
 } from './report-diagnostic';
-export { StylableResolver, StylableResolverCache } from './stylable-resolver';
+export {
+    StylableResolver,
+    StylableResolverCache,
+    isValidCSSResolve,
+    CSSResolveMaybe,
+} from './stylable-resolver';
 export { CacheItem, FileProcessor, cachedProcessFile, processFn } from './cached-process-file';
@@ -53,0 +58,0 @@ export { createStylableFileProcessor } from './create-stylable-processor';

src/module-resolver.ts

@@ -1,37 +0,20 @@
-// importing the factory directly, as we feed it our own fs, and don't want graceful-fs to be implicitly imported
-// this allows @stylable/core to be bundled for browser usage without special custom configuration
-import ResolverFactory from 'enhanced-resolve/lib/ResolverFactory.js';
-
+import {
+    IRequestResolverOptions,
+    IResolutionFileSystem,
+    createRequestResolver,
+} from '@file-services/resolve';
 import type { ModuleResolver } from './types';
-import type { MinimalFS } from './cached-process-file';
 
-function bundleSafeRequireExtensions(): string[] {
-    let extensions: string[];
-    try {
-        // we use eval here to avoid bundling warnings about require.extensions we always has fallback for browsers
-        extensions = Object.keys(require('module')._extensions);
-    } catch (e) {
-        extensions = [];
-    }
-    return extensions.length ? extensions : ['.js', '.json'];
-}
+export type { IRequestResolverOptions, IResolutionFileSystem };
 
-const resolverContext = {};
-
-export function createDefaultResolver(fileSystem: MinimalFS, resolveOptions: any): ModuleResolver {
-    const extensions =
-        resolveOptions.extensions && resolveOptions.extensions.length
-            ? resolveOptions.extensions
-            : bundleSafeRequireExtensions();
-    const eResolver = ResolverFactory.createResolver({
-        ...resolveOptions,
-        extensions,
-        useSyncFileSystemCalls: true,
-        cache: false,
-        fileSystem,
+export function createDefaultResolver(options: IRequestResolverOptions): ModuleResolver {
+    const resolver = createRequestResolver({
+        extensions: ['.js', '.mjs', '.cjs', '.ts', '.mts', '.cts', '.json'],
+        ...options,
     });
 
     return (directoryPath, request): string => {
-        const res = eResolver.resolveSync(resolverContext, directoryPath, request);
-        if (res === false) {
+        const { resolvedFile, visitedPaths } = resolver(directoryPath, request);
+
+        if (resolvedFile === false) {
             throw new Error(
@@ -41,4 +24,11 @@ `Stylable does not support browser field 'false' values. ${request} resolved to 'false' from ${directoryPath}`
         }
-        return res;
+        if (typeof resolvedFile !== 'string') {
+            throw new Error(
+                `Stylable could not resolve ${JSON.stringify(request)} from ${JSON.stringify(
+                    directoryPath
+                )}` + (visitedPaths.size ? `\nVisited paths:\n${[...visitedPaths].join('\n')}` : '')
+            );
+        }
+        return resolvedFile;
     };
 }

src/stylable-js-module-source.ts

@@ -127,9 +127,3 @@ import type { StylableExports } from './stylable-transformer';
     const importInjectCSS = injectOptions?.css ? `, injectCSS` : '';
-    const request = JSON.stringify(
-        runtimeRequest ??
-            // TODO: we use direct requests here since we don't know how this will be resolved
-            (moduleType === 'esm'
-                ? '@stylable/runtime/esm/runtime.js'
-                : '@stylable/runtime/dist/runtime.js')
-    );
+    const request = JSON.stringify(runtimeRequest ?? '@stylable/runtime');
     return moduleType === 'esm'
@@ -136,0 +130,0 @@ ? `import { classesRuntime, statesRuntime${importInjectCSS} } from ${request};`

src/stylable-processor.ts

@@ -54,11 +54,3 @@ import type * as postcss from 'postcss';
 
-        const isStylable = this.meta.type === 'stylable';
         root.walkDecls((decl) => {
-            const parent = decl.parent as postcss.ChildNode;
-            if (parent.type === 'rule' && parent.selector === ':vars' && isStylable) {
-                // ToDo: remove once
-                // - custom property definition is allowed in var value
-                // - url collection is removed from st-var
-                return;
-            }
             CSSClass.hooks.analyzeDeclaration({ context: this, decl });
@@ -65,0 +57,0 @@ CSSCustomProperty.hooks.analyzeDeclaration({ context: this, decl });

src/stylable-resolver.ts

@@ -12,3 +12,2 @@ import type { FileProcessor } from './cached-process-file';
     STSymbol,
-    STCustomSelector,
     VarSymbol,
@@ -24,3 +23,2 @@ CSSVarSymbol,
 } from './features';
-import type { StylableTransformer } from './stylable-transformer';
 import { findRule } from './helpers/rule';
@@ -70,2 +68,9 @@ import type { ModuleResolver } from './types';
 
+export interface CSSResolveMaybe<
+    T extends StylableSymbol | STStructure.PartSymbol = StylableSymbol
+> {
+    _kind: 'css';
+    symbol: T | undefined;
+    meta: StylableMeta;
+}
 export interface CSSResolve<T extends StylableSymbol | STStructure.PartSymbol = StylableSymbol> {
@@ -76,2 +81,5 @@ _kind: 'css';
 }
+export function isValidCSSResolve(resolved: CSSResolveMaybe): resolved is CSSResolve {
+    return resolved.symbol !== undefined;
+}
 export type CSSResolvePath = Array<CSSResolve<ClassSymbol | ElementSymbol>>;
@@ -81,3 +89,3 @@
     _kind: 'js';
-    symbol: any;
+    symbol: unknown;
     meta: null;
@@ -101,3 +109,3 @@ }
 export type ReportError = (
-    res: CSSResolve | JSResolve | null,
+    res: CSSResolveMaybe | JSResolve | null,
     extend: ImportSymbol | ClassSymbol | ElementSymbol,
@@ -203,3 +211,3 @@ extendPath: Array<CSSResolve<ClassSymbol | ElementSymbol>>,
         subtype: 'mappedSymbols' | 'mappedKeyframes' | STSymbol.Namespaces = 'mappedSymbols'
-    ): CSSResolve | JSResolve | null {
+    ): CSSResolveMaybe | JSResolve | null {
         const res = this.getModule(imported);
@@ -238,3 +246,3 @@ if (res.value === null) {
     }
-    public resolve(maybeImport: StylableSymbol | undefined): CSSResolve | JSResolve | null {
+    public resolve(maybeImport: StylableSymbol | undefined): CSSResolveMaybe | JSResolve | null {
         if (!maybeImport || maybeImport._kind !== 'import') {
@@ -274,3 +282,3 @@ if (
         path: StylableSymbol[] = []
-    ): CSSResolve | JSResolve | null {
+    ): CSSResolveMaybe | JSResolve | null {
         let resolved = this.resolve(maybeImport);
@@ -348,3 +356,3 @@ while (
         for (const [name, symbol] of Object.entries(meta.getAllSymbols())) {
-            let deepResolved: CSSResolve | JSResolve | null;
+            let deepResolved: CSSResolveMaybe | JSResolve | null;
             if (symbol._kind === `import` || (symbol._kind === `cssVar` && symbol.alias)) {
@@ -381,10 +389,15 @@ deepResolved = this.deepResolve(symbol);
             }
-            switch (deepResolved.symbol._kind) {
+            // deepResolved symbol is resolved by this point
+            switch (deepResolved.symbol!._kind) {
                 case `class`:
                     resolvedSymbols.class[name] = this.resolveExtends(
                         meta,
-                        deepResolved.symbol,
+                        deepResolved.symbol!,
                         false,
-                        undefined,
-                        validateClassResolveExtends(meta, name, diagnostics, deepResolved)
+                        validateClassResolveExtends(
+                            meta,
+                            name,
+                            diagnostics,
+                            deepResolved as CSSResolve<ClassSymbol>
+                        )
                     );
@@ -402,3 +415,3 @@ break;
             }
-            resolvedSymbols.mainNamespace[name] = deepResolved.symbol._kind;
+            resolvedSymbols.mainNamespace[name] = deepResolved.symbol!._kind;
         }
@@ -444,3 +457,2 @@ // resolve keyframes
         isElement = false,
-        transformer?: StylableTransformer,
         reportError?: ReportError
@@ -456,19 +468,2 @@ ): CSSResolvePath {
 
-        const customSelector = isElement
-            ? null
-            : STCustomSelector.getCustomSelectorExpended(meta, name);
-
-        if (!symbol && !customSelector) {
-            return [];
-        }
-
-        if (customSelector && transformer) {
-            const parsed = transformer.resolveSelectorElements(meta, customSelector);
-            if (parsed.length === 1) {
-                return parsed[0][parsed[0].length - 1].resolved;
-            } else {
-                return [];
-            }
-        }
-
         if (!symbol) {
@@ -535,3 +530,3 @@ return [];
     diagnostics: Diagnostics,
-    deepResolved: CSSResolve<StylableSymbol> | JSResolve | null
+    deepResolved: CSSResolve<ClassSymbol>
 ): ReportError | undefined {
@@ -559,3 +554,3 @@ return (res, extend) => {
         } else {
-            if (deepResolved?.symbol.alias) {
+            if (deepResolved.symbol.alias) {
                 meta.sourceAst.walkRules(new RegExp('\\.' + name), (rule) => {
@@ -562,0 +557,0 @@ diagnostics.report(CSSClass.diagnostics.UNKNOWN_IMPORT_ALIAS(name), {

src/stylable-transformer.ts

@@ -317,3 +317,2 @@ import isVendorPrefixed from 'is-vendor-prefixed';
                 node: decl,
-                cssVarsMapping,
             }).outputValue;
@@ -358,3 +357,2 @@ };
             transformer: this,
-            cssVarsMapping,
             path,
@@ -361,0 +359,0 @@ };

src/stylable.ts

@@ -16,22 +16,20 @@ import type { CacheItem, FileProcessor, MinimalFS } from './cached-process-file';
 import type { IStylableOptimizer, ModuleResolver } from './types';
-import { createDefaultResolver } from './module-resolver';
+import {
+    createDefaultResolver,
+    IRequestResolverOptions,
+    IResolutionFileSystem,
+} from './module-resolver';
 import { STImport, STScope, STVar, STMixin, CSSClass, CSSCustomProperty } from './features';
 import { Dependency, visitMetaCSSDependencies } from './visit-meta-css-dependencies';
 import * as postcss from 'postcss';
+import { warnOnce } from './helpers/deprecation';
 
-export interface StylableConfig {
+export interface StylableConfigBase {
     projectRoot: string;
-    fileSystem: MinimalFS;
     requireModule?: (path: string) => any;
     onProcess?: (meta: StylableMeta, path: string) => StylableMeta;
     hooks?: TransformHooks;
-    resolveOptions?: {
-        alias?: any;
-        symlinks?: boolean;
-        [key: string]: any;
-    };
     optimizer?: IStylableOptimizer;
     mode?: 'production' | 'development';
     resolveNamespace?: typeof processNamespace;
-    resolveModule?: ModuleResolver;
     cssParser?: CssParser;
@@ -43,2 +41,14 @@ resolverCache?: StylableResolverCache;
 
+export type StylableConfig = StylableConfigBase &
+    (
+        | {
+              fileSystem: MinimalFS;
+              resolveModule: ModuleResolver;
+          }
+        | {
+              fileSystem: IResolutionFileSystem;
+              resolveModule?: ModuleResolver | Omit<IRequestResolverOptions, 'fs'>;
+          }
+    );
+
 // This defines and validates known configs for the defaultConfig in 'stylable.config.js
@@ -79,3 +89,3 @@ const globalDefaultSupportedConfigs = new Set([
     public projectRoot: string;
-    protected fileSystem: MinimalFS;
+    protected fileSystem: IResolutionFileSystem | MinimalFS;
     protected requireModule: (path: string) => any;
@@ -85,3 +95,2 @@ protected onProcess?: (meta: StylableMeta, path: string) => StylableMeta;
     protected hooks: TransformHooks;
-    protected resolveOptions: any;
     public optimizer?: IStylableOptimizer;
@@ -97,3 +106,9 @@ protected mode: 'production' | 'development';
     constructor(config: StylableConfig) {
-        this.experimentalSelectorInference = !!config.experimentalSelectorInference;
+        this.experimentalSelectorInference =
+            config.experimentalSelectorInference === false ? false : true;
+        if (this.experimentalSelectorInference === false) {
+            warnOnce(
+                'Stylable is running in a deprecated mode that will be removed in a future 6.x.x release. Please set experimentalSelectorInference=true to avoid this warning.'
+            );
+        }
         this.projectRoot = config.projectRoot;
@@ -104,14 +119,14 @@ this.fileSystem = config.fileSystem;
             (() => {
-                throw new Error('Javascript files are not supported without requireModule options');
+                throw new Error(
+                    'Javascript files are not supported without Stylable `requireModule` option'
+                );
             });
         this.onProcess = config.onProcess;
         this.hooks = config.hooks || {};
-        this.resolveOptions = config.resolveOptions || {};
         this.optimizer = config.optimizer;
         this.mode = config.mode || `production`;
         this.resolveNamespace = config.resolveNamespace;
-        this.moduleResolver =
-            config.resolveModule || createDefaultResolver(this.fileSystem, this.resolveOptions);
+        this.moduleResolver = this.initModuleResolver(config);
         this.cssParser = config.cssParser || cssParse;
-        this.resolverCache = config.resolverCache; // ToDo: v5 default to `new Map()`
+        this.resolverCache = config.resolverCache || new Map();
         this.fileProcessorCache = config.fileProcessorCache;
@@ -128,2 +143,12 @@ this.fileProcessor = createStylableFileProcessor({
     }
+    private initModuleResolver(config: StylableConfig): ModuleResolver {
+        return typeof config.resolveModule === 'function'
+            ? config.resolveModule
+            : createDefaultResolver({
+                  fs: this
+                      .fileSystem as IResolutionFileSystem /* we force to provide resolveModule when using MinimalFS */,
+                  ...config.resolveModule,
+              });
+    }
+
     public getDependencies(meta: StylableMeta) {
@@ -130,0 +155,0 @@ const dependencies: Dependency[] = [];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5302287

increased by1.63%

Dependency count

14

decreased by-6.67%

Lines of code

28824

increased by0.58%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Number of package files

322

decreased by-3.01%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@file-services/resolve@^8.3.2

• + Added@file-services/resolve@8.3.3(transitive)

• + Addedpostcss-safe-parser@7.0.1(transitive)

• + Addedtype-fest@4.32.0(transitive)

• - Removedbalanced-match@^2.0.0

• - Removedenhanced-resolve@^5.15.0

• - Removedbalanced-match@2.0.0(transitive)

• - Removedenhanced-resolve@5.18.0(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removedpostcss-safe-parser@6.0.0(transitive)

• - Removedtapable@2.2.1(transitive)

• Updatedpostcss-safe-parser@^7.0.0