Hướng dẫn zero runtime css-in-js - không thời gian chạy css-in-js

CSS không có thời gian trong thư viện JS.

Đặc trưng

• Viết CSS trong JS, nhưng không có thời gian chạy, CSS được trích xuất vào các tệp CSS trong quá trình xây dựngzero runtime, CSS is extracted to CSS files during build
• CSS CSS quen thuộc với Sass như NestingCSS syntax with Sass like nesting
• Sử dụng các kiểu dựa trên prop động với các ràng buộc React, sử dụng các biến CSS phía sau hậu trườngdynamic prop based styles with the React bindings, uses CSS variables behind the scenes
• Dễ dàng tìm thấy nơi phong cách được xác định với CSS SourcemapsCSS sourcemaps
• Lint CSS của bạn trong JS với Stylelint in JS with stylelint
• Sử dụng JavaScript cho logic, không cần tiền xử lý CSSJavaScript for logic, no CSS preprocessor needed
• Tùy chọn sử dụng bất kỳ tiền xử lý CSS nào như SASS hoặc POSTCSSCSS preprocessor such as Sass or PostCSS
• Hỗ trợ các kiểu nguyên tử với @linaria/atomicatomic styles with @linaria/atomic

Tại sao sử dụng Linaria

Cài đặt

npm install @linaria/core @linaria/react @linaria/babel-preset

hoặc

yarn add @linaria/core @linaria/react @linaria/babel-preset

Thành lập

Linaria hiện hỗ trợ webpack và rollup để trích xuất CSS tại thời điểm xây dựng. Để định cấu hình Bundler của bạn, hãy kiểm tra các hướng dẫn sau:

• trang web
• Xây dựng
• Rollup
• Lừa đảo

Hoặc định cấu hình Linaria với một trong các tích hợp sau:

• Preact
• Gatsby

Tùy chọn, thêm cài đặt trước @linaria vào cấu hình Babel của bạn ở cuối danh sách cài đặt trước để tránh lỗi khi nhập các thành phần trong mã máy chủ hoặc kiểm tra 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ý các tệp của bạn.

Cú pháp

Linaria có thể được sử dụng với bất kỳ khung nào, với các trình trợ giúp bổ sung cho React. Cú pháp cơ bản trông như thế này:

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
<h2 className={header}>Hello world</h2>;

Bạn có thể sử dụng các biến và hàm đã nhập cho logic bên trong mã CSS. Họ sẽ được đánh giá tại thời điểm xây dựng.

Nếu bạn đang sử dụng React, bạn có thể sử dụng Trình trợ giúp styled, giúp dễ dàng viết các thành phần React với các kiểu động với thành phần kiểu dáng như cú pháp:

import { styled } from '@linaria/react';
import { families, sizes } from './fonts';

// Write your styles in `styled` tag
const Title = styled.h2`
  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>;

Các kiểu động sẽ được áp dụng bằng các thuộc tính tùy chỉnh CSS (còn gọi là các biến CSS) và không yêu cầu bất kỳ thời gian chạy nào.

Xem những điều cơ bản để biết thông tin chi tiết về cú pháp.

Thử nghiệm

Tài liệu

• Điều cơ bản
• API và cách sử dụng
  • API khách hàng
  • API máy chủ
• Cấu hình
• Kiểu động với thẻ css
• Theo chủ đề
• Khai thác CSS quan trọng
• Tích hợp Bundlers
  • trang web
  • Rollup
• Lừa đảo
• Hoặc định cấu hình Linaria với một trong các tích hợp sau:
• Preact
• Gatsby

Tùy chọn, thêm cài đặt trước @linaria vào cấu hình Babel của bạn ở cuối danh sách cài đặt trước để tránh lỗi khi nhập các thành phần trong mã máy chủ hoặc kiểm tra của bạn:

Xem Cấu hình để tùy chỉnh cách Linaria xử lý các tệp của bạn.

Cú pháp

Trade-offs

• Linaria có thể được sử dụng với bất kỳ khung nào, với các trình trợ giúp bổ sung cho React. Cú pháp cơ bản trông như thế này:

• Bạn có thể sử dụng các biến và hàm đã nhập cho logic bên trong mã CSS. Họ sẽ được đánh giá tại thời điểm xây dựng.

• Nếu bạn đang sử dụng React, bạn có thể sử dụng Trình trợ giúp styled, giúp dễ dàng viết các thành phần React với các kiểu động với thành phần kiểu dáng như cú pháp:

  import { css } from '@linaria/core';
  import colors from './colors';
  
  const title = css`
    color: ${colors.text};
  `;

  Các kiểu động sẽ được áp dụng bằng các thuộc tính tùy chỉnh CSS (còn gọi là các biến CSS) và không yêu cầu bất kỳ thời gian chạy nào.

Xem những điều cơ bản để biết thông tin chi tiết về cú pháp.

Thử nghiệm

Tài liệu

Điều cơ bản

• API và cách sử dụng
• API khách hàng
• API máy chủ

Cấu hình

• Kiểu động với thẻ css

Theo chủ đề

• Khai thác CSS quan trọng

Tích hợp Bundlers

• CLI
• Lớp lót

Làm thế nào nó hoạt động

• Thí dụ
• Đóng góp
• Chúng tôi đánh giá cao bất kỳ hỗ trợ trong phát triển thư viện!

Hãy xem các tài liệu đóng góp để kiểm tra cách bạn có thể chạy Linaria ở chế độ phát triển.

• Không hỗ trợ IE11 khi sử dụng các kiểu động trong các thành phần với styled, vì nó sử dụng các thuộc tính tùy chỉnh CSS
• styled-components
• css-literal-loader

Các kiểu động không được hỗ trợ với thẻ css. Xem các kiểu động với thẻ css cho 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ó tác dụng phụ. Ví dụ:

• Ở đây, không nên có tác dụng phụ trong tệp

  yarn add @linaria/core @linaria/react @linaria/babel-preset

  3 hoặc bất kỳ tệp nào nó nhập. Chúng tôi khuyên bạn nên di chuyển người trợ giúp và cấu hình chia sẻ sang các tệp mà không có bất kỳ tác dụng phụ nào.
• stylis.js

Khả năng tương tác với các thư viện CSS-in-JS khác

Linaria có thể làm việc cùng với các thư viện CSS-in-JS khác ngoài hộp. Tuy nhiên, nếu bạn muốn sử dụng các thành phần theo kiểu từ Linaria làm bộ chọn trong ____ 14/________ 15, bạn cần sử dụng @linaria/interop

Trình chỉnh sửa plugin

VSCODE

Syntax nổi bật - Ngôn ngữ -Babel

Tự động hoàn thành-Thành phần theo phong cách VSCode

Lớp lót - Stylelint

Dự án này tuân theo đặc điểm kỹ thuật của tất cả các nhà đóng góp. Đóng góp của bất kỳ loại chào mừng nào!