🫢Những gì bạn cần biết về PostCSS Full (ok)

https://postcss.org/docs/postcss-plugins

Tất cả các plugin có ở đây ví dụ xử lý font ...

https://postcss.org/docs/postcss-plugins

PostCSS là một xu hướng sử dụng CSS chuyển thể mới nổi lên từ năm 2016. Sự xuất hiện của nó đem lại khá nhiều tiện ích và được cộng đồng Lập trình Frontend khá ưa chuộng. Code Tốt xin giới thiệu những điểm nhấn và ứng dụng rộng rãi của PostCSS.

PostCSS là gì?

PostCSS ra đời vào cuối năm 2013 và được một số lượng lớn frontend developer ứng dụng vào các dự án của mình, bao gồm cả các công ty lớn như Google, Twitter, Shopify.

PostCSS là một công cụ dùng JavaScript để xử lý CSS

Định nghĩa từ trên Github cho rằng đây là một công cụ để chuyển đổi style với các plugin JS, chẳng hạn như tối ưu CSS, hỗ trợ biến và mixins, sư dụng các công nghệ CSS của tương lai,…

Nó chuyển CSS của bạn thành AST (abstract syntax tree)(cây cú pháp trừu tượng) Một điều tuyệt vời của công cụ này là nó mang tính modular rõ rệt.

Chính bởi cách tiếp cận này, có tới hơn 200 plugin có thể sử dụng cùng PostCSS.

Sau đây là một số plugin phổ biến sử dụng với PostCCC

Sử dụng PostCSS và gulp

Bắt đầu cài đặt

npm install --save-dev postcss gulp gulp-postcss
Hoặc yarn add -D postcss gulp gulp-postcss

Thêm các plugin của PostCSS

yarn add -D postcss-import autoprefixer cssnano

gulpfile.js

Step 1: Sử dụng postcss-nested

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var postcssNested = require('postcss-nested')
gulp.task('css', function () {
  var plugins = [postcssNested];
  return gulp.src('./src/*.css')
  .pipe(postcss(plugins))
  .pipe(gulp.dest('./dest'));
});

package.json

{
  "name": "postcss",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "gulp css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@types/autoprefixer": "^9.7.2",
    "autoprefixer": "^10.4.20",
    "cssnano": "^7.0.6",
    "gulp": "^5.0.0",
    "gulp-postcss": "^10.0.0",
    "postcss-import": "^16.1.0"
  },
  "dependencies": {
    "postcss": "^8.4.49"
  }
}

src\style.css

.phone {
  &_title {
    width: 500px;
    @media (max-width: 500px) {
      width: auto;
    }
    body.is_dark & {
      color: white;
    }
  }
  img {
    display: block;
  }
}

Kết quả:

dest\style.css

.phone_title {
  width: 500px;
}
@media (max-width: 500px) {
  .phone_title {
    width: auto;
  }
}
body.is_dark .phone_title {
  color: white;
}
.phone img {
  display: block;
}

Step 2: Sử dụng postcss-nested

src\style.css

@import "import";
.phone {
  &_title {
    width: 500px;
    @media (max-width: 500px) {
      width: auto;
    }
    body.is_dark & {
      color: white;
    }
  }
  img {
    display: block;
  }
}

src\import.css

body {
  color: red;
}

gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var postcssNested = require('postcss-nested');
var postcssImport = require('postcss-import');
gulp.task('css', function () {
  var plugins = [postcssNested,postcssImport];
  return gulp.src('./src/*.css')
  .pipe(postcss(plugins))
  .pipe(gulp.dest('./dest'));
});

Biến đổi nó thành 1 đầu vào thôi

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var postcssNested = require('postcss-nested');
var postcssImport = require('postcss-import');
gulp.task('css', function () {
  var plugins = [postcssNested,postcssImport];
  return gulp.src('./src/style.css')
  .pipe(postcss(plugins))
  .pipe(gulp.dest('./dest'));
});

dest\style.css

Kết quả như mong đợi

body {
  color: red;
}
.phone_title {
    width: 500px;
  }
@media (max-width: 500px) {
.phone_title {
      width: auto
  }
    }
body.is_dark .phone_title {
      color: white;
    }
.phone img {
    display: block;
  }

