革命性CSS-in-JS解决方案：Compiled完全指南与10个高效使用技巧

【免费下载链接】compiled A familiar and performant compile time CSS-in-JS library for React. 项目地址: https://gitcode.com/gh_mirrors/co/compiled

Compiled 是一款革新性的 CSS-in-JS 库，专为 React 开发者打造，通过编译时处理实现卓越性能与开发体验的完美平衡。作为熟悉且高效的编译时 CSS-in-JS 解决方案，它彻底改变了传统样式开发模式，让你在享受 CSS-in-JS 灵活性的同时，获得接近原生 CSS 的性能表现。

为什么选择 Compiled？三大核心优势解析

编译时优化：告别运行时性能损耗 ⚡️

Compiled 最突出的优势在于其独特的编译时处理机制。与传统 CSS-in-JS 库在运行时动态生成样式不同，Compiled 在构建过程中就将样式代码转换为高度优化的 CSS，有效避免了运行时的性能开销。这种处理方式使得应用加载速度更快，运行更流畅，尤其适合大型 React 应用。

相关实现可参考 packages/babel-plugin/ 目录下的源码，其中包含了 Compiled 核心的编译时转换逻辑。

零学习成本：无缝衔接现有开发习惯 🔄

对于熟悉 CSS-in-JS 的开发者来说，Compiled 几乎没有学习成本。它采用直观的 API 设计，支持类似 styled-components 和 Emotion 的语法，让你可以快速上手，无需大幅改变现有的开发习惯。无论是 styled 组件还是 css 标签模板，都能在 Compiled 中找到熟悉的身影。

强大工具链集成：全方位提升开发体验 🛠️

Compiled 提供了丰富的工具链支持，包括 packages/eslint-plugin/ 目录下的 ESLint 插件，帮助你在开发过程中捕获潜在问题，确保代码质量。同时，它还与主流构建工具如 Webpack、Vite 和 Parcel 深度集成，提供了 packages/webpack-loader/、packages/vite-plugin/ 和 packages/parcel-transformer/ 等专用加载器和插件，实现无缝的构建流程。

快速入门：5分钟上手 Compiled

第一步：安装核心依赖

要开始使用 Compiled，首先需要安装核心包。通过 npm 或 yarn 可以轻松完成安装：

npm install @compiled/react
# 或者
yarn add @compiled/react

第二步：配置构建工具

根据你使用的构建工具，选择相应的插件进行配置：

• Webpack 用户：安装 @compiled/webpack-loader
• Vite 用户：安装 @compiled/vite-plugin
• Parcel 用户：安装 @compiled/parcel-transformer

详细配置指南可参考各插件目录下的 README.md 文件。

第三步：编写第一个 Compiled 组件

安装配置完成后，就可以开始编写样式组件了。以下是一个简单的示例：

import { styled } from '@compiled/react';

const Button = styled.button`
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

function App() {
  return <Button>点击我</Button>;
}

10个高效使用技巧：释放 Compiled 全部潜力

1. 利用 CSS Prop 实现内联样式

Compiled 支持 css prop，让你可以直接在 JSX 元素上应用样式，代码更加简洁：

import { css } from '@compiled/react';

function Title() {
  return (
    <h1
      css={{
        fontSize: '24px',
        color: '#333',
        fontWeight: 'bold',
      }}
    >
      欢迎使用 Compiled
    </h1>
  );
}

2. 使用 CSS Map 管理主题变量 🎨

通过 CSS Map 功能，你可以集中管理主题变量，实现一致的样式风格：

import { css, CSSMap } from '@compiled/react';

const theme: CSSMap = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  },
};

const Card = styled.div`
  padding: ${theme.spacing.medium};
  border: 1px solid ${theme.colors.secondary};
  border-radius: 4px;
`;

3. 掌握条件样式的优雅实现

Compiled 提供了灵活的条件样式解决方案，让你轻松处理各种状态：

const Button = styled.button<{ variant: 'primary' | 'secondary' }>`
  padding: 12px 24px;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  ${({ variant }) =>
    variant === 'primary' &&
    css`
      background-color: #007bff;
      color: white;
    `}

  ${({ variant }) =>
    variant === 'secondary' &&
    css`
      background-color: #6c757d;
      color: white;
    `}
