Gathering detailed insights and metrics for taro-css-to-react-native
Gathering detailed insights and metrics for taro-css-to-react-native
Gathering detailed insights and metrics for taro-css-to-react-native
Gathering detailed insights and metrics for taro-css-to-react-native
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
npm install taro-css-to-react-native
Typescript
Module System
Node Version
NPM Version
chore(release): publish 3.6.37 --tag=v3-latest
Updated on May 09, 2025
chore(release): publish 4.0.13
Updated on May 09, 2025
chore(release): publish 4.0.12
Updated on Apr 15, 2025
chore(release): publish 4.0.10
Updated on Apr 09, 2025
chore(release): publish 3.6.36
Updated on Apr 10, 2025
fix(react-components): 导出新增组件
Updated on Apr 01, 2025
TypeScript (53.58%)
JavaScript (41.57%)
SCSS (2.43%)
Rust (2.02%)
HTML (0.2%)
CSS (0.19%)
Vue (0.01%)
Total Downloads
865,486
Last Day
220
Last Week
951
Last Month
7,919
Last Year
105,272
NOASSERTION License
36,446 Stars
14,136 Commits
4,833 Forks
691 Watchers
125 Branches
592 Contributors
Updated on May 09, 2025
Minified
Minified + Gzipped
Latest Version
3.6.37
Package Id
taro-css-to-react-native@3.6.37
Unpacked Size
109.12 kB
Size
21.93 kB
File Count
50
NPM Version
8.19.4
Node Version
16.20.2
Published on
May 09, 2025
Cumulative downloads
Total Downloads
Last Day
69.2%
220
Compared to previous day
Last Week
-51.8%
951
Compared to previous week
Last Month
-8.5%
7,919
Compared to previous month
Last Year
-39.7%
105,272
Compared to previous year
4
fork from css-to-react-native-transform
A lightweight wrapper on top of css-to-react-native to allow valid CSS to be turned into React Native Stylesheet objects.
To keep things simple it only transforms class selectors (e.g. .myClass {}
) and grouped class selectors (e.g. .myClass, .myOtherClass {}
). Parsing of more complex selectors can be added as a new feature behind a feature flag (e.g. transform(css, { parseAllSelectors: true })
) in the future if needed.
Example:
1.myClass { 2 font-size: 18px; 3 line-height: 24px; 4 color: red; 5} 6 7.other { 8 padding: 1rem; 9}
is transformed to:
1{ 2 myClass: { 3 fontSize: 18, 4 lineHeight: 24, 5 color: "red" 6 }, 7 other: { 8 paddingBottom: 16, 9 paddingLeft: 16, 10 paddingRight: 16, 11 paddingTop: 16 12 } 13}
1import transform from "taro-css-to-react-native"; 2// or const transform = require("taro-css-to-react-native").default; 3 4transform(` 5 .foo { 6 color: #f00; 7 } 8`);
↓ ↓ ↓ ↓ ↓ ↓
1{ 2 foo: { 3 color: "#f00"; 4 } 5}
Parsing the CSS Modules (ICSS) :export is supported. The :export
is often used to share variables from CSS or from a preprocessor like Sass/Less/Stylus to Javascript:
1transform(` 2 .foo { 3 color: #f00; 4 } 5 6 :export { 7 myProp: #fff; 8 } 9`);
↓ ↓ ↓ ↓ ↓ ↓
1{ 2 foo: { 3 color: "#f00"; 4 }, 5 myProp: "#fff"; 6}
The API and parsed syntax for CSS Media Queries might change in the future
1transform( 2 ` 3 .container { 4 background-color: #f00; 5 } 6 7 @media (orientation: landscape) { 8 .container { 9 background-color: #00f; 10 } 11 } 12`, 13 { parseMediaQueries: true }, 14);
↓ ↓ ↓ ↓ ↓ ↓
1{ 2 __mediaQueries: { 3 "@media (orientation: landscape)": [{ 4 expressions: [ 5 { 6 feature: "orientation", 7 modifier: undefined, 8 value: "landscape", 9 }, 10 ], 11 inverse: false, 12 type: "all", 13 }], 14 }, 15 container: { 16 backgroundColor: "#f00", 17 }, 18 "@media (orientation: landscape)": { 19 container: { 20 backgroundColor: "#00f", 21 }, 22 }, 23}
You can also speficy a platform as the media query type ("android", "dom", "ios", "macos", "web", "windows"):
1transform( 2 ` 3 .container { 4 background-color: #f00; 5 } 6 7 @media android and (orientation: landscape) { 8 .container { 9 background-color: #00f; 10 } 11 } 12`, 13 { parseMediaQueries: true }, 14);
When CSS Viewport Units are used, a special __viewportUnits
feature flag is added to the result. This is done so that the implementation that transforms viewport units to pixels knows that the style object has viewport units inside it, and can avoid doing extra work if the style object does not contain any viewport units.
1transform(`.foo { font-size: 1vh; }`);
↓ ↓ ↓ ↓ ↓ ↓
1{ 2 __viewportUnits: true, 3 foo: { 4 fontSize: "1vh"; 5 } 6}
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
.box-shadow
shorthand, and this converts into
shadow-
properties. Note that these only work on iOS.This library has the following packages as dependencies:
No vulnerabilities found.
Reason
all changesets reviewed
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
security policy file detected
Details
Reason
no dangerous workflow patterns detected
Reason
packaging workflow detected
Details
Reason
license file detected
Details
Reason
binaries present in source code
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
136 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-05-05
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More