포스트 CSS

PostCSS
포스트 CSS
Philosopher’s stone, PostCSS logo
개발자안드레이 시트닉, 벤 브릭스, 보그단 차드킨
초기 릴리즈2013년 11월 4일, 8년 전(2013-11-04)
안정된 릴리스
8.3.5 / 2021년 6월 17일[1]; 13개월 전 (6월 17일)
저장소포스트시스
기입처자바스크립트
운영 체제크로스 플랫폼
이용가능기간:영어
유형CSS 개발 도구
면허증.MIT 라이선스[2]
웹 사이트postcss.org

PostCSS는 JavaScript 기반 플러그인을 사용하여 일상적인 CSS [3]작업을 자동화하는 소프트웨어 개발 도구입니다.그것은 안드레이 시트닉이 디자인했고, 이 아이디어는 Evil Martians를 [4]위한 그의 작품에서 비롯되었다.

기능

PostCSS 워크플로우

PostCSS는 CSS [5]툴을 개발하기 위한 프레임워크입니다.Sass 및 [6]LESS와 같은 템플릿 언어를 개발하는 데 사용할 수 있습니다.

PostCSS 코어는 [7]다음과 같이 구성됩니다.

  • 추상 구문 트리를 생성하는 CSS 파서
  • 트리를 구성하는 클래스 세트
  • 오브젝트 트리의 CSS 회선을 생성하는 CSS 제너레이터
  • CSS 변경용 코드 맵 생성기

기능은 플러그인을 통해 사용할 수 있습니다.플러그인은 오브젝트 트리에서 동작하는 작은 프로그램입니다.코어가 CSS 문자열을 오브젝트트리로 변환하면 플러그인은 트리를 분석 및 변경합니다.다음으로 PostCSS는 플러그인 변경 트리의 새로운 CSS 문자열을 생성합니다.

PostCSS와 그 플러그인은 JavaScript로 작성되어 npm을 통해 배포되며, 이들은 낮은 수준의 JavaScript 작업을 위한 API를 제공합니다.

Webpack,[8][9] Gulp, [10]Grunt 등의 빌드 시스템에서 PostCSS를 사용할 수 있는 공식 도구가 있습니다.콘솔 인터페이스도 사용할 [11]수 있습니다.Browserify 또는 Webpack을 사용하여 브라우저에서 [12]PostCSS를 열 수 있습니다.

구문

PostCSS를 사용하면 파서와 제너레이터를 변경할 수 있습니다.이[13] 경우 PostCSS를 사용하여 Less 소스 및[14] SCSS 소스를 조작할 수 있습니다.단, PostCSS 자체로는 Sass 또는 Less를 CSS로 컴파일할 수 없습니다.예를 들어 CSS 속성을 정렬하거나 코드에 오류가 없는지 확인하는 등의 방법으로 원본 파일을 변경합니다.PostCSS는 SugarSS를 [15]지원합니다.

플러그인

PostCSS 플러그인은 분석 및 속성 정렬에서 최소화에 이르기까지 다양한 CSS 처리 태스크를 수행합니다.

전체 플러그인 목록은 postcss.parts에서 찾을 수 있으며, 아래에 몇 가지 예가 나와 있습니다.

  • 브라우저 [16]프레픽스를 추가 및 클리어하기 위한 자동 리픽서.
  • CSS 셀렉터를 분리하여 코드를 정리하기 위한 CSS 모듈.웹 [17][18]팩의 일부로 제공됩니다.
  • stylelint를 사용하여 CSS 코드를 분석하여 스타일의 [19]일관성을 확인합니다.
  • stylefmt는 스타일린트 [20]설정에 따라 CSS 코드를 수정합니다.
  • 일부 Sas/Less 전처리 [21]기능을 수행하기 위한 PreCSS.
  • postcss-preset-env: 미완료 CSS 사양 [22]초안에서 기능을 에뮬레이트합니다.
  • cssnano는 공간을 없애고 코드를 [23]다시 작성하여 CSS 크기를 작게 만듭니다.
  • 설계가 오른쪽에서 왼쪽으로 쓰기에 적합하도록 CSS 코드를 변경하는 RTLCSS(아랍어와 히브리어).[24]
  • postcss-sprites, postcss-sprites 및 postcss-sprites를 사용하여 그래픽 [25][26][27]작업을 수행합니다.

역사

2012년 9월 [28]1일 TJ Holowaychuk에 의해 리워크 프로젝트 과정에서 모듈러형 CSS 처리 아이디어가 제안되었습니다.2013년 2월 28일,[29] TJ가 공개 석상에서 표명했습니다.

