ruleset을 오버라이딩 해서 IE11 variable 이슈나 커스텀하게 제공하면 편한 mixin들을 제공하는 방식!!

생각해보니 vite에서도 파일을 조회하여 알 수 있는 방법 (transform)이 있는데 굳이 load에서 fs.readFile을 이용해서 이중으로 I/O를 하고 있었다.

이를 수정하고 전체를 다시 scan해서 만들지 않고 파일 단위로 변하는 내용만 업데이트에 반영할 수 있도록 구조를 변경하여 성능을 개선했다.

또한 HMR에서 업데이트 모듈순서를 이제는 맨 앞으로 할 수 있게 되어 html 수정이 찰나의 깜박임도 줄일 수 있게 되었다.

div, span 기타 태그와 달리 svg에 적용한 클래스명은 제대로 생성이 되지 않는 것 같습니다....!

예) p(2) 에 대한 스타일이 보이지 않고 있음

공식문서의 tutorial에 adorable-css 의 기능들을 추가합니다.

대표적으로 아래와 같은 예시가 있습니다.

추가한다면 다음과 같은 모습이 되리라 예상합니다.

위의 예시를 제외하고 나머지 기능들 또한 추가되는 것이 좋을것 같습니다.

안녕하세요, 최근에 프론트엔드 공부를 시작해서 우연히 AdorableCSS를 접하였는데 Component 기반 + Atomic-CSS가 굉장히 매력적으로 느껴지는 것 같아 AdorableCSS도 공부하고 있습니다.

기능 확인을 위해 공식 홈페이지를 둘러보던 중 튜토리얼에 스크롤 관련 오류가 있는 것 같아 문의드립니다. 튜토리얼의 스크롤이 다른 항목으로 넘어가도 고정되어 있어, 스크롤이 내려가 있는 상태에서 "길이가 짧아 그 스크롤까지 내릴 수 없는 항목"을 선택하면 HTML과 스크롤바 부분이 변하지 않는 오류가 있는 것 같습니다.

예를 들어 5. Flexbox의 스크롤을 맨 아래로 내린 후 6. Position을 누르면 스크롤바가 제대로 동작하지 않으며 위로 스크롤하기 전까지는 Flexbox 관련 HTML 내용이 보입니다.

class="hover:c(red) hover:p(10)" 이런식에서

class="hover:c(red)|p(10)" 이런식으로 그룹화 시켜서 한번에 쓸 수 있도록

디자인 요소가 많아지면 class가 너무 길어지는 것 같아요.

<label class=">:checked+div:c(red)">
  <input type="checkbox" checked/>
  <div>Hello</div>
</label>

왜 이 문법이 제대로 동작을 안하는지 확인이 필요함.

그래야 사용할 수 있는 범위가 늘어갈것 같아...
물론 vite로 하면 쓰는 것만 추릴수 있고 속도가 훨씬 더 빠르겠지만... Next를 쓰는 사람들을 생각하면 vite로 갈아타라고 할수가 없네..

layer(left+top)일 시 left:0, top:0으로 adorable은 편리하게 변환되는데요.

그렇지만 추가적으로 커스텀 할 때에는 다음과 같이 추가해야 해요.

layer(left+top), left(10), top(10)

더 편리하게 adorable은 바뀔 수 있을 것 같아요. 다음과 같이요.

layer(left: 10+ top: 10)

어떠신지 궁금합니다!

https://animate.style/

animate.css와 같은 자주 쓰이는 에니메이션을 함수형 CSS로 제공할 수 있는 plugin을 고민해봅시다.

ex)

<div class=".isError:shakeX(10)">실패시 좌우로 흔드는 에니메이션</div>

or

<div class=".isError:@shakeX(10)">실패시 좌우로 흔드는 에니메이션</div>

안녕하세요 if.kakao에서 발표해주신 내용 잘봤습니다 👍🏻
올려주신 figma 플러그인 설치하는 중에

위 와 같이 editorType 이 빠져서 정상적으로 import가 안되는 상황이 발생했습니다.

"editorType": ["figma"]

위와 같이 editorType 추가로 이슈 해결해서 공유드립니다.
감사합니다 🙏🏻

메일에서 쓰려면 inline-style을 만들어야 하는데 adorableCSS로 작성을 하면 inline-style이 붙는 형태로 빌드가 되는 도구를 만들어 주세요!!

