조명 요소 프로젝트에서 tailwind, postcss 및 stylelint 사용

나는 조명 구성 요소와 함께 tailwind를 사용하는 방법에 대해 썼습니다. 이러한 솔루션은 여전히 ​​작동하지만 이 게시물에서는 일반적으로 stylelint 및 postcs에도 사용할 수 있는 더 간단한 방법에 대해 설명합니다.

새로운 것은 무엇입니까?

postcss 8.3 현재 postcss는 여러 스타일시트를 포함하는 문서를 처리하는 기본 방법을 가지고 있습니다.

과거에 플러그인은 JS 파일에 있는 모든 CSS로 구성된 하나의 거대한 스타일시트를 제작하여 이 제한을 해결했습니다.

게다가 stylelint 14은 별도의 stylelint-bound 플러그인이 필요하지 않고 사용자 정의 postcss 구문을 직접 사용하는 지원을 도입했습니다.

이것은 무엇을 의미 하는가?

이것은 과거의 모놀리식 플러그인(모든 css-in-js 유형을 처리하려고 시도함)이 아직 사용되지 않는 경우 곧 사용되지 않을 것이며 대신 프로젝트에서 파일을 읽기 위한 올바른 "구문"을 지정하기만 하면 됩니다. .

좋은 점은 postcss를 올바르게 구성하는 것만으로 tailwind과 같은 프레임워크를 직접 사용할 수 있다는 것입니다!

postcss-lit

이 새로운 기능을 사용하기 위해 postcss-lit 을 출시했습니다.

이것은 lit 구성 요소 내부의 CSS를 구문 분석하기 위해 postcss와 함께 사용할 수 있는 사용자 정의 구문 구현입니다.

조명과 함께 PostCSS 사용하기

가장 기본적인 설정은 다음을 사용하는 것입니다.

PostCSS CLI

postcss-lit

these instructions 다음과 같이 구성 파일을 생성하여 이 작업을 수행할 수 있습니다.

module.exports = {
  syntax: 'postcss-lit'
};

그런 다음 다음과 같이 postcss CLI를 사용하여 조명 구성 요소를 변환할 수 있습니다.

postcss -r src/my-element.js

이렇게 하면 요소의 CSS가 처리되고 동일한 파일에 다시 기록됩니다. 실제 세계에서는 소스 파일을 변경하는 대신 빌드 시 실행하고 싶을 것입니다.

조명이 있는 stylelint 사용

lit과 함께 postcss를 사용하는 것과 매우 유사하게 stylelint도 사용할 수 있습니다. these instructions 을 사용하여 다음과 같이 stylelint 구성 파일을 만들 수 있습니다.

{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-lit"
}

그런 다음 조명 구성 요소를 다음과 같이 린트할 수 있습니다.

stylelint src/my-element.js

lit과 함께 postcss 및 webpack 사용

webpack을 사용하는 경우 매우 쉽게 따라these instructions 다음과 같은 구성을 만들 수 있습니다.

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['postcss-loader'],
        exclude: /node_modules/
      }
    ]
  },
  output: {filename: 'bundle.js'}
};

이것은 JS 번들을 생성하기 전에 postcss를 통해 CSS 템플릿을 처리합니다. 간단합니다.

이제 번들에는 변환하도록 postcss를 구성한 모든 CSS가 포함됩니다.

순풍 사용

마찬가지로 postcs를 단독으로 사용할 때와 동일한 방식으로 모든 것을 설정하십시오. 그런 다음 these instructions 을 따라 다음과 같은 postcss 구성을 만듭니다.

module.exports = {
  syntax: 'postcss-lit',
  plugins: {
    tailwindcss: {}
  }
};

이제 tailwind에는 우리가 사용한 클래스를 감지하기 위해 스캔하려는 파일인 "컨텐츠"라는 개념이 있습니다. 우리의 경우 JS(또는 typescript)를 스캔하기를 원하지만 tailwind는 이러한 파일을 구문 분석하는 방법을 모릅니다.

이 문제를 해결하려면 다음과 같이 tailwind를 구성해야 합니다.

const {tailwindTransform} = require('postcss-lit');

module.exports = {
  content: {
    files: ['./src/**/*.js'],
    transform: {
      js: tailwindTransform
    }
  }
};

여기서 우리는 단순히 tailwind가 클래스 사용을 감지하기 전에 변환을 통해 콘텐츠 파일을 전달하도록 지시합니다.

내부적으로 스캔하기 전에 콘텐츠에서 CSS 템플릿을 제거할 수 있도록 이 작업을 수행해야 합니다. 그렇지 않으면 CSS 이름을 용도로 잘못 감지할 수 있습니다.

그런 다음 조명 구성 요소 내부에서 순풍을 사용할 수 있습니다.

class MyElement extends LitElement {
  static override styles = css`
    @tailwind base;
    @tailwind utilities;

    :host {
      display: block;
    }
  `;

  render() {
    return html`
      <h1 class="text-3xl">Hello!</h1>
    `;
  }
}

마무리

과거에는 이러한 종류의 설정이 모놀리식 패키지나 복잡한 솔루션으로 해결하기가 정말 어려웠습니다. postcss 구문을 있는 그대로 사용할 수 있으므로 stylelint에 customSyntax를 도입한 것이 좋습니다. 마찬가지로 postcss의 a Document 도입으로 JS 파일에서 여러 스타일시트를 구문 분석할 수 있습니다.

일부 사람들은 내가 왜 postcss-lit을 lit에만 국한시켰는지 묻습니다. 이것은 대부분 stylelint 및 postcss 작성자의 조언에 따른 것입니다. 그들은 거대한 "모든 것을 해결하는"패키지에서 벗어나고 싶어하기 때문입니다.

패키지도 매우 새롭기 때문에 피드백을 많이 주시면 감사하겠습니다.

이것을 테스트해 준 vaadin 팀과 IBM(대부분 abdonrd)에 감사드립니다.