2013년 3월 14일, Andrey Sitnik이 Evil Martians를 위한 프런트 엔드 작업을 통해 리워크 기반 [30]플러그인인 Autoprefixer가 탄생했습니다.처음에 플러그인 이름은 rework-vendors였습니다.[31]

오토픽서가 성장함에 따라 Reback은 [32]더 이상 요구를 충족할 수 없었습니다.2013년 [33]9월 7일 Andrey Sitnik은 재작업 [34]아이디어를 기반으로 PostCSS 개발을 시작했습니다.

3개월 만에 첫 PostCSS 플러그인 grunt-pixrem이 [35]출시되었습니다.2013년 12월 22일 Autoprefixer 버전 1.0이 PostCSS로 [36]이행되었습니다.

PostCSS의 경우,[37] 주된 스타일의 초점은 연금술입니다.그 프로젝트 로고는 철학자의 [38]돌을 상징한다.메이저 및 마이너 PostCSS 버전은 Ars Goetia [39]악마의 이름을 따서 붙여집니다.예를 들어 버전 1.0.0은 Marquis Decarabia라고 불립니다.

포스트프로세서라는 용어가 [40]혼동을 일으켰습니다.PostCSS 팀은 이 용어를 사용하여 PostCSS가 템플릿 언어(프리프로세서)가 아닌 CSS 도구임을 나타냈습니다.그러나 일부 개발자들은 포스트 프로세서라는 용어가 브라우저 도구에 더 적합하다고 생각합니다(예를 들어 -prefix-free).[41]PrecSS 출시 이후 상황은 더욱 복잡해졌다.PostCSS 팀은 포스트 프로세서 대신 [42]프로세서라는 용어를 사용합니다.

