css-doodle

• Use native mod function for variables.

  /* mod(@t, 360deg) */
  transform: rotate(@t(%360deg));
  

• Support calc chain.

  @content: @i(*2, +10, *100);
  

• Add @PN and @PD for outside bouding to @doodle.

  background: @m2.doodle(
    @grid: @PN(2x1, 3x1);
  );
  

• Enable uniform value debugging through content.

  :after {
    content: @ux;
  }
  

• Add grid border[:color] for debugging purposes.

  @grid: 1 / 100% border:red;
  

• Add support viewbox padding inside @svg-polygon.

  @content: @svg-polygon(
    paddng: .2;
  );
  

• Add @xX and @yY similar to @iI.

• Remove the feature of adding vendor prefixes to properties.

Last release of 2023

• Update bundle format from umd to iife.
• Add @x, @y selectors.
• Add support for function inside@keyframes step names.
• Fix @cycle() grouping.
• Fix shader background resize.
• Improve calc speed inside @nth.
• Improve performance of @once.
• Optimize initial styles update when there's delay or animation.
• Remove @canvas() because I barely used it.
• Reduce preset-size list.
• Remove compatible fix for old Safari.

Features

• New $ function for reading and evaluating numeric variables.

  --a: 2;
  --b: $(a * 2);
  
  --c: $b;
  
  /* 30px */
  --d: $px(10 + 20);
  

• Variables can be put directly inside @svg() now.

  @content: @svg(
    --size: 10;
  
    viewBox: 0 0 $size $size;
  );
  

• Add repeatCount to draw.

  draw: 10s indefinite; 
  draw: 10s infinite; /* CSS way */
  

• Add @hover selector.

  @hover {
    /* same as :hover */
  }
  
  @hover(-1, 1) {
    /* previous and next */
  }
  
  @hover(0 -1, 0 1) {
    /* top and bottom cells. Targeting by `dx dy` pairs */
  }
  

• Round the values generated by @shape to a maximum of six decimal places."

• Support nested css-doodle element via @content: @doodle().

  @grid: 2 / 400px;
  @content: @doodle(
    @grid: 2 / 100%;
    background: @p(red, blue);
  );
  

• Add path animation with property draw in normal SVG element.
  https://css-doodle.com/svg/?name=drawing%20ring

  @conent: @svg(
    path {
      /* .. */
      draw: 5s;
    }
  );
  

• Change property animate to draw inside @svg-polygon.

• Change default @svg-polygon stroke color to currentColor.

• Fix sequence generator index.

• Fix negative calculation in generator functions.

New features since last release

• New function @svg-polygon(), similar to @shape() but using SVG <polygon /> intead of clip-path. Now both the style of background and stroke can be set. Also an extra animate property for animation.

  background: @svg-polygon(
    points: 360;
    r: .8 + cos(5t)*.15;
  
    fill: red;
    stroke: yellow;
    stroke-linecap: round;
    stroke-width: .1;
  
    /* animate */
    animate: 2s;
  );
  

• Decode uri format for @content property automatically. The @Svg() function (Uppercase form) is no longer needed.

  @content: @svg(
    viewBox: 0 0 1 1;
  );
  

  Or using @raw() for choosing format explicitly.

  --svg: @raw.svg(
    viewBox: 0 0 1 1;
  );
  
  @content: @p(--svg);
  

• Support not condition for selectors.

  @match not (i < 10) {
  
  }
  

• Add support for translate command ~.

    /* translateX */
    @grid: 1 / 400px ~ 20px;
  
    /* translateX and translateY */
    @grid: 1 / 400px ~ 20px 30px;
  
  

• Add support dimenstion for @doodle element.

  /* will generate an image with width of 1000px and height 2000px  */
  background: @doodle1000x2000(
  
  );
  

• Add svg.element() to svg generator.

  import { svg } from 'css-doodle/generator';
  
  let svgElement = svg.element(`
    viewBox: 0 0 10 10;
  `)
  

• Add shortcut p alias for viewBox padding.

  @content: @svg(
    viewBox: 0 0 10 10 p 1;
  )
  

• Support unit calculation inside generator functions.

  transition: @i(* 1s);
  
  background-positon: @m10(
    @n(* 1%) @n(* 2%)
  )
  

Breaking

• The css-doodle element now by default restricts the visible area to its dimension,
  which means it's overflow hidden. There are two ways to change this behavior:

  1. Append the noclip keyword to the @grid property:

     @grid: 1 / 400px noclip;
     

  2. Overide the contain property:

     :doodle {
       @grid: 1 / 400px;
       contain: none;
     }
     

Features

• Extended @grid to support doodle background color, after the second / symbol.

  @grid: 1 / 400px / #000;
  

• Extended @grid and @size to support aspect-ratio if one of the width and width is auto.

  @grid: 1 / 400px auto 2;
  @grid: 1 / 400px auto (4/3);
  
  @size: 100px auto 1.5;
  

• Extended @grid to support rotate and scale to :container.

  @grid: 1 / 400px + 2;  /* + means scale */
  @grid: 1 / 400px * 45deg;  /* * means rotate */
  
  @grid: 1 / 400px + 2 * 45deg;
  

• Extended @grid to change the layout to Flex layout.

  @grid: - 8x2 / 400px;  /* - means using flex */
  @grid: | 8x2 / 400px;  /* | means using flex and vertical direction */
  

• Added support for 0 index value in @m function.

  /* 0 1 2 3 4 */
  @content: @M0-4.n
  

• Added @gap property.

  @grid: 10 / 400px;
  @gap: 1px;
  

• Added @dx and @dy functions.

  /* -2,-2  -1,-2  0,-2  1,-2  2,-2
     -2,-1  -1,-1  0,-1  1,-1  2,-1
     -2,0   -1,0   0,0   1,0   2,0
     -2,1   -1,1   0,1   1,1   2,1
     -2,2   -1,2   0,2   1,2   2,2 */
  @grid: 5 / 400px;
  @content: @dx, @dy;
  

  Adjust offset.

  /* -3,-3  -2,-3  -1,-3  0,-3  1,-3
     -3,-2  -2,-2  -1,-2  0,-2  1,-2
     -3,-1  -2,-1  -1,-1  0,-1  1,-1
     -3,0   -2,0   -1,0   0,0   1,0
     -3,1   -2,1   -1,1   0,1   1,1 */
  @grid: 5 / 400px;
  @content: @dx(1), @dy(1);
  

Fixes

• Fixed CSS parsing on function composition.
• Fixed seed value at pre-compose phase.

• Fixed @pn index and its behavior inside @m function.
• Fixed @Svg function detection in the parser.

Features

• Added padding value for SVG viewBox property.

  viewBox: -1 -1 2 2 padding 1;
  
  /* equals to */
  
  viewBox: -2 -2 4 4;
  

• Added new @svg-pattern function for reducing boilerplate code of SVG pattern.

  background: @svg-pattern(
    width, height: 10%;
    viewBox: 0 0 10 10;
    circle { }
  );
  

• Added new @Svg function to return raw SVG code rather than encoded URI value.

  @content: @Svg(
    viewBox: -1 -1 2 2;
    circle {
      r: 1;
    }
  );
  

Features

• Add @unicode function to insert Unicode characters and 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, similar 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 calculations.

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

  An interesting pattern:

  @calc(360/@I*@i) === @i(/@I(/360));
  

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: '");';
  

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.