css-doodle

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().

  /* The @rn() function is combined with noise and mapping at the same time */
  scale: @rn(0, 1);
  rotate: @rn(360deg);
  
  /* while the @noise() function is the raw noise function */
  rotate: calc(@noise(x/X, y/Y) * 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
  );
  

• Added @pattern function for pixel patterns drawing.

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

• 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);
      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);
    ctx.fill();
  );
  

Patches

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

Patches

• Use name plot() for point().

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.

Patches

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

Patches

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

Enhancement

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

Fixes

• Fix default context value.

Features

• Add the general @match selector.

  /* match the first 5 elements */
  @match( i <= 5 ) {
    background: red;
  }
  
  /* other math calculations */
  /* see https://twitter.com/yuanchuan23/status/1451564386192031748 */
  @match( gcd(x, y) ≠ 1 ) {
    background: red;
  }
  

changes

• Use a shorter name fill for fill-rule.

Patches

• Fix frame calculation on graph transformations.

Patches

• Fix negative functions in calc.

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, -.8, 0, ... , .8, 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.

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

Enhancement

• Add another experimental @reverse function for svg paths.

Fixes

• Temporarily fix negative number calculations.

Features

• Add @canvas function 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.

Features

• Add experimental @flip and @revert function for svg path.

Enhancement

• Rewrite small parsers.

Fixes

• Fix args for composed functions.

Enhancement

• Make @n- modifiable with an extra argument.

Enhancement

• Add turn option for shape commands.

Fixes

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