안녕하세요! 카카오에서 발표하신 세션을 감명 깊게 잘 봤습니다.
adorable hand shake 피그마 플러그인을 설치해서 사용하려고 하는데, 텍스트가 계속 SVG로 변환되는 이슈가 있습니다.

그런데 올려주신 예제 Gif를 보니 여기서도 텍스트가 SVG로 변환되어 있는 것 같은데 텍스트로 변환할 수 없을까요?

그리고 피그마에서 작업한 것과 플러그인을 통해 퍼블리싱하신 것과 차이가 있어, 플러그인에 맞춰 피그마 작업을 해야 하는 경우가 있는데 이에 대해 가이드가 있으실까요?

.bg(#ddd.02){background-color:rgba(rgba(221,221,221,.02));}

translateX() scale() 등의 경우 같은 transform: 필드를 사용하기 때문에 분리해서 사용하면 1개만 적용되는 문제가 발생한다.

그래서 이러한 같은 필드를 공유하는 류 ex) transform, filter, box-shadow 의 속성을 대응 할 수 있도록 + 기호 기능을 제공한다.

ex)

조건부 속성들을 만들다 보면 우선순위를 수동으로 높여서 처리해야 하는 경우가 발생한다.
현재 c(red)! 와 같이 !를 이용해 해당 속성을 !important로 만들 수 있으나 이미 !importnat인 속성을 덮어써야 하는 경우 대응이 힘들다.
그래서 c(blue)!! 와 같이 !!와 !!!를 추가하려고 한다.

구현 방식은

c(red)!! => html c(red) { color:red!important}
c(red)!!! => html body c(red) { color:red!important}

과 같은 방식으로 나오도록 만들 예정이다.

처음 이 프로젝트를 알게 되고 난 후 공식 홈페이지, /docs 를 읽고 나서 든 생각은 "문법만 살짝 다른 tailwind 아닌가?" 였습니다. 블로그에 작성하신 글도 인상 깊게 읽었지만 tailwind와 차별화된 adorable-css만의 장점을 언급하는 부분은 거의 없어서 아쉬웠습니다. 블로그에서 언급하신 대로 복잡한 selector나 flexbox등 이 프로젝트의 장점을 tailwind와 직접적인 비교를 통해 보여주시면 좋을 것 같습니다.

linear-grident에서 색상 사용시 #00f.2 와 같은 표현법을 쓸 수 있도록 칼라파싱이 되도록 수정하자.
칼라판독법은 Regexp로 충분하므로 함수를 만들어두자.

문제
vite에서 모든 파일을 조회했는지 확인 할 수 있는 방법을 찾지 못해서 파일 조회시 debouncing을 이용해서 확인을 했다.
이때 resolve하는 순서가 @adorable.css가 맨 마지막이 아니라면 해당 위치까지만 만들어져 있던 스타일 만큼만 출력을 하는 문제가 발생함.

cdn에 js를 등록하고 MutationObserver를 이용해서 class 변화를 추적해서 style을 만들어 내는 방식으로 개발하자.

1. vite를 쓰지 않아도 되고
2. css 용량도 발생하지 않고
3. 퍼포먼스도 나쁘지 않고
4. override문제도 어쩌면 해결할 수 있지 않을까?

UI 를 만들다보면 상태에 따라 다른 속성을 보여주고 싶을 때가 있는데요.

혹시 이런 식으로도 작성이 가능한가요?

a {
  color: red;

  .selected {
        color: blue;      
  }
}

대략 혼자 상상해본 문법은 이렇습니다.

class="if(parent.selected):c(blue)" 

안녕하세요, 이번엔 또 새로운 이슈가 발생했습니다!

첫 번째 이슈는 AutoLayout의 가로 간격 설정에 대한 것입니다.
무사히 겹치는 오브젝트를 넣는 데에는 성공했으나, 이번엔 AutoLayout의 가로 간격 설정에 혼란이 와버렸습니다...
이미지의 위쪽 리스트는 작은 단위(도형과 텍스트가 결합된 AutoLayout) 묶음에 padding을 설정하여 간격을 주었고, 아래쪽은 리스트를 묶은 AutoLayout에 간격을 설정한 경우입니다.
위 아래 가장 작은 단위 묶음을 preview해보면 의도한대로 잘 나오나, 그 상위 묶음에서는 이러한 이슈가 발생하는 것을 확인하였습니다.. 😢

