{"id":4526,"url":"https://github.com/thewei/react-native-css-loader","last_synced_at":"2025-07-31T13:30:57.873Z","repository":{"id":143804387,"uuid":"43748727","full_name":"thewei/react-native-css-loader","owner":"thewei","description":"Style React-Native components built with webpack","archived":true,"fork":false,"pushed_at":"2019-08-27T03:28:19.000Z","size":7,"stargazers_count":38,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-09T08:43:40.326Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thewei.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-10-06T12:19:51.000Z","updated_at":"2024-09-15T20:31:02.000Z","dependencies_parsed_at":"2024-01-27T01:21:28.148Z","dependency_job_id":"46b28518-78de-4003-963f-cf11a7ddf413","html_url":"https://github.com/thewei/react-native-css-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewei%2Freact-native-css-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewei%2Freact-native-css-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewei%2Freact-native-css-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewei%2Freact-native-css-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thewei","download_url":"https://codeload.github.com/thewei/react-native-css-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228248574,"owners_count":17891447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:15.264Z","updated_at":"2024-12-05T06:31:41.136Z","avatar_url":"https://github.com/thewei.png","language":"JavaScript","readme":"# react-native-css-loader ![NPM version](https://img.shields.io/npm/v/react-native-css-loader.svg?style=flat)\n\nYou can use react-native-css-loader width react-native-webpack-server, which can use webpack to built react-native app better.\n\n\u003e react-native-css-loader, inspired by gulp-react-native-stylesheet-css, thanks.\n\n## Installation\n```bash\n$ npm install react-native --save\n$ npm install react-native-css-loader --save-dev\n```\n\n## Usage\n```js\nvar styles = require(\"react-native-css!./file.css\");\n// =\u003e returns react-native stylesheet object\n\n```\nOr within the webpack config:\n```js\n// only css:\nmodule: {\n  loaders: [{\n    test: /\\.css$/,\n    loader: 'react-native-css-loader'\n  }]\n}\n\n// use stylus:\nmodule: {\n  loaders: [{\n    test: /\\.styl$/,\n    loader: 'react-native-css-loader!stylus-loader'\n  }]\n}\n\n// use sass:\nmodule: {\n  loaders: [{\n    test: /\\.scss$/,\n    loader: 'react-native-css-loader!sass-loader'\n  }]\n}\n\n// use less:\nmodule: {\n  loaders: [{\n    test: /\\.less$/,\n    loader: 'react-native-css-loader!less-loader'\n  }]\n}\n\n```\n\n## Properties supported\n\nAny property found in your CSS will be camelCased. By default, this plugin will always output values as JavaScript Number or Boolean objects when appropriate. Values with units attached, including \"em\" and \"px,\" will be output without their unit suffixes.\n\n### Special-case properties\n\nThe following properties output different keys to satisfy React Native's requirements. Unless otherwise noted, the values for each correspond with CSS3.\n\nProperty | Example Values | Notes\n---------|----------------|------\nmargin | 2px\u003cbr /\u003e2px 4px\u003cbr /\u003e3px 1px 5px\u003cbr /\u003e1px 3px 2px 6px |\npadding | 2px\u003cbr /\u003e2px 4px\u003cbr /\u003e3px 1px 5px\u003cbr /\u003e1px 3px 2px 6px |\nbox-shadow | none\u003cbr /\u003e0 2px 4px rgba(52, 21, 23, 0.32) | Inset shadows and spread values are not supported.\nflex | 1\u003cbr /\u003e1 30px\u003cbr /\u003e1 2 10% | __Only the first value will be output__ and the rest will be ignored, as React Native does not support flex-basis or flex-shrink.\ntransform | perspective(90)\u003cbr /\u003erotate(10deg)\u003cbr /\u003erotateX(5deg)\u003cbr /\u003erotateY(10deg)\u003cbr /\u003erotateZ(15deg)\u003cbr /\u003erotate3d(5deg, 10deg, 15deg)\u003cbr /\u003escale(1.2)\u003cbr /\u003escaleX(1.5)\u003cbr /\u003escaleY(0.5)\u003cbr /\u003escale2d(1.5, 0.5) or scale3d(1.5, 0.5)\u003cbr /\u003etranslateX(5px)\u003cbr /\u003etranslateY(10px)\u003cbr /\u003etranslate2d(5px, 10px) or translate3d(5px, 10px) | You may chain multiple transformations together with a space delimiter, like in CSS3 (see example above).\n\n\n## Contributing\n- Fork this Repo first\n- Clone your Repo\n- Install dependencies by `$ npm install`\n- Checkout a feature branch\n- Feel free to add your features\n- Make sure your features are fully tested\n- Publish your local branch, Open a pull request\n- Enjoy hacking \u003c3\n","funding_links":[],"categories":["Components"],"sub_categories":["Build \u0026 Development"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewei%2Freact-native-css-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthewei%2Freact-native-css-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewei%2Freact-native-css-loader/lists"}