refactor(core): css-keyframes feature extraction

packages/cli/src/base-generator.ts

@@ -1,5 +1,6 @@
 import type { IFileSystem } from '@file-services/types';
 import type { Stylable } from '@stylable/core';
+import { CSSKeyframes } from '@stylable/core/dist/features';
 import camelcase from 'lodash.camelcase';
 import upperfirst from 'lodash.upperfirst';
 import { basename, relative } from 'path';
@@ -111,7 +112,7 @@ export function reExportsAllSymbols(filePath: string, generator: Generator): ReE
         acc[varName] = `--${rootExport}__${varName.slice(2)}`;
         return acc;
     }, {});
-    const keyframes = Object.keys(meta.mappedKeyframes).reduce<Record<string, string>>(
+    const keyframes = Object.keys(CSSKeyframes.getAll(meta)).reduce<Record<string, string>>(
         (acc, keyframe) => {
             acc[keyframe] = `${rootExport}__${keyframe}`;
             return acc;

packages/core/src/features/css-keyframes.ts

@@ -0,0 +1,253 @@
+import { createFeature, FeatureContext } from './feature';
+import * as STSymbol from './st-symbol';
+import * as STImport from './st-import';
+import type { Imported } from './st-import';
+import type { StylableMeta } from '../stylable-meta';
+import type { StylableResolver } from '../stylable-resolver';
+import { plugableRecord } from '../helpers/plugable-record';
+import { ignoreDeprecationWarn } from '../helpers/deprecation';
+import { isChildOfAtRule } from '../helpers/rule';
+import { namespace } from '../helpers/namespace';
+import { paramMapping } from '../stylable-value-parsers';
+import { globalValue } from '../utils';
+import type * as postcss from 'postcss';
+import postcssValueParser from 'postcss-value-parser';
+
+export interface KeyframesSymbol {
+    _kind: 'keyframes';
+    alias: string;
+    name: string;
+    import?: Imported;
+    global?: boolean;
+}
+
+export interface KeyframesResolve {
+    meta: StylableMeta;
+    symbol: KeyframesSymbol;
+}
+
+export const reservedKeyFrames = [
+    'none',
+    'inherited',
+    'initial',
+    'unset',
+    /* single-timing-function */
+    'linear',
+    'ease',
+    'ease-in',
+    'ease-in-out',
+    'ease-out',
+    'step-start',
+    'step-end',
+    'start',
+    'end',
+    /* single-animation-iteration-count */
+    'infinite',
+    /* single-animation-direction */
+    'normal',
+    'reverse',
+    'alternate',
+    'alternate-reverse',
+    /* single-animation-fill-mode */
+    'forwards',
+    'backwards',
+    'both',
+    /* single-animation-play-state */
+    'running',
+    'paused',
+];
+
+export const diagnostics = {
+    NO_KEYFRAMES_IN_ST_SCOPE() {
+        return `cannot use "@keyframes" inside of "@st-scope"`;
+    },
+    MISSING_KEYFRAMES_NAME() {
+        return '"@keyframes" missing parameter';
+    },
+    MISSING_KEYFRAMES_NAME_INSIDE_GLOBAL() {
+        return `"@keyframes" missing parameter inside "${paramMapping.global}()"`;
+    },
+    KEYFRAME_NAME_RESERVED(name: string) {
+        return `keyframes "${name}" is reserved`;
+    },
+};
+
+const dataKey = plugableRecord.key<postcss.AtRule[]>('keyframes');
+
+// HOOKS
+
+STImport.ImportTypeHook.set(`keyframes`, (context, localName, importName, importDef) => {
+    addKeyframes({
+        context,
+        name: localName,
+        importName,
+        ast: importDef.rule,
+        importDef,
+    });
+});
+
+export const hooks = createFeature<{
+    RESOLVED: Record<string, KeyframesResolve>;
+}>({
+    metaInit({ meta }) {
+        plugableRecord.set(meta.data, dataKey, []);
+    },
+    analyzeAtRule({ context, atRule }) {
+        let { params: name } = atRule;
+        // fail when nested in `@st-scope`.
+        if (isChildOfAtRule(atRule, `st-scope`)) {
+            // ToDo: fix to allow nesting in `@media`
+            context.diagnostics.error(atRule, diagnostics.NO_KEYFRAMES_IN_ST_SCOPE());
+            return;
+        }
+        // save keyframes declarations
+        const keyframesAsts = plugableRecord.getUnsafe(context.meta.data, dataKey);
+        keyframesAsts.push(atRule);
+        // deprecated
+        ignoreDeprecationWarn(() => context.meta.keyframes.push(atRule));
+        // validate name
+        if (!name) {
+            context.diagnostics.warn(atRule, diagnostics.MISSING_KEYFRAMES_NAME());
+            return;
+        }
+        //
+        let global: boolean | undefined;
+        const globalName = globalValue(name);
+        if (globalName !== undefined) {
+            name = globalName;
+            global = true;
+        }
+        if (name === '') {
+            context.diagnostics.warn(atRule, diagnostics.MISSING_KEYFRAMES_NAME_INSIDE_GLOBAL());
+        }
+        if (reservedKeyFrames.includes(name)) {
+            context.diagnostics.error(atRule, diagnostics.KEYFRAME_NAME_RESERVED(name), {
+                word: name,
+            });
+        }
+        addKeyframes({
+            context,
+            name,
+            importName: name,
+            ast: atRule,
+            global,
+        });
+    },
+    transformResolve({ context }) {
+        const symbols = STSymbol.getAllByType(context.meta, `keyframes`);
+        const resolved: Record<string, KeyframesResolve> = {};
+        for (const [name, symbol] of Object.entries(symbols)) {
+            const res = resolveKeyframes(context.meta, symbol, context.resolver);
+            if (res) {
+                resolved[name] = res;
+            }
+        }
+        return resolved;
+    },
+    transformAtRuleNode({ context, atRule, resolved }) {
+        const globalName = globalValue(atRule.params);
+        const name = globalName ?? atRule.params;
+        const resolve = resolved[name];
+        /* js keyframes mixins won't have resolved keyframes */
+        atRule.params = resolve
+            ? getTransformedName(resolve)
+            : globalName ?? namespace(name, context.meta.namespace);
+    },
+    transformDeclaration({ decl, resolved }) {
+        const parsed = postcssValueParser(decl.value);
+        // ToDo: improve by correctly parse & identify `animation-name`
+        // ToDo: handle symbols from js mixin
+        parsed.nodes.forEach((node) => {
+            const resolve = resolved[node.value];
+            const scoped = resolve && getTransformedName(resolve);
+            if (scoped) {
+                node.value = scoped;
+            }
+        });
+        decl.value = parsed.toString();
+    },
+    transformJSExports({ exports, resolved }) {
+        for (const [name, resolve] of Object.entries(resolved)) {
+            exports.keyframes[name] = getTransformedName(resolve);
+        }
+    },
+});
+
+// API
+
+export function getKeyframesStatements({ data }: StylableMeta): ReadonlyArray<postcss.AtRule> {
+    const state = plugableRecord.getUnsafe(data, dataKey);
+    return state;
+}
+
+export function get(meta: StylableMeta, name: string): KeyframesSymbol | undefined {
+    return STSymbol.get(meta, name, `keyframes`);
+}
+
+export function getAll(meta: StylableMeta): Record<string, KeyframesSymbol> {
+    return STSymbol.getAllByType(meta, `keyframes`);
+}
+
+function addKeyframes({
+    context,
+    name,
+    importName,
+    ast,
+    global,
+    importDef,
+}: {
+    context: FeatureContext;
+    name: string;
+    importName: string;
+    ast: postcss.AtRule | postcss.Rule;
+    global?: boolean;
+    importDef?: Imported;
+}) {
+    // fields are confusing in this symbol:
+    // name: the import name if imported OR the local name
+    // alias: the local name
+    STSymbol.addSymbol({
+        context,
+        node: ast,
+        localName: name,
+        symbol: {
+            _kind: 'keyframes',
+            alias: name,
+            name: importName,
+            global,
+            import: importDef,
+        },
+    });
+    // deprecated
+    ignoreDeprecationWarn(() => {
+        context.meta.mappedKeyframes[name] = STSymbol.get(context.meta, name, `keyframes`)!;
+    });
+}
+
+function resolveKeyframes(meta: StylableMeta, symbol: KeyframesSymbol, resolver: StylableResolver) {
+    let current = { meta, symbol };
+    while (current.symbol?.import) {
+        const res = resolver.resolveImported(
+            current.symbol.import,
+            current.symbol.name,
+            'mappedKeyframes' // ToDo: refactor out of resolver
+        );
+        if (res?._kind === 'css' && res.symbol?._kind === 'keyframes') {
+            const { meta, symbol } = res;
+            current = {
+                meta,
+                symbol,
+            };
+        } else {
+            return undefined;
+        }
+    }
+    if (current.symbol) {
+        return current;
+    }
+    return undefined;
+}
+
+function getTransformedName({ symbol, meta }: KeyframesResolve) {
+    return symbol.global ? symbol.alias : namespace(symbol.alias, meta.namespace);
+}

packages/core/src/features/feature.ts

@@ -1,5 +1,5 @@
 import type { StylableMeta } from '../stylable-meta';
-import type { ScopeContext } from '../stylable-transformer';
+import type { ScopeContext, StylableExports } from '../stylable-transformer';
 import type { StylableResolver } from '../stylable-resolver';
 import type * as postcss from 'postcss';
 import type { ImmutableSelectorNode } from '@tokey/css-selector-parser';
@@ -20,11 +20,12 @@ export interface FeatureTransformContext extends FeatureContext {
 }
 
 export interface NodeTypes {
-    SELECTOR: any;
-    IMMUTABLE_SELECTOR: any;
+    SELECTOR?: any;
+    IMMUTABLE_SELECTOR?: any;
+    RESOLVED?: any;
 }
 
-export interface FeatureHooks<T extends NodeTypes> {
+export interface FeatureHooks<T extends NodeTypes = NodeTypes> {
     metaInit: (context: FeatureContext) => void;
     analyzeInit: (context: FeatureContext) => void;
     analyzeAtRule: (options: { context: FeatureContext; atRule: postcss.AtRule }) => void;
@@ -35,11 +36,23 @@ export interface FeatureHooks<T extends NodeTypes> {
         walkContext: SelectorNodeContext;
     }) => void;
     transformInit: (options: { context: FeatureTransformContext }) => void;
+    transformResolve: (options: { context: FeatureTransformContext }) => T['RESOLVED'];
+    transformAtRuleNode: (options: {
+        context: FeatureTransformContext;
+        atRule: postcss.AtRule;
+        resolved: T['RESOLVED'];
+    }) => void;
     transformSelectorNode: (options: {
         context: FeatureTransformContext;
         node: T['SELECTOR'];
         selectorContext: Required<ScopeContext>;
     }) => void;
+    transformDeclaration: (options: {
+        context: FeatureTransformContext;
+        decl: postcss.Declaration;
+        resolved: T['RESOLVED'];
+    }) => void;
+    transformJSExports: (options: { exports: StylableExports; resolved: T['RESOLVED'] }) => void;
 }
 const defaultHooks: FeatureHooks<NodeTypes> = {
     metaInit() {
@@ -57,9 +70,21 @@ const defaultHooks: FeatureHooks<NodeTypes> = {
     transformInit() {
         /**/
     },
+    transformResolve() {
+        return {};
+    },
+    transformAtRuleNode() {
+        /**/
+    },
     transformSelectorNode() {
         /**/
     },
+    transformDeclaration() {
+        /**/
+    },
+    transformJSExports() {
+        /**/
+    },
 };
 export function createFeature<T extends NodeTypes>(
     hooks: Partial<FeatureHooks<T>>

packages/core/src/features/index.ts

@@ -14,10 +14,7 @@ export type { ClassSymbol } from './css-class';
 export * as CSSType from './css-type';
 export type { ElementSymbol } from './css-type';
 
-export type {
-    CSSVarSymbol,
-    KeyframesSymbol,
-    RefedMixin,
-    StylableDirectives,
-    VarSymbol,
-} from './types';
+export * as CSSKeyframes from './css-keyframes';
+export type { KeyframesSymbol } from './css-keyframes';
+
+export type { CSSVarSymbol, RefedMixin, StylableDirectives, VarSymbol } from './types';