두 번째 이슈는 Box의 정렬입니다.
두 번째 이미지에서 "로렘 입숨 데스크탑을 지금 바로 편리하게 이용해보세요!" 란 텍스트는 AutoLayout상 Left-middle에 맞춰지도록 정렬을 지정했으나 preview에서는 씩씩하게 중앙에 위치한 것을 확인할 수 있었습니다. AutoLayout에서는 Left, Right, Center만 사용하고 상하 padding을 지정하는 것이 좋을까요..?
그리고 조그만 소망인데....그라데이션 처리를 한 색상도 플러그인에 보일 수 있도록 반영해주실 수 있을 지 문의드립니다!
(TMI: 디자인 작업은 MAC에서 하지만 폰트가 맑음고딕으로 설정되어있는 이유는...회사에서 제공하는 서비스들이 웹 기반이 대부분인데 서비스를 이용할 사람들은 Windows를 많이 사용할테니 그에 맞춰 작업하고 있기 때문입니다....회사 개발팀을 볶아 다른 폰트도 임베딩 해봤는데 Windows 자체에서 폰트 렌더링을 MAC보다 못생기게 해줘서 한계가 있더라구요..그래서 기본 폰트인 맑음고딕을 쓰기로 협의를 봤으나...항상 폰트가 못생겨서 눈물을 흘립니다. 근데 또 그와중에 Figma 자체 렌더링때문에 폰트가 같은 weight인데도 실제 브라우저(실서비스 화면)에서 보는 것과 비교하여 얇아보이는 부작용이 있더라구요? 아주 혼란스럽습니다.)

지난 번과 동일하게 제가 작업한 피그마는 바로 이것입니다: https://www.figma.com/file/bnU1eZWRiZCQI1fyntf3er/test-list-push?node-id=1%3A2

홈페이지에서 scroll에 반응하는 에니메이션은 많으니 이를 대응할 수 있는 문법이나 기능을 구현하는 건 어떨까?

#7 에서 쓰이는 에니메이션과 결합해서

ex)

<div class="on:scroll:fade-in"> <div class="on:scroll:fade-right(1s)">

or

<div class="scroll:fade-in"> <div class="scroll(-50%):fade-right(1s)">

NOTE: 아직 정식으로 배포된 브라우저는 없지만 scroll-time-line이라는 css 문법이 추가되었다. 나중에 자연스럽게 옮겨야 할 것도 생각해보자..

Helvetica Neue 폰트를 적용하려고하는데 어떻게해도 적용이 안되서 이슈 남겨드립니다 😢

fontFamily(Helvetica Neue)
fontFamily('Helvetica Neue')
font-family(Helvetica Neue)
font-family('Helvetica Neue')
font-family(--font-ticket-1)

Vite react-ts 를 사용하고 있습니다!

개인적으로 작업하는 프로젝트를 이번에 vite 기반으로 바꿔서 같이 써볼려고 하는데요.

  ext: ["svelte", "vue", "tsx", "jsx", "mdx", "svx", "html"], 

기본 파싱되는 확장자가 위와 같이 되어 있는 것 같습니다.

그래서 일단은 아래처럼 설정했습니다.

    adorableCSS({
      ext: ['js'],
    }),

혹시 js 확장자도 기본 ext 에 넣어주실 수 있나요?

안녕하세요.

멋진 프로젝트를 알게 되서 처음으로 이슈를 남겨 봅니다.

웹컴포넌트 형태로 만들고 싶은 프로젝트가 있는데요.

이 프로젝트가 눈에 띄네요.

같이 한번 써봤으면 좋겠는데 혹시 웹컴포넌트 같은 것도 지원이 되나요?

.class="hover:underline:class="hover{text-decoration:underline;}

