Đào sâu PostCSS: Tạo Plugin cho riêng bạn

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Vì tôi chắc chắn rằng bạn đã tập hợp tốt và thực sự vào thời điểm này, điều làm cho PostCSS trở nên tuyệt vời là hệ sinh thái plugin thịnh vượng của nó. Và một lý do rất lớn có rất nhiều plugin tuyệt vời, với nhiều sắp ra, tất cả thời gian, là PostCSS làm cho việc tạo ra plugin của riêng bạn để truy cập cho bất kỳ ai có kinh nghiệm với JavaScript.

Bạn không cần sự cho phép đặc biệt để tạo plugin PostCSS; nếu bạn muốn làm một, bạn chỉ cần đi ngay phía trước và làm cho nó. Thông qua sự tự do này, bạn có khả năng biến các quy trình phát triển CSS của mình thành bất kỳ thứ gì bạn muốn, không kể đến cơ hội chia sẻ công việc của bạn với các thành viên khác của cộng đồng PostCSS đang phát triển nhanh chóng.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo một plugin cơ bản của riêng mình cho PostCSS. Chúng tôi sẽ không đi quá nhiều vào API plugin và chúng tôi sẽ không sử dụng bất kỳ mã hóa siêu cứng nào. Bản thân tôi là một nhà phát triển front-end, và các kỹ năng JavaScript của tôi ở cấp độ mà bạn mong đợi đối với một người front-end, nhưng điều đó không ngăn tôi tạo plugin PostCSS đầu tiên chỉ trong vài giờ.

Theo dõi và tự mình xem cách phát triển plugin PostCSS có thể tiếp cận được như thế nào!

Những gì chúng ta sẽ xây dựng

Chúng tôi sẽ tạo plugin cho phép dễ dàng chèn ngăn xếp phông chữ vào khai báo phông chữ của gia đình thông qua cú pháp sau:

1	h1 {
2	font-family: "Open Sans", fontstack("Arial");
3	}

Sau khi biên dịch, mã trên sẽ chuyển thành:

1	h1 {
2	font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
3	}

Thiết lập một dự án để làm việc bên trong

Mặc dù bạn đang tạo plugin của riêng mình, bạn vẫn cần bắt đầu bằng cách tạo dự án Gulp hoặc Grunt trống. Bạn sẽ tải plugin của mình vào dự án này giống như cách bạn đã sử dụng các plugin của người khác trong suốt loạt bài này.

Bạn có thể đọc về cách thiết lập các dự án Gulp hoặc Grunt cho PostCSS trong các hướng dẫn trước:

Tuy nhiên, nếu bạn không muốn thiết lập dự án của mình theo cách thủ công, bạn có thể tải xuống các tệp nguồn được đính kèm với hướng dẫn này và trích xuất dự án khởi tạo Gulp hoặc Grunt được cung cấp vào thư mục dự án trống. Sau đó, với dấu nhắc lệnh hoặc thiết bị đầu cuối chỉ vào thư mục, hãy chạy lệnh npm install.

Tạo một Shell Plugin cơ bản

Tạo một thư mục trong “node_modules” có tên “postcss-myplugin”. Thông thường, bạn nên sử dụng tiền tố sau để làm cho plugin của bạn rõ ràng là dành cho PostCSS.

Tất cả các plugin PostCSS là các mô-đun nút, vì vậy chúng tôi sẽ cần phải biến thư mục mới của bạn thành một. Mở một dấu nhắc lệnh / terminal, chỉ vào thư mục vừa tạo và chạy npm init. Điều này sẽ thực hiện thiết lập cơ bản của một mô-đun nút, vì vậy chỉ cần làm theo các lời nhắc đến trong thiết bị đầu cuối của bạn, để lại trường “điểm vào” là “index.js” mặc định.

Khi điều này được thực hiện, với thiết bị đầu cuối của bạn vẫn chỉ vào thư mục, hãy chạy lệnh npm install postcss --save. Điều này sẽ cài đặt PostCSS như là một phụ thuộc cho mô-đun này, một cái gì đó tất cả các plugin PostCSS cần phải làm.

Tạo tệp có tên “index.js” trong thư mục “postcss-myplugin”. Thêm mã này để tải trong mô-đun postcs chính:

