v0.35.0

[yuanchuan]

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: var(--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%)
  )

---

This discussion was created from the release v0.35.0.