Css Doodle Versions Save

Features since last release

• Support variables in standalone SVG export function.

  --color: red, blue;
  
  svg {
    circle {
      fill: @p(--color);
    }
  }
  

• The @ symbol can be ommited if the functions are being chained together.

  @flip.invert.reverse.p
  @round.r100;
  

• Add @content property for text content so that they can be selectable.

  @content: hello;
  

• Patch @reverse function to support both SVG path commands and general arguments.

  @pn.reverse(1, 2, 3, 4);
  

• Add @pnr function for picking values from right to left.

  @pnr(1, 2, 3, 4);
  

• Add @cycle() function for cycling through input items.

  /* Before */
  
  inset: @pn(
    10% auto auto 10%,
    10% 10% auto auto,
    auto 10% 10% auto,
    auto auto 10% 10%,
  );
  
  /* After */
  
  inset: @pn.cycle(
    10% auto auto 10%
  );
  

Fixes

• Skip variable properties for SVG generation.
• Fix style tag parsing inside SVG for complex CSS selectors.
• Fix SVG generator on cutting values.
• Normalize quoted SVG attribute values.
• Do not break for decodeURI.
• Compute index instead of reversing the whole array.
• Use single rotate for inner @place transformation.
• Use @pn and @position as aliases.
• Fix detection and background-size value for pattern, canvas, and shader.

• 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;
  }
  

• Add exports.

  import CSSDoodle from 'css-doodle';
  import { svg, shape } from 'css-doodle/generator';
  import { tokenizer } from 'css-doodle/parser';
  
  document.body.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
  `);
  

• Add Emmet-like syntax for generating SVG element.

  line*10 {
  
  }
  

  Which equals to:

  @M10(line {
  
  })
  

Features

• Support setting seed value directly in the rules (#96)

  <css-doodle>
     @seed: 2022;
     @grid: 10 / 400px;
     background: @p(red, blue);
  </css-doodle>
  

• Support named arguments for @svg-filter and @rn (#95)

  /* It's hard to remember the order */
  filter: @svg-filter(.2, 2, 10, 2);  
  
  /* Now each argument has a name, so that the order doesn't master */
  filter: @svg-filter(frequency=.2, scale=2, octave=10, seed=2);
  filter: @svg-filter(seed=2, frequency=.2, scale=2, octave=10);
  
  /* And It's optional */
  filter: @svg-filter(.2, 100, seed=2020);
  

Fixes

• Fix broken var inheritance (#94)
• Add support for the missing title and desc element in SVG (#92)

Changes

• Reduce the default maximum grid size to 64x64. It can be up to 256x256 only when the experimental attribute is provided (#91)

  <css-doodle experimental>
    @grid: 256 / 600px;
  </css-doodle>
  

Patches

• Fix pattern function caused by missing CSS vars (#84)
• Prevent duplicated calls by removing attribute reflection hook (#81)

Enhancement

• Add t variable to represent u_time for pattern function (#85)

• Add vec2 u_seed to shader (#80) by @akira-cn

• Simplify calc in random selector (#83)

  @random(1-y/Y-x/X/3) {
    background: #fff;
  }
  

• Group SVG elements with identical id (#82)

  g#id {
    circle {}
  }
  g#id {
    rect {}
  }
  

  Which will expose:

  <g id="id">
    <circle />
    <rect />
  </g>
  

• 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)

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)

Changes

• Rename @offset to @position.

Fixes

• Fix Math expression in r property caused by wrong unit detection. (#72)
• Fix missing output extra value.
• Do not expose error for empty arguments.
• Return function name if it's not being registered.
• Fix context value by adding signature for each sequence.
• Fix SVG parsing on tail quotes of statement.
• Fix SVG inline definition for href property.
• Add missing textPath as the text element.
• Fix undefined Expose.
• Prevent error for incomplete code.

Credits

Huge thanks to @akira-cn for helping to add these new features!

Features

• Added support for reading CSS variables directly inside functions.

  --color: red, blue;
  background: @p(--color);
  

• The @p function with no arguments will use the arguments from last @p function.

  background: @p(red, blue);
  color: @p;
  

• Added @P (uppercase) function for picking a different value from last one.

Enhancements

• 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.
• Fixed svg arguments transform.
• Do not remove spaces around parens.

Features

• Added uniform variables ux and uy for mouse positions, uw and uh for container resolution.

• Added support for tspan and multiple text nodes.

• Added support for style tags and inline styles.

  /* inline styles */
  background: @svg(
    style border: 1px solid red;
  );
  
  /* style tag */
  background: @svg(
    circle {}
    style {
      circle { fill: red }
    }
  );
  

• Added support for attribute expanding.

  circle {
    cx, cy: 4 5;
  }
  

• Added support for inline SVG filters or gradients.

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

Enhancements

• Now it won't break in SSR apps.
• Speeded up component initialization.
• Added index variable i to the the default shape context.
• Removed the cross option for even/odd selector because it's now handled by default.
• Make r small enough when it equals to 0.
• Decreased the automatically registered animation frame to 100/sec.

Fixes

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