1	var postcss = require('postcss');

Sau đó, bên dưới nó thêm trình bao bọc cơ bản này sẽ bao quanh mã xử lý của plugin của chúng tôi:

var postcss = require('postcss');

module.exports = postcss.plugin('myplugin', function myplugin(options) {

    return function (css) {

  	options = options || {};
        
        // Processing code will be added here

	}

});

Tải Plugin mới của bạn

Bây giờ chúng tôi đã sẵn sàng tải plugin mới được tạo vào dự án của bạn. Nó sẽ không làm bất cứ điều gì, nhưng chúng tôi chỉ muốn thiết lập các thiết lập cần thiết.

Tải Plugin thông qua Gulp

Nếu bạn đang sử dụng Gulp, hãy thêm biến này dưới biến đã có trong tệp:

1	var myplugin = require('postcss-myplugin');

Bây giờ thêm tên biến mới vào mảng bộ vi xử lý của bạn:

1	var processors = [
2	myplugin
3	];

Thực hiện kiểm tra nhanh rằng mọi thứ đang hoạt động bằng cách chạy lệnh gulp css và kiểm tra xem “style.css” mới tệp đã xuất hiện trong thư mục "dest" của dự án của bạn.

Tải Plugin thông qua Grunt

Nếu bạn đang sử dụng Grunt, hãy cập nhật đối tượng bộ xử lý, được lồng trong đối tượng tùy chọn, như sau:

1	processors: [
2	require('postcss-myplugin')()
3	]

Thực hiện một bài kiểm tra nhanh rằng mọi thứ đang hoạt động bằng cách chạy lệnh postcss của lệnh grunt và kiểm tra xem “style.css” mới tệp đã xuất hiện trong thư mục "dest" của dự án của bạn.

Thêm chức năng Plugin

Thêm CSS thử nghiệm

Trước khi chúng tôi bắt đầu thêm mã xử lý vào plugin của chúng tôi, chúng tôi sẽ thêm một số mã thử nghiệm vào biểu định kiểu mà plugin có thể hoạt động.

Vào “src / style.css” của bạn tệp thêm CSS này:

1	h1 {
2	font-family: "Open Sans", fontstack("Arial");
3	}

Ngay bây giờ, bởi vì plugin của chúng tôi chưa thực hiện bất kỳ điều gì, nếu bạn biên dịch CSS, bạn sẽ chỉ thấy chính xác cùng một mã được sao chép thẳng vào "style.css" của thư mục "dest" của bạn tập tin.

Lặp lại các quy tắc và tuyên bố

Bây giờ chúng tôi muốn bắt đầu quét CSS của tập tin của chúng tôi để chúng tôi có thể tìm thấy bất kỳ trường hợp của fontstack () và xử lý chúng. Để bắt đầu, hãy thêm mã sau đây sau tùy chọn = tùy chọn || {}; hàng:

    	css.walkRules(function (rule) {

			rule.walkDecls(function (decl, i) {



			});

		});

Sử dụng walkRules () trong dòng đầu tiên lặp đi lặp lại qua mọi quy tắc trong CSS của bạn; quy tắc về cơ bản là bộ chọn của bạn và các kiểu bạn đã đặt giữa các dấu ngoặc nhọn. Trong CSS thử nghiệm của chúng tôi, quy tắc sẽ là:

1	h1 {
2	font-family: "Open Sans", fontstack("Arial");
3	}

Sau đó, bên trong mỗi quy tắc, walkDecls () lặp đi lặp lại thông qua mỗi khai báo; một tuyên bố về cơ bản là mỗi dòng trong phong cách. Trong CSS ở trên, một tuyên bố sẽ là:

1	font-family: "Open Sans", fontstack("Arial");

Kiểm tra nếu fontstack () Cú pháp được sử dụng

Khi chúng ta lặp qua từng khai báo bằng cách sử dụng mã mà chúng ta vừa thêm vào, khai báo hiện tại được biểu thị bằng cách khai báo, cho phép chúng ta truy cập vào cả thuộc tính của tờ khai và giá trị của nó thông qua decl.prop và decl.value tương ứng.

Với ví dụ CSS của chúng tôi, decl.prop sẽ cung cấp cho chúng tôi font-family và decl.value sẽ cho chúng ta "Open Sans", fontstack ("Arial").