Step 3: Sử dụng Autoprefixer

gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var postcssNested = require('postcss-nested');
var postcssImport = require('postcss-import');
var autoPreFixer = require('autoprefixer');
gulp.task('css', function () {
  var plugins = [postcssNested,postcssImport,autoPreFixer];
  return gulp.src('./src/style.css')
  .pipe(postcss(plugins))
  .pipe(gulp.dest('./dest'));
});

src\style.css

.example {
  display: grid;
  user-select: none;
}

dest\style.css

Kết quả

.example {
  display: grid;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

Autoprefixer còn cho phép bạn có thể lựa chọn tiền tố cho từng trình duyệt cụ thể

package.json

"browserslist": ["last 1 version", "> 1%"]

Nó sẽ compile ra file

dest\style.css

.example {
  display: grid;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

package.json

"browserslist": ["last 1 chrome versions"]

Nó sẽ compile ra file

dest\style.css

.example {
  display: grid;
  user-select: none;
}

Các tham số tham khảo thêm ở đây: https://browsersl.ist

Step 4: Sử dụng postcss-preset-env

PostCSS Preset Env cho phép bạn chuyển đổi CSS hiện đại thành thứ mà hầu hết các trình duyệt có thể hiểu được, xác định các polyfill bạn cần dựa trên trình duyệt hoặc môi trường thời gian chạy mục tiêu.

npm: postcss-preset-envnpm

gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var postcssNested = require('postcss-nested');
var postcssImport = require('postcss-import');
var autoPreFixer = require('autoprefixer');
var postcssPresetEnv = require('postcss-preset-env');
gulp.task('css', function () {
  var plugins = [postcssNested,postcssImport,autoPreFixer,postcssPresetEnv];
  return gulp.src('./src/style.css')
  .pipe(postcss(plugins))
  .pipe(gulp.dest('./dest'));
});

src\style.css

@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:root {
  --mainColor: #12345678;
}
body {
  color: var(--mainColor);
  font-family: system-ui;
  overflow-wrap: break-word;
}
:--heading {
  background-image: image-set(url(img/heading.png) 1x, url(img/[e-mail]) 2x);
  @media (--viewport-medium) {
    margin-block: 0;
  }
}
a {
  color: rgb(0 0 100% / 90%);
  &:hover {
    color: rebeccapurple;
  }
}

Kết quả

dest\style.css

@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:root {
  --mainColor: rgba(18,52,86,0.47059);
}
body {
  color: rgba(18,52,86,0.47059);
  color: var(--mainColor);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  word-wrap: break-word;
}
:--heading {
  background-image: url(img/heading.png);
  background-image: -webkit-image-set(url(img/heading.png) 1x, url(img/[e-mail]) 2x);
  background-image: image-set(url(img/heading.png) 1x, url(img/[e-mail]) 2x);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
:--heading {
  background-image: url(img/[e-mail]);
}
}
@media (max-width: 50rem) {
:--heading {
    margin-top: 0;
    margin-bottom: 0
}
  }
a {
  color: rgba(0, 0, 255, 0.9);
}
a:hover {
    color: #639;
  }

Step 5: Sử dụng postcss-each

Sử dụng với vòng lặp

npm: postcss-eachnpm

src\style.css

@each $icon in foo, bar, baz {
  .icon-$(icon) {
    background: url('icons/$(icon).png');
  }
}

Kết quả:

dest\style.css

.icon-foo {
  background: url("icons/foo.png");
}
.icon-bar {
  background: url("icons/bar.png");
}
.icon-baz {
  background: url("icons/baz.png");
}

Step 6: cssnano

cssnano giúp minify (giảm dung lượng) file CSS đầu ra

gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var postcssNested = require('postcss-nested');
var postcssImport = require('postcss-import');
var autoPreFixer = require('autoprefixer');
var postcssPresetEnv = require('postcss-preset-env');
var postcssEach = require('postcss-each');
var cssNano = require('cssnano');
gulp.task('css', function () {
  var plugins = [postcssNested,postcssImport,autoPreFixer,postcssPresetEnv,postcssEach,cssNano];
  return gulp.src('./src/style.css')
  .pipe(postcss(plugins))
  .pipe(gulp.dest('./dest'));
});