transition(1s/2s) 와 같이 transition값이 여러개 입력시 문제가 있던 현상을 수정하였습니다..transform:matrix(1,0,0,1,1,1) 과 같이 matrix 기능이 추가되었습니다.c(linear-gradient(90deg,#f00,#00f)) 와 같이 text-color에 그라데이션을 넣을 경우 적용이 되도록 기능을 추가하였습니다.w(fill)을 사용할 경우 의도치 않은 flex-shrink:1가 적용이 되어 문제가 발생하던 부분을 수정하였습니다.h(fill)을 사용할 경우 의도치 않은 flex-shrink:1가 적용이 되어 문제가 발생하던 부분을 수정하였습니다.h(fill)에 flex-shrink:1;max-height:100%; 이 누락되어 있어 추가하였습니다.dark: dark mode 기능이 정식으로 추가되었습니다.<div class="c(#000) dark:c(#fff)>" 와 같이 사용할 수 있습니다.min-w, min-h, max-w, max-h 기능이 추가되었습니다.wrap: display:flex;flex-flow:wrap; 기능이 추가되었습니다.gap(auto)!시 important!가 적용되지 않던 버그를 수정하였습니다.gap(auto)시 엘리먼트가 하나라면 figma에서처럼 가운데 정렬하도록 개선하였습니다.gap(auto)가 추가되었습니다.gap(auto) = space-between 으로 조금 더 직관적이고 단순한 기입이 가능하도록 수정하였습니다.rotate()가 정상동작하지 않던 현상을 수정하였습니다.rotate(90) 처럼 숫자만 적어도 자동으로 90deg unit이 붙도록 개선하였습니다.*{flex-shrink:0} 속성을 기본 Reset에서 제거하였습니다.where:(.hbox>*){flex-shrink:0}의 속성이 적용될 수 있도록 하였습니다.bc(border-color), bw(border-width)가 4방향을 다르게 각각 적용이 되지 않던 버그를 수정하였습니다.✨ top/bottom 과 left/right를 이제 x(), y()로 더 간단하고 멋지게 표현할 수 있습니다.
x(10) = left(10)x(~10) = right(10)x(10~20) = left(10)+right(20)✨ x(center) 기능이 추가 되었습니다.
x(center) = left(50%)+translateX(-50%)x(center+50px) = left(50%+50px)+translateX(-50%)✨r(fill)이 추가되어 양 옆이 둥근 사각형을 더 직관적으로 만들 수 있게 되었습니다.
r(fill) = border-radius:9999px;🐛 w(max-content) width:max-content;가 적용되지 않던 버그를 수정하였습니다.
w(fill), h(fill)이 Flexbox에서 제대로 동작하게 됩니다.nowrap, nowrap... 에 max-width:100%를 두어 특정 상황에서 글 내용이 넘치는 현상을 수정하였습니다.text(left) text(middle+right) text(pack)mx(3), px(10) py(20) 과 같이 mx = margin-left+margin-right를 같이 적용하는 rule을 추가하였습니다..blind, .sr-only 스크린 리더용 클래스를 추가하였습니다. 해당 클래스를 사용하면 화면에는 보이지 않지만 스크린 리더에서는 읽어줍니다. 참고로 blind와 sr-only는 동일한 역할을 수행합니다.table-layout:fixed;,table-layout:auto;,✨align-items, justify-content, align-content, justify-items의 축약버전을 추가하였습니다.
ex) <div class="ai(flex-start) jc(flex-end)">
✨flex-grow, flex-shrink의 축약버전을 추가하였습니다. grow, grow-0, no-grow, shrink, shrink-0, no-shrink
no-grow와 grow-0는 같은 의미입니다.
🐛CDN 방식에서 class가 하나도 없을 때 body {display:none}이 사라지지 않던 버그를 수정하였습니다.
✨layer(top:10) 과 같이 layer에 offset을 지정할 수 있는 기능을 추가하였습니다.
✨layer(top+outside) 와 같이 부모 엘리먼트의 바깥쪽을 기준으로 붙이는 기능이 추가되었습니다.
🐛adorableCSS가 잘못된 CSS를 생성하더라도 이후 라인이 문제가 생기지 않게 하도록 개선하였습니다. 복잡한 Selector 구문인 경우 맨 뒤에 {} 문자열을 추가하여 그 다음 라인은 정상적으로 동작할 수 있도록 하였습니다.
ex) .transform\:scale\(10\):transform{transform:scale(10);}{}
ex) ~md:font(2em)e 충돌이 나서 삭제하기로 함. ~selector는 반대로 만들어야 하는데 ex) p ~ & { ... } 사용성이 낮아서 우선순위 보류<script src="https://unpkg.com/adorable-css"></script>만 추가해보세요. <script src="https://unpkg.com/adorable-css"></script>
</body>
</html>import {adorableCSS} from "adorable-css/vite" // import path를 하나로 통일했습니다.<div class="flex &:last-child>span:c(red)">
<span>{index + 1}</span>
</div>✨ &.selected, &[disabled] 기능도 함께 출시가 되었습니다.
✨ Vite가 없어도 CDN 방식으로 AdorableCSS를 사용할 수 있는 방법이 추가 되었습니다. (beta 주의!) angular나 webpack, vanilla HTML에서도 AdorableCSS를 사용해보세요!
🔥 경고! 아직은 검증이 더 필요하기에 production용으로는 가급적 사용하지 마세요. IE11 주의!
<!DOCTYPE html>
<html>
<head>
...
<script src="https://unpkg.com/adorable-css"></script>
</head>
</html>다른 CSS 프레임워크 없이 script만 넣어보세요. css-in-js 방식으로 실시간으로 AdorableCSS의 스펙을 지원합니다.
{
"col-resize": () => `cursor: col-resize;`,
"crosshair": () => `cursor: crosshair;`,
"e-resize": () => `cursor: e-resize;`,
"ew-resize": () => `cursor: ew-resize;`,
"grab": () => `&{cursor:grab;}&:active{cursor:grabbing;}`,
"grabbing": () => `cursor: grabbing;`,
"n-resize": () => `cursor: n-resize;`,
"ne-resize": () => `cursor: ne-resize;`,
"nesw-resize": () => `cursor: nesw-resize;`,
"ns-resize": () => `cursor: ns-resize;`,
"nw-resize": () => `cursor: nw-resize;`,
"nwse-resize": () => `cursor: nwse-resize;`,
"not-allowed": () => `cursor: not-allowed;`,
"pointer": () => `cursor: pointer;`,
"progress": () => `cursor: progress;`,
"row-resize": () => `cursor: row-resize;`,
"s-resize": () => `cursor: s-resize;`,
"se-resize": () => `cursor: se-resize;`,
"sw-resize": () => `cursor: sw-resize;`,
"w-resize": () => `cursor: w-resize;`,
"zoom-in": () => `cursor: zoom-in;`,
"zoom-out": () => `cursor: zoom-out;`,
"cursor": (value:string) => `cursor:${value};`,
}// vite.config.js
import {adorableCSS} from "adorable-css/vite" // <-
export default defineConfig({
plugins: [adorableCSS(), ...] // <- plugin을 맨 처음에 등록합니다.
}){
// Scroll Snap
"scroll-m": (value:string) => `scroll-margin:${makeSide(value)};`,
"scroll-mt": (value:string) => `scroll-margin-top:${px(value)};`,
"scroll-mr": (value:string) => `scroll-margin-right:${px(value)};`,
"scroll-mb": (value:string) => `scroll-margin-bottom:${px(value)};`,
"scroll-ml": (value:string) => `scroll-margin-left:${px(value)};`,
"scroll-p": (value:string) => `scroll-padding:${makeSide(value)};`,
"scroll-pt": (value:string) => `scroll-padding-top:${px(value)};`,
"scroll-pr": (value:string) => `scroll-padding-right:${px(value)};`,
"scroll-pb": (value:string) => `scroll-padding-bottom:${px(value)};`,
"scroll-pl": (value:string) => `scroll-padding-left:${px(value)};`,
"snap-start": () => `scroll-snap-align:start;`,
"snap-end": () => `scroll-snap-align:end;`,
"snap-center": () => `scroll-snap-align:center;`,
"snap-none": () => `scroll-snap-align:none;`,
"no-snap": () => `scroll-snap-type:none;`,
"snap-x": () => `scroll-snap-type:x var(--a-scroll-snap-strictness, mandatory);`,
"snap-y": () => `scroll-snap-type:y var(--a-scroll-snap-strictness, mandatory);`,
"snap-both": () => `scroll-snap-type:both var(--a-scroll-snap-strictness, mandatory);`,
"snap-mandatory": () => `--a-scroll-snap-strictness:mandatory;`,
"snap-proximity": () => `--a-scroll-snap-strictness:proximity;`,
"snap-normal": () => `scroll-snap-stop: normal;`,
"snap-always": () => `scroll-snap-stop: always;`,
}preLoads의 옵션을 이용해서 (default: [/*/**.html]) 모든 html파일을 미리 watch 목록에 올리도록 기능 추가함.{ ... word-break:break-word ... } 추가 해서 text로 인해 flex-box가 커지는 기능 방지& > {max-width:100%;max-height:100%;}를 주어 overflow 방지 기능 추가:after :before content 기능이 추가되었습니다.<div class="before:content('hello') before:c(red)">world</div>
<div class="before:content(--content) before:c(red)" style="--content:'hello, '">world</div>@NOTE:
:aftervs::after정석은::after가 맞으나 IE8 이후 오랜 관습으로 남아 있는:after도 사용가능하도록 추가하였습니다.:before도 동일합니다.
<div class="first-line::c(red)">
<p>first-line</p>
<p>second-line</p>
</div><div class="h(100) scroll-y -webkit-scrollbar::w(4) -webkit-scrollbar-thumb::bg(red)">
</div> plugins: [
adorableCSS({
reset: `*{margin:0; padding} /* <-- your reset code here */`
}),
],adorableCSS({include: "src/**/*.{svelte,svx})"