레퍼런스

  1. ^ "Release 8.3.5". 17 June 2021. Retrieved 21 June 2021.
  2. ^ "postcss/LICENSE at main · postcss/postcss". GitHub. 2013-09-24. Retrieved 2021-03-19.
  3. ^ Bracey, Kezz (2015-09-23). "PostCSS Deep Dive: What You Need to Know". Envato Tuts+. Retrieved 2021-03-19.
  4. ^ Sitnik, Andrey (2014-12-13). "Add Evil Martians badge · postcss/postcss@513f9c1". GitHub. Retrieved 2021-03-19 – via GitHub.
  5. ^ uMaxmaxmaximus; Sitnik, Andrey (2016-08-04). "Why we need PostCSS if we have Webpack o_O? · Issue #861 · postcss/postcss". GitHub. Retrieved 2021-03-19 – via GitHub.
  6. ^ Bracey, Kezz (2015-10-21). "PostCSS Deep Dive: Preprocessing with "PreCSS"". GitHub. Retrieved 2021-03-19 – via GitHub.
  7. ^ Sitnik, Andrey (2015-06-24). Andrey Sitnik - PostCSS: The Future After Sass and LESS - YouTube. YouTube (Videotape). BocoupLLC. Retrieved 2021-03-19.
  8. ^ webpack-contrib (2014-10-03). "webpack-contrib/postcss-loader: PostCSS loader for webpack". GitHub. Retrieved 2021-03-19 – via GitHub.
  9. ^ Kuzmin, Andrey (2014-08-17). "postcss/gulp-postcss: Pipe CSS through PostCSS processors with a single parse". GitHub. Retrieved 2021-03-19 – via GitHub.
  10. ^ Nikitenko, Dmitry (2014-09-25). "nDmitry/grunt-postcss: Apply several post-processors to your CSS using PostCSS". GitHub. Retrieved 2021-03-19 – via GitHub.
  11. ^ Krzeminski, Damian; Zimmerman, Ryan; Ciniawsky, Michael (2015-03-11). "postcss/postcss-cli: CLI for postcss". GitHub. Retrieved 2021-03-19 – via GitHub.
  12. ^ Niemelä, Matias (2016-09-23). "Running postcss in the browser · Issue #830 · postcss/postcss". GitHub. Retrieved 2021-03-19 – via GitHub.
  13. ^ Powell, Andrew (2016-01-26). "shellscape/postcss-less: PostCSS Syntax for parsing LESS". GitHub. Retrieved 2021-03-19 – via GitHub.
  14. ^ Sitnik, Andrew (2015-08-09). "postcss/postcss-scss: SCSS parser for PostCSS". GitHub. Retrieved 2021-03-19 – via GitHub.
  15. ^ Sitnik, Andrew (2016-01-04). "postcss/sugarss: Indent-based CSS syntax for PostCSS". GitHub. Retrieved 2021-03-20 – via GitHub.
  16. ^ "postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use". GitHub. Retrieved 2021-03-19 – via GitHub.
  17. ^ "css-modules/css-modules: Documentation about css-modules". GitHub. Retrieved 2021-03-19 – via GitHub.
  18. ^ "css-loader/package.json at 5a003e00645d2ed0b3e759db06f58a08fbdd6745 · webpack-contrib/css-loader". GitHub. 2016-08-15. Retrieved 2021-03-19 – via GitHub.
  19. ^ "stylelint/stylelint". GitHub. Retrieved 2021-03-19 – via GitHub.
  20. ^ "morishitter/stylefmt: stylefmt is a tool that automatically formats stylesheets". GitHub. Retrieved 2021-03-19 – via GitHub.
  21. ^ "jonathantneal/precss: Use Sass-like markup in your CSS". GitHub. Retrieved 2021-03-19 – via GitHub.
  22. ^ "csstools/postcss-preset-env: Convert modern CSS into something browsers understand". GitHub. Retrieved 2021-03-19 – via GitHub.
  23. ^ "cssnano/cssnano: A modular minifier, built on top of the PostCSS ecosystem". GitHub. Retrieved 2021-03-19 – via GitHub.
  24. ^ "MohammadYounes/rtlcss: Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)". GitHub. Retrieved 2021-03-19 – via GitHub.
  25. ^ "borodean/postcss-assets: An asset manager for PostCSS". GitHub. Retrieved 2021-03-19 – via GitHub.
  26. ^ "TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax". GitHub. Retrieved 2021-03-19 – via GitHub.
  27. ^ "2createStudio/postcss-sprites: Generate sprites from stylesheets". GitHub. Retrieved 2021-03-19 – via GitHub.
  28. ^ Holowaychuk, TJ (2012-09-01). "Initial commit · reworkcss/rework@0a7be25". GitHub. Retrieved 2019-07-21 – via GitHub.
  29. ^ Holowaychuk, TJ (2013-02-28). "Modular CSS preprocessing with rework - TJ Holowaychuk". Tumblr. Archived from the original on 2014-09-18. Retrieved 2014-09-18.
  30. ^ Sitnik, Andrey (2013-03-14). "Initial commit · postcss/autoprefixer@d36346e". GitHub. Retrieved 2019-07-21 – via GitHub.
  31. ^ Sitnik, Andrey (2013-03-28). "Rename project to autoprefixer · postcss/autoprefixer@419a77d". GitHub. Retrieved 2019-07-21 – via GitHub.
  32. ^ Gallagher, Nicolas (2014-06-04). "Facilitate autoprefixer needs · Issue #20 · reworkcss/css". GitHub. Retrieved 2019-07-21 – via GitHub.
  33. ^ Sitnik, Andrey (2013-09-07). "Init project · postcss/postcss@2d96cea". GitHub. Retrieved 2019-07-21 – via GitHub.
  34. ^ Sitnik, Andrey (2015-09-07). "PostCSS Second Birthday — Martian Chronicles, Evil Martians' team blog". Martian Chronicles, Evil Martians’ team blog. Retrieved 2019-07-21.
  35. ^ Rob, Wierzbowski (2013-12-14). "Initial commit · robwierzbowski/grunt-pixrem@0f7b662". GitHub. Retrieved 2019-07-21 – via GitHub.
  36. ^ [Sitnik, Andrey (2013-12-21). "Release 1.0 "Plus ultra" · postcss/autoprefixer". GitHub. Retrieved 2019-07-20 – via GitHub. ]
  37. ^ Tisäter, Marcus (2015-12-31). "Mockup · Issue #4 · postcss/postcss.org". Retrieved 2019-07-21.
  38. ^ @PostCSS (2015-08-14). "PostCSS logo is a alchemy sign of philosopher's stone, which can transform metals to gold" (Tweet) – via Twitter.
  39. ^ @Autoprefixer (2013-12-17). "Every PostCSS version code name is taken from demons list in alchemy book "Lemegeton Clavicula Salomonis"" (Tweet) – via Twitter.
  40. ^ Marohnić, Matija (2014-09-07). "CSS pre- vs. post-processing Silvenon's Blog". Silvenon's Blog. Archived from the original on 2017-11-09. Retrieved 2017-11-09.
  41. ^ 장래 사양에 근거한 전처리의 문제
  42. ^ @PostCSS (2015-07-28). "It is time admit my mistakes. "Postprocessor" term was bad. PostCSS team stopped to use it" (Tweet) – via Twitter.

외부 링크