Package exports

Besides the element, the css-doodle package exposes its component class, generators, parsers and metadata. The subpaths are ES modules for import only; require() cannot load them.

css-doodle

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

import 'css-doodle';

css-doodle/component

The element class without registering it, for a custom tag name, a subclass, or creating elements from code. It can be imported on a server, but create() needs a browser.

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 generators as plain functions. They need no DOM, so they run in Node as well as in the browser, except svg.element().

svg(code[, options]): SVG markup from @svg code. svg.element() returns it as an element. See svg().
shape(code): A clip-path value from @shape code. See shape().
prerender(code[, options]): A promise of HTML that paints the doodle without the runtime. See prerender().

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('points: 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', …]