슈도클래스에 특수기호가 들어가면 에러가 발생한다. 그래서 이스케이프 처리 해봤지만
(, )나 + 는 필요한 기능이다.
현재는 Regexp를 사용하고 있지만 Lex 기반으로 바꿔서 (나 스트링을 처리는 필요하지 않을까?
bg(linear-grident(rgba(255,255,.2))) 이렇게 하니까 괄호가 3개가 나올수 있더라. Regexp는 확실히 한계가 있다.

문법판독기를 Regexp가 아니라 빠르지만 조금더 정교한 방법으로 변경해보자!

현재 jsx 기반 내에서 사용을 해보고 있는데요.

class A {
 
   ['refreshAll'] () {
         return <div 
                class="artboard-title is-not-drag-area" 
                data-artboard-title-id={artboardItem.id} 
                style={{
                    "transform-origin": "0% 0%",
                    "transform": `translate3d( calc(${newPointer[0]}px), calc(${newPointer[1]}px), 0px) rotateZ(${angle}deg)`  
                }} >
                    <div style="transform: translateY(-100%);">{artboardItem.title}</div>
            </div>
   } 
}

위와 같은 소스가 있다고 치면

entry 쪽에 대략 아래와 같이 찍힙니다.

refreshAll
[data-artboard-title-id='${id}']
translate3d(
calc(${newPointer[0]}px),
calc(${newPointer[1]}px),
0px)
rotateZ(${angle}deg)

그래서 rotateZ 도 해석이 되는 상태라 최종 css 가 아래 처럼 찍히는데요.

*{margin:0;padding:0;box-sizing:border-box;font:inherit;color:inherit;flex-shrink:0;}
.rotateZ\(\$\{angle\}deg\){transform:rotateZ(${angle}deg);}
.sepia\(0\.2\){filter:sepia(0.2)}

키워드/함수에 대한 파싱 범위를 어디로 보면 좋을까요?

외부에 제공하는 모듈로 만들 경우 전역 style이 문제가 되는 상황이 생깁니다.
옵션에 root? prefix? 등을 붙여서 사용가능한 한정자를 만들어주는 기능을 추가해주세요

config = {
prefix: ".foo"
}

.font(20) { font-size: 20px }
=>
.foo .font(20) { font-size: 20px}

@media (max-width: 480px) {
  body {
    background-color: red;
  }
}

media쿼리 prefix를 어떠한 문법을 통해서 만들면 좋을지 생각해보자..

1. 일단 full 스펙을 지원해서 새로운 CSS 스펙이 나와도 대응을 할 수 있게 한다.

<div class="@media(max-width:480px):bg(red)">hello</div>
<div class="@media(min-width:480px)and(max-width:680px):bg(red)">hello</div>

<div class="@supports not (display: grid) {"></div <!-- 이런것도?? -->

media query level 4 문법

@media (600px < width < 1000px)

<div class="@media(600px<width<100px):bg(red)">hello</div>

<div class="@media(600px<width<100px/or/height>100):bg(red)">hello</div>

3. mediaQuery는 config에서 할 수 있게

4. 어차피 breakpoint가 대부분일텐데

<div class="@width(768~1024):bg(red)">hello</div>
<div class="@w(768~1024):bg(red)">hello</div>

4-1) device-width는?

<div class="@deivce-width(768~1024):bg(red)">hello</div>

<div class="@dw(768~1024):bg(red)">hello</div>

transform:translateY(100vh)

위 문장은 adorableCSS의 문법처럼 해석이 가능하기 때문에 CSS를 생성하게 되는데 잘못된 CSS를 만들어내기 때문에 이후 서식이 적용이 되지 않는 버그가 있다. 수정필요!!

빠른 수정과 답변 감사드립니다! 혹시 한가지 더 질문 드려도 괜찮을까요?

Nuxt 2버전에서 adorable-css 라이브러리를 사용하고 싶은데 개발 환경 설정 방법이 궁금합니다.
그리고 Nuxt는 3버전부터 공식적으로 Vite가 추가될 예정으로 알고 있는데 Nuxt 2버전에서는 아래 라이브러리를 사용하면 될까요?
https://github.com/nuxt/vite

Originally posted by @hanjonglee in #18 (comment)

플러그인 config에 custom rule을 추가할 수 있도록 하는 기능.

ex)

      adorableCSS({
        rules: {
          "rect": () => `border: 2px solid red;`,
          "shadow-mid": () => `box-shadow: 0 0 0 20px rgba(255,255,255,.2);`,
        }
      }),

flex

& > * {flex: 1}

처럼 >로 시작하면 자식 선택하는 기능으로 해주세요

ex) >w(100%) >flex >h(100%)

안녕하세요, 리드미를 읽다가 깨진 링크가 있어서 제보 드립니다.

정상 링크로 바꾸는 PR을 올려볼까 했는데 정상 링크를 못찾겠네요..🤔

오류 링크 존재 부분

