{"_id":"@cssxjs/css-to-react-native","_rev":"4-9f28cce396ee528ffc17b07de6a24f2e","name":"@cssxjs/css-to-react-native","dist-tags":{"latest":"3.2.0-2"},"versions":{"3.2.0-0":{"name":"@cssxjs/css-to-react-native","version":"3.2.0-0","keywords":["styled-components","React","ReactNative","styles","CSS"],"author":{"name":"Jacob Parker"},"license":"MIT","_id":"@cssxjs/css-to-react-native@3.2.0-0","maintainers":[{"name":"cray0000","email":"cray0000@gmail.com"}],"homepage":"https://github.com/styled-components/css-to-react-native#readme","bugs":{"url":"https://github.com/styled-components/css-to-react-native/issues"},"dist":{"shasum":"67e065b83e903e18f6aa345b612713d46ed084ac","tarball":"https://registry.npmjs.org/@cssxjs/css-to-react-native/-/css-to-react-native-3.2.0-0.tgz","fileCount":44,"integrity":"sha512-0476VpModcMzRp3qTC38IU652bKpj+sfSM/CO3YIy7iJnVoNHuuScieQQCGKCsXJ+92L9LNXR5EoN/0tfLZgJw==","signatures":[{"sig":"MEUCIF1RicvJXZlXcIxPSM/cJUnD5Nlk2TfiV5v4TXStpwvNAiEA4WDaEku3M/QEtez8PaQ0hBIfUVpsJpgvxrHARcYsIjo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":103939},"jest":{"testURL":"http://localhost"},"main":"index.js","types":"index.d.ts","gitHead":"233cef831746b2e639aabbdec2f973a8b4db8053","scripts":{"lint":"eslint src","test":"jest","build":"rollup ./src/index.js -o index.js --f cjs && babel index.js -o index.js","precommit":"lint-staged","prepublish":"npm run build","test:watch":"jest --watch","lint-staged":"lint-staged"},"_npmUser":{"name":"cray0000","email":"cray0000@gmail.com"},"repository":{"url":"git+https://github.com/styled-components/css-to-react-native.git","type":"git"},"_npmVersion":"11.6.0","description":"Convert CSS text to a React Native stylesheet object","directories":{},"lint-staged":{"*.js":["eslint --fix","git add"]},"_nodeVersion":"24.10.0","dependencies":{"camelize":"^1.0.0","css-color-keywords":"^1.0.0","postcss-value-parser":"^4.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","eslint":"^4.17.0","rollup":"^1.22.0","prettier":"^1.18.2","@babel/cli":"^7.6.2","lint-staged":"^6.1.0","@babel/preset-env":"^7.6.2","eslint-plugin-import":"^2.8.0","eslint-config-prettier":"^2.9.0","eslint-plugin-prettier":"^2.6.0","eslint-config-airbnb-base":"^12.1.0"},"_npmOperationalInternal":{"tmp":"tmp/css-to-react-native_3.2.0-0_1762286270041_0.34494724760663265","host":"s3://npm-registry-packages-npm-production"}},"3.2.0-1":{"name":"@cssxjs/css-to-react-native","version":"3.2.0-1","keywords":["styled-components","React","ReactNative","styles","CSS"],"author":{"name":"Jacob Parker"},"license":"MIT","_id":"@cssxjs/css-to-react-native@3.2.0-1","maintainers":[{"name":"cray0000","email":"cray0000@gmail.com"},{"name":"zag2art","email":"zag2art@gmail.com"}],"homepage":"https://github.com/styled-components/css-to-react-native#readme","bugs":{"url":"https://github.com/styled-components/css-to-react-native/issues"},"dist":{"shasum":"16ae82a72abd812363662fd768fd5dfe84600f5a","tarball":"https://registry.npmjs.org/@cssxjs/css-to-react-native/-/css-to-react-native-3.2.0-1.tgz","fileCount":48,"integrity":"sha512-G0AnYEQANn2Y7Afqd0V8f6DNvDL70nv5wXuiY97mQOhJPGsshKjZQe+i082uVO1QOUXTZyRWTE0yCY3SiPxDGw==","signatures":[{"sig":"MEMCIDpmwiaRVwmLHMuZHM2hc6ZleZ2L3Yneuah4F9BX5EZwAh8Mk0txbULGHWY/y6zOfOjBhbU9s3OercSaOs4qPef5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":162788},"jest":{"testURL":"http://localhost"},"main":"index.js","types":"index.d.ts","gitHead":"bc8f38d428328dd608b0119b818902f56bfad370","scripts":{"lint":"eslint src","test":"jest","build":"rollup ./src/index.js -o index.js --f cjs && babel index.js -o index.js","precommit":"lint-staged","prepublish":"npm run build","test:watch":"jest --watch","lint-staged":"lint-staged"},"_npmUser":{"name":"cray0000","email":"cray0000@gmail.com"},"repository":{"url":"git+https://github.com/styled-components/css-to-react-native.git","type":"git"},"_npmVersion":"11.6.2","description":"Convert CSS text to a React Native stylesheet object","directories":{},"lint-staged":{"*.js":["eslint --fix","git add"]},"_nodeVersion":"25.2.1","dependencies":{"camelize":"^1.0.0","css-color-keywords":"^1.0.0","postcss-value-parser":"^4.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","eslint":"^4.17.0","rollup":"^1.22.0","prettier":"^1.18.2","@babel/cli":"^7.6.2","lint-staged":"^6.1.0","@babel/preset-env":"^7.6.2","eslint-plugin-import":"^2.8.0","eslint-config-prettier":"^2.9.0","eslint-plugin-prettier":"^2.6.0","eslint-config-airbnb-base":"^12.1.0"},"_npmOperationalInternal":{"tmp":"tmp/css-to-react-native_3.2.0-1_1768755902795_0.8595646646680308","host":"s3://npm-registry-packages-npm-production"}},"3.2.0-2":{"name":"@cssxjs/css-to-react-native","version":"3.2.0-2","publishConfig":{"access":"public"},"description":"Convert CSS text to a React Native stylesheet object","main":"index.js","types":"index.d.ts","scripts":{"build":"rollup ./src/index.js -o index.js --f cjs && babel index.js -o index.js","test":"jest","test:watch":"jest --watch","lint":"eslint src","prepublish":"npm run build","precommit":"lint-staged","lint-staged":"lint-staged"},"repository":{"type":"git","url":"git+https://github.com/styled-components/css-to-react-native.git"},"keywords":["styled-components","React","ReactNative","styles","CSS"],"author":{"name":"Jacob Parker"},"license":"MIT","bugs":{"url":"https://github.com/styled-components/css-to-react-native/issues"},"homepage":"https://github.com/styled-components/css-to-react-native#readme","jest":{"testURL":"http://localhost"},"devDependencies":{"@babel/cli":"^7.6.2","@babel/preset-env":"^7.6.2","eslint":"^4.17.0","eslint-config-airbnb-base":"^12.1.0","eslint-config-prettier":"^2.9.0","eslint-plugin-import":"^2.8.0","eslint-plugin-prettier":"^2.6.0","jest":"^24.9.0","lint-staged":"^6.1.0","prettier":"^1.18.2","rollup":"^1.22.0"},"dependencies":{"camelize":"^1.0.0","css-color-keywords":"^1.0.0","postcss-value-parser":"^4.0.2"},"lint-staged":{"*.js":["eslint --fix","git add"]},"gitHead":"848ef6630290e424eae5994343a09087371424ed","_id":"@cssxjs/css-to-react-native@3.2.0-2","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-VEPs2SaI47oC8cgUjtHT/J+7nuRZUMqH6hu/eI7ljVJfG/cRktwe7u1OjNWkDxgSBZkVViTIEHTo8j7mP9YnVA==","shasum":"30a0d685df85e84b98ba5b21ce013395ecc1d809","tarball":"https://registry.npmjs.org/@cssxjs/css-to-react-native/-/css-to-react-native-3.2.0-2.tgz","fileCount":49,"unpackedSize":177543,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE18cxIUrydkEghuqjxvubYu5e6HQSTFYFF0auEcWiqjAiEA0QSj8p5i0t/zP8/tKnoTOnVsb/fLBUm7x0YSQJap38U="}]},"_npmUser":{"name":"cray0000","email":"cray0000@gmail.com"},"directories":{},"maintainers":[{"name":"cray0000","email":"cray0000@gmail.com"},{"name":"zag2art","email":"zag2art@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/css-to-react-native_3.2.0-2_1769349642941_0.18903610347486843"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-04T19:57:49.965Z","modified":"2026-01-25T14:00:43.259Z","3.2.0-0":"2025-11-04T19:57:50.234Z","3.2.0-1":"2026-01-18T17:05:02.939Z","3.2.0-2":"2026-01-25T14:00:43.097Z"},"bugs":{"url":"https://github.com/styled-components/css-to-react-native/issues"},"author":{"name":"Jacob Parker"},"license":"MIT","homepage":"https://github.com/styled-components/css-to-react-native#readme","keywords":["styled-components","React","ReactNative","styles","CSS"],"repository":{"type":"git","url":"git+https://github.com/styled-components/css-to-react-native.git"},"description":"Convert CSS text to a React Native stylesheet object","maintainers":[{"name":"cray0000","email":"cray0000@gmail.com"},{"name":"zag2art","email":"zag2art@gmail.com"}],"readme":"# css-to-react-native\n\nConverts CSS text to a React Native stylesheet object.\n\n[Try it here](https://csstox.surge.sh)\n\n```css\nfont-size: 18px;\nline-height: 24px;\ncolor: red;\n```\n\n```js\n{\n  fontSize: 18,\n  lineHeight: 24,\n  color: 'red',\n}\n```\n\nConverts all number-like values to numbers, and string-like to strings.\n\nAutomatically converts indirect values to their React Native equivalents.\n\n```css\ntext-shadow-offset: 10px 5px;\nfont-variant: small-caps;\ntransform: translate(10px, 5px) scale(5);\n```\n\n```js\n{\n  textShadowOffset: { width: 10, height: 5 },\n  fontVariant: ['small-caps'],\n  // Fixes backwards transform order\n  transform: [\n    { translateY: 5 },\n    { translateX: 10 },\n    { scale: 5 },\n  ]\n}\n```\n\nAlso allows shorthand values.\n\n```css\nfont: bold 14px/16px \"Helvetica\";\nmargin: 5px 7px 2px;\n```\n\n```js\n{\n  fontFamily: 'Helvetica',\n  fontSize: 14,\n  fontWeight: 'bold',\n  fontStyle: 'normal',\n  fontVariant: [],\n  lineHeight: 16,\n  marginTop: 5,\n  marginRight: 7,\n  marginBottom: 2,\n  marginLeft: 7,\n}\n```\n\nShorthands will only accept values that are supported in React, so `background` will only accept a colour, `backgroundColor`\n\nThere is also support for the `box-shadow` shorthand, and this converts into `shadow-` properties. Note that these only work on iOS.\n\n#### Shorthand Notes\n\n`border{Top,Right,Bottom,Left}` shorthands are not supported, because `borderStyle` cannot be applied to individual border sides.\n\n# API\n\nThe 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.\n\n```js\nimport transform from 'css-to-react-native';\n// or const transform = require('css-to-react-native').default;\n\ntransform([\n  ['font', 'bold 14px/16px \"Helvetica\"'],\n  ['margin', '5px 7px 2px'],\n  ['border-left-width', '5px'],\n]); // => { fontFamily: 'Helvetica', ... }\n```\n\nWe 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.)\n\nFor implementors, there is also a few extra APIs available.\n\nThese are for specific use-cases, and most people should just be using the API above.\n\n```js\nimport { getPropertyName, getStylesForProperty } from 'css-to-react-native';\n\ngetPropertyName('border-width'); // => 'borderWidth'\ngetStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }\n```\n\nShould 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`.\n\n```js\ntransform([['border-radius', '50px']], ['borderRadius']);\n// { borderRadius: 50 } rather than { borderTopLeft: ... }\n```\n\nThis can also be done by passing a third argument, `false` to `getStylesForProperty`.\n\n## License\n\nLicensed under the MIT License, Copyright © 2019 Krister Kari, Jacob Parker, and Maximilian Stoiber.\n\nSee [LICENSE.md](./LICENSE.md) for more information.\n","readmeFilename":"README.md"}