0.32.2

Do not use ?? operator at the moment.

0.32.1

Build grid without DOM object.
Fix CSS parser for reading tail function names.

0.32.0

Features

Add @unicode function to insert Unicode and it can be used both in HTML and CSS.

/* in HTML */
@content: @unicode(0x2500);

/* in CSS */
:after {
  content: @unicode(0x2500);
}

A sequence of Unicode characters.

@content: @pn.unicode(0x2500, 0x257f, 0x2588);

Add @mirror/@Mirror function to transform input items, simlar to @cycle and @reverse.

/* 1, 2, 3, 4, 5, 5, 4, 3, 2, 1 */
@mirror(1, 2, 3, 4, 5);

/* 1, 2, 3, 4, 5, 4, 3, 2, 1 */
@Mirror(1, 2, 3, 4, 5);

All index functions, @i/I, @x/X, @y/Y, and @n/N/nx/ny accept extra arguments to do calulations.

@i5 === @calc(@i + 5)

@i(*10) === @calc(@i * 10)
@i(-10) === @calc(@i - 10)
@i(/10) === @calc(@i / 10)
@i(%10) === @calc(@i % 10)

@i(10/) === @calc(10 / @i)
@i(10-) === @calc(10 - @i)

Patches

Reduce imports of the exported svg function.
Improve @cycle to support comma-separated values.
Fix grid build for @content.

Fix parsing quotes in content.

/* There used to be bugs` */
content: '");';

0.31.2

Fix svg-extended style tag generation.

0.31.1

Fix bad reverse function implementation.

0.31.0

Add @content property for text content so that they can be selectable.
The @ symbol can be ommited if the functions are chained together.
Patch reverse function to support both SVG path commands and general arguments.
Skip variable properties for SVG generation.
Fix style tag parsing inside SVG for complex CSS selectors.

0.30.10

Add @pnr alias for @pr.

0.30.9

Support variables in standalone SVG export function.
Compute index instead of reversing the whole array.
Use single rotate for inner @place transformation.
Simplify image detection.
Use @pn and @position as aliases.

0.30.8

Experimenting the new added pr function.

0.30.7

Experimenting the new added cycle() function.

0.30.6

I was wrong. Only set background-size:100% to pattern, canvas, and shader.

0.30.5

Always add background-size:100% to background properties.

0.30.4

Normalize quoted SVG attribute values.

0.30.3

Do not break for decodeURI.
Fix SVG generator on cutting values.

0.30.2

Fix type error.

0.30.1

Fix CSS and SVG parser on quotes and parens.

Add range support for @m function.

::after {
  /* 5 4 3 2 1 */
  content: @M5-1.@n;
}

0.30.0

Add exports.

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

document.appendChild(CSSDoodle`
  @grid: 10 / 200px;
  background: @p(red, blue);
  margin: 1px;
`);

let code = svg(`
  viewBox: 0 0 10 10;
  circle {
    cx, cy, r: 5;
  }
`);

let polygon = shape(`
  points: 200;
  r: sin(t);
`);

let tokens = tokenizer.scan(`
  color: red
`);

0.29.2

Restore Plot function for unitless points.
Allow spaces around times operator.
Fix inline SVG element generator.

0.29.1

Extend use attribute to support rules in pure string.
```
<css-doodle use="@grid: 5 / 200px"></css-doodle>
```

0.29.0

Add Emmet-like syntax for generating SVG element.
```
line*10 {

}
```
Equals to
```
@M10(line {

})
```

0.28.2

Add @place alias for @position.
Do not SVG group elements for empty id.
Extend @svg-filter to add blur, erode, and dilate commands.

0.28.1

Fix frequency variable name.
Fix seed random inside @doodle function.
Use seed for default svg filter seed.

0.28.0