• https://github.com/developer-1px/adorable-css/blob/master/README.md?plain=1#L167
• https://github.com/developer-1px/adorable-css/blob/master/README.md?plain=1#L172

의도된 내용일까요?

background-image에 url() 함수를 사용하고싶습니다! 방법이 있을까요?

background-image(url(main.png)) // X
background-image(url/(main.png/)) // X
bg(url(main.png)) // X

위 방법을 시도했으나 url때문에 안되더라구요 ㅠㅠ 방법이 있을까요?

현재 +layer.svelte에서 import "@adorable.css" 를 통해서 vite 업데이트시 css가 업데이트가 되도록 작성이 되어 있는데,
라우터 이동시 css 적용이 누락되는 경우가 있습니다. 이 경우 해당 router의 +page.svelte 파일 수정을 하면 HMR이 발동이 되어 업데이트가 됩니다.
어떻게 수정을 해야할 지 파악 중에 있습니다.

현재 1가지 방법으로는

import "@adorable.css" 대신
import "adorable-css"를 입력하면 vite watch기반이 아니라 cdn 방식으로 개발모드에서는 훨씬 더 쾌적한 환경에서 작업을 할 수 있습니다.

다만 빌드를 할 경우에는 다시 import "@adorable.css" 로 바꿔줘야 하는 번거로움이 존재합니다.

SvelteKit에서 개발모드와 빌드모드에서 둘 다 작동할 수 있도록 개발하고 있는 중입니다.

h(100vh)에 항상 위 코드를 포함하면 의도치 않는 문제는 발생하지 않을까? h(full)과 같이 새로운 옵션을 줘야 할까요? 고민 중

svg 태그의 경우 transform, translate, none등 자동으로 생성해주는 형식과 유사한 정보들이 많은데 반해 class를 쓸 것 같지는 않아서 svg 구간은 파싱에서 제외하도록 함.

class="m" 의 경우 m { margin: undefined } 와 같이 표기되는 문제가 있어

1. 인자가 필요한 함수에 값이 없는 경우에는 무시
2. rule에 undefined라는 글자가 들어간 경우에도 스킵이 되도록 수정함

안녕하세요, 사내 개발팀 직원의 소개로 이 플러그인을 접하게 된 디자이너입니다!
제가 작업한 UI디자인이 개발자에게 전달되어 실제 웹/앱에서 어떻게 보여지는 지를 고민하던 중 좋은 프리뷰 플러그인을 발견하여 기쁘고 감사드립니다.
그와중에 한 가지 고민사항이 생겨 이슈를 남기게 되었습니다.
개발상에서는 오브젝트의 포지션을 음수로 지정할 수 있는 것으로 알고 있습니다. 하지만 슬프게도 Figma의 Autolayout은 음수 간격을 지정할 수가 없어서.....푸시알림과 같이 다른 오브젝트와 겹쳐서 배치해야 하는 경우에는 Frame을 사용하고 있습니다.

readme 를 읽어보며 모든 작업을 Autolayout화 하기로 협의하고 그에 맞추어 플러그인을 제작하셨다는 내용을 발견했습니다.
그래서 겹쳐지는 오브젝트를 컴포넌트화 시키고 Autolayout으로 묶거나, Frame에 요령을 피운 후 Autolayout으로 구성해보기도 했으나 부족한 저의 실력으로는 플러그인을 실행했을 때 원하는대로 나오는 방법을 찾을 수가 없었습니다....ㅠㅠㅠㅠ

그리하여 저와 같이 오브젝트를 겹쳐서 배치해야 할 경우(디자인)가 발생하셨다면, 이를 어떻게 작업하여 플러그인에서 깔끔하게 보이게 가능할지 자문을 구하고 싶습니다.
혹은 이러한 경우/디자인이 없으셨다면, 플러그인에서 프레임도 인식할 수 있도록 해주실 수 있을 지 문의를 드립니다.

제가 예시로 만든 피그마는 바로 이것입니다! https://www.figma.com/file/bnU1eZWRiZCQI1fyntf3er/test-list-push?node-id=0%3A1

1. 플러그인을 만들어서 새로운 rules을 add 할 수 있는 기능
2. 지정된 폴더에서만 적용하도록 하는 기능
3. auto prefix를 붙여줘서 독립적으로 빌드를 할 수 있는 기능
4. config fs event -> auto reload!