Package exports

Besides the element, the css-doodle package exposes its component class, generators, parsers and metadata as ES modules.

css-doodle

The default entry registers the <css-doodle> element as a side effect.

import 'css-doodle';

css-doodle/component

The element class without registering it, for a custom tag name, a subclass, or creating elements from code.

CSSDoodle: The element class.
define(name, element): Register a class under a tag name, unless the name is taken.
create(code): Register css-doodle if needed and return a new element with the code as its content.

import { CSSDoodle, define, create } from 'css-doodle/component';

define('my-doodle', class extends CSSDoodle {});

const el = create(`
  @grid: 5 / 60vmin;
  background: @p(#000, #fff);
`);
document.body.append(el);

css-doodle/generator

The SVG and shape generators as plain functions, returning strings.

svg(code): SVG markup from the CSS-like SVG syntax.
shape(commands): A polygon() value from shape commands.

import { svg, shape } from 'css-doodle/generator';

svg(`
  viewBox: 0 0 10 10;
  circle { cx, cy, r: 5; fill: #000 }
`);
// '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">…</svg>'

shape('split: 5; r: cos(5t)');
// 'polygon(…)'

css-doodle/parser

The parsers used internally: parseCss, parseSvg, parseShapeCommands, parseGrid, parseValueGroup, parsePattern, parseShaders, parseSvgPath, parseVar, parseDirection, parseCompoundValue and the tokenizer. Their output is an internal AST and may change between versions.

css-doodle/meta

Lists of the names the language knows, for editors and tooling.

functions: { names, alias }: the canonical function names and the alias map.
mathFunctions: The Math members available as functions.
selectors, properties: { names, alias } for the cell selectors and the @ properties.
calcOperators: The operators of the expression language with their precedence.

import { functions, selectors, properties } from 'css-doodle/meta';

functions.names;        // ['I', 'Ii', 'M', 'Mirror', …]
functions.alias.pl;     // 'pn'
properties.names;       // ['content', 'gap', 'grid', 'place', …]