Releases: acss-io/atomizer
[email protected]
Patch Changes
- 4d47803: fix(atomizer): run findFiles on bin args
[email protected]
Patch Changes
- d4346c8: fix(atomizer: add allowParamToValue to column-count
[email protected]
Minor Changes
- 3e26596: feat: add text-decoration-, break- and backdrop-filter-* rules
[email protected]
Patch Changes
- 4799c0a: fix(atomizer-plugins): run atomizer on file updates
[email protected]
Patch Changes
- 4efff5e: chore: [email protected]
[email protected]
Minor Changes
Image
image-orientation
The image-orientation CSS property specifies a layout-independent correction to the orientation of an image.
<!-- image-orientation: from-image -->
<img class="Ior(fi)" />image-rendering
The image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.
<!-- image-rendering: crisp-edges -->
<img class="Iren(ce)" />Interactivity
accent-color
The accent-color CSS property sets the accent color for user-interface controls generated by some elements.
<input type="checkbox" checked class="Acc(red)" />caret-color
The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted.
<input value="This field uses a custom caret color!" class="Cac(red)" />print-color-adjust
The print-color-adjust CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device.
<!-- print-color-adjust: exact -->
<div class="Pca(ex)">
<p>Need more contrast!</p>
</div>touch-action
The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
<!-- touch-action: pinch-zoom -->
<div class="Tcha(pz)">Some interactive thing</div>will-change
The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed.
<!-- will-change: scroll-position -->
<div class="Wc(sp)">Some content with overflow-scroll</div>Layout
box-decoration-break
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
<!-- box-decoration-break: clone -->
<span class="Bxdb(c)">The<br />quick<br />orange fox</span>object-position
The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box.
<!-- object-position: center -->
<img class="Objp(c)" src="logo.svg" alt="Logo" />place-content
The place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.
<div class="D(f) Flw(w) Pc(fe,c)"> <!-- place-content: flex-end, center -->
<div class="small">Lorem</div>
<div class="small">Lorem<br />ipsum</div>
<div class="large">Lorem</div>
<div class="large">Lorem<br />ipsum</div>
<div class="large"></div>
<div class="large"></div>
</div>place-items
The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.
<div class="D(f) Pi(st)"> <!-- place-items: stretch -->
<div class="small">Lorem</div>
<div class="small">Lorem<br />ipsum</div>
<div class="large">Lorem</div>
<div class="large">Lorem<br />ipsum</div>
<div class="large"></div>
<div class="large"></div>
</div>place-self
The place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox. If the second value is not present, the first value is also used for it.
<article class="D(g)">
<span>First</span>
<span class="Ps(s,c)">Second</span> <!-- place-self: start, center -->
<span class="Ps(c,s)">Third</span> <!-- place-self: center, start -->
<span class="Ps(e)">Fourth</span> <!-- place-self: end -->
</article>Outline
Added support for outline-color, outline-style, and outline-width properties.
<div class="Oc(red) Os(d) Ow(m)">Error!</div>Typography
font-kerning
The font-kerning CSS property sets the use of the kerning information stored in a font.
<!-- font-kerning: auto -->
<p class="Kf(a)">Hello World!</p>font-stretch
The font-stretch CSS property selects a normal, condensed, or expanded face from a font.
<!-- font-stretch: expanded -->
<p class="Fst(e)">Hello World!</p>orphans
The orphans CSS property sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.
<div class="Orp(2)">
<p>This is the first paragraph containing some text.</p>
<p>
This is the second paragraph containing some more text than the first one.
It is used to demonstrate how orphans work.
</p>
</div>widows
The widows CSS property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.
<div class="Wid(1)">
<p>This is the first paragraph containing some text.</p>
<p>
This is the second paragraph containing some more text than the first one.
It is used to demonstrate how widows work.
</p>
</div>writing-mode
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
<!-- writing-mode: horizontal-tb -->
<p class="Wm(htb)">我家没有电脑.</p>Citation: CSS property description and examples borrowed from MDN.
Dependencies
- 44515c1: chore(deps): bump minimatch from 4.2.1 to 5.1.1
[email protected]
Patch Changes
- b3a2a93: chore: update to [email protected]
[email protected]
[email protected]
Minor Changes
- 2041b46: feat: add strict option
[email protected]
Minor Changes
- 825e7af: chore: upgrade to [email protected]