dsl-parser

디자이너 그룹에서 사용하는 DSL 토큰명을 값으로 치환해주는 웹팩 로더입니다.

Example

• DSL 토큰 예시

// 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;
}

Next.js 환경에서 사용할 때

yarn add -D @skp-wpteam/json-dsl-parser mini-css-extract-plugin css-loader sass-loader

패키지 배포

• NPM 패키지를 배포할 때는 반드시 package.json 의 version 정보를 이전 버전보다 높여줘야 합니다.

(sudo) npm publish