编译型 JSS 框架 Linaria 的原理

Linaria 是一个近似于 styled-components 和 emotion JSS 框架，不同点在于， styled-components 和 emotion 是一个 运行时 方案，而 Linaria 是一个 编译期 + 运行时 方案。

运行时的 JSS 方案必须内置一个 CSS 处理器，并且在运行时去解析，分别增加了体积和性能上的成本。 Linaria 创造性的在编译期将相应的 JSS 解析出来，抽出解压到一个 CSS 文件中，并将相应的 JSS 代码替换成一个指向某个 css 类名的字符串，避免了运行时方案的问题。

本文只做原理探讨，使用介绍相关请看 《Linaria 也许是现在 React 最佳的 JSS 方案》

总览

对于以下代码

import { css } from '@linaria/core'

let size = 5;
size = (function() { return 3; }());

const headerClassName = css`
  text-align: center;
  color: #fff;
`;

const headerTitleClassName = css`
  .${headerClassName} {
    font-size: ${size}px;
  }
`;

console.log(headerClassName, headerTitleClassName);

Linaria 会将其编译为

// index.bundle.js
var size = 5;

size = function () {
  return 3;
}();

var headerClassName = "hf71da1";
var headerTitleClassName = "hi1y09m";
console.log(headerClassName, headerTitleClassName);

/* index.css */
.hf71da1{