Reduce the default maximum grid size to 64x64. It can be up to 256x256 if the experimental attribute is provided (#91)
Support title and desc element (#92)
Fix broken var inheritance (#94)
Support named arguments for @svg-filter and @rn (#95)
Support reading seed value from source code (#96)

0.27.4

Put the seed argument at the end.

0.27.3

Add shorthand for frequently used svg filter (#88)
Skip empty group argument (#87)

0.27.2

Add t variable to represent u_time in pattern (#85)
Fix pattern function caused by missing CSS vars (#84)
Simplify calc in random selector (#83)
Group SVG elements with identical id (#82)
Prevent duplicated calls by removing attribute reflection hook (#81)
Add vec2 u_seed to shader (#80) by @akira-cn

0.27.1

Add pause/resume to Shader and CSS animations. (#78)
Use CSS variable for Shader background value. (#77)
Clear Shader animations on update or disconnected. (#76)

0.27.0

Features

Add u_time uniform to @shaders. Now it supports animation in shaders. (#70)
Add support for shader syntax compatible with shadertoy (#73)
Increase grid size up to 256x256. (#73)

Fixes

Fix Math expression in r property caused by wrong unit detection. (#72)

0.26.4

Renamed @offset to @position.
Fixed missing output extra value.

0.26.3

Fixes

Do not expose error for empty arguments.
Return function name if it's not being registered.

0.26.2

Fixes

Fixed context value by adding signature for each sequence.
Fixed SVG parsing on tail quotes of statement.
Fixed SVG inline definition for href property.
Added missing textPath as the text element.

0.26.1

Fixes

Fixed undefined Expose.
Prevent error for incomplete code.

0.26.0

Features

Added @P (uppercase) function for picking a different value from last one.
The @p function with no arguments will use the arguments from last @p function.

Enhancement

Set default width and height to 100% for doodle background.
Transform values with Math.ceil for sequence generators.

Fixes

Fixed tail semicolons for variables.
Fixed context in nested sequence functions.
Fixed arguments parsing to ignore last empty args.

0.25.2

Enhancement

Support reading CSS variables inside functions.

0.25.1

Fixes

Do not remove spaces around parens.
Fix svg arguments transform.

0.25.0

Fixes

Fixed keyframes parsing error. (#54)
Fixed comments inside pseudo elements. (#56, #57)

Enhancement

Don't break in SSR apps.
Speeded up component initialization.

Features

Added support for inline SVG filters or gradients.

background: @svg(
  viewBox: -5 -5 10 10;
  circle {
    r: 4;
    fill: linearGradient {

    }
  }
)

0.24.4

Added ux, uy, uw, and uh uniform variables.
Improved svg parsing.
Added support for tspan and multiple text nodes.

0.24.3

Improved @svg() function for style tags and inline styles.
Improved @svg() function for expanding id to empty blocks.
Fixed tests on Windows.

0.24.2

Expand grouped value for the grouped properties.
Added index variable to the the default shape context.

0.24.1

Decreased the automatically registered animation frame to 100/sec.
Removed the cross option for even/odd selector because it's now handled by default.
Make r small enough when it equels to 0.

0.24.0

Changes

Removed @min-size, @max-size, @path(), nrand(), and @reflect() since I never used them.
Removed the feature of registering typed custom properties automatically, which was used for animation.
Renamed place-cell to offset in favor of a shorter name.

Features

Added Perlin noise function @rn() and @noise().

/* similar to @r() function */
scale: @rn(0, 1);
rotate: @rn(360deg);

Added support for direction inside @plot() function. Each element will rotate towards the curve direction or with custom angles.
```
@offset: @plot(
  /* the syntax is similar to offset-rotate */
  direction: auto 90deg;
);
```
Added support for unit inside @plot() function. Now the box-shadow value can be plotted.
```
box-shadow: @m10(
  @plot(r: 10, unit: em) 0 0 #000
);
```
Or simply put the unit at the end of r.
```
box-shadow: @m10(
  @plot(r: 10em) 0 0 #000
);
```

0.23.1

Fixed index calculation in @pattern.
Added I for @pattern.
Removed useless dependencies.

0.23.0

Added @pattern function for pixel patterns drawing.

background: @pattern(
  grid: 72;
  match((int(x+y)%2) == 0) {
    fill: #000;
  }
)

0.22.0

Now use WebGL2 and GLSL3.0 for shader programs.

Added @paint function for quick CSS painting API experiment.

background: @paint(
  paint(ctx, {width, height}) {
    let x = width / 2;
    let y = height / 2;
    let r = Math.min(x, y);
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI, false);
    ctx.fill();
  }
);

If the inner paint function is missing it will try to autocomplete the code.

background: @paint(
  let x = width / 2;
  let y = height / 2;
  let r = Math.min(x, y);
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI, false);
  ctx.fill();
);

0.21.6

Patches

Fix css parsing on function composition.
Fix entity issue for update().
Use seed random to replace Math.random inside match().

0.21.5

Patches

Use name plot() for point().

0.21.4

Patches

Add support for scale in two directions.
Add support for negative frame value.
Add vertices alias for points.
Allow scale value to be 0.
Fix frame calculation logic.

0.21.3

Patches

Add support for left/right shift operator.
Increase the frame width based on turn value.

0.21.2

Patches

Add the missing & operator computation.
Add context value I into @match.

0.21.1

Enhancement

Add support for more Math notations: &&, ||, |, &, ∧, ∨

Fixes

Fix default context value.

0.21.0

Features

Add the general @match selector.

/* match the first 5 elements */
@match( i <= 5 ) {
  background: red;
}

/* other math calculations */
@match( gcd(x, y) ≠ 1 ) {
  background: red;
}

Changes

Use a shorter name fill for fill-rule.

0.20.2

Patches

Fix frame calculation on graph transformations.

0.20.1

Patches

Fix negative functions in calc.

0.20.0

Features

Support left-handed negative commands or variables inside shape function.

clip-path: @shape(
  -x: cos(t) - .2
);

/* equals to */

clip-path: @shape(
  x: -1 * (cos(t) - .2)
);

Add range function within shape context so that it's easy to draw Math equations.

@grid: 11x1 / 200px;

@place-cell: @point(
  x: range(-1, 1); /* -1, -.9, 0, ..., .9, 1 */
  y: x^2;
);

Breaking

Rename shape command origin to move.
Change shape function to respect Math coordinate system.

Fixes

Fix calc function for heading negative variables.

0.19.2

Enhancement to `svg` function

Add support for nested selectors shorthand.

g circle {

}

/* equals to */

g {
  circle {

  }
}

Resolve id property on selectors.

circle#my-circle {

}

/* equals to */

circle {
  id: my-circle;
}

Handle special properties in SVG.
```
use {
  xlink:href: #my-circle;
}
```

Fix for semicolons as value separators.

animate {
  values: 50; 490; 350; 450;
  keyTimes: 0; 0.5; 0.8; 1;
}

0.19.1

Enhancement

Add another experimental @reverse function for svg paths.

Fixes

Temporarily fix nagative number calculations.

0.19.0

Features

Add @canvas for generating background with JS.

Enhancement

Add flip/invert support for H and V commands.
Add lowercase flipv and fliph aliases.

Changes

Change offset to point for a better name.

0.18.1

Enhancement

Add Offset function for generating absolute values.

0.18.0

Features

Add experimental @flip and @revert function for svg path

Enhancement

Rewrite small parsers.

Fixes

Fix args for composed functions

0.17.4

Enhancement

Make @n- modifiable with extra argument.

0.17.3

Enhancement

Add turn option for shape commands.

0.17.2

Fixes

Fix bad variable for @svg-filter.
Fix extra arguments for sequence functions.

0.17.1

Enhancement

Add support for group properties.
Add support for svg text node with content property.

Fixes

Catch error on creating illegal SVG elements.

0.17.0

Features

Add a new way to write SVG inside @svg function.

Changes

Remove contain: content.

0.16.1

Patch

Fix SVG size in Safari.

0.16.0

Features

Add experimental @reflect and @offset functions.
Set aspect-ratio for auto width/height grid.

Changes

Make @rand function starts from 0.
Remove unused size presets.
Remove/add new basic shapes.
Add points alias for split.
Set css-doodle element default to be contain: content.

Fixes

Fix build size to minimal.
Fix blank canvas issue in shader.
Catch error while WebGL is disabled.

0.15.3

Enhancement

Skip HTML tags inside rules.

0.15.2

Fixes

Don't use random seed for unique ids.

0.15.1

Fixes

Avoid error while charset is missing.
Fix error in composition for empty functions.

0.15.0

Features

Add @path function for responsive path commands used by clip-path.
Add @rn function for normalize distribution random. (Thanks @Plasmatium).

Fixes

Fix event binding and grid generation for empty block.

0.14.2

Fixes

Fix property register for update() method.
Fix initial time uniform name.

0.14.1

Fixes

Fix uniform timing function.
Prevent uniform animation from getting over-written inside.

0.14.0

Features

Add experimental time uniform via @t.

Fixes

Fix calc parsing.
Keep fraction values for degree in @shape() function.
Use empty string for empty seq() args for preventing side effects.

0.13.10

Enhancement to `@shape` function

Add seq() function for shape.
Prevent empty shape commands.
Recognize θ symbol.
Do not evaluate π for compound expressions.

0.13.9

Enhancement to `@shape` function

Add support for function composition.

0.13.8

Enhancement to `@shape` function

Add support for comments inside @shape function.
Increase max split to 3600.
Replace rotate with degree to normalize all commands to nouns.
Switch the action order of rotate and origin.
Fix trailing semicolon.

0.13.7

Enhancement to `@shape` function

Add frame option for shape, like stroke.

0.13.6

Enhancement to `@shape` function

Fix the exponent operator precedence to highest.

0.13.5

Enhancement to `@shape` function

Fix cycle direction.
Add origin commands for @shape.
Support exponent operator in @shape.

0.13.4

Enhancement to `@shape` function

Fix reading undefined variables.
Handle empty values for shape commands.
Validate user input fill-rule value.

0.13.3

Enhancement to `@shape` function

Add polar equation support.
Fix calc expand with variables.
Make the polygon fill rule default to be nonzero.

0.13.2

Fixes

Fix default shader background-size.
Fix promise not resolving correctly.
Fix reading shaders from CSS variables.

Enhancement

Add a :host display style that respects the hidden attribute.

0.13.1

Features

Remove conditional statements since terser will remove line breaks ( a quick fix).

0.13.0

Features

Add @shaders function for writing GLSL inside css-doodle.

0.12.2

Fixes

Fix issue when @doodle is part of function arguments.

0.12.1

Fixes

Prevent circular references inside @shape function.
Normalize default values for @shape function.

0.12.0

Features

Add @doodle function to make css-doodle as backgrounds.
Add custom shape via @shape function.

0.11.3

Fixes

Fix error when calling @shape function.

Changes

Respect to devicePixelRatio only when the given exporting scale value equals 1.

0.11.2

Fixes

Fix scale issue in Safari.
Fix missing variables defined outside by applying all variables to the exported root element.

Changes

Remove custom warnings for overload resolution.

0.11.1

Fixes

Fix default scale for retina screen.
Fix the size of the exported image for relative values.

Changes

Add detail option for export.
No export scale for Safari.

0.11.0

Features

Add export API for saving css-doodle as an image.

0.10.0

Features

Add 2-dimensional traversal ability to @m function.
Simplify function names by introducing capitalized names.
Improve code generation speed.

Fixes

Fix '0' value in arguments not being included.

0.9.3

Fixes

Fix attribute update for seed number.

0.9.2

Fixes

Normalize the count of sequence generator so it's ok to use @r function in @m function.
Replace all errors with warnings.

Changes

Add version to released files.

0.9.1

Fixes

Fix reading property names.

0.9.0

Features

Add seed number to css-doodle.
Add cross options to even/odd functions.
Automatically register properties by their names.

Changes

Make row/col respect to y/x.

0.8.5

Fixes

Fix blink on reinitialization.
Fix the value of @n and @M with no context.

0.8.4

Fixes

Fix grid parsing.

Changes

Set default width/height to be auto.
Export CSSDoodle as the module name for working with Observable.

0.8.2

Features

Support for function composition.
Make arguments expandable.

Fixes

Fix Math function name like ln10 and SQRT2.

0.8.1

Features

Add top-level grid definition.
Add stripe() function for gradients.
Make function arguments less error prone, e.g. trailing commas.

Changes

Increase the grid size up to 64x64.
Use place-items instead of place-content for pseudo elements.

0.7.7

Changes

Modify the name shape pear to drop and add rotation.
Limit size of the lp and lr to 20.

Fixes

Fix unexpectable bug in Chrome.

0.7.6

Features

Add max iteration count @N.
Support last n value for @lp() and @lr().

Fixes

Ignore null or undefined values.

0.7.5

Features

Add π symbol.
Recongize function without parentheses.
Add rep for repeat and several others for personal usage.

0.7.4

Features

Add shorthand for common standard paper sizes.

Fixes

Prevent duplicated definition when more than one css-doodle source being included in the page.

Update

Set all elements inside the component to be border-box.
Use place-content insteaad of flexbox alignment.
Add opencollective funding to package.

0.7.3

Features

Expand the '±' symbol to '-' and '+' in one place.

0.7.2

Features

Add click-to-update attribute for demo stuff.
Add @id() function.

0.7.1

Fixes

Fix the nesting limit inside shadowDOM.

0.7.0

Features

Add depth dimension.
Add alias for row and col.

Fixes

Fix typo for multiple-with-space.

Changes

The third dimension now based on 1x1. That is to say, the 1x2x8 will not work, but 1x1x8 does.
Deprecated the @multi alias.

0.6.2

Features

Add @ms() multiple values separated with space.
Add support for dynamic functions with numeric parameters.

Fixes

Fix for content: none

0.6.1

Features

Add @rand-int().

Fixes

Ignore empty composed values.
Fix the missing varaible for dimension z.

0.6.0

Features

Experiment for new dimension z.

Fixes

Fix the clamped min value.

0.5.1

Fixes

Fix type error in @rand().
Fix the shuffle algorithm.
Improve the behaviours of @pd() and @pn().

0.5.0

Features

Support multiple arguments for @nth(), @row() and @col().
The range of @rand() is now unlimited.

Changes

Remove step value for @rand().

Fixes

Fix native content values.

0.4.11

Fixes

Fix bug on attribute changing.

0.4.10

DO NOT USE

0.4.9

Fixes

Fix coords reference.
Fix pseudo content value with var().
Fix empty value for @use().

0.4.8

Fixes

Support multitple pseudo selectors on one rule.
Fix bug on multitple animation names.

0.4.7

Fixes

Fix parse error on keyframe names.
Fix generated multiple animation names.
Prevent error on empty or unknown shapes.

Changes

Don't throw JS errors.

0.4.6

Fixes

Fix the shuffle algorithm.

0.4.5

Fixes

Fix context bug for @pick-d().
Prevent scrollbars caused by @place-cell().

Features

Automatically add vendor prefixes for properties.
Automatically add quotes for pseudo-content.
Support char range in @pick functions.
Add experimental @svg-filter() function.

0.4.4

Fixes

Fix error in @pick-d().
Fix type error of units handling.

Changes

Rename @max-row() to @size-row() and @max-col() to @size-col().
Replace uglify-es with terser.

0.4.3

Fixes

Fix scientific notation in @calc().

Features

@nth() now behaves like nth-child.
Add @pick-d() function.
Accept any unit.

0.4.2

Fixes

Fix errors in @calc().
Fix invalid @n()caused by the idx params.

Changes

Increase iterating limit for @repeat() and @multiple().
Make :container inherits all the grid properties from :doodle element.

0.4.1

Fixes

Fix parse error to read arguments.
Fix context called by @n() and @pick-by-turn().

Changes

Remove legacy functions and properties: size(), min-size(), max-size() and @shape().

Features

Add aliases for frequently used functions.

0.4.0

Fixes

Fix parse error to support more dynamic value inside function parameters.
Fix parse error related to @keyfames.

Changes

The second value of @place-cell is set to 50% when it is missing.

Features

Add @multiple() function to easily compose values.
Add @pick-by-turn() to pick a value one by one.
Add @last-pick() and last-rand() to reference the last generated value.
Add @var() to replace the use of var() inside the styles which passed to the @use property.

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

0.32.2

0.32.1

0.32.0

Features

Patches

0.31.2

0.31.1

0.31.0

0.30.10

0.30.9

0.30.8

0.30.7

0.30.6

0.30.5

0.30.4

0.30.3

0.30.2

0.30.1

0.30.0

0.29.2

0.29.1

0.29.0

0.28.2

0.28.1

0.28.0

0.27.4

0.27.3

0.27.2

0.27.1

0.27.0

Features

Fixes

0.26.4

0.26.3

Fixes

0.26.2

Fixes

0.26.1

Fixes

0.26.0

Features

Enhancement

Fixes

0.25.2

Enhancement

0.25.1

Fixes

0.25.0

Fixes

Enhancement

Features

0.24.4

0.24.3

0.24.2

0.24.1

0.24.0

Changes

Features

0.23.1

0.23.0

0.22.0

0.21.6

Patches

0.21.5

Patches

0.21.4

Patches

0.21.3

Patches

0.21.2

Patches

0.21.1

Enhancement

Fixes

Enhancement to `svg` function

Enhancement to `@shape` function