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
npm install dp-taro-css-to-react-native
Typescript
Module System
Node Version
NPM Version
75.9
Supply Chain
96.6
Quality
73.1
Maintenance
100
Vulnerability
99.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
373
Last Day
5
Last Week
6
Last Month
12
Last Year
73
35,967 Stars
14,058 Commits
4,815 Forks
693 Watching
97 Branches
577 Contributors
Minified
Minified + Gzipped
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%
5
Compared to previous day
Last week
20%
6
Compared to previous week
Last month
300%
12
Compared to previous month
Last year
-24%
73
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
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