CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết blog CFSDN CSS trong JS Rookie: Vanilla-Extract này được tác giả sưu tầm và biên soạn. Nếu các bạn quan tâm tới bài viết này thì nhớ like nhé.

Lời nói đầu

Vào năm 2021, vanilla-extract đứng đầu danh sách hài lòng của css-in-js với tư cách là một con ngựa ô (mặc dù tỷ lệ sử dụng chỉ là 1%). Nó được khẳng định là một thư viện an toàn về loại và có khả năng tương thích cao cho các kịch bản TS. Ở Trung Quốc có rất ít cuộc thảo luận liên quan, và nó hơi hữu ích. Sau khi xem xét, nó có vẻ khá hữu ích.

giới thiệu

Tài liệu chính thức: https://vanilla-extract.style/documentation/.

Mở tài liệu trang web chính thức chiết xuất vani, trong đó đã liệt kê các ưu điểm của nó. Là một người thích các thành phần theo kiểu nếu tôi sử dụng css-in-js, những điểm chính tôi tập trung vào là:

• Tất cả các kiểu được tạo ra tại thời điểm xây dựng
• Kiểu an toàn thông qua CSSType.

Nói một cách thẳng thắn, hai điểm này không có thời gian chạy và hỗ trợ cho bản đánh máy.

Thời gian chạy bằng không: vanilla-extract sẽ biên dịch các giá trị mô-đun CSS và nội dung CSS trong quá trình biên dịch. Không cần đưa bất kỳ nội dung thời gian chạy nào vào môi trường sản xuất. Nói một cách tương đối, tốc độ chạy cao hơn và kích thước sản phẩm nhỏ hơn. .

bản đánh máy: hỗ trợ kiểm tra loại bản ghi, an toàn CSS,

Hiện tại, hầu hết các sản phẩm cạnh tranh có liên quan trong ngành, chẳng hạn như các thành phần theo kiểu, là các giải pháp thời gian chạy và được viết dựa trên các mẫu thẻ. Chúng chủ yếu được phân tích cú pháp dựa trên trình phân tích cú pháp stylis. Nếu đạo cụ được cập nhật thường xuyên, một số lượng lớn các thẻ kiểu. sẽ được chèn vào đầu.

Cài đặt

Trong môi trường Webpack, bạn cần cài đặt các plugin @vanilla-extract/css và @vanilla-extract/webpack-plugin cùng lúc:

1. sợi len thêm vào @vanilla-extract/css @vanilla-extract/webpack-plugin 

Sau khi cài đặt hoàn tất, hãy sửa đổi cấu hình Webpack:

1. const { VanillaExtractPlugin } = yêu cầu('@vanilla-extract/webpack-plugin') 
2.  
3. module.exports = { 
4.   lối vào: './src/index.js', 
5.   // .... 
6.   plugin: [new VanillaExtractPlugin()] 
7. }; 

Như bạn có thể thấy ở đây, khi sử dụng vanilla-extract, chúng ta cần cài đặt hai thư viện:

• @vanilla-extract/css: Phát triển thư viện cốt lõi và phát triển phong cách kinh doanh dự án dựa trên thư viện này;
• @vanilla-extract/webpack-plugin: trình cắm webpack. Như đã đề cập trước đó, vanilla-extract là một thư viện không chạy, chủ yếu được xử lý thông qua plug-in này.
  • Bằng cách thêm các mục cấu hình webpack, hãy sử dụng @vanilla-extract/webpack-plugi/loader tùy chỉnh để xử lý các tệp hậu tố liên quan.
  • Trong nội bộ, thư viện eval được thực thi trước tiên trong quá trình biên dịch để thu được kết quả className nhằm tránh thực thi quy trình khi chạy;
  • Sau đó xóa thư viện @vanilla-extract/css để nó không ảnh hưởng đến kích thước gói js trong môi trường sản xuất;

API kiểu xây dựng

Ở đây chúng tôi sẽ chỉ đề cập đến một số API liên quan đến phong cách xây dựng cốt lõi của vanilla-extract. Đối với các API khác, bạn có thể truy cập trực tiếp vào trang web chính thức để xem chúng.

phong cách .

