Gathering detailed insights and metrics for dp-taro-css-to-react-native
Gathering detailed insights and metrics for dp-taro-css-to-react-native
Gathering detailed insights and metrics for dp-taro-css-to-react-native
Gathering detailed insights and metrics for dp-taro-css-to-react-native
开放式跨端跨框架解决方案,支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
npm install dp-taro-css-to-react-native
Typescript
Module System
Node Version
NPM Version
chore(release): publish 4.1.4
Updated on Jul 11, 2025
chore(release): publish 4.1.3
Updated on Jun 30, 2025
chore(release): publish 4.1.2
Updated on Jun 05, 2025
chore(release): publish 4.1.1
Updated on May 18, 2025
feat(harmony): update runtime hooks & runtime
Updated on May 18, 2025
chore(release): publish 4.1.0
Updated on May 16, 2025
TypeScript (55.6%)
JavaScript (39.81%)
SCSS (2.3%)
Rust (1.91%)
HTML (0.19%)
CSS (0.18%)
Vue (0.01%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
NOASSERTION License
36,681 Stars
14,245 Commits
4,848 Forks
689 Watchers
133 Branches
601 Contributors
Updated on Jul 12, 2025
Latest Version
2.2.33
Package Id
dp-taro-css-to-react-native@2.2.33
Unpacked Size
234.72 kB
Size
32.18 kB
File Count
49
NPM Version
8.5.0
Node Version
16.14.2
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
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 "dp-taro-css-to-react-native"; 2// or const transform = require("dp-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
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
all changesets reviewed
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
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
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
128 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
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