chore: deprecation info for unknown custom-properties in build-var (#…

…2922)
wix · Oct 26, 2023 · 3841888 · 3841888
1 parent 0c99c06
commit 3841888
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/packages/core/src/features/st-var.ts b/packages/core/src/features/st-var.ts
@@ -96,6 +96,13 @@ export const diagnostics = {
         'error',
         (name: string) => `unknown var "${name}"`
     ),
+    UNKNOWN_CUSTOM_PROP: createDiagnosticReporter('07011', 'info', (names: string[]) => {
+        const msgStart =
+            names.length > 1
+                ? `Unknown custom-properties "${names.join(', ')}" are`
+                : `Unknown custom-property "${names[0]}" is`;
+        return `${msgStart} currently not namespaced. However, in Stylable 6, it will be namespaced to the stylesheet. To maintain the current behavior, either wrap the value in quotes or establish a global custom property. If you intend for the custom property to be namespaced based on a different stylesheet context where the variable may be utilized, please reconsider your approach, as this will not be supported in future versions.`;
+    }),
 };
 
 // HOOKS
@@ -125,6 +132,33 @@ export const hooks = createFeature<{
         }
         return;
     },
+    transformInit({ context }) {
+        const { cssVar } = context.getResolvedSymbols(context.meta);
+        for (const [_localName, localSymbol] of Object.entries(
+            STSymbol.getAllByType(context.meta, 'var')
+        )) {
+            const value = postcssValueParser(stripQuotation(localSymbol.text));
+            const unknownUsedProps: string[] = [];
+            value.walk((node) => {
+                if (node.type === 'function' && node.value.toLowerCase() === 'var') {
+                    for (const argNode of node.nodes) {
+                        if (
+                            argNode.type === 'word' &&
+                            argNode.value.startsWith('--') &&
+                            !cssVar[argNode.value]
+                        ) {
+                            unknownUsedProps.push(argNode.value);
+                        }
+                    }
+                }
+            });
+            if (unknownUsedProps.length) {
+                context.diagnostics.report(diagnostics.UNKNOWN_CUSTOM_PROP(unknownUsedProps), {
+                    node: localSymbol.node,
+                });
+            }
+        }
+    },
     prepareAST({ node, toRemove }) {
         if (node.type === 'rule' && node.selector === ':vars') {
             toRemove.push(node);

diff --git a/packages/core/src/stylable-transformer.ts b/packages/core/src/stylable-transformer.ts
@@ -175,6 +175,7 @@ export class StylableTransformer {
         };
         STImport.hooks.transformInit({ context });
         STGlobal.hooks.transformInit({ context });
+        STVar.hooks.transformInit({ context });
         if (!this.experimentalSelectorInference) {
             meta.transformedScopes = validateScopes(this, meta);
         }

diff --git a/packages/core/test/features/css-custom-property.spec.ts b/packages/core/test/features/css-custom-property.spec.ts
@@ -1,4 +1,4 @@
-import { STImport, CSSCustomProperty, STSymbol } from '@stylable/core/dist/features';
+import { STImport, STVar, CSSCustomProperty, STSymbol } from '@stylable/core/dist/features';
 import { generateScopedCSSVar } from '@stylable/core/dist/helpers/css-custom-property';
 import {
     testStylableCore,
@@ -10,6 +10,7 @@ import { expect } from 'chai';
 
 const stImportDiagnostics = diagnosticBankReportToStrings(STImport.diagnostics);
 const stSymbolDiagnostics = diagnosticBankReportToStrings(STSymbol.diagnostics);
+const stVarDiagnostics = diagnosticBankReportToStrings(STVar.diagnostics);
 const customPropertyDiagnostics = diagnosticBankReportToStrings(CSSCustomProperty.diagnostics);
 
 describe(`features/css-custom-property`, () => {
@@ -748,7 +749,7 @@ describe(`features/css-custom-property`, () => {
         });
         it(`should NOT define property as var value (change in v5)`, () => {
             // ToDo: in the future property should be able to be defined in var value
-            const { sheets } = testStylableCore(`
+            testStylableCore(`
                 :vars {
                     myVar: var(--color);
                 }
@@ -758,8 +759,50 @@ describe(`features/css-custom-property`, () => {
                     prop: value(myVar);
                 }
             `);
+        });
+        it(`should report deprecation info on unknown custom properties`, () => {
+            const { sheets } = testStylableCore({
+                './other.st.css': `
+                    @property --knownA;
+                `,
+                './invalid.st.css': `
+                    :vars {
+                        /* @transform-info(single) ${stVarDiagnostics.UNKNOWN_CUSTOM_PROP([
+                            '--unknown1',
+                        ])} */
+                        single: var(--unknown1);
+
+                        /* @transform-info(between) ${stVarDiagnostics.UNKNOWN_CUSTOM_PROP([
+                            '--unknown2',
+                        ])} */
+                        betweenValue: before var(--unknown2) after;
+
+                        /* @transform-info(multiple) ${stVarDiagnostics.UNKNOWN_CUSTOM_PROP([
+                            '--unknownY',
+                            '--unknownX',
+                            '--unknownZ',
+                        ])} */
+                        multiple: var(--unknownY) var(--unknownX, var(--unknownZ));
+                    }
+                `,
+                './valid.st.css': `
+                    @st-import [--knownA] from './other.st.css';
+                    @property --knownB;
+                    .root {
+                        --knownC: green;
+                    }
 
-            const { meta } = sheets['/entry.st.css'];
+                    :vars {
+                        single: var(--knownA);
+
+                        betweenValue: before var(--knownB) after;
+
+                        multiple: var(--knownC) var(--knownB, var(--knownA));
+                    }
+                `,
+            });
+
+            const { meta } = sheets['/valid.st.css'];
 
             shouldReportNoDiagnostics(meta);
         });