@skp-toolkit/json-dsl-parser v0.0.2

dsl-parser (WIP)

JSON으로 작성된 DSL 토큰명을 값으로 치환해주는 웹팩 로더입니다.

Example

• 디자인 토큰 명세

// token.json

{
    "global": {
        "colors": {
            "Blue": {
                "100": {
                    value: "#000011",
                    type: "color"
                },
                "200": {
                    value: "#000022",
                    type: "color"
                },
                "300": {
                    value: "#000033"
                    type: "color"
                },
                // ...
            }
            // ...
        }

        "texts": {
            "t1": {
                type: "text"
            },
            "t2": {
                type: "text"
            }
            // ...
        }
    }
}

...

• SCSS 스타일시트 생성

// styles.scss

.title-text {
    color: $global-colors-Blue-100;
    text: $global-text-t1;
}

• 스타일시트 파싱 결과물

// styles.css

.title-text {
    color: #000011;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.5;
}

로컬에서 테스트할 때

// 웹팩 CLI를 전역으로 설치한 후
npm install -g webpack webpack-cli

// 프로젝트 루트에서 실행합니다.
webpack -w