1. nhập khẩu { phong cách } từ '@vanilla-trích xuất/css'; 
2.  
3. xuất khẩu const parentClass = style({ 
4.   lý lịch: 'màu đỏ', 
5.   ':di chuột': { 
6.     lý lịch: 'màu xanh da trời', 
7.   }, 
8. }); 
9.  
10. xuất khẩu const childClass = style({ 
11.   bộ chọn: { 
12.     '&:nth-child(2n)': { 
13.       lý lịch: '#khám phá', 
14.     }, 
15.     [`${lớp cha mẹ} &`]: { 
16.       màu sắc: 'hồng', 
17.     }, 
18.   }, 
19. }); 
20. nhập { childClass, parentClass } từ './index.styles.css'; 
21.  
22. const Bản trình bày = () => ( 
23.   
     
24.     
    DEMO1
     
25.     
    DEMO2
     
26.     
    DEMO3
     
27.    
28. ); 
29.  
30. xuất khẩu mặc định Thử nghiệm; 

Tôi tin rằng bạn có thể hiểu cách sử dụng bản demo đơn giản này chỉ sau vài lần xem. Nhưng điều cần hiểu là để cải thiện khả năng bảo trì, "mỗi khối kiểu chỉ có thể nhắm mục tiêu đến một phần tử nhất định (hoặc phần tử sử dụng khối kiểu này)". Vì vậy, đối với các bộ chọn trong đoạn mã trên, "đích của nó phải là" **&** (nghĩa là phần tử của chính nó) chứ không phải các phần tử khác. Ví dụ: `${parentClass} &` thì được, nhưng `& div` thì không được phép. Tôi nghĩ kiểu thiết kế này thiên về sự phân chia trách nhiệm hơn. Mỗi khối kiểu dáng nhắm đến một thành phần nhất định, vì vậy đối với dự án, khả năng duy trì kiểu này được cải thiện rất nhiều so với các css khác trong js (các thành phần theo kiểu). không dễ xảy ra vấn đề dư thừa về phong cách. Đối với một số trường hợp đặc biệt, ví dụ: khi viết styled-comComponents, chúng ta sẽ sử dụng nó để bọc các thành phần arco (hoặc các thành phần khác), sau đó ghi đè hoặc thêm kiểu phần tử mới cho chúng.

1. const StyledSelect = được tạo kiểu(Lựa chọn)` 
2.     div { 
3.         màu sắc: đỏ; 
4.     } 
5. ` 

Sau đó, nó không thể được thực hiện trực tiếp trong khối kiểu trích xuất vanilla, bởi vì mỗi khối kiểu được nhắm mục tiêu vào một phần tử nhất định và bạn không thể điều chỉnh trực tiếp kiểu của các phần tử anh chị em và các phần tử phụ của nó thông qua khối kiểu. Tuy nhiên, trong trường hợp này, có thể phát triển bằng API GlobalStyle khác.

Kiểu toàn cầu 。

Đúng như tên gọi, đây là API kiểu toàn cầu. Tuy nhiên, vì chính mô-đun CSS chiết xuất vanilla được sử dụng nên mỗi className là duy nhất, do đó, việc sử dụng GlobalStyle để điều chỉnh kiểu và ghi đè các phần tử con của nó là hoàn toàn khả thi.

1. nhập { style, globalStyle } từ '@vanilla-trích xuất/css'; 
2.  
3. xuất khẩu const parentClass = style({}); 
4.  
5. globalStyle(`${parentClass} > div`, { 
6.   màu sắc: 'màu đỏ' 
7. }); 
8.  
9. const Bản trình bày = () => ( 
10.     
     
11.         <Lựa chọn/> 
12.      
13. ) 

Ưu điểm so với Styled-Components

• Thời gian chạy bằng không;
• Phát triển phong cách áp dụng các loại an toàn Typescript;
• Tách biệt trách nhiệm thiết kế kiểu dáng (Tất nhiên, các thành phần theo kiểu cũng có thể thực hiện được, nhưng nó hoàn toàn phụ thuộc vào nhà phát triển)
• ...

Tóm tắt

Theo những gì tôi biết, vanilla-extract nhìn chung là một CSS tốt trong thư viện JS. Mặc dù tỷ lệ sử dụng hiện tại tương đối thấp, nhưng các dự án nền tảng của nhà sản xuất tiếp theo sẽ cân nhắc sử dụng nó ở một số nơi để xem hiệu quả (xét cho cùng, nó sẽ không tăng lên). kích thước của JS).

Liên kết gốc: https://mp.weixin.qq.com/s/ysjP4JoCDOIXLSXIf3WRpg.

Cuối cùng, bài viết này về CSS trong JS tân binh: Phân tích ngắn gọn về Vanilla-Extract kết thúc ở đây. Nếu bạn muốn biết thêm về CSS trong JS tân binh: Phân tích ngắn gọn về Vanilla-Extract, vui lòng tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt qua các bài viết liên quan, tôi hy vọng vậy. bạn sẽ ủng hộ blog của tôi trong tương lai! .