fix(core): css-custom-property feature overall

packages/cli/src/base-generator.ts

@@ -1,6 +1,6 @@
 import type { IFileSystem } from '@file-services/types';
 import type { Stylable } from '@stylable/core';
-import { CSSKeyframes } from '@stylable/core/dist/features';
+import { STSymbol } from '@stylable/core/dist/features';
 import camelcase from 'lodash.camelcase';
 import upperfirst from 'lodash.upperfirst';
 import { basename, relative } from 'path';
@@ -108,17 +108,19 @@ export function reExportsAllSymbols(filePath: string, generator: IndexGenerator)
         acc[name] = `${rootExport}__${name}`;
         return acc;
     }, {});
-    const vars = Object.keys(meta.cssVars).reduce<Record<string, string>>((acc, varName) => {
-        acc[varName] = `--${rootExport}__${varName.slice(2)}`;
-        return acc;
-    }, {});
-    const keyframes = Object.keys(CSSKeyframes.getAll(meta)).reduce<Record<string, string>>(
-        (acc, keyframe) => {
-            acc[keyframe] = `${rootExport}__${keyframe}`;
+    const vars = Object.keys(STSymbol.getAllByType(meta, `cssVar`)).reduce<Record<string, string>>(
+        (acc, varName) => {
+            acc[varName] = `--${rootExport}__${varName.slice(2)}`;
             return acc;
         },
         {}
     );
+    const keyframes = Object.keys(STSymbol.getAllByType(meta, `keyframes`)).reduce<
+        Record<string, string>
+    >((acc, keyframe) => {
+        acc[keyframe] = `${rootExport}__${keyframe}`;
+        return acc;
+    }, {});
     return {
         root: rootExport,
         classes,

packages/cli/src/code-mods/st-global-custom-property-to-at-property.ts

@@ -1,10 +1,5 @@
-import {
-    CSSVarSymbol,
-    Diagnostics,
-    isCSSVarProp,
-    paramMapping,
-    processorWarnings,
-} from '@stylable/core';
+import { CSSVarSymbol, Diagnostics, isCSSVarProp } from '@stylable/core';
+import { CSSCustomProperty } from '@stylable/core/dist/features';
 import type { AtRule } from 'postcss';
 import type { CodeMod } from './types';
 
@@ -18,7 +13,7 @@ export const stGlobalCustomPropertyToAtProperty: CodeMod = ({ ast, diagnostics,
                 atRule.before(
                     postcss.atRule({
                         name: 'property',
-                        params: `${paramMapping.global}(${property.name})`,
+                        params: `st-global(${property.name})`,
                     })
                 );
             }
@@ -41,9 +36,13 @@ function parseStGlobalCustomProperty(atRule: AtRule, diagnostics: Diagnostics):
         .filter((s) => s !== ',');
 
     if (cssVarsBySpacing.length > cssVarsByComma.length) {
-        diagnostics.warn(atRule, processorWarnings.GLOBAL_CSS_VAR_MISSING_COMMA(atRule.params), {
-            word: atRule.params,
-        });
+        diagnostics.warn(
+            atRule,
+            CSSCustomProperty.diagnostics.GLOBAL_CSS_VAR_MISSING_COMMA(atRule.params),
+            {
+                word: atRule.params,
+            }
+        );
         return cssVars;
     }
 
@@ -55,9 +54,10 @@ function parseStGlobalCustomProperty(atRule: AtRule, diagnostics: Diagnostics):
                 _kind: 'cssVar',
                 name: cssVar,
                 global: true,
+                alias: undefined,
             });
         } else {
-            diagnostics.warn(atRule, processorWarnings.ILLEGAL_GLOBAL_CSS_VAR(cssVar), {
+            diagnostics.warn(atRule, CSSCustomProperty.diagnostics.ILLEGAL_GLOBAL_CSS_VAR(cssVar), {
                 word: cssVar,
             });
         }

packages/cli/test/codemods/st-global-custom-property-to-at-property.spec.ts

@@ -1,4 +1,4 @@
-import { processorWarnings } from '@stylable/core';
+import { CSSCustomProperty } from '@stylable/core/dist/features';
 import { expect } from 'chai';
 import { createTempDirectory, ITempDirectory } from 'create-temp-directory';
 import { populateDirectorySync, loadDirSync, runCliCodeMod } from '@stylable/e2e-test-kit';
@@ -68,7 +68,7 @@ describe('CLI Codemods st-global-custom-property-to-at-property', () => {
 
         expect(stdout).to.match(
             new RegExp(
-                `style.st.css: ${processorWarnings.GLOBAL_CSS_VAR_MISSING_COMMA(
+                `style.st.css: ${CSSCustomProperty.diagnostics.GLOBAL_CSS_VAR_MISSING_COMMA(
                     '--myVar --mySecondVar'
                 )}`
             )

packages/core-test-kit/src/inline-expectation.ts

@@ -377,7 +377,7 @@ function diagnosticTest(
         errors: [],
     };
     const matchResult = expectation.match(
-        /-(?<severity>\w+)(?<label>\([^)]*\))?\s?(?:word\((?<word>[^)]*)\))?\s?(?<message>.*)/
+        /-(?<severity>\w+)(?<label>\([^)]*\))?\s?(?:word\((?<word>[^)]*)\))?\s?(?<message>[\s\S]*)/
     );
     if (!matchResult) {
         result.errors.push(testInlineExpectsErrors.diagnosticsMalformed(type, expectation));

packages/core-test-kit/test/inline-expectations.spec.ts

@@ -651,8 +651,15 @@ describe('inline-expectations', () => {
                     '/style.st.css': {
                         namespace: 'entry',
                         content: `
-                            /* @analyze-warn ${CSSType.diagnostics.UNSCOPED_TYPE_SELECTOR(`div`)} */
+                            /* @analyze-warn(1 line) ${CSSType.diagnostics.UNSCOPED_TYPE_SELECTOR(
+                                `div`
+                            )} */
                             div {}
+
+                            /* @analyze-warn(multi line) word(span) 
+                                ${CSSType.diagnostics.UNSCOPED_TYPE_SELECTOR(`span`)}
+                            */
+                            span {}
                         `,
                     },
                 },
@@ -935,11 +942,17 @@ describe('inline-expectations', () => {
                         @st-import [unknown] from './other.st.css';
 
                         .root {
-                            /* @transform-error ${CSSClass.diagnostics.CANNOT_EXTEND_UNKNOWN_SYMBOL(
+                            /* @transform-error(1 line) ${CSSClass.diagnostics.CANNOT_EXTEND_UNKNOWN_SYMBOL(
                                 `unknown`
                             )}*/
                             -st-extends: unknown;
                         }
+
+                        .part {
+                            /* @transform-error(multi line) 
+                                ${CSSClass.diagnostics.CANNOT_EXTEND_UNKNOWN_SYMBOL(`unknown`)}*/
+                            -st-extends: unknown;
+                        }
                         `,
                     },
                     '/other.st.css': {