Thư viện CSS in JS không cần chạy thời gian chạy.
Tính năng
- Viết CSS trong JS, nhưng với không có thời gian chạy , CSS được trích xuất thành các tệp CSS trong quá trình xây dựng
- Cú pháp CSS quen thuộc với khả năng lồng như Sass
- Sử dụng kiểu dáng dựa trên thuộc tính động với các kết nối React, sử dụng biến CSS phía sau
- Dễ dàng tìm nơi đã xác định kiểu dáng với CSS sourcemaps
- Kiểm tra CSS trong JS với stylelint
- Sử dụng JavaScript cho logic , không cần trình biên dịch CSS
- Tùy chọn sử dụng bất kỳ trình biên dịch CSS nào như Sass hoặc PostCSS
- Hỗ trợ kiểu dáng nguyên tử với
@linaria/atomic
Tại sao sử dụng Linaria
Learn how Airbnb improved both developer experience and web performance with Linaria
Cài đặt
npm install @linaria/core @linaria/react @linaria/babel-preset
hoặc
yarn add @linaria/core @linaria/react @linaria/babel-preset
Thiết lập
Hiện tại, Linaria hỗ trợ webpack và Rollup để trích xuất CSS trong quá trình xây dựng. Để cấu hình trình biên dịch của bạn, hãy kiểm tra các hướng dẫn sau:
- webpack
- esbuild
- Rollup
- Vite
- Svelte
Hoặc cấu hình Linaria với một trong những tích hợp sau:
- Preact
- Gatsby
Tùy chọn, thêm bộ cài đặt @linaria vào cấu hình Babel của bạn ở cuối danh sách cài đặt để tránh lỗi khi nhập các thành phần trong mã máy chủ hoặc kiểm thử của bạn:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@linaria"
]
}
Xem Cấu hình để tùy chỉnh cách Linaria xử lý tệp của bạn.
Cú pháp
Linaria có thể được sử dụng với bất kỳ khung công việc nào, với các trợ giúp bổ sung cho React. Cú pháp cơ bản trông như sau:
import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';
// Write your styles in `css` tag
const header = css`
text-transform: uppercase;
font-family: ${fonts.heading};
font-size: ${modularScale(2)};
${hiDPI(1.5)} {
font-size: ${modularScale(2.5)};
}
`;
// Then use it as a class name
<h1 className={header}>Hello world</h1>;
Bạn có thể sử dụng các biến và hàm đã nhập để thực hiện logic bên trong mã CSS. Chúng sẽ được đánh giá trong quá trình xây dựng.
Cảm ơn bạn!
Nếu bạn đang sử dụng React, bạn có thể sử dụng trợ giúp styled, giúp viết các thành phần React với kiểu dáng động dễ dàng với cú pháp tương tự styled-component:
import { styled } from '@linaria/react';
import { families, sizes } from './fonts';
// Write your styles in `styled` tag
const Title = styled.h1`
font-family: ${families.serif};
`;
const Container = styled.div`
font-size: ${sizes.medium}px;
color: ${props => props.color};
border: 1px solid red;
&:hover {
border-color: blue;
}
${Title} {
margin-bottom: 24px;
}
`;
// Then use the resulting component
<Container color="#333">
<Title>Hello world</Title>
</Container>;
Kiểu dáng động sẽ được áp dụng bằng cách sử dụng thuộc tính tùy chỉnh CSS (hay còn gọi là biến CSS) và không yêu cầu bất kỳ thời gian chạy nào.
Xem phần Cơ bản để biết thêm thông tin chi tiết về cú pháp.
Bản demo
Đóng góp
Chúng tôi trân trọng mọi hỗ trợ trong việc phát triển thư viện!
Xem tài liệu Đóng góp để kiểm tra cách bạn có thể chạy Linaria ở chế độ phát triển.
Sự cân nhắc
Không hỗ trợ IE11 khi sử dụng kiểu dáng động trong các thành phần với styled, vì nó sử dụng thuộc tính tùy chỉnh CSS
Kiểu dáng động không được hỗ trợ với thẻ css. Xem Kiểu dáng động với thẻ css để biết các phương pháp thay thế.
Các mô-đun được sử dụng trong các quy tắc CSS không thể có hiệu ứng phụ. Ví dụ:
import { css } from '@linaria/core';
import colors from './colors';
const title = css`
color: ${colors.text};
`;
Ở đây, không nên có hiệu ứng phụ trong tệp colors.js, hoặc bất kỳ tệp nào mà nó được nhập. Chúng tôi khuyến nghị di chuyển các trợ giúp và cấu hình chia sẻ vào các tệp không có hiệu ứng phụ.
Tương tác với các thư viện CSS-in-JS khác
Linaria có thể hoạt động cùng với các thư viện CSS-in-JS khác một cách dễ dàng. Tuy nhiên, nếu bạn muốn sử dụng các thành phần được tạo từ Linaria như các bộ chọn trong styled-components/emotion, bạn cần sử dụng @linaria/interop
Tiện ích mở rộng cho Trình soạn thảo
VSCode
- Làm nổi bật cú pháp – language-babel
- Tự động hoàn thiện – vscode-styled-components
- Kiểm tra lỗi – stylelint
Atom
- Làm nổi bật cú pháp và Tự động hoàn thiện – language-babel
Webstorm
- Làm nổi bật cú pháp & Tự động hoàn thiện – webstorm-styled-components
Sublime Text
Cảm ơn bạn!
* Làm nổi bật cú pháp và Tự động hoàn thiện – Naomi, JSCustom (tham khảo tài liệu về cách bật cú pháp Styled Component)
* Kiểm tra lỗi – SublimeLinter-stylelint, LSP Stylelint
Thư viện được Đề xuất
- gatsby-plugin-linaria – Tiện ích mở rộng Gatsby thiết lập cấu hình Babel và webpack cho Linaria.
- polished.js – Bộ công cụ nhẹ cho việc viết kiểu dáng trong JavaScript.
- craco-linaria – Tiện ích mở rộng Craco cho phép bạn sử dụng Linaria without ejecting từ một CRA.
Nguồn cảm hứng
Lời cảm ơn
Dự án này không thể thực hiện được nếu không có các thư viện sau hoặc những người đứng sau chúng.
Cảm ơn đặc biệt @kentcdodds với plugin babel của anh và @threepointone với những gợi ý và động viên của anh.
Sản phẩm được tạo ra với ❤️ tại Callstack
Linaria là dự án mã nguồn mở và sẽ luôn miễn phí để sử dụng. Nếu bạn nghĩ nó thú vị, hãy cho nó một ngôi sao 🌟. Callstack là một nhóm những người đam mê React và React Native, liên hệ chúng tôi qua địa chỉ hello@callstack.com nếu bạn cần bất kỳ sự trợ giúp nào về chúng hoặc chỉ muốn chào hỏi!
Thích dự án này? ⚛️ Join the team là người làm những điều tuyệt vời cho khách hàng và đẩy mạnh mã nguồn mở React Native! 🔥
Dự án này tuân theo thông số kỹ thuật all-contributors. Mọi đóng góp đều được hoan nghênh!
Thông tin tải về:
Tác giả: callstack
Nguồn: https://github.com/callstack/linaria
Giấy phép: MIT license
Cảm ơn bạn!
