{"id":17963346,"url":"https://github.com/kristerkari/babel-plugin-react-native-stylename-to-style","last_synced_at":"2025-03-25T05:32:15.553Z","repository":{"id":66125963,"uuid":"130480214","full_name":"kristerkari/babel-plugin-react-native-stylename-to-style","owner":"kristerkari","description":"Transform styleName property to style property in react-native. ","archived":false,"fork":false,"pushed_at":"2024-06-17T23:52:40.000Z","size":114,"stargazers_count":8,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-19T09:13:38.360Z","etag":null,"topics":["babel","babel-plugin","react-native","style","stylename"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kristerkari.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-21T14:15:11.000Z","updated_at":"2024-03-29T07:01:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"c562a6c2-d290-4294-8428-dff935cb80c8","html_url":"https://github.com/kristerkari/babel-plugin-react-native-stylename-to-style","commit_stats":{"total_commits":51,"total_committers":2,"mean_commits":25.5,"dds":0.07843137254901966,"last_synced_commit":"eff487f24bb0640c03c43ef328d671c0e510fbd8"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-stylename-to-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-stylename-to-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-stylename-to-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-stylename-to-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristerkari","download_url":"https://codeload.github.com/kristerkari/babel-plugin-react-native-stylename-to-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245407584,"owners_count":20610228,"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":["babel","babel-plugin","react-native","style","stylename"],"created_at":"2024-10-29T11:34:32.207Z","updated_at":"2025-03-25T05:32:15.201Z","avatar_url":"https://github.com/kristerkari.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-react-native-stylename-to-style\n\n[![NPM version](http://img.shields.io/npm/v/babel-plugin-react-native-stylename-to-style.svg)](https://www.npmjs.org/package/babel-plugin-react-native-stylename-to-style)\n[![Build Status](https://travis-ci.org/kristerkari/babel-plugin-react-native-stylename-to-style.svg?branch=master)](https://travis-ci.org/kristerkari/babel-plugin-react-native-stylename-to-style)\n[![Build status](https://ci.appveyor.com/api/projects/status/1040mtj6qyu9vkg8/branch/master?svg=true)](https://ci.appveyor.com/project/kristerkari/babel-plugin-react-native-stylename-to-style/branch/master)\n[![Coverage Status](https://coveralls.io/repos/github/kristerkari/babel-plugin-react-native-stylename-to-style/badge.svg?branch=master)](https://coveralls.io/github/kristerkari/babel-plugin-react-native-stylename-to-style?branch=master)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)\n\nTransform JSX `styleName` property to `style` property in react-native. The `styleName` attribute and syntax are based on [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules#conventions).\n\n## Usage\n\n### Step 1: Install\n\n```sh\nyarn add --dev babel-plugin-react-native-stylename-to-style\n```\n\nor\n\n```sh\nnpm install --save-dev babel-plugin-react-native-stylename-to-style\n```\n\n### Step 2: Configure `.babelrc`\n\nYou must give one or more file extensions inside an array in the plugin options.\n\n```\n{\n  \"presets\": [\n    \"react-native\"\n  ],\n  \"plugins\": [\n    [\"react-native-stylename-to-style\", {\n      \"extensions\": [\"css\"]\n    }]\n  ]\n}\n```\n\n## Syntax\n\n## Anonymous reference\n\nAnonymous reference can be used when there is only one stylesheet import.\n\n### Single class\n\n```jsx\nimport \"./Button.css\";\n\n\u003cView styleName=\"wrapper\"\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport Button from \"./Button.css\";\n\n\u003cView style={Button.wrapper}\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n### Multiple classes\n\n```jsx\nimport \"./Button.css\";\n\n\u003cView styleName=\"wrapper red-background\"\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport Button from \"./Button.css\";\n\n\u003cView style={[Button.wrapper, Button[\"red-background\"]]}\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n### Expression\n\n```jsx\nimport \"./Button.css\";\nconst name = \"wrapper\";\n\n\u003cView styleName={name}\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport Button from \"./Button.css\";\nconst name = \"wrapper\";\n\n\u003cView\n  style={(name || \"\")\n    .split(\" \")\n    .filter(Boolean)\n    .map(function(name) {\n      Button[name];\n    })}\n\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n### Expression with ternary\n\n```jsx\nimport \"./Button.css\";\n\nconst condition = true;\nconst name = \"wrapper\";\n\n\u003cView styleName={condition ? name : \"bar\"}\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport Button from \"./Button.css\";\n\nconst condition = true;\nconst name = \"wrapper\";\n\n\u003cView\n  style={((condition ? name : \"bar\") || \"\")\n    .split(\" \")\n    .filter(Boolean)\n    .map(function(name) {\n      Button[name];\n    })}\n\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n### with `styleName` and `style`:\n\n```jsx\nimport \"./Button.css\";\n\n\u003cView styleName=\"wrapper\" style={{ height: 10 }}\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport Button from \"./Button.css\";\n\n\u003cView style={[Button.wrapper, { height: 10 }]}\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n## Named reference\n\nNamed reference is used to refer to a specific stylesheet import.\n\n### Single class\n\n```jsx\nimport foo from \"./Button.css\";\n\n\u003cView styleName=\"foo.wrapper\"\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport foo from \"./Button.css\";\n\n\u003cView style={foo.wrapper}\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n### Multiple classes\n\n```jsx\nimport foo from \"./Button.css\";\nimport bar from \"./Grid.css\";\n\n\u003cView styleName=\"foo.wrapper bar.column\"\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport foo from \"./Button.css\";\nimport bar from \"./Grid.css\";\n\n\u003cView style={[foo.wrapper, bar.column]}\u003e\n  \u003cText\u003eFoo\u003c/Text\u003e\n\u003c/View\u003e;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Fbabel-plugin-react-native-stylename-to-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristerkari%2Fbabel-plugin-react-native-stylename-to-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Fbabel-plugin-react-native-stylename-to-style/lists"}