@actbase/css-to-react-native-transform 中文文档教程

Question

css-to-react-native-transform

一个轻量级的包装器 css-to-react-native 允许将有效的 CSS 转换为 React Native Stylesheet 对象。

为简单起见，它仅转换类选择器（例如 .myClass {}）和分组类选择器（例如 .myClass, .myOtherClass {}）。 如果需要，将来可以将更复杂的选择器的解析添加为功能标志后面的新功能（例如 transform(css, { parseAllSelectors: true })）。

示例：

.myClass {
  font-size: 18px;
  line-height: 24px;
  color: red;
}

.other {
  padding: 1rem;
}

转换为：

{
  myClass: {
    fontSize: 18,
    lineHeight: 24,
    color: "red"
  },
  other: {
    paddingBottom: 16,
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 16
  }
}

API

Transform CSS

import transform from "css-to-react-native-transform";
// or const transform = require("css-to-react-native-transform").default;

transform(`
  .foo {
    color: #f00;
  }
`);

↓ ↓ ↓ ↓ ↓ ↓

{
  foo: {
    color: "#f00";
  }
}

CSS Modules :export block

支持解析 CSS 模块 (ICSS) :export。 :export 通常用于从 CSS 或从 Sass/Less/Stylus 等预处理器共享变量到 Javascript：

transform(`
  .foo {
    color: #f00;
  }

  :export {
    myProp: #fff;
  }
`);

↓ ↓ ↓ ↓ ↓ ↓

{
  foo: {
    color: "#f00";
  },
  myProp: "#fff";
}

CSS Media Queries (experimental)

CSS 媒体查询的 API 和解析语法可能未来的变化

transform(
  `
  .container {
    background-color: #f00;
  }

  @media (orientation: landscape) {
    .container {
      background-color: #00f;
    }
  }
`,
  { parseMediaQueries: true },
);

↓ ↓ ↓ ↓ ↓ ↓

{
  __mediaQueries: {
    "@media (orientation: landscape)": [{
      expressions: [
        {
          feature: "orientation",
          modifier: undefined,
          value: "landscape",
        },
      ],
      inverse: false,
      type: "all",
    }],
  },
  container: {
    backgroundColor: "#f00",
  },
  "@media (orientation: landscape)": {
    container: {
      backgroundColor: "#00f",
    },
  },
}

你也可以指定一个平台作为媒体查询类型（“android”，“dom”，“ios”，“macos”，“web”，“windows”） ：

transform(
  `
  .container {
    background-color: #f00;
  }

  @media android and (orientation: landscape) {
    .container {
      background-color: #00f;
    }
  }
`,
  { parseMediaQueries: true },
);

CSS Viewport Units (experimental)

当使用 CSS Viewport Units 时，一个特殊的 __viewportUnits 特征标志被添加到结果中. 这样做是为了让将视口单位转换为像素的实现知道样式对象内部有视口单位，并且如果样式对象不包含任何视口单位，则可以避免做额外的工作。

transform(`.foo { font-size: 1vh; }`);

↓ ↓ ↓ ↓ ↓ ↓

{
   __viewportUnits: true,
  foo: {
    fontSize: "1vh";
  }
}

Limitations

• For rem unit the root element font-size is currently set to 16 pixels. A setting needs to be implemented to allow the user to define the root element font-size.
• There is also support for the box-shadow shorthand, and this converts into shadow- properties. Note that these only work on iOS.

Dependencies

该库具有以下包作为依赖项：

• css - CSS parser / stringifier
• css-mediaquery - Parses and determines if a given CSS Media Query matches a set of values.
• css-to-react-native - Convert CSS text to a React Native stylesheet object