npmpackage.info

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

Other packages similar to css-to-react-native

taro-css-to-react-native

3.6.37

Convert CSS text to a React Native stylesheet object

css-to-react-native-transform

2.1.0

Convert CSS text to a React Native stylesheet object

@native-html/css-processor

1.11.0

An inline CSS processor to translate CSS properties to React Native styles.

@jsamr/react-native-li

2.3.1

A pure JavaScript React Native component to render CSS3 compliant ordered and unordered lists.

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

css-to-react-native - 3.2.0 | npmpackage.info

css-to-react-native

Convert CSS text to a React Native stylesheet object

3.2.0

1,154

MIT

JavaScript

6.35 kB

1,204,489,302 3.5

Installations

npm install css-to-react-native

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.18.0

NPM Version

9.1.1 Pull Requests

Open

3

Total

108

Closed

40

Merged

65

Issues

Open

7

Total

87

Closed

80

Releases

v3.0.0

Updated on Oct 22, 2019

View All 1 releases

Languages

JavaScript

JavaScript (100%)

Developer

styled-components

Download Statistics

Total Downloads

1,204,489,302

Last Day

1,184,162

Last Week

6,244,648

Last Month

26,828,473

Last Year

291,177,112

GitHub Statistics

MIT License

1,154 Stars

202 Commits

82 Forks

38 Watchers

6 Branches

108 Contributors

Updated on May 03, 2025

Bundle Size

18.07 kB

Minified

6.35 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 108 Contributors

Package Meta Information

Latest Version

3.2.0

Package Id

css-to-react-native@3.2.0

Unpacked Size

87.91 kB

Size

18.86 kB

File Count

NPM Version

9.1.1

Node Version

16.18.0

Published on

Feb 14, 2023

Total Downloads

Cumulative downloads

Total Downloads

1,204,489,302

Last Day

50%

1,184,162

Compared to previous day

Last Week

4.8%

6,244,648

Compared to previous week

Last Month

-5.6%

26,828,473

Compared to previous month

Last Year

-3.2%

291,177,112

Compared to previous year

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

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

48 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
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
Warn: Project is vulnerable to: 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 2025-04-28

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