css-doodle - npm Package Versions

0.34.2

• Change cycle shift direction to match the "reduced Latin square".
• Add experimental once function.
• Fix rading complex value in cycle.

<br /> <br />

0.34.1

• Fix gap property break and remove redundant styles.

<br /> <br />

0.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:

  • Append the <code>noclip</code> keyword to the @grid property:

    @grid: 1 / 400px noclip;
    

  • 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 <code>aspect-ratio</code> 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 <code>rotate</code> and <code>scale</code> to <code>:container</code>.

  @grid: 1 / 400px + 2;  /* + means scale */
  @grid: 1 / 400px * 45deg;  /* * means scale */
  
  @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.

<br /> <br />

0.33.1

• Fixed @Svg function detection for transforming the multiplication feature.
• Fixed @pn index value inside @m function.

<br /> <br />

0.33.0

• Added new @svg-pattern function to reduce boilerplate code.

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

• Added padding value for SVG viewBox property.

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

<br /> <br />

0.32.2

• Do not use ?? operator at the moment.

<br /> <br />

0.32.1

• Build grid without DOM object.
• Fix CSS parser for reading tail function names.

<br /> <br />

0.32.0

Features

• Add @unicode function to insert Unicode and it 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, simlar 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 calulations.

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

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

<br /> <br />

0.31.2

• Fix svg-extended style tag generation.

<br /> <br />

0.31.1

• Fix bad reverse function implementation.

<br /> <br />