CSS 다시 파서 어디에 쓰나
2 likes1,212 views
Emocon 2017 S/S 발표: 개인 프로젝트였던 자바스크립트 기반의 CSS Parser를 왜 만들었는가에 대한 우문우답. Project GitHub: https://goo.gl/mK6DTU NPM Reg.: https://goo.gl/aEFYSI
![계산기 예제(1/2)
%lex
%%
s+ /* skip whitespace */
[0-9]+("."[0-9]+)?b return 'NUMBER'
"*" return '*'
"/" return '/'
"-" return '-'
"+" return '+'
"^" return '^'
"(" return '('
")" return ')'
"PI" return 'PI'
"E" return 'E'
<<EOF>> return 'EOF'
. return 'INVALID'
/lex
19](https://image.slidesharecdn.com/again-css-parser-170414220849/85/CSS-19-320.jpg)
![규칙을잘정의해서회피하자.
기존토큰
[#]{ident} {return 'HASH_STRING';}
[*] {return 'ASTERISK';}
{ident} {return 'GENERAL_IDENT';}
그냥공백이포함된토큰을추가 정의하자
[.]{ident}{WS}+ {return 'SELECTOR_CLASS_WITH_WS')}
[#]{ident}{WS}+ {return 'SELECTOR_ID_WITH_WS')}
[*]{WS}+ {return 'ASTERISK_WITH_WS')}
{ident}{WS}+ {return 'SELECTOR_TYPE_WITH_WS')}
36](https://image.slidesharecdn.com/again-css-parser-170414220849/85/CSS-36-320.jpg)
![CSS
.meetat-card-container .mdl-card {
min-height: 336px;
}
Result (type: Simple)
{
"type": "rule",
"selectors": [
".meetat-card-container .mdl-card"
],
"declarations": {
"min-height": "336px"
}
}
39](https://image.slidesharecdn.com/again-css-parser-170414220849/85/CSS-39-320.jpg)
![[문디 10주차] d3.js 상호작용](https://cdn.slidesharecdn.com/ss_thumbnails/10-150521023910-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
![[111217 아꿈사연말모임] 웹소켓과온라인게임](https://cdn.slidesharecdn.com/ss_thumbnails/111217-111219001615-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[211]대규모 시스템 시각화 현동석김광림](https://cdn.slidesharecdn.com/ss_thumbnails/211-161025004529-thumbnail.jpg?width=560&fit=bounds)
![[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...](https://cdn.slidesharecdn.com/ss_thumbnails/implementingwebbasedonlinemultiplayertetris-141111200036-conversion-gate02-thumbnail.jpg?width=560&fit=bounds)
![[week14] Getting started with D3.js](https://cdn.slidesharecdn.com/ss_thumbnails/d3-150331194754-conversion-gate01-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
Similar to CSS 다시 파서 어디에 쓰나 (20)
More from Chang W. Doh (20)
Ad
CSS 다시 파서 어디에 쓰나
- 2. cwdoh SKplanet Google Developer Expert for the Web technologies 2
- 5. Demo 5
- 6. 6
- 7. 왜만들었나 7
- 8. 2013년어느날 jQuery Mobile 디자인도구 개발 JS 기반의에디팅프레임워크+ 네이티브기반의에디터 8
- 9. 마크업은프레임워크에서처리 작업문서를네이티브에디터에서로딩 주입된프레임워크가 로딩된문서를탐색 웹뷰내의콘텐츠에대한UI 인터랙션을프레임워크가 처리 네이티브에디터에편집방법을전달 에디터에서편집결과를프레임워크에전달/갱신 9
- 14. 14
- 15. 걸출한레퍼런스였던... 15
- 17. Parser: How it works 소스의입력스트림으로부터토큰추출 토큰을처리하는규칙(문법)을통해계층적인형태(AST)로출력 17
- 18. 기본구조 %lex %% // 정규식 기반으로 토큰 정의 /lex // 연산자의 우선순위 및 관계 정의 %start 시작심볼 %% // 토큰에 대한 유도식(문법) 정의 18
- 19. 계산기 예제(1/2) %lex %% s+ /* skip whitespace */ [0-9]+("."[0-9]+)?b return 'NUMBER' "*" return '*' "/" return '/' "-" return '-' "+" return '+' "^" return '^' "(" return '(' ")" return ')' "PI" return 'PI' "E" return 'E' <<EOF>> return 'EOF' . return 'INVALID' /lex 19
- 20. 계산기 예제(2/2) %left '+' '-' %left '*' '/' %left '^' %left UMINUS %start expressions %% expressions : e EOF { return $1; } ; e : e '+' e -> { op: '+', lhs: $1, rhs: $3 } | e '-' e -> { op: '-', lhs: $1, rhs: $3 } | e '*' e -> { op: '*', lhs: $1, rhs: $3 } | e '/' e -> { op: '/', lhs: $1, rhs: $3 } | e '^' e -> { op: '^', lhs: $1, rhs: $3 } | NUMBER -> Number($1) | E -> Math.E | PI -> Math.PI ; 20
- 21. 5 * PI ^ 2 + 32 - 11.3 의결과 { "operator": "-", "lhs": { "operator": "+", "lhs": { "operator": "*", "lhs": 5, "rhs": { "operator": "^", "lhs": 3.141592653589793, "rhs": 2 } }, "rhs": 32 }, "rhs": 11.3 } 21
- 24. 예를들자면... Cascading Style Sheets, level 1 ‑ W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) ‑ W3C CSS Syntax Module Level 3 ‑ W3C Media Queries ‑ W3C CSS wiki ‑ W3C CSS keyword index 24
- 26. 생각했던결과 26
- 27. 만들어진결과 27
- 29. Issue, 예를들면... 공백을토큰으로받아처리하면너무귀찮으니까, 일단공백은무시하고 프로토타입을만들어야지 %lex {whitespace}+ {} {vendor_prefix}{ident} {return 'VENDOR_PREFIX_IDENT';} %% 29
- 36. 규칙을잘정의해서회피하자. 기존토큰 [#]{ident} {return 'HASH_STRING';} [*] {return 'ASTERISK';} {ident} {return 'GENERAL_IDENT';} 그냥공백이포함된토큰을추가 정의하자 [.]{ident}{WS}+ {return 'SELECTOR_CLASS_WITH_WS')} [#]{ident}{WS}+ {return 'SELECTOR_ID_WITH_WS')} [*]{WS}+ {return 'ASTERISK_WITH_WS')} {ident}{WS}+ {return 'SELECTOR_TYPE_WITH_WS')} 36
- 37. 값(Value) 규칙에추가 토큰처리를기술 HashVal : HASH_STRING | HEXA_NUMBER | SELECTOR_ID_WITH_WHITESPACE -> $1.trimRight() ; IDENT : GENERAL_IDENT | VENDOR_PREFIX_IDENT | SELECTOR_TYPE_WITH_WHITESPACE -> $1.trimRight() ; 37
- 38. 공백이뒤따르는셀렉터(DescendantSelector)에대한규칙정의 DescendantSelector : ASTERISK_WITH_WHITESPACE -> ... | SELECTOR_TYPE_WITH_WHITESPACE -> ... | SELECTOR_CLASS_WITH_WHITESPACE -> ... | SELECTOR_ID_WITH_WHITESPACE -> ... ; SelectorGroup : Selector | Selector SelectorGroup | Selector SelectorCombinator SelectorGroup | DescendantSelector | DescendantSelector SelectorGroup | DescendantSelector SelectorCombinator SelectorGroup ; 38
- 39. CSS .meetat-card-container .mdl-card { min-height: 336px; } Result (type: Simple) { "type": "rule", "selectors": [ ".meetat-card-container .mdl-card" ], "declarations": { "min-height": "336px" } } 39
- 41. 두마리가 되었... 41
- 42. 결론은... 누가 어디에쓰면좋을지아이디어좀주세요. 버그 리포트도좋고요. PR 주시면더고맙... 42
- 43. 43