npmpackage.info

Gathering detailed insights and metrics for css-to-react-native

Other packages similar to css-to-react-native

@types/css-to-react-native

3.0.2

TypeScript definitions for css-to-react-native

css-to-rn.macro

0.3.0

Convert CSS to React Native style sheet at build time with babel macros

css-to-react-native-transform

2.1.0

Convert CSS text to a React Native stylesheet object

taro-css-to-react-native

4.0.7

Convert CSS text to a React Native stylesheet object

Gathering detailed insights and metrics for css-to-react-native

css-to-react-native

Convert CSS text to a React Native stylesheet object

3.2.0

1,141

MIT

JavaScript

1,070,136,661 3.5

Installations

npm install css-to-react-native

Pull Requests

Open

4

Total

108

Closed

39

Merged

65

Issues

Open

7

Total

87

Closed

80

Releases

v3.0.0

Published on 22 Oct 2019

View all 1 releases

Developer

styled-components

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

16.18.0

NPM Version

9.1.1 Statistics

1,141 Stars

202 Commits

79 Forks

39 Watching

6 Branches

108 Contributors

Updated on 06 Nov 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

1,070,136,661

Last day

-3.2%

1,129,564

Compared to previous day

Last week

2.4%

5,825,346

Compared to previous week

Last month

8.6%

24,652,437

Compared to previous month

Last year

-2.8%

285,367,051

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

camelize css-color-keywords postcss-value-parser

Dev Dependencies

@babel/cli @babel/preset-env eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-prettier jest lint-staged prettier rollup

Versions

css-to-react-native

Converts CSS text to a React Native stylesheet object.

Try it here

1font-size: 18px;
2line-height: 24px;
3color: red;

1{
2  fontSize: 18,
3  lineHeight: 24,
4  color: 'red',
5}

Converts all number-like values to numbers, and string-like to strings.

Automatically converts indirect values to their React Native equivalents.

1text-shadow-offset: 10px 5px;
2font-variant: small-caps;
3transform: translate(10px, 5px) scale(5);

1{
2  textShadowOffset: { width: 10, height: 5 },
3  fontVariant: ['small-caps'],
4  // Fixes backwards transform order
5  transform: [
6    { translateY: 5 },
7    { translateX: 10 },
8    { scale: 5 },
9  ]
10}

Also allows shorthand values.

1font: bold 14px/16px "Helvetica";
2margin: 5px 7px 2px;

1{
2  fontFamily: 'Helvetica',
3  fontSize: 14,
4  fontWeight: 'bold',
5  fontStyle: 'normal',
6  fontVariant: [],
7  lineHeight: 16,
8  marginTop: 5,
9  marginRight: 7,
10  marginBottom: 2,
11  marginLeft: 7,
12}

Shorthands will only accept values that are supported in React, so background will only accept a colour, backgroundColor

There is also support for the box-shadow shorthand, and this converts into shadow- properties. Note that these only work on iOS.

Shorthand Notes

border{Top,Right,Bottom,Left} shorthands are not supported, because borderStyle cannot be applied to individual border sides.

API

The API is mostly for implementors. However, the main API may be useful for non-implementors. The main API is an array of [property, value] tuples.

1import transform from 'css-to-react-native';
2// or const transform = require('css-to-react-native').default;
3
4transform([
5  ['font', 'bold 14px/16px "Helvetica"'],
6  ['margin', '5px 7px 2px'],
7  ['border-left-width', '5px'],
8]); // => { fontFamily: 'Helvetica', ... }

We don't provide a way to get these style tuples in this library, so you'll need to do that yourself. I expect most people will use postCSS or another CSS parser. You should try avoid getting these with string.split, as that has a lot of edge cases (colons and semi-colons appearing in comments etc.)

For implementors, there is also a few extra APIs available.

These are for specific use-cases, and most people should just be using the API above.

1import { getPropertyName, getStylesForProperty } from 'css-to-react-native';
2
3getPropertyName('border-width'); // => 'borderWidth'
4getStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }

Should you wish to opt-out of transforming certain shorthands, an array of property names in camelCase can be passed as a second argument to transform.

1transform([['border-radius', '50px']], ['borderRadius']);
2// { borderRadius: 50 } rather than { borderTopLeft: ... }

This can also be done by passing a third argument, false to getStylesForProperty.

License

See LICENSE.md for more information.

No vulnerabilities found.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

46 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

3.5

/10

Last Scanned on 2024-11-18

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