v0.39.0

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

v0.38.0

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.

v0.37.0

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 */

v0.36.0

• 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."

v0.35.1

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

v0.35.0

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

v0.34.0

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.

v0.33.1

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

v0.33.0

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

v0.32.0

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