Chúng tôi muốn kiểm tra mỗi decl.value trong stylesheet của chúng tôi để xem nó có chứa fontstack chuỗi (. Nếu có, chúng tôi biết ai đó đang cố gắng sử dụng plugin của chúng tôi để thêm chồng phông chữ vào CSS của họ.

Bên trong vòng lặp walkDecl (), thêm:

    			var value = decl.value;

				if (value.indexOf( 'fontstack(' ) !== -1) {

					console.log("found fontstack");

				}

Trước tiên, chúng tôi đang lấy decl.value và lưu trữ nó trong giá trị biến. Mọi thay đổi đối với decl.value sẽ được gửi vào biểu định kiểu đã biên dịch; chúng tôi lưu trữ nội dung của nó trong giá trị biến để chúng tôi có thể gây rối với nó.

Sau đó, chúng tôi đang sử dụng phương thức indexOf () để tìm kiếm biến giá trị mới của chúng ta cho chuỗi fontstack (. Nếu được tìm thấy, chúng tôi đang ghi nhật ký “tìm thấy fontstack” vào bảng điều khiển để chúng tôi có thể kiểm tra xem mọi thứ có đang hoạt động chưa.

Chạy gulp css hoặc postss grunt và bạn sẽ thấy đầu ra "tìm thấy fontstack" một lần trong dấu nhắc lệnh terminal / command của bạn.

Xác định một số Fontstacks

Bây giờ plugin của chúng tôi có thể định vị các thể hiện của fontstack () trong biểu định kiểu của chúng tôi, chúng tôi có thể sẵn sàng chuyển đổi cá thể đó thành một chồng phông chữ, tức là danh sách tên phông chữ. Nhưng trước khi chúng ta có thể làm điều đó, trước tiên chúng ta cần xác định các ngăn xếp phông chữ này.

Ở đầu tệp của bạn, dưới biến postcss hiện có, tạo biến có tên fontstacks_config. Chúng ta sẽ biến biến này thành một đối tượng chứa các cặp khóa-giá trị.

Đối với mỗi mục nhập trong đối tượng, khóa phải là phông chữ đầu tiên trong ngăn xếp phông chữ, ví dụ: 'Arial'. Đây sẽ là chuỗi mà người dùng chuyển để chỉ định chồng phông mà họ muốn sử dụng, ví dụ: fontstack ("Arial") hoặc fontstack ("Times New Roman").

Giá trị trong mỗi cặp phải là một chuỗi danh sách đầy đủ các phông chữ có trong ngăn xếp phông chữ, ví dụ: 'Arial,' Helvetica Neue ", Helvetica, sans-serif '.

Thêm hai mục vào đối tượng fontstacks_config của bạn, một cho 'Arial' và một cho 'Times New Roman', sử dụng các ngăn xếp phông chữ do CSS Font Stack cung cấp.

Biến fontstacks_config của bạn sẽ trông giống như sau:

// Font stacks from https://www.cssfontstack.com/
var fontstacks_config = {
    'Arial': 'Arial, "Helvetica Neue", Helvetica, sans-serif',
	'Times New Roman': 'TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif'
}

Kiểm tra xem Fontstack nào được yêu cầu

Điều đầu tiên chúng ta cần làm khi chúng ta tìm thấy một thể hiện của fontstack () đang được sử dụng là tìm ra font mà người dùng đã yêu cầu, tức là chuỗi họ đã đặt giữa các dấu ngoặc.

Ví dụ: nếu người dùng đã nhập phông chữ ("Arial"), chúng tôi sẽ muốn trích xuất chuỗi Arial. Lý do chúng ta muốn chuỗi này là nó sẽ cung cấp cho chúng ta một khóa mà chúng ta có thể sử dụng để tra cứu chồng phông chữ tương ứng từ đối tượng fontstacks_config của chúng ta.

Thêm mã này ngay bên trong câu lệnh if mà chúng ta đã thêm vào trước đó, thay thế console.log ("fontstack tìm thấy"); hàng:

// Get the name of the fontstack requested by matching the string inside the brackets of fontstack().

// Then replace any double or single quotes therein.

var fontstack_requested = value.match(/\(([^)]+)\)/)[1].replace(/["']/g, "");

Chúng tôi đang thực hiện hai bước ở đây để trích xuất tên của fontstack dưới dạng chuỗi.

Đầu tiên chúng ta sử dụng phương thức match () để tìm chuỗi bất kỳ nằm giữa các dấu ngoặc trong giá trị của chúng ta. Điều này sẽ cho chúng ta một chuỗi như "Arial" hoặc "Arial".

Chúng tôi chỉ muốn tên phông chữ, mà không có bất kỳ dấu ngoặc kép hoặc đơn, vì vậy chúng tôi sau đó sử dụng phương thức replace () để tách chúng khỏi chuỗi, để lại cho chúng ta một chuỗi không được trích dẫn như Arial.

Chuỗi này được lưu trữ trong biến fontstack_requested.

Tiêu đề Trường hợp Fontstack được yêu cầu

Chúng ta sẽ sử dụng biến fontstack_requested vừa được tạo để tìm kiếm một chồng phông chữ từ tùy chọn fontstack_config của chúng ta. Phần khó khăn là các khóa trong đối tượng này phân biệt chữ hoa chữ thường, vì vậy nếu chúng ta cố tìm kiếm mục Arial bằng phím arial nó sẽ thất bại.

Để giải quyết vấn đề này, chúng ta sẽ sử dụng chuỗi “Title Case”, vì vậy ví dụ: thời gian roman mới sẽ được chuyển thành Times New Roman. Chúng tôi sẽ thực hiện điều này thông qua chức năng tùy chỉnh ngắn.

Bên dưới biến fontstacks_config của bạn, hãy thêm hàm toTitleCase () này:

1	// Credit for this function to http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript/196991#196991
2	function toTitleCase(str) {
3	return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
4	}

Bây giờ chúng ta sẽ áp dụng hàm này cho biến fontstack_requested của chúng ta. Dưới dòng nơi bạn đã tạo biến fontstack_requested, hãy thêm mã này:

1	// Title case the words in the font name, just in case the user didn't do it themselves
2	fontstack_requested = toTitleCase(fontstack_requested);

Điều này chuyển biến fontstack_requested thông qua hàm toTitleCase () của chúng ta, cập nhật giá trị của nó.

Tra cứu Fontstack từ cấu hình

Bây giờ chúng ta đã đặt biến fonstack_requested của mình một cách chính xác, chúng ta có thể sử dụng nó để tra cứu chồng phông chữ tương ứng. Sau dòng bạn vừa thêm, chèn mã này:

1	// Lookup the requested fontstack in the fontstack_config object
2	var fontstack = fontstacks_config[fontstack_requested];

Điều này tìm thấy giá trị trong đối tượng fontstacks_config có một khóa khớp với chuỗi chứa trong biến fontstack_requested của chúng ta.

Ví dụ, nếu fontstack_requested chứa chuỗi Arial, mục nhập trong fontstacks_config với phím Arial sẽ được tìm thấy và giá trị 'Arial', Helvetica Neue ", Helvetica, sans-serif 'sẽ được trả lại.

Giá trị trả về này sau đó được lưu trữ trong biến fontstack.

Kiểm tra Fonts Set Trước khi fontstack ()

Bây giờ chúng tôi có chuỗi ngăn xếp phông chữ của chúng tôi được truy xuất và sẵn sàng để chèn vào CSS, nhưng chúng tôi vẫn còn một điều nữa cần làm. Bạn sẽ nhớ lại trong mã thử nghiệm của chúng tôi, chúng tôi đã bao gồm phông chữ "Open Sans" làm phông chữ ưa thích, với phông chữ hoạt động như dự phòng. Chúng tôi cũng cần lấy tên phông chữ này từ giá trị để nó có thể được thêm vào CSS mà chúng tôi chèn vào biểu định kiểu đã xử lý.

Bên dưới dòng biến fontstack, thêm mã này:

1	// Find and store any font names that might be already be in the value, before the fontstack() call
2	var first_font = value.substr(0, value.indexOf('fontstack('));

Mã này sử dụng phương thức substr () để tìm bất kỳ nội dung nào giữa đầu giá trị của chúng ta, (được biểu diễn bằng 0) và cá thể fontstack () của chúng ta (được định vị bằng cách sử dụng phương thức indexOf ()). Bất cứ nội dung nào được tìm thấy đều được lưu trữ trong biến first_font.

Ví dụ, trong giá trị mã thử nghiệm của chúng tôi là bằng "Open Sans", fontstack ("Arial"), do đó, biến first_font sẽ được thiết lập là "Open Sans",.

Tạo một giá trị mới

Bây giờ chúng tôi có tất cả các phần chúng tôi cần để tạo một giá trị mới để thay thế giá trị ban đầu của mã thử nghiệm là "Open Sans", fontstack ("Arial").

Sau mã cuối cùng bạn đã thêm, hãy chèn mã này:

1	// Create the new value for this rule by combining the first_font and fontstack variables
2	var new_value = first_font + fontstack;

Ở đây chúng tôi đang kết hợp các biến first_font và fontstack của chúng tôi vào một chuỗi duy nhất và lưu nó trong biến new_value.

Trong mã thử nghiệm của chúng tôi, điều này có nghĩa là kết hợp "Open Sans", và Arial, "Helvetica Neue", Helvetica, sans-serif.

Biến new_value của chúng tôi sau đó sẽ giữ chuỗi "Open Sans", "Arial", Helvetica Neue ", Helvetica, sans-serif '.

Điều này bây giờ cung cấp cho chúng tôi giá trị hoàn chỉnh mà chúng tôi muốn thêm vào biểu định kiểu đã xử lý để:

1	font-family: "Open Sans", fontstack("Arial");

... được chuyển thành:

1	font-family: "Open Sans", 'Arial, "Helvetica Neue", Helvetica, sans-serif';

Gửi giá trị mới Quay lại Biểu định kiểu

Bây giờ chúng ta có giá trị mới của chúng ta đã sẵn sàng để chèn vào phiếu định kiểu đã xử lý, tất cả những gì chúng ta phải làm là cập nhật decl.value. PostCSS sẽ xử lý phần còn lại, thêm giá trị mới vào CSS đã xử lý cho chúng tôi.

Thêm mã này sau dòng cuối cùng bạn đã thêm:

1	// Send the new value back into the stylesheet
2	decl.value = new_value;

Điều này đặt decl.value bằng với nội dung của biến new_value của chúng tôi.

Kiểm tra Plugin của bạn

Plugin của bạn giờ đã tốt. Cung cấp cho nó một whirl bằng cách biên soạn stylesheet của bạn với css gulp hoặc postss grunt (với thiết bị đầu cuối của bạn chỉ vào thư mục dự án của bạn, không phải thư mục plugin của bạn).

"Dest / style.css" của bạn tệp bây giờ sẽ hiển thị một phông chữ hoàn chỉnh:

1	h1 {
2	font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
3	}

(Tùy chọn) Thêm tùy chọn Fontstacks do người dùng định cấu hình

Bạn có thể muốn cho phép người dùng plugin của bạn đặt tùy chọn của riêng họ, giống như cách bạn đã đặt tùy chọn khi bạn đã sử dụng plugin PostCSS trong suốt loạt bài này.

Chúng tôi muốn người dùng có thể đặt tùy chọn phông chữ, thêm các ngăn xếp phông chữ bổ sung hoặc xác định lại ngăn xếp phông chữ hiện có, ví dụ:

1	fontstacks: {
2	'Extra Stack': '"Extra Stack", "Moar Fonts", Extra, serif',
3	'Arial': 'Arial, "Comic Sans"'
4	}

Lưu ý: bước này là tùy chọn. Nếu bạn muốn bạn có thể bỏ qua nó và plugin của bạn sẽ hoạt động hoàn toàn tốt, chỉ cần không có bất kỳ cấu hình bộ người dùng nào.

Chúng tôi đã có một phần quan trọng nhất trong việc bật tùy chọn đặt người dùng trong plugin của chúng tôi. Trong dòng mô-đun.exports của chúng tôi, bạn sẽ thấy một đối số tùy chọn đang được chuyển.

1	module.exports = postcss.plugin('myplugin', function (options) {

Chúng tôi sẽ nhận được bất kỳ tùy chọn người dùng nào mà người dùng đặt thông qua điều này.

Bạn cũng sẽ thấy chúng tôi có dòng:

1	options = options \|\| {};

Điều này sẽ kiểm tra xem tùy chọn có bất kỳ giá trị nào không và nếu không, hãy đặt nó thành một đối tượng trống. Điều này đảm bảo chúng tôi không gặp bất kỳ lỗi nào khi chúng tôi bắt đầu làm việc với các tùy chọn có thể đến từ việc không được xác định.

Để bắt đầu, chúng tôi sẽ cài đặt Underscore.js vào dự án của chúng tôi, vì chúng tôi sẽ sử dụng phương thức extend () tiện dụng của nó. Chạy lệnh này để cài đặt nó vào plugin bạn đang xây dựng:

1	npm install underscore --save

Bây giờ tải Underscore vào plugin của bạn bằng cách thêm một biến _ để yêu cầu nó, dưới biến postcs hiện tại của bạn:

1	var postcss = require('postcss');
2	var _ = require('underscore');

Tiếp theo những gì chúng ta sẽ làm là lấy đối tượng fontstacks_config mà chúng ta đã tạo bên trong plugin và "mở rộng" nó với bất kỳ ngăn xếp phông chữ nào mà người dùng đã thiết lập thông qua cấu hình tùy chọn của họ.

Thêm mã này trực tiếp dưới tùy chọn = tùy chọn || {}; hàng:

1	// Extend the default fontstacks_config option with any custom fontstacks set in the plugin's options
2	fontstacks_config = _.extend(fontstacks_config, options.fontstacks);

Tùy chọn fontstacks đã được thiết lập bởi người dùng được đại diện bởi options.fontstacks.

Bằng cách sử dụng phương thức extend () của Underscore, tất cả các ngăn xếp phông chữ trong options.fontstacks được thêm vào các font đã có trong fontstacks_config. Bất cứ nơi nào có một khóa phù hợp, giá trị từ options.fontstacks sẽ ghi đè lên một trong fontstacks_config. Điều này cho phép người dùng xác định lại bất kỳ ngăn xếp phông chữ hiện có nào.

Trong tệp Gulpfile hoặc Gruntfile của bạn, hãy đặt tùy chọn phông chữ và chuyển một chồng phông chữ mới cũng như xác định lại phông chữ hiện có:

/* Gulpfile */
var processors = [
    myplugin({
        fontstacks: {
			'Extra Stack': '"Extra Stack", "Moar Fonts", Extra, serif',
			'Arial': 'Arial, "Comic Sans"'
		}
  	})
];
  
/* Gruntfile */
 processors: [
    require('postcss-myplugin')({
        fontstacks: {
            'Extra Stack': '"Extra Stack", "Moar Fonts", Extra, serif',
			'Arial': 'Arial, "Comic Sans"'
		}
  	})
]

Bây giờ, hãy thêm một số CSS bổ sung vào “src / style.css” của bạn để chúng tôi có thể kiểm tra phông chữ mới mà chúng tôi vừa thêm thông qua các tùy chọn của chúng tôi:

1	h2 {
2	font-family: "Droid Sans", fontstack("Extra Stack");
3	}

Biên dịch lại CSS của bạn và bạn sẽ thấy rằng phông chữ 'Arial' của bạn bây giờ có đầu ra khác nhau, và ngăn xếp phông chữ 'Extra Stack' của bạn có đầu ra chính xác:

h1 {
    font-family: "Open Sans", Arial, "Comic Sans";
}

h2 {
	font-family: "Droid Sans", "Extra Stack", "Moar Fonts", Extra, serif;
}

Plugin đã hoàn thành của bạn

Đó là nó! Bạn đã hoàn tất. Bạn đã hoàn thành plugin PostCSS đầu tiên của mình.

Đây là toàn bộ điều trên GitHub nếu bạn cần phải so sánh mã của bạn với nó để tham khảo.

Tóm tắt

Bạn vừa tạo một plugin PostCSS toàn bộ và tôi hy vọng một số ý tưởng sẽ tập trung vào tâm trí của bạn về các plugin khác mà bạn muốn tạo. Có thể có một điều nhỏ nhặt luôn làm bạn khó chịu khi viết CSS, và có lẽ bây giờ bạn có thể đưa ra giải pháp của riêng bạn để loại bỏ nó cho tốt. Hoặc có thể có thêm điều gì đó mà bạn thực sự nghĩ rằng CSS phải ra khỏi hộp — tốt, bây giờ bạn có thể thêm nó vào cho chính mình!

Tóm lại những gì chúng tôi đã đề cập:

Bắt đầu phát triển một plugin mới bằng cách thiết lập dự án Gulp hoặc Grunt để làm việc.
Tạo một mô-đun nút mới bên trong dự án của bạn, sẽ trở thành plugin của bạn.
Tải plugin mới của bạn vào dự án của bạn.
Thêm một số kiểm tra CSS trong cú pháp bạn muốn plugin của bạn để sử dụng.
Sử dụng các phương thức từ API PostCSS để quét qua biểu định kiểu.
Xác định vị trí các cú pháp của plugin của bạn đang được sử dụng.
Viết JavaScript và sử dụng API PostCSS để thực hiện các phép biến đổi thích hợp (và / hoặc bổ sung) thành mã ban đầu và gửi nó vào CSS đã xử lý.

Đối với người dùng TypeScript

Là một phần của bản phát hành 5.0 của PostCSS, Jed Mao đã đóng góp một tập hợp tuyệt vời các định nghĩa TypeScript có thể giúp rất nhiều với việc phát triển plugin thông qua việc cung cấp tự động hoàn thành và tài liệu nội tuyến khi bạn nhập.

Nếu bạn thấy mình tham gia vào phát triển plugin PostCSS, đây thực sự là điều đáng xem xét khi kết hợp với quy trình làm việc của bạn. Bản thân tôi không phải là một bàn tay TypeScript dab, nhưng tôi sẽ nhảy vào mã hóa với nó anyway, gần như hoàn toàn vì vậy tôi có thể tận dụng chức năng này.

Nếu bạn muốn thử điều này, bạn không cần phải sử dụng Windows hoặc sử dụng Visual Studio, vì bạn có thể sử dụng mã Visual Studio Code miễn phí, mã nguồn mở, chạy trên Windows, Mac và Linux và được xây dựng trên Electron , cùng một trình bao hỗ trợ Atom Editor.

Để biết ví dụ về cách kết hợp các định nghĩa TypeScript này vào dự án của bạn, hãy xem plugin postcss-font-pack. Ngã ba nó và có một vở kịch trong Visual Studio Code để xem cách tự động hoàn thành và tài liệu nội tuyến hoạt động như thế nào.

PostCSS Deep Dive: Đóng gói

Cảm ơn rất nhiều vì đã theo dõi loạt bài DeepCSS Deep Dive này. Tôi hy vọng bạn thích đọc nó nhiều như tôi rất thích tạo ra nó! Quan trọng hơn, tôi hy vọng bạn có một ý tưởng đầy đủ về cách bạn có thể đưa PostCSS hoạt động trong cuộc sống phát triển web hàng ngày của bạn.

PostCSS thực sự là một bổ sung mới đáng kinh ngạc cho thế giới front-end, như cách nó tạo điều kiện cho các plugin mở ra các cánh cửa cho các khả năng mà chúng ta chưa bao giờ có trước đây trong phát triển CSS. Phạm vi các plugin hiện có sẵn đã đủ để định hình lại hoàn toàn quy trình công việc hàng ngày của một người và đó chỉ là những gì đã được tạo trong không gian vài năm.

Tôi cho rằng PostCSS vẫn chưa đạt đến đỉnh điểm, và vì nó bắt đầu là thứ mà phần lớn các nhà phát triển CSS ít nhất biết, nếu không thề, chúng ta sẽ thấy nó thực sự đi vào bước tiến của nó. Và với nhiều nhà phát triển front-end khác đang lên tàu, chúng tôi sẽ thấy nhiều đóng góp hơn cho hệ sinh thái plugin, thêm plugin mới và giúp xây dựng các plugin hiện có.

Với những plugin được tự do để phục vụ cho bất kỳ loại chuyển đổi CSS nào mà một nhà phát triển có thể mơ ước, tương lai của PostCSS thực sự rất hấp dẫn. Tôi mong muốn được là một phần của nó, và hy vọng bạn sẽ đi cùng cho đi xe quá!