Быстрый старт

Gradiente - это лёгкий инструмент для работы с градиентами как со структурированными данными. Вместо строк gradiente преобразует градиенты в предсказуемое представление, которое можно валидировать, трансформировать и использовать в рендер-системах.

Установка

npm install gradiente

Базовое использование

import { parseStringToAbi } from 'gradiente'

const gradient = parseStringToAbi(
  'linear-gradient(to right, red, blue)'
)

console.log(gradient)

Зачем нужны структурированные градиенты?

CSS-градиенты удобны, но строки сложно анализировать, валидировать и трансформировать.

gradiente позволяет перейти от этого:

linear-gradient(to right, red, blue)

к структурированным данным, которые можно использовать в инструментах, редакторах и рендер-системах.

Паттерн DSL

В gradiente есть небольшой Паттерн DSL для валидации ABI градиентов.

^[color-stop,~color-stop].

Читается как:

Начать паттерн
Начинаем перебор по color-stop и дальше начинаем массив из color-stop
Завершить паттерн

Playground

Playground позволяет посмотреть, как паттерны токенизируются, валидируются и визуализируются.

Open DSL Playground →

Далее

• Разберемся как работает Pattern DSL
• Посмотрим на реальные примеры градиентов
• Используем gradiente в рендер-системах