zeplin-extension-style-kit/src/declarations/filter.ts

Models and utilities to generate CSS-like style code in Zeplin extensions.

import { ColorNameResolver, StyleDeclaration, StyleFunction, StyleParams } from "../common.js";
import { STYLE_PROPS } from "../constants.js";

export class Filter implements StyleDeclaration {
    filters: StyleFunction[];

    constructor(filters: StyleFunction[]) {
        this.filters = filters;
    }

    get name(): string {
        return STYLE_PROPS.FILTER;
    }

    equals(other: Filter): boolean {
        return (
            this.filters.length === other.filters.length &&
            this.filters.every((filter, index) => {
                const f = other.filters[index];

                return (
                    f.args.length === filter.args.length &&
                    filter.args.every((a, idx) => a.equals(f.args[idx]))
                );
            })
        );
    }

    getValue(params: StyleParams, colorNameResolver: ColorNameResolver): string {
        return this.filters.map(
            ({ fn, args }) => `${fn}(${args.map(arg => arg.toStyleValue(params, colorNameResolver)).join(" ")})`
        ).join(" ");
    }
}