css 전처리기 후처리기 (postprocessor, preprocessor)

개요

TailwindCSS를 사용하면서 PostCSS를 쓰게 되었는데 구체적으로 PostCSS란 무엇일까? 에 대해 공부하는 중 css 후처리기 입니다. 라는 문구를 보고 전처리기와 후처리기에 대해 정리하고자 쓴 글

 

CSS preprocessor vs CSS postprocessor

전처리기(preprocessor)?

가장 유명한 전처리기로써 sass라는 친구가 있는데 sass는 변수, 루프, 함수, 함수 재사용등등을 제공해 프로그래밍 언어와 유사한 CSS 개발을 가능하게 한다. 이제 sass는 전처리기로써 브라우저가 이해할 수 있게 css로 변환하는 컴파일러와 같은 역할을 한다. 

 

후처리기(postprocessor)?

PostCSS가 가장 유명한 후처리기인데 구체적으로 하는 기능은 일반 CSS가 이미 작성되어 있고 추가로 확장 하려는 경우 후처리기가 사용된다.여기서 확장은 여러가지 있을 수 있는데, 대표적으로 특정 CSS 속성에 대한 자동 추가 접두사(autoprefixer)등등이 있다. 

 

(sass와 postcss는 용도가 아예 틀리며 비교할 수 없고, 오히려 같이 쓰는 경우가 훨씬 많을듯 하다.)

 

출처: https://www.hongkiat.com/blog/css-post-processors-tips-resources/

PostCSS 간단하게 사용해 보자.

대표적인 autoprefixer를 사용해 보고자 한다. 

1. sass를 작성된 파일을 css로 변환
2. 변환된 css를 autoprefixer로 크로스 브라우저 대응을 위한 css 확장
3. css 파일을 js로 변환해서 번들링 결과에 같이 포함
4. 번들링된 js에서 css만 따로 빼서 app.css 파일로써 작성

webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 따로 css 파일을 빼는 loader
          MiniCssExtractPlugin.loader,
          // Translates CSS into CommonJS
          {
            loader: "css-loader",
          },
          // autoprefixer를 쓰기 위한 postcss loader
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  require("autoprefixer")({
                    flexbox: true,
                    grid: true,
                    overrideBrowserslist: ["last 3 versions", "> 1%"],
                  }),
                ],
              },
            },
          },
          // Compiles Sass to CSS
          {
            loader: "sass-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style/app.css",
    }),
  ],
};

결과

.container{background-color:aqua}.container ::-webkit-input-placeholder{color:gray}.container ::-moz-placeholder{color:gray}.container :-ms-input-placeholder{color:gray}.container ::-ms-input-placeholder{color:gray}.container ::placeholder{color:gray}.container__box-1{-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);margin-bottom:20px}
.test2{display:-ms-grid;display:grid;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #8bcc8e), color-stop(1, #a7f5ab))}

전체코드는

https://github.com/gmldnjs26/playground-webpack

GitHub - gmldnjs26/playground-webpack

PostCSS에 대해

전처리기와 후처리기의 대상 파일과 실행시점 결과 등등 많이 다르다. 라는 것에 대해 충분히 알게 되었다. 한번 더 짚고 넘어가고 싶은 포인트가 있는데 PostCSS는 더이상 단순히 css postprocessor가 아니다! 라는 것이다.. 위에서는 가장 대표적인 postprocessor라고 했지만, PostCSS 공식에 들어가 보면 "PostCSS is a tool for transforming styles with JS plugins." 와 같은 문구가 있다. 이는 PostCSS를 단순히 후처리기라고 부르기 보다는 JS 플러그인을 이용해 css(style)을 만들어 내는 도구라고 말하는게 더 맞다. 아직 내가 모르는 플러그인들이 너무 많고 활용하는 범위도 점점 넓어지고 있는 PostCSS라서 단순히 후처리기가 아니다 라는 것에 대해서는 아직 와 닿지는 않지만 앞으로 조금 더 단순히 사용만 한다! 라고 하기 보다는 관심을 갖고 보고자 한다.

https://github.com/postcss/autoprefixer

GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use