{"id":4541,"url":"https://github.com/kristerkari/react-native-css-modules","last_synced_at":"2025-04-06T16:15:55.149Z","repository":{"id":41499399,"uuid":"117731251","full_name":"kristerkari/react-native-css-modules","owner":"kristerkari","description":"Style React Native components using CSS, PostCSS, Sass, Less or Stylus.","archived":false,"fork":false,"pushed_at":"2024-02-25T02:54:09.000Z","size":301,"stargazers_count":334,"open_issues_count":24,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T15:09:09.909Z","etag":null,"topics":["css","css-modules","css-variables","less","media-queries","postcss","react-native","sass","stylus","viewport-units"],"latest_commit_sha":null,"homepage":"","language":null,"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-01-16T19:30:38.000Z","updated_at":"2025-03-25T01:56:08.000Z","dependencies_parsed_at":"2024-12-16T10:39:14.822Z","dependency_job_id":null,"html_url":"https://github.com/kristerkari/react-native-css-modules","commit_stats":{"total_commits":162,"total_committers":2,"mean_commits":81.0,"dds":0.006172839506172867,"last_synced_commit":"0886ad1e3962fe07de46ac8b8d2e3180941a60a4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Freact-native-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristerkari","download_url":"https://codeload.github.com/kristerkari/react-native-css-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509238,"owners_count":20950232,"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":["css","css-modules","css-variables","less","media-queries","postcss","react-native","sass","stylus","viewport-units"],"created_at":"2024-01-05T20:17:15.709Z","updated_at":"2025-04-06T16:15:55.083Z","avatar_url":"https://github.com/kristerkari.png","language":null,"readme":"# React Native CSS modules\n\nStyle React Native components using CSS, PostCSS, Sass, Less or Stylus.\n\n**Quick links:** **[Features](#features)** • **[Documentation](https://github.com/kristerkari/react-native-css-modules#documentation)** • **[Example Apps](#example-apps)** • **[Development](#development)** • **[FAQ](docs/faq.md#frequently-asked-questions)**\n\n\u003ca href=\"https://facebook.github.io/react-native/\"\u003e\u003cimg src=\"images/react-native-logo.png\" width=\"160\"\u003e\u003c/a\u003e\u003cimg src=\"images/plus.svg\" width=\"100\"\u003e\u003ca href=\"https://github.com/css-modules/css-modules\"\u003e\u003cimg src=\"images/css-modules-logo.svg\" width=\"170\"\u003e\u003c/a\u003e\n\n## Features\n\n- :tada: You can share your CSS modules between React Native and React Web by using `className` property in React Native, and by using [React Native for Web](https://github.com/necolas/react-native-web) for the browser.\n- :ok_hand: Supports [CSS](https://github.com/kristerkari/react-native-css-transformer), [PostCSS](https://github.com/kristerkari/react-native-postcss-transformer), [Sass](https://github.com/kristerkari/react-native-sass-transformer), [Less](https://github.com/kristerkari/react-native-less-transformer) and [Stylus](https://github.com/kristerkari/react-native-stylus-transformer).\n- :fire: CSS Hot loading (live reloading).\n- :computer: Supports responsive CSS features: [CSS Media Queries](https://alligator.io/css/media-queries/) and [CSS Viewport Units](https://alligator.io/css/viewport-units/).\n- :sparkles: Supports [CSS variables](https://alligator.io/css/css-variables/).\n- :globe_with_meridians: [Platform-specific extensions](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions) for CSS, e.g. `styles.ios.css`, `styles.android.css`, `styles.native.css`.\n- :tophat: Support for `styleName` attribute that allows you to use CSS class names as strings, and allows hyphens in class names (like the [className property](https://reactjs.org/docs/faq-styling.html#how-do-i-add-css-classes-to-components) in Web React).\n- :package: Suppports Typescript with [React Native type definitions that add support for React Native CSS modules](https://github.com/kristerkari/react-native-types-for-css-modules) and [CSS, Sass, LESS, PostCSS, or Stylus transformers that automatically create typings for your CSS files](https://github.com/kristerkari/react-native-typed-sass-transformer).\n- :mag: Keep your CSS error free using [a custom stylelint config for React Native CSS modules](https://github.com/kristerkari/stylelint-config-react-native-css-modules)\n\n## Examples\n\nUsing React Native CSS modules works almost the same way as using CSS modules with a Web React project, but there are some limitations. There is no support complex CSS selectors. Only simple CSS class selector (e.g. `.myClass`) is supported. React Native also only supports a subset of browser's CSS properties for styling.\n\nFor more info about the differences between using CSS modules in Web and React Native, have a look at [this explanation in the FAQ](docs/faq.md#what-is-the-difference-with-regular-css-and-react-natives-css).\n\n#### Basic example using Sass\n\n**App.scss**\n\n```scss\n.container {\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n}\n\n.blue {\n  color: blue;\n}\n\n.blueText {\n  @extend .blue;\n  font-size: 18px;\n}\n```\n\n**App.js**\n\n```jsx\nimport React from \"react\";\nimport { Text, View } from \"react-native\";\nimport styles from \"./App.scss\";\n\nconst App = () =\u003e (\n  \u003cView className={styles.container}\u003e\n    \u003cText className={styles.blueText}\u003eBlue text\u003c/Text\u003e\n  \u003c/View\u003e\n);\nexport default App;\n```\n\n#### CSS media queries and CSS viewport units\n\nIf you need CSS media queries or CSS viewport units, please have a look at the [responsive CSS features setup guide](docs/setup-responsive.md).\n\n```css\n.wrapper {\n  height: 10vh;\n  width: 10vw;\n}\n\n@media (min-width: 800px) {\n  .wrapper {\n    height: 20vh;\n    width: 20vw;\n  }\n}\n```\n\n#### CSS variables\n\nCSS variables are not supported by default, but you can add support for them by using [PostCSS](https://postcss.org/) and [postcss-css-variables](https://github.com/MadLittleMods/postcss-css-variables#readme) plugin.\n\nPlease have a look at the [CSS variables setup guide](docs/setup-css-variables.md).\n\n```css\n:root {\n  --text-color: blue;\n}\n\n.blue {\n  color: var(--text-color);\n}\n```\n\n#### Exporting variables from CSS to Javascript\n\nYou might also need to share you variables from a CSS/Sass/Less/Stylus file to Javascript. To do that you can use the `:export` keyword:\n\n**colors.scss**\n\n```\n$grey: #ccc;\n\n:export {\n  grey: $grey;\n}\n```\n\n**App.js**\n\n```jsx\nimport React from \"react\";\nimport { Text, View } from \"react-native\";\nimport colors from \"./colors.scss\";\nimport styles from \"./App.scss\";\n\nconst App = () =\u003e (\n  \u003cView className={styles.container}\u003e\n    \u003cText className={styles.blueText} style={{ color: colors.grey }}\u003e\n      Grey text\n    \u003c/Text\u003e\n  \u003c/View\u003e\n);\nexport default App;\n```\n\n## Example Apps\n\nHave a look at the example apps to see how you can use CSS modules for both React Native and Web using the same code.\n\n- **[Example app](https://github.com/kristerkari/react-native-css-modules-example)**\n- **[CSS Media Queries example app](https://github.com/kristerkari/react-native-css-modules-with-media-queries-example)**\n- **[CSS Viewport Units example app](https://github.com/kristerkari/react-native-css-modules-with-viewport-units-example)**\n- **[Example app with styleName syntax](https://github.com/kristerkari/react-native-css-modules-stylename-example)**\n- **[Typescript example app](https://github.com/kristerkari/react-native-css-modules-with-typescript-example)**\n\n## Documentation\n\n#### :books: Setup\n\n- **[Setup CSS modules with CSS support](docs/setup-css.md)**\n- **[Setup CSS modules with PostCSS support](docs/setup-postcss.md)**\n- **[Setup CSS modules with Sass support](docs/setup-sass.md)**\n- **[Setup CSS modules with Less support](docs/setup-less.md)**\n- **[Setup CSS modules with Stylus support](docs/setup-stylus.md)**\n- **[Setup CSS modules with Responsive CSS support (CSS Media Queries \u0026 CSS Viewport Units)](docs/setup-responsive.md)**\n- **[Setup CSS modules with CSS variables support](docs/setup-css-variables.md)**\n- **[Setup CSS modules with Typescript support](docs/setup-typescript.md)**\n- **[Setup CSS modules with styleName attribute (use className as a string)](docs/setup-stylename.md)**\n- **[Use CSS and Sass in the same project](docs/multiple-transformers.md)**\n- **[Setup recommended linting (ESLint \u0026 stylelint)](docs/setup-linting.md)**\n- **[Setup browser compatibility](docs/web-compatibility.md)**\n\n#### :books: Other documentation\n\n- **[Frequently Asked Questions](docs/faq.md)**\n- **[Stylelint config for React Native CSS modules](https://github.com/kristerkari/stylelint-config-react-native-css-modules)**\n- **[List of CSS properties supported by React Native (out of date)](https://github.com/vhpoet/react-native-styling-cheat-sheet)**\n\n## Development\n\nTo see which new features are being planned and what is in progress, please have a look at [the development board](https://github.com/kristerkari/react-native-css-modules/projects/1).\n\nIf you want to suggest a new feature or report a bug, please open a new issue.\n\n---\n\n## Special thanks\n\nThe idea for React Native CSS modules comes from these projects that have made a lot of work for supporting CSS and CSS modules in React Native: [css-to-react-native](https://github.com/styled-components/css-to-react-native) and [react-native-sass-classname](https://github.com/daniloster/react-native-sass-classname). A big thanks to them!\n\n---\n\n### License\n\n[MIT](/LICENSE)\n","funding_links":[],"categories":["Components"],"sub_categories":["Styling"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Freact-native-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristerkari%2Freact-native-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Freact-native-css-modules/lists"}