`;

4. 利用 keyframes 创建流畅动画

Compiled 内置对 keyframes 的支持，让你轻松创建复杂动画效果：

import { keyframes, styled } from '@compiled/react';

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const FadeInBox = styled.div`
  animation: ${fadeIn} 0.5s ease-in-out;
  padding: 20px;
  background-color: lightblue;
`;

5. 组件组合与样式继承

Compiled 允许你轻松组合组件并继承样式，实现代码复用：

const BaseButton = styled.button`
  padding: 12px 24px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

const PrimaryButton = styled(BaseButton)`
  background-color: #007bff;
  color: white;
`;

const SecondaryButton = styled(BaseButton)`
  background-color: #6c757d;
  color: white;
`;

6. 使用媒体查询实现响应式设计 📱💻

Compiled 支持标准的 CSS 媒体查询语法，让响应式设计变得简单：

const Container = styled.div`
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  @media (min-width: 768px) {
    padding: 0 24px;
  }

  @media (min-width: 1200px) {
    padding: 0;
  }
`;

7. 利用工具类提升开发效率

Compiled 提供了丰富的工具类，可以显著提升开发效率：

import { css, styled } from '@compiled/react';

const flexCenter = css`
  display: flex;
  align-items: center;
  justify-content: center;
`;

const CenteredBox = styled.div`
  ${flexCenter};
  height: 200px;
  background-color: lightgray;
`;

8. 掌握高级选择器的使用

Compiled 支持所有 CSS 选择器，让你可以编写复杂的样式规则：

const List = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;

  > li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    a {
      color: #007bff;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
`;

9. 利用 ESLint 插件保证代码质量

Compiled 提供了专门的 ESLint 插件 @compiled/eslint-plugin，帮助你在开发过程中捕获潜在问题：

// .eslintrc.js
module.exports = {
  plugins: ['@compiled'],
  rules: {
    '@compiled/jsx-pragma': 'error',
    '@compiled/no-css-prop-without-css-function': 'error',
  },
};

10. 深入理解编译时优化原理

了解 Compiled 的编译时优化原理，可以帮助你写出更高效的代码。Compiled 在构建过程中将 CSS-in-JS 代码转换为静态 CSS，并生成优化的类名。相关实现可以在 packages/babel-plugin/src/ 目录下找到。

常见问题解答：解决你使用 Compiled 时的疑惑

Compiled 与其他 CSS-in-JS 库有何区别？

Compiled 最大的特点是其编译时处理机制，这使得它在性能上优于许多运行时 CSS-in-JS 库。同时，它保持了与主流库相似的 API 设计，降低了迁移成本。

如何在现有项目中迁移到 Compiled？

Compiled 提供了 @compiled/codemods 工具，可以帮助你自动将现有项目从 styled-components 或 Emotion 迁移到 Compiled，大幅减少手动修改成本。

Compiled 支持哪些构建工具和框架？

Compiled 提供了对主流构建工具的支持，包括 Webpack、Vite 和 Parcel。同时，它也与 React 生态系统深度集成，可以与 Next.js、Create React App 等框架无缝配合。

总结：Compiled 赋能现代 React 样式开发

Compiled 作为一款革命性的 CSS-in-JS 解决方案，通过编译时优化、直观 API 和强大的工具链集成，为 React 开发者提供了卓越的样式开发体验。无论是构建小型应用还是大型项目，Compiled 都能帮助你写出更高效、更易维护的样式代码。

现在就开始探索 Compiled 的世界，体验下一代 CSS-in-JS 开发方式吧！通过 packages/ 目录下的源码，你可以深入了解 Compiled 的内部实现，甚至为这个开源项目贡献自己的力量。

要开始使用 Compiled，请克隆仓库：https://gitcode.com/gh_mirrors/co/compiled，然后参考项目中的示例和文档，快速将 Compiled 集成到你的项目中。

【免费下载链接】compiled A familiar and performant compile time CSS-in-JS library for React. 项目地址: https://gitcode.com/gh_mirrors/co/compiled