Gathering detailed insights and metrics for taro-css-to-react-native
Gathering detailed insights and metrics for taro-css-to-react-native
npm install taro-css-to-react-native
Typescript
Module System
Min. Node Version
Node Version
NPM Version
76.6
Supply Chain
97.4
Quality
94.8
Maintenance
100
Vulnerability
87.1
License
chore(release): publish 4.0.9
Published on 13 Jan 2025
chore(release): publish 4.0.8
Published on 02 Dec 2024
chore(release): publish 4.0.7
Published on 25 Oct 2024
chore(release): publish 4.0.6
Published on 23 Sept 2024
Chore/release 4.0.5
Published on 26 Aug 2024
chore(release): publish 3.6.35
Published on 23 Aug 2024
TypeScript (53.46%)
JavaScript (41.77%)
SCSS (2.44%)
Rust (1.93%)
HTML (0.2%)
CSS (0.19%)
Vue (0.01%)
Total Downloads
839,958
Last Day
95
Last Week
812
Last Month
6,895
Last Year
108,594
35,966 Stars
14,058 Commits
4,815 Forks
693 Watching
97 Branches
577 Contributors
Minified
Minified + Gzipped
Latest Version
4.0.9
Package Id
taro-css-to-react-native@4.0.9
Unpacked Size
107.34 kB
Size
21.73 kB
File Count
50
NPM Version
10.8.2
Node Version
18.20.5
Publised On
13 Jan 2025
Cumulative downloads
Total Downloads
Last day
-68.9%
95
Compared to previous day
Last week
-49.1%
812
Compared to previous week
Last month
-6.7%
6,895
Compared to previous month
Last year
-44.6%
108,594
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 "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
no dangerous workflow patterns detected
Reason
security policy file detected
Details
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
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
112 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-01-27
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