fix(core): st-var feature overall (#2284)

## fix - warn on missing arguments to `value()` function - remove outer quotes from Stylable vars JS exports - unify error when using imported class and local class - handle unknown symbol using `@st-import` - previously caused a crush ## deprecate - `meta.vars` - use `meta.getAllStVars()` or `meta.getStVar(name)` instead
wix · Feb 8, 2022 · a34a623 · a34a623
1 parent 46ccd26
commit a34a623
Show file tree

Hide file tree

Showing 37 changed files with 1,911 additions and 2,311 deletions.
diff --git a/packages/cli/src/base-generator.ts b/packages/cli/src/base-generator.ts
@@ -104,10 +104,13 @@ export function reExportsAllSymbols(filePath: string, generator: IndexGenerator)
             acc[className] = `${rootExport}__${className}`;
             return acc;
         }, {});
-    const stVars = meta.vars.reduce<Record<string, string>>((acc, { name }) => {
-        acc[name] = `${rootExport}__${name}`;
-        return acc;
-    }, {});
+    const stVars = Object.values(meta.getAllStVars()).reduce<Record<string, string>>(
+        (acc, { name }) => {
+            acc[name] = `${rootExport}__${name}`;
+            return acc;
+        },
+        {}
+    );
     const vars = Object.keys(STSymbol.getAllByType(meta, `cssVar`)).reduce<Record<string, string>>(
         (acc, varName) => {
             acc[varName] = `--${rootExport}__${varName.slice(2)}`;

diff --git a/packages/cli/test/build.spec.ts b/packages/cli/test/build.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from 'chai';
-import { Stylable, functionWarnings, processorWarnings, murmurhash3_32_gc } from '@stylable/core';
+import { Stylable, processorWarnings, murmurhash3_32_gc } from '@stylable/core';
 import { build } from '@stylable/cli';
 import { createMemoryFs } from '@file-services/memory';
 import { DiagnosticsManager } from '@stylable/cli/dist/diagnostics-manager';
-import { STImport } from '@stylable/core/dist/features';
+import { STImport, STVar } from '@stylable/core/dist/features';
 
 const log = () => {
     /**/
@@ -187,7 +187,7 @@ describe('build stand alone', () => {
         expect(messages[1].message).to.contain(
             STImport.diagnostics.UNKNOWN_IMPORTED_FILE('./missing-file.st.css')
         );
-        expect(messages[2].message).to.contain(functionWarnings.UNKNOWN_VAR('missingVar'));
+        expect(messages[2].message).to.contain(STVar.diagnostics.UNKNOWN_VAR('missingVar'));
     });
 
     it('should optimize css (remove empty nodes, remove stylable-directives, remove comments)', async () => {

diff --git a/packages/cli/test/cli.spec.ts b/packages/cli/test/cli.spec.ts
@@ -4,8 +4,7 @@ import { createTempDirectory, ITempDirectory } from 'create-temp-directory';
 import { evalStylableModule } from '@stylable/module-utils/dist/test/test-kit';
 import { resolveNamespace } from '@stylable/node';
 import { loadDirSync, populateDirectorySync, runCliSync } from '@stylable/e2e-test-kit';
-import { processorWarnings } from '@stylable/core';
-import { STImport } from '@stylable/core/dist/features';
+import { STImport, STVar } from '@stylable/core/dist/features';
 
 describe('Stylable Cli', function () {
     this.timeout(25000);
@@ -368,7 +367,7 @@ describe('Stylable Cli', function () {
             expect(stdout, 'stdout').to.match(/style\.st\.css/);
             expect(stdout, 'stdout').to.match(
                 new RegExp(
-                    `\\[info\\]: ${processorWarnings.DEPRECATED_ST_FUNCTION_NAME(
+                    `\\[info\\]: ${STVar.diagnostics.DEPRECATED_ST_FUNCTION_NAME(
                         'stArray',
                         'st-array'
                     )}`

diff --git a/packages/cli/test/config-projects.spec.ts b/packages/cli/test/config-projects.spec.ts
@@ -7,7 +7,7 @@ import {
     populateDirectorySync,
     runCliSync,
 } from '@stylable/e2e-test-kit';
-import { functionWarnings } from '@stylable/core';
+import { STVar } from '@stylable/core/dist/features';
 
 describe('Stylable CLI config multiple projects', function () {
     this.timeout(25000);
@@ -471,12 +471,12 @@ describe('Stylable CLI config multiple projects', function () {
 
             const firstError = stdout.indexOf('error 3');
             const secondError = stdout.indexOf('error 2');
-            const thirdError = stdout.indexOf(functionWarnings.UNKNOWN_VAR('unknown'));
+            const thirdError = stdout.indexOf(STVar.diagnostics.UNKNOWN_VAR('unknown'));
 
             expect(firstError, 'sorted by location')
                 .to.be.lessThan(secondError)
                 .and.lessThan(thirdError);
-            expect(stdout.match(functionWarnings.UNKNOWN_VAR('unknown'))?.length).to.eql(1);
+            expect(stdout.match(STVar.diagnostics.UNKNOWN_VAR('unknown'))?.length).to.eql(1);
         });
 
         it('should throw when the property "projects" is invalid', () => {

diff --git a/packages/core-test-kit/src/inline-expectation.ts b/packages/core-test-kit/src/inline-expectation.ts
@@ -66,14 +66,13 @@ export function testInlineExpects(result: postcss.Root | Context, expectedTestIn
         ? {
               meta: {
                   outputAst: result,
-                  rawAst: null as unknown as StylableMeta['rawAst'],
+                  rawAst: result,
                   diagnostics: null as unknown as StylableMeta['diagnostics'],
                   transformDiagnostics: null as unknown as StylableMeta['transformDiagnostics'],
               },
           }
         : result;
-    // ToDo: support analyze mode
-    const rootAst = context.meta.outputAst!;
+    const rootAst = context.meta.rawAst;
     const expectedTestAmount =
         expectedTestInput ??
         (rootAst.toString().match(new RegExp(`${testScopesRegex()}`, `gm`))?.length || 0);
@@ -82,10 +81,10 @@ export function testInlineExpects(result: postcss.Root | Context, expectedTestIn
     // collect checks
     rootAst.walkComments((comment) => {
         const input = comment.text.split(/@/gm);
-        const testCommentTarget = comment;
-        const testCommentSrc = isDeprecatedInput
+        const testCommentSrc = comment;
+        const testCommentTarget = isDeprecatedInput
             ? comment
-            : getSourceComment(context.meta, comment) || comment;
+            : getTargetComment(context.meta, comment) || comment;
         const nodeTarget = testCommentTarget.next() as AST;
         const nodeSrc = testCommentSrc.next() as AST;
         const isRemoved = isRemovedFromTarget(nodeTarget, nodeSrc);
@@ -423,14 +422,17 @@ function diagnosticTest(
     return result;
 }
 
-function getSourceComment(meta: Context['meta'], { source }: postcss.Comment) {
+function getTargetComment(meta: Context['meta'], { source }: postcss.Comment) {
     let match: postcss.Comment | undefined = undefined;
-    meta.rawAst.walkComments((srcComment) => {
+    if (!meta.outputAst) {
+        return;
+    }
+    meta.outputAst.walkComments((outputComment) => {
         if (
-            srcComment.source?.start?.offset === source?.start?.offset &&
-            srcComment.source?.end?.offset === source?.end?.offset
+            outputComment.source?.start?.offset === source?.start?.offset &&
+            outputComment.source?.end?.offset === source?.end?.offset
         ) {
-            match = srcComment;
+            match = outputComment;
             return false;
         }
         return;

diff --git a/packages/core/src/features/css-custom-property.ts b/packages/core/src/features/css-custom-property.ts
@@ -171,12 +171,12 @@ export const hooks = createFeature<{
     transformDeclaration({ decl, resolved }) {
         decl.prop = resolved[decl.prop] || decl.prop;
     },
-    transformDeclarationValue({ node, resolved }) {
+    transformValue({ node, data: { cssVarsMapping } }) {
         const { value } = node;
         const varWithPrefix = node.nodes[0]?.value || ``;
         if (isCSSVarProp(varWithPrefix)) {
-            if (resolved && resolved[varWithPrefix]) {
-                node.nodes[0].value = resolved[varWithPrefix];
+            if (cssVarsMapping && cssVarsMapping[varWithPrefix]) {
+                node.nodes[0].value = cssVarsMapping[varWithPrefix];
             }
         }
         // handle default values - ToDo: check if required

diff --git a/packages/core/src/features/feature.ts b/packages/core/src/features/feature.ts
@@ -1,6 +1,7 @@
 import type { StylableMeta } from '../stylable-meta';
 import type { ScopeContext, StylableExports } from '../stylable-transformer';
 import type { StylableResolver } from '../stylable-resolver';
+import type { StylableEvaluator, EvalValueData } from '../functions';
 import type * as postcss from 'postcss';
 import type { ImmutableSelectorNode } from '@tokey/css-selector-parser';
 import type { Diagnostics } from '../diagnostics';
@@ -18,6 +19,7 @@ export interface FeatureContext {
 }
 export interface FeatureTransformContext extends FeatureContext {
     resolver: StylableResolver;
+    evaluator: StylableEvaluator;
 }
 
 export interface NodeTypes {
@@ -26,6 +28,8 @@ export interface NodeTypes {
     RESOLVED?: any;
 }
 
+type SelectorWalkReturn = number | undefined | void;
+
 export interface FeatureHooks<T extends NodeTypes = NodeTypes> {
     metaInit: (context: FeatureContext) => void;
     analyzeInit: (context: FeatureContext) => void;
@@ -39,7 +43,7 @@ export interface FeatureHooks<T extends NodeTypes = NodeTypes> {
         node: T['IMMUTABLE_SELECTOR'];
         rule: postcss.Rule;
         walkContext: SelectorNodeContext;
-    }) => void;
+    }) => SelectorWalkReturn;
     analyzeDeclaration: (options: { context: FeatureContext; decl: postcss.Declaration }) => void;
     transformInit: (options: { context: FeatureTransformContext }) => void;
     transformResolve: (options: { context: FeatureTransformContext }) => T['RESOLVED'];
@@ -58,10 +62,10 @@ export interface FeatureHooks<T extends NodeTypes = NodeTypes> {
         decl: postcss.Declaration;
         resolved: T['RESOLVED'];
     }) => void;
-    transformDeclarationValue: (options: {
+    transformValue: (options: {
         context: FeatureTransformContext;
         node: ParsedValue;
-        resolved: T['RESOLVED'];
+        data: EvalValueData;
     }) => void;
     transformJSExports: (options: { exports: StylableExports; resolved: T['RESOLVED'] }) => void;
 }
@@ -96,7 +100,7 @@ const defaultHooks: FeatureHooks<NodeTypes> = {
     transformDeclaration() {
         /**/
     },
-    transformDeclarationValue() {
+    transformValue() {
         /**/
     },
     transformJSExports() {

diff --git a/packages/core/src/features/index.ts b/packages/core/src/features/index.ts
@@ -8,6 +8,9 @@ export type { ImportSymbol, Imported } from './st-import';
 
 export * as STGlobal from './st-global';
 
+export * as STVar from './st-var';
+export type { VarSymbol } from './st-var';
+
 export * as CSSClass from './css-class';
 export type { ClassSymbol } from './css-class';
 
@@ -20,4 +23,4 @@ export type { CSSVarSymbol } from './css-custom-property';
 export * as CSSKeyframes from './css-keyframes';
 export type { KeyframesSymbol } from './css-keyframes';
 
-export type { RefedMixin, StylableDirectives, VarSymbol } from './types';
+export type { RefedMixin, StylableDirectives } from './types';
diff --git a/packages/core/src/features/st-symbol.ts b/packages/core/src/features/st-symbol.ts
@@ -1,6 +1,6 @@
 import { FeatureContext, createFeature } from './feature';
-import type { VarSymbol } from './types';
 import type { ImportSymbol } from './st-import';
+import type { VarSymbol } from './st-var';
 import type { ClassSymbol } from './css-class';
 import type { ElementSymbol } from './css-type';
 import type { CSSVarSymbol } from './css-custom-property';