[
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2019 Krister Kari\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# 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![](\"images/react-native-logo.png\")
![](\"images/plus.svg\")
![](\"images/css-modules-logo.svg\")
\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 = () => (\n \n Blue text\n \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 = () => (\n \n \n Grey text\n \n \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 & 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 & 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"
},
{
"path": "docs/faq.md",
"content": "# Frequently Asked Questions\n\n## Why was React Native CSS modules project created?\n\nReact Native does not offer any kind of built-in support for loading CSS from `.css` files and using it for styling.\n\nSo far the only way has been to use React Native's `style` property or any of the available CSS-in-JS libraries. Now you can use `className` property and keep your styles in separate CSS files.\n\n## What is the difference with regular CSS and React Native's CSS?\n\nReact Native's styling works a bit differently compared to regular CSS:\n\n- There is no cascade, CSS properties are not inherited from parent elements.\n- No complex CSS selectors. There is only support for simple CSS class selector that maps 1-to-1 with an element.\n- Many CSS properties are element specific, e.g. you can not give `Text` properties (`font-family`, etc.) to a `View` and vice versa.\n- React Native only implements a subset of CSS. The more complex CSS features are left out, and what you get is a set of CSS features that work well to do styling in both browsers and native apps.\n- There are some new styling properties in React Native that do not exist in regular CSS.\n\nEven with the above differences, React Native's CSS implementation is still almost fully compatible with the one in Web browsers. You can think of it as a stricter subset of the CSS that is used in browsers.\n\nThe supported styling depends on the element that you want to style. You can have a look at the example apps, or this cheat sheet when writing your styles: https://github.com/vhpoet/react-native-styling-cheat-sheet\n\nIf you plan to use the same CSS files for both React Native and Web, then I suggest that you build your app \"React Native first\". It is much easier to build the app with React Native's styling limitations, and then make it work for web using [React Native for Web](https://github.com/necolas/react-native-web).\n\nYou can also use [Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) thinking to build the common parts to be cross platform and adding some Web specific CSS styling.\n\n## What limitations does React Native CSS modules have compared to Web CSS modules?\n\n- No support for `:global` or `:local` keywords (there is not global scope in React Native, so distinction between local and global is not needed.)\n- No support for `composes` keyword (probably not worth it to support because of the complexity, you can use Sass/Less/Stylus instead).\n- No support for `:import` keyword (you can use Sass/Less/Stylus instead), but the `:export` keyword is supported.\n- No support for using [classnames](https://github.com/JedWatson/classnames) module to handle multiple classnames (`classnames` outputs classnames as a string, which does not work in React Native).\n- No hot loading for Sass, LESS or Stylus files that are imported with `@import` yet.\n\n## I added a new CSS file and React Native throws an error for a missing module\n\nYou need to restart React Native's packager when you add a new file to your project. This is currently a limitation that will hopefully be fixed in the future.\n\n## How do I use multiple classes for an element?\n\nYou can use either the `[styles.class1, styles.class2].join` or the template literal syntax. Have a look at the documentation over here: [babel-plugin-react-native-classname-to-style#multiple-classes](https://github.com/kristerkari/babel-plugin-react-native-classname-to-style#multiple-classes).\n\nYou can also use the `styleName` syntax, which supports multiple classnames: [babel-plugin-react-native-stylename-to-style](https://github.com/kristerkari/babel-plugin-react-native-stylename-to-style)\n\n## CSS transitions, animations and gradients are missing\n\nReact Native does not currently support CSS transitions, animations or gradients. For animations and transitions you can use React Native's [Animated Javascript module](https://facebook.github.io/react-native/docs/animated.html). For linear gradients you can try to use a library like [react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient).\n\n## Should I use React Native to build Web apps?\n\nAbsolutely! React Native's `StyleSheet` module implements a subset of CSS. The more complex CSS features are left out, and what you get is a set of CSS features that work well to do styling in both browsers and native apps.\n\nReact Native avoids many of the problems of scaling CSS. There is no CSS property inheritance between elements and no CSS selector specificity issues. You can not give a `` font properties that would get inherited, but you can give them directly to a `` element.\n\nReact Native's elements like ``, `` and `` are simpler abstractions of the DOM elements that you use in browser. That means that implementing them in other platforms than React Native or the browser (e.g. React VR) is possible. Implementing the browser DOM in React Native would be way too complex.\n\nHave a look at these talks for more info:\n\n- [How Airbnb Is Using React Native](https://www.youtube.com/watch?v=8qCociUB6aQ)\n- [Nicolas Gallagher - Twitter Lite, React Native, and Progressive Web Apps](https://www.youtube.com/watch?v=tFFn39lLO-U)\n"
},
{
"path": "docs/multiple-transformers.md",
"content": "### Using CSS and Sass (or some other CSS preprocessor) in the same project\n\n### Step 1: Setup React Native CSS modules\n\n- [Setup React Native CSS modules with CSS support](setup-css.md)\n- [Setup React Native CSS modules with PostCSS support](setup-postcss.md)\n- [Setup React Native CSS modules with Sass support](setup-sass.md)\n- [Setup React Native CSS modules with Less support](setup-less.md)\n- [Setup React Native CSS modules with Stylus support](setup-stylus.md)\n\n### Step 2: Modify Babel configuration\n\nIn your project's root folder:\n\n#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer\n\nAdd more extensions to `.babelrc` (or `babel.config.js`):\n\n```json\n{\n \"presets\": [\"module:metro-react-native-babel-preset\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"css\", \"scss\", \"sass\"]\n }\n ]\n ]\n}\n```\n\n... or if you are using [Expo](https://expo.io/), to `babel.config.js`\n\n```js\nmodule.exports = function (api) {\n api.cache(true);\n return {\n presets: [\"babel-preset-expo\"],\n plugins: [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n { extensions: [\"css\", \"scss\", \"sass\"] },\n ],\n ],\n };\n};\n```\n\n---\n\n#### For React Native v0.56 or older\n\nAdd more extensions to `.babelrc`:\n\n```json\n{\n \"presets\": [\"react-native\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"css\", \"scss\", \"sass\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For Expo SDK v30.0.0 or older\n\nAdd more extensions to `.babelrc`:\n\n```json\n{\n \"presets\": [\"babel-preset-expo\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"css\", \"scss\", \"sass\"]\n }\n ]\n ]\n}\n```\n\n### Step 3: Modify Metro bundler configuration\n\nIn your project's root folder:\n\n#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer\n\nConfigure `metro.config.js` to use a custom transformer file and add more extensions:\n\n```js\nconst { getDefaultConfig } = require(\"metro-config\");\n\nmodule.exports = (async () => {\n const {\n resolver: { sourceExts },\n } = await getDefaultConfig();\n return {\n transformer: {\n babelTransformerPath: require.resolve(\"./transformer.js\"),\n },\n resolver: {\n sourceExts: [...sourceExts, \"css\", \"scss\", \"sass\"],\n },\n };\n})();\n```\n\n---\n\n#### For React Native v0.56 or older\n\nConfigure `rn-cli.config.js` to use a custom transformer file and add more extensions:\n\n```js\nmodule.exports = {\n getTransformModulePath() {\n return require.resolve(\"./transformer.js\");\n },\n getSourceExts() {\n return [\"js\", \"jsx\", \"css\", \"scss\", \"sass\"];\n },\n};\n```\n\n---\n\n#### For Expo SDK v30.0.0 or older\n\nConfigure `app.json` to use a custom transformer file and add more extensions:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"sourceExts\": [\"js\", \"jsx\", \"css\", \"scss\", \"sass\"],\n \"transformer\": \"./transformer.js\"\n }\n }\n}\n```\n\n### Step 4: configure transformer\n\nCreate a `transformer.js` file:\n\n```js\n// For React Native version 0.59 or later\nvar upstreamTransformer = require(\"metro-react-native-babel-transformer\");\n\n// For React Native version 0.56-0.58\n// var upstreamTransformer = require(\"metro/src/reactNativeTransformer\");\n\n// For React Native version 0.52-0.55\n// var upstreamTransformer = require(\"metro/src/transformer\");\n\n// For React Native version 0.47-0.51\n// var upstreamTransformer = require(\"metro-bundler/src/transformer\");\n\n// For React Native version 0.46\n// var upstreamTransformer = require(\"metro-bundler/build/transformer\");\n\nvar sassTransformer = require(\"react-native-sass-transformer\");\nvar cssTransformer = require(\"react-native-css-transformer\");\n\nmodule.exports.transform = function ({ src, filename, options }) {\n if (filename.endsWith(\".scss\") || filename.endsWith(\".sass\")) {\n return sassTransformer.transform({ src, filename, options });\n } else if (filename.endsWith(\".css\")) {\n return cssTransformer.transform({ src, filename, options });\n }\n return upstreamTransformer.transform({ src, filename, options });\n};\n```\n"
},
{
"path": "docs/setup-css-variables.md",
"content": "## Setup CSS variables support\n\n_! Please make sure that you are using the latest version of Sass, LESS, or Stylus transformer before doing the setup. !_\n\nUsing [postcss-css-variables](https://github.com/MadLittleMods/postcss-css-variables#readme) you can use most of CSS variables features, including selector cascading with some caveats, because this can only see the CSS, not the potentially dynamic HTML and DOM the CSS is applied to.\n\nIf you are already using `react-native-css-transformer`, then need to switch to use `react-native-postcss-transformer` (please refer to the setup documentation) and add a PostCSS config with [postcss-css-variables](https://github.com/MadLittleMods/postcss-css-variables#readme) plugin.\n\n### For Typescript users\n\nIf you are using the typed transformers (e.g. generates `mystyles.d.scss` typings for Sass files), then you can use the normal transformers for Sass/Less/Stylus and a typed transformer for PostCSS. This is because with CSS variables you are using two transformers together and only one of the transformers needs to create the types file.\n\nFor example when using Sass: `react-native-sass-transformer` + `react-native-typed-postcss-transformer`.\n\n### Step 1: Setup React Native CSS modules\n\n- [Setup React Native CSS modules with CSS support](setup-css.md)\n- [Setup React Native CSS modules with PostCSS support](setup-postcss.md)\n- [Setup React Native CSS modules with Sass support](setup-sass.md)\n- [Setup React Native CSS modules with Less support](setup-less.md)\n- [Setup React Native CSS modules with Stylus support](setup-stylus.md)\n\n### Step 2: Install PostCSS dependencies\n\nInstall [PostCSS](https://postcss.org/), [postcss-css-variables](https://github.com/MadLittleMods/postcss-css-variables#readme) plugin, and [react-native-postcss-transformer](https://github.com/kristerkari/react-native-postcss-transformer).\n\n```sh\nyarn add postcss postcss-css-variables react-native-postcss-transformer --dev\n```\n\n### Step 3: Configure PostCSS\n\nAdd `postcss-css-variables` to your PostCSS configuration with [one of the supported config formats](https://github.com/michael-ciniawsky/postcss-load-config), e.g. `package.json`, `.postcssrc`, `postcss.config.js`, etc.\n\n### Step 4: Setup `transformer.js`\n\n_This example is for Sass, if you are using Less or Stylus, switch `react-native-sass-transformer` to `react-native-less-transformer`/`react-native-stylus-transformer` and change the file extensions `.scss` and `.sass` to `.less`/`.styl`._\n\nTo make CSS variables work, we first need to render Sass to CSS, and then pass that to PostCSS.\n\nCreate a `transformer.js` file to your project's root and do the following:\n\n```js\n// For React Native version 0.59 or later\nvar upstreamTransformer = require(\"metro-react-native-babel-transformer\");\n\n// For React Native version 0.56-0.58\n// var upstreamTransformer = require(\"metro/src/reactNativeTransformer\");\n\n// For React Native version 0.52-0.55\n// var upstreamTransformer = require(\"metro/src/transformer\");\n\n// For React Native version 0.47-0.51\n// var upstreamTransformer = require(\"metro-bundler/src/transformer\");\n\n// For React Native version 0.46\n// var upstreamTransformer = require(\"metro-bundler/build/transformer\");\n\nvar sassTransformer = require(\"react-native-sass-transformer\");\nvar postCSSTransformer = require(\"react-native-postcss-transformer\");\n\nmodule.exports.transform = function ({ src, filename, options }) {\n if (filename.endsWith(\".scss\") || filename.endsWith(\".sass\")) {\n return sassTransformer\n .renderToCSS({ src, filename, options })\n .then((css) =>\n postCSSTransformer.transform({ src: css, filename, options })\n );\n } else {\n return upstreamTransformer.transform({ src, filename, options });\n }\n};\n```\n\n### Step 5: Setup Metro config\n\nIn `metro.config.js` point the `babelTransformerPath` to `transformer.js` file:\n\n```diff\n-babelTransformerPath: require.resolve(\"react-native-sass-transformer\")\n+babelTransformerPath: require.resolve(\"./transformer.js\")\n```\n"
},
{
"path": "docs/setup-css.md",
"content": "## Setup CSS modules for React Native (with CSS support)\n\nFollowing libraries are needed:\n\n- [react-native-css-transformer](https://github.com/kristerkari/react-native-css-transformer) - Transforms CSS to a React Native compatible style object and handles live reloading\n- [babel-plugin-react-native-platform-specific-extensions](https://github.com/kristerkari/babel-plugin-react-native-platform-specific-extensions) - Transforms ES6 `import` statements to platform specific `require` statements if the platform specific files exist on disk.\n- [babel-plugin-react-native-classname-to-style](https://github.com/kristerkari/babel-plugin-react-native-classname-to-style) - Transforms `className` property to `style` property.\n\n### Step 1: Install depencies to run React Native\n\nMake sure that you have `react-native-cli` installed (`npm install -g react-native-cli`) and [XCode](https://developer.apple.com/xcode/) (for iOS development) / [Android Studio](https://developer.android.com/studio/index.html) (for Android development) installed and working.\n\n- Go to \"Building Projects with Native Code\" tab and follow the guide: https://facebook.github.io/react-native/docs/getting-started.html\n\n### Step 2: Create a new React Native app and test that it works\n\ne.g.\n\n```sh\nreact-native init AwesomeProject\ncd AwesomeProject\n```\n\nStart packager:\n\n```sh\nyarn start\n```\n\nRun project on iOS simulator:\n\n```sh\nreact-native run-ios\n```\n\n### Step 3: Install dependencies for React Native CSS modules\n\n```sh\nyarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-css-transformer --dev\n```\n\n### Step 4: Setup Babel configuration\n\n#### For React Native v0.57 or newer\n\n`.babelrc` (or `babel.config.js`)\n\n```json\n{\n \"presets\": [\"module:metro-react-native-babel-preset\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"css\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\n`.babelrc`\n\n```json\n{\n \"presets\": [\"react-native\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"css\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For Expo\n\n`babel.config.js` (older Expo versions use `.babelrc`)\n\n```js\nmodule.exports = function (api) {\n api.cache(true);\n return {\n presets: [\"babel-preset-expo\"],\n plugins: [\n \"react-native-classname-to-style\",\n [\"react-native-platform-specific-extensions\", { extensions: [\"css\"] }],\n ],\n };\n};\n```\n\n### Step 5: Setup Metro bundler configuration\n\n#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer\n\nAdd this to `metro.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nconst { getDefaultConfig } = require(\"metro-config\");\n\nmodule.exports = (async () => {\n const {\n resolver: { sourceExts },\n } = await getDefaultConfig();\n return {\n transformer: {\n babelTransformerPath: require.resolve(\"react-native-css-transformer\"),\n },\n resolver: {\n sourceExts: [...sourceExts, \"css\"],\n },\n };\n})();\n```\n\nIf you are using [Expo](https://expo.io/), you also need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"config\": \"metro.config.js\",\n \"sourceExts\": [\"js\", \"jsx\", \"css\"]\n }\n }\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\nIf you are using React Native without Expo, add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nmodule.exports = {\n getTransformModulePath() {\n return require.resolve(\"react-native-css-transformer\");\n },\n getSourceExts() {\n return [\"js\", \"jsx\", \"css\"];\n },\n};\n```\n\n---\n\n#### For Expo SDK v30.0.0 or older\n\nIf you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"sourceExts\": [\"js\", \"jsx\", \"css\"],\n \"transformer\": \"node_modules/react-native-css-transformer/index.js\"\n }\n }\n}\n```\n\n### Step 6: Add some CSS to your project and use it inside a React component\n\n`styles.css`:\n\n```css\n.container {\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: #f5fcff;\n}\n\n.blue {\n color: blue;\n font-size: 30px;\n}\n```\n\nAdd style import and `BlueText` component to `App.js`:\n\n```jsx\nimport React, { Component } from \"react\";\nimport { Text, View } from \"react-native\";\nimport styles from \"./styles.css\";\n\nconst BlueText = () => {\n return Blue Text;\n};\n\nexport default class App extends Component<{}> {\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n### Step 7: Restart packager and clear cache\n\nRestart React Native packager and clear it's cache (important) to see the styles that you added.\n\n```sh\nyarn start --reset-cache\n```\n"
},
{
"path": "docs/setup-less.md",
"content": "## Setup CSS modules for React Native (with Less support)\n\nFollowing libraries are needed:\n\n- [react-native-less-transformer](https://github.com/kristerkari/react-native-less-transformer) - Transforms Less to a React Native compatible style object and handles live reloading\n- [babel-plugin-react-native-platform-specific-extensions](https://github.com/kristerkari/babel-plugin-react-native-platform-specific-extensions) - Transforms ES6 `import` statements to platform specific `require` statements if the platform specific files exist on disk.\n- [babel-plugin-react-native-classname-to-style](https://github.com/kristerkari/babel-plugin-react-native-classname-to-style) - Transforms `className` property to `style` property.\n\n### Step 1: Install depencies to run React Native\n\nMake sure that you have `react-native-cli` installed (`npm install -g react-native-cli`) and [XCode](https://developer.apple.com/xcode/) (for iOS development) / [Android Studio](https://developer.android.com/studio/index.html) (for Android development) installed and working.\n\n- Go to \"Building Projects with Native Code\" tab and follow the guide: https://facebook.github.io/react-native/docs/getting-started.html\n\n### Step 2: Create a new React Native app and test that it works\n\ne.g.\n\n```sh\nreact-native init AwesomeProject\ncd AwesomeProject\n```\n\nStart packager:\n\n```sh\nyarn start\n```\n\nRun project on iOS simulator:\n\n```sh\nreact-native run-ios\n```\n\n### Step 3: Install dependencies for React Native CSS modules\n\n```sh\nyarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-less-transformer less --dev\n```\n\n### Step 4: Setup Babel configuration\n\n#### For React Native v0.57 or newer\n\n`.babelrc` (or `babel.config.js`)\n\n```json\n{\n \"presets\": [\"module:metro-react-native-babel-preset\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"less\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\n`.babelrc`\n\n```json\n{\n \"presets\": [\"react-native\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"less\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For Expo\n\n`babel.config.js` (older Expo versions use `.babelrc`)\n\n```js\nmodule.exports = function (api) {\n api.cache(true);\n return {\n presets: [\"babel-preset-expo\"],\n plugins: [\n \"react-native-classname-to-style\",\n [\"react-native-platform-specific-extensions\", { extensions: [\"less\"] }],\n ],\n };\n};\n```\n\n### Step 5: Setup Metro bundler configuration\n\n#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer\n\nAdd this to `metro.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nconst { getDefaultConfig } = require(\"metro-config\");\n\nmodule.exports = (async () => {\n const {\n resolver: { sourceExts },\n } = await getDefaultConfig();\n return {\n transformer: {\n babelTransformerPath: require.resolve(\"react-native-less-transformer\"),\n },\n resolver: {\n sourceExts: [...sourceExts, \"less\"],\n },\n };\n})();\n```\n\nIf you are using [Expo](https://expo.io/), you also need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"config\": \"metro.config.js\",\n \"sourceExts\": [\"js\", \"jsx\", \"less\"]\n }\n }\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\nIf you are using React Native without Expo, add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nmodule.exports = {\n getTransformModulePath() {\n return require.resolve(\"react-native-less-transformer\");\n },\n getSourceExts() {\n return [\"js\", \"jsx\", \"less\"];\n },\n};\n```\n\n---\n\n#### For Expo SDK v30.0.0 or older\n\nIf you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"sourceExts\": [\"js\", \"jsx\", \"less\"],\n \"transformer\": \"node_modules/react-native-less-transformer/index.js\"\n }\n }\n}\n```\n\n### Step 6: Add some Less to your project and use it inside a React component\n\n`styles.less`:\n\n```less\n.container {\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: #f5fcff;\n}\n\n.blue {\n color: blue;\n font-size: 30px;\n}\n```\n\nAdd style import and `BlueText` component to `App.js`:\n\n```jsx\nimport React, { Component } from \"react\";\nimport { Text, View } from \"react-native\";\nimport styles from \"./styles.less\";\n\nconst BlueText = () => {\n return Blue Text;\n};\n\nexport default class App extends Component<{}> {\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n### Step 7: Restart packager and clear cache\n\nRestart React Native packager and clear it's cache (important) to see the styles that you added.\n\n```sh\nyarn start --reset-cache\n```\n"
},
{
"path": "docs/setup-linting.md",
"content": "## Setup recommended linting (ESLint & stylelint)\n\nSetup [ESLint](https://eslint.org) and [stylelint](https://stylelint.io/) in your project to avoid common problems and to keep CSS consistent.\n\n- ESLint is used to warn for unused CSS.\n- stylelint is used to make sure that the CSS is compatible with both Web and React Native, and to warn for duplicate properties, vendor prefixes, incompatible units, etc.\n\n### Step 1: Install ESLint, stylelint and plugins\n\n```sh\nyarn add eslint eslint-plugin-css-modules stylelint stylelint-react-native stylelint-config-react-native-css-modules --dev\n```\n\n### Step 2: Add configs\n\nAdd these configs to your project's `package.json` (or use `.stylelintrc` and `.eslintrc` files).\n\n**ESlint:**\n\n```json\n\"eslintConfig\": {\n \"parserOptions\": {\n \"sourceType\": \"module\",\n \"ecmaVersion\": 2017,\n \"ecmaFeatures\": {\n \"jsx\": true\n }\n },\n \"plugins\": [\n \"css-modules\"\n ],\n \"extends\": [\n \"plugin:css-modules/recommended\"\n ]\n},\n```\n\n**stylelint:**\n\n```json\n\"stylelint\": {\n \"extends\": \"stylelint-config-react-native-css-modules\",\n \"rules\": {\n \"declaration-block-no-duplicate-properties\": true,\n \"no-duplicate-selectors\": true,\n \"no-extra-semicolons\": true,\n \"no-eol-whitespace\": true,\n \"no-missing-end-of-source-newline\": true\n }\n}\n```\n\n### Step 3: Add npm script to run linters\n\nIn your project's `package.json`, add a new command called `lint` to `scripts`, so that it looks like this:\n\n```json\n\"scripts\": {\n \"lint\": \"eslint . && stylelint '**/*.@(css|scss|sass|less|styl)'\"\n}\n```\n\n_You can remove file extensions that you don't use from the stylelint command._\n\n### Step 4: Run linters\n\nRun `yarn lint` in a terminal window to see if there are any linting errors or warnings.\n"
},
{
"path": "docs/setup-postcss.md",
"content": "## Setup CSS modules for React Native (with PostCSS support)\n\nFollowing libraries are needed:\n\n- [react-native-postcss-transformer](https://github.com/kristerkari/react-native-postcss-transformer) - Uses [PostCSS](https://github.com/postcss/postcss) to transform CSS to a React Native compatible style object and handles live reloading\n- [babel-plugin-react-native-platform-specific-extensions](https://github.com/kristerkari/babel-plugin-react-native-platform-specific-extensions) - Transforms ES6 `import` statements to platform specific `require` statements if the platform specific files exist on disk.\n- [babel-plugin-react-native-classname-to-style](https://github.com/kristerkari/babel-plugin-react-native-classname-to-style) - Transforms `className` property to `style` property.\n\n### Step 1: Install depencies to run React Native\n\nMake sure that you have `react-native-cli` installed (`npm install -g react-native-cli`) and [XCode](https://developer.apple.com/xcode/) (for iOS development) / [Android Studio](https://developer.android.com/studio/index.html) (for Android development) installed and working.\n\n- Go to \"Building Projects with Native Code\" tab and follow the guide: https://facebook.github.io/react-native/docs/getting-started.html\n\n### Step 2: Create a new React Native app and test that it works\n\ne.g.\n\n```sh\nreact-native init AwesomeProject\ncd AwesomeProject\n```\n\nStart packager:\n\n```sh\nyarn start\n```\n\nRun project on iOS simulator:\n\n```sh\nreact-native run-ios\n```\n\n### Step 3: Install dependencies for React Native CSS modules\n\n```sh\nyarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-postcss-transformer postcss --dev\n```\n\n### Step 4: Add your PostCSS config and install your PostCSS plugins\n\nAdd your PostCSS configuration to [one of the supported config formats](https://github.com/michael-ciniawsky/postcss-load-config), e.g. `package.json`, `.postcssrc`, `postcss.config.js`, etc.\n\n### Step 5: Setup Babel configuration\n\n> Remember to add additional extensions if needed.\n\n#### For React Native v0.57 or newer\n\n`.babelrc` (or `babel.config.js`)\n\n```json\n{\n \"presets\": [\"module:metro-react-native-babel-preset\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"css\", \"pcss\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\n`.babelrc`\n\n```json\n{\n \"presets\": [\"react-native\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"css\", \"pcss\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For Expo\n\n`babel.config.js` (older Expo versions use `.babelrc`)\n\n```js\nmodule.exports = function (api) {\n api.cache(true);\n return {\n presets: [\"babel-preset-expo\"],\n plugins: [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n { extensions: [\"css\", \"pcss\"] },\n ],\n ],\n };\n};\n```\n\n### Step 6: Setup Metro bundler configuration\n\n#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer\n\nAdd this to `metro.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nconst { getDefaultConfig } = require(\"metro-config\");\n\nmodule.exports = (async () => {\n const {\n resolver: { sourceExts },\n } = await getDefaultConfig();\n return {\n transformer: {\n babelTransformerPath: require.resolve(\"./postcss-transformer.js\"),\n },\n resolver: {\n sourceExts: [...sourceExts, \"css\", \"pcss\"],\n },\n };\n})();\n```\n\nIf you are using [Expo](https://expo.io/), you also need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"config\": \"metro.config.js\",\n \"sourceExts\": [\"js\", \"jsx\", \"css\", \"pcss\"]\n }\n }\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\nIf you are using React Native without Expo, add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nmodule.exports = {\n getTransformModulePath() {\n return require.resolve(\"./postcss-transformer.js\");\n },\n getSourceExts() {\n return [\"js\", \"jsx\", \"css\", \"pcss\"]; // <-- Add other extensions if needed.\n },\n};\n```\n\n---\n\n#### For Expo SDK v30.0.0 or older\n\nIf you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"sourceExts\": [\"js\", \"jsx\", \"css\", \"pcss\"],\n \"transformer\": \"./postcss-transformer.js\"\n }\n }\n}\n```\n\nCreate `postcss-transformer.js` file to your project's root and specify supported extensions:\n\n```js\n// For React Native version 0.59 or later\nvar upstreamTransformer = require(\"metro-react-native-babel-transformer\");\n\n// For React Native version 0.56-0.58\n// var upstreamTransformer = require(\"metro/src/reactNativeTransformer\");\n\n// For React Native version 0.52-0.55\n// var upstreamTransformer = require(\"metro/src/transformer\");\n\n// For React Native version 0.47-0.51\n// var upstreamTransformer = require(\"metro-bundler/src/transformer\");\n\n// For React Native version 0.46\n// var upstreamTransformer = require(\"metro-bundler/build/transformer\");\n\nvar postcssTransformer = require(\"react-native-postcss-transformer\");\nvar postCSSExtensions = [\"css\", \"pcss\"]; // <-- Add other extensions if needed.\n\nmodule.exports.transform = function ({ src, filename, options }) {\n if (postCSSExtensions.some((ext) => filename.endsWith(\".\" + ext))) {\n return postcssTransformer.transform({ src, filename, options });\n }\n return upstreamTransformer.transform({ src, filename, options });\n};\n```\n\n### Step 7: Add some CSS to your project and use it inside a React component\n\n`styles.css`:\n\n```css\n.container {\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: #f5fcff;\n}\n\n.blue {\n color: blue;\n font-size: 30px;\n}\n```\n\nAdd style import and `BlueText` component to `App.js`:\n\n```jsx\nimport React, { Component } from \"react\";\nimport { Text, View } from \"react-native\";\nimport styles from \"./styles.css\";\n\nconst BlueText = () => {\n return Blue Text;\n};\n\nexport default class App extends Component<{}> {\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n### Step 8: Restart packager and clear cache\n\nRestart React Native packager and clear it's cache (important) to see the styles that you added.\n\n```sh\nyarn start --reset-cache\n```\n"
},
{
"path": "docs/setup-responsive.md",
"content": "## Setup CSS modules for React Native (with CSS Media Queries & CSS Viewport Units support)\n\nFollowing library needs to be taken into use:\n\n- [babel-plugin-react-native-classname-to-dynamic-style](https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style) - Transforms `className` property to `style` property and matches dynamic styles (media queries and viewport units) at runtime with React Native.\n\n### Step 1: Setup React Native CSS modules\n\n- [Setup React Native CSS modules with CSS support](setup-css.md)\n- [Setup React Native CSS modules with PostCSS support](setup-postcss.md)\n- [Setup React Native CSS modules with Sass support](setup-sass.md)\n- [Setup React Native CSS modules with Less support](setup-less.md)\n- [Setup React Native CSS modules with Stylus support](setup-stylus.md)\n\n### Step 2: Change the className Babel plugin to a dynamic one\n\nRemove old one:\n\n```sh\nyarn remove babel-plugin-react-native-classname-to-style\n```\n\nAdd new one:\n\n```sh\nyarn add babel-plugin-react-native-classname-to-dynamic-style --dev\n```\n\n### Step 3: Change Babel configuration\n\n`.babelrc` (or `babel.config.js`)\n\n```diff\n \"plugins\": [\n- \"react-native-classname-to-style\",\n+ \"react-native-classname-to-dynamic-style\",\n```\n\n### Step 4: Add some CSS with Media Queries and Viewport Units to your project and use it inside a React component\n\n`styles.css`:\n\n```css\n.container {\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: #f5fcff;\n}\n\n.blue {\n color: blue;\n font-size: 3vmax;\n}\n\n@media (orientation: landscape) {\n .blue {\n color: red;\n font-size: 10px;\n }\n}\n```\n\nAdd style import and `BlueText` component to `App.js`:\n\n```jsx\nimport React, { Component } from \"react\";\nimport { Text, View } from \"react-native\";\nimport styles from \"./styles.css\";\n\nconst BlueText = () => {\n return Blue Text;\n};\n\nexport default class App extends Component<{}> {\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n### Step 5: Restart packager and clear cache\n\nRestart React Native packager and clear it's cache (important) to see the styles that you added.\n\n```sh\nyarn start --reset-cache\n```\n"
},
{
"path": "docs/setup-sass.md",
"content": "## Setup CSS modules for React Native (with Sass support)\n\nFollowing libraries are needed:\n\n- [react-native-sass-transformer](https://github.com/kristerkari/react-native-sass-transformer) - Transforms Sass to a React Native compatible style object and handles live reloading\n- [babel-plugin-react-native-platform-specific-extensions](https://github.com/kristerkari/babel-plugin-react-native-platform-specific-extensions) - Transforms ES6 `import` statements to platform specific `require` statements if the platform specific files exist on disk.\n- [babel-plugin-react-native-classname-to-style](https://github.com/kristerkari/babel-plugin-react-native-classname-to-style) - Transforms `className` property to `style` property.\n\n### Step 1: Install depencies to run React Native\n\nMake sure that you have `react-native-cli` installed (`npm install -g react-native-cli`) and [XCode](https://developer.apple.com/xcode/) (for iOS development) / [Android Studio](https://developer.android.com/studio/index.html) (for Android development) installed and working.\n\n- Go to \"Building Projects with Native Code\" tab and follow the guide: https://facebook.github.io/react-native/docs/getting-started.html\n\n### Step 2: Create a new React Native app and test that it works\n\ne.g.\n\n```sh\nreact-native init AwesomeProject\ncd AwesomeProject\n```\n\nStart packager:\n\n```sh\nyarn start\n```\n\nRun project on iOS simulator:\n\n```sh\nreact-native run-ios\n```\n\n### Step 3: Install dependencies for React Native CSS modules\n\n```sh\nyarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-sass-transformer sass --dev\n```\n\n### Step 4: Setup Babel configuration\n\n#### For React Native v0.57 or newer\n\n`.babelrc` (or `babel.config.js`)\n\n```json\n{\n \"presets\": [\"module:metro-react-native-babel-preset\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"scss\", \"sass\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\n`.babelrc`\n\n```json\n{\n \"presets\": [\"react-native\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"scss\", \"sass\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For Expo\n\n`babel.config.js` (older Expo versions use `.babelrc`)\n\n```js\nmodule.exports = function (api) {\n api.cache(true);\n return {\n presets: [\"babel-preset-expo\"],\n plugins: [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n { extensions: [\"scss\", \"sass\"] },\n ],\n ],\n };\n};\n```\n\n### Step 5: Setup Metro bundler configuration\n\n#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer\n\nAdd this to `metro.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nconst { getDefaultConfig } = require(\"metro-config\");\n\nmodule.exports = (async () => {\n const {\n resolver: { sourceExts },\n } = await getDefaultConfig();\n return {\n transformer: {\n babelTransformerPath: require.resolve(\"react-native-sass-transformer\"),\n },\n resolver: {\n sourceExts: [...sourceExts, \"scss\", \"sass\"],\n },\n };\n})();\n```\n\nIf you are using [Expo](https://expo.io/), you also need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"config\": \"metro.config.js\",\n \"sourceExts\": [\"js\", \"jsx\", \"scss\", \"sass\"]\n }\n }\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\nIf you are using React Native without Expo, add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nmodule.exports = {\n getTransformModulePath() {\n return require.resolve(\"react-native-sass-transformer\");\n },\n getSourceExts() {\n return [\"js\", \"jsx\", \"scss\", \"sass\"];\n },\n};\n```\n\n---\n\n#### For Expo SDK v30.0.0 or older\n\nIf you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"sourceExts\": [\"js\", \"jsx\", \"scss\", \"sass\"],\n \"transformer\": \"node_modules/react-native-sass-transformer/index.js\"\n }\n }\n}\n```\n\n### Step 6: Add some Sass to your project and use it inside a React component\n\n`styles.scss`:\n\n```scss\n.container {\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: #f5fcff;\n}\n\n.blue {\n color: blue;\n font-size: 30px;\n}\n```\n\nAdd style import and `BlueText` component to `App.js`:\n\n```jsx\nimport React, { Component } from \"react\";\nimport { Text, View } from \"react-native\";\nimport styles from \"./styles.scss\";\n\nconst BlueText = () => {\n return Blue Text;\n};\n\nexport default class App extends Component<{}> {\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n### Step 7: Restart packager and clear cache\n\nRestart React Native packager and clear it's cache (important) to see the styles that you added.\n\n```sh\nyarn start --reset-cache\n```\n"
},
{
"path": "docs/setup-stylename.md",
"content": "## Setup CSS modules for React Native (with styleName syntax)\n\nThe `styleName` attribute and syntax are based on [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules#conventions).\n\n_This example only shows how to setup CSS support using the CSS transformer. Have a look at the setup documentation if you need PostCSS, Sass, Less or Stylus support (you need to use a different transformer and file extensions)._\n\nFollowing libraries are needed:\n\n- [react-native-css-transformer](https://github.com/kristerkari/react-native-css-transformer) - Transforms CSS to a React Native compatible style object and handles live reloading\n- [babel-plugin-react-native-platform-specific-extensions](https://github.com/kristerkari/babel-plugin-react-native-platform-specific-extensions) - Transforms ES6 `import` statements to platform specific `require` statements if the platform specific files exist on disk.\n- [babel-plugin-react-native-stylename-to-style](https://github.com/kristerkari/babel-plugin-react-native-stylename-to-style) - Transforms special `styleName` property to `style` property.\n\n### Step 1: Install depencies to run React Native\n\nMake sure that you have `react-native-cli` installed (`npm install -g react-native-cli`) and [XCode](https://developer.apple.com/xcode/) (for iOS development) / [Android Studio](https://developer.android.com/studio/index.html) (for Android development) installed and working.\n\n- Go to \"Building Projects with Native Code\" tab and follow the guide: https://facebook.github.io/react-native/docs/getting-started.html\n\n### Step 2: Create a new React Native app and test that it works\n\ne.g.\n\n```sh\nreact-native init AwesomeProject\ncd AwesomeProject\n```\n\nStart packager:\n\n```sh\nyarn start\n```\n\nRun project on iOS simulator:\n\n```sh\nreact-native run-ios\n```\n\n### Step 3: Install dependencies for React Native CSS modules\n\n```sh\nyarn add babel-plugin-react-native-stylename-to-style babel-plugin-react-native-platform-specific-extensions react-native-css-transformer --dev\n```\n\n### Step 4: Setup Babel configuration\n\n#### For React Native v0.57 or newer\n\n`.babelrc` (or `babel.config.js`)\n\n```json\n{\n \"presets\": [\"module:metro-react-native-babel-preset\"],\n \"plugins\": [\n [\n \"react-native-stylename-to-style\",\n {\n \"extensions\": [\"css\"]\n }\n ],\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"css\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\n`.babelrc`\n\n```json\n{\n \"presets\": [\"react-native\"],\n \"plugins\": [\n [\n \"react-native-stylename-to-style\",\n {\n \"extensions\": [\"css\"]\n }\n ],\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"css\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For Expo\n\n`babel.config.js` (older Expo versions use `.babelrc`)\n\n```js\nmodule.exports = function (api) {\n api.cache(true);\n return {\n presets: [\"babel-preset-expo\"],\n plugins: [\n [\n \"react-native-stylename-to-style\",\n {\n extensions: [\"css\"],\n },\n ],\n [\n \"react-native-platform-specific-extensions\",\n {\n extensions: [\"css\"],\n },\n ],\n ],\n };\n};\n```\n\n### Step 5: Setup Metro bundler configuration\n\n#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer\n\nAdd this to `metro.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nconst { getDefaultConfig } = require(\"metro-config\");\n\nmodule.exports = (async () => {\n const {\n resolver: { sourceExts },\n } = await getDefaultConfig();\n return {\n transformer: {\n babelTransformerPath: require.resolve(\"react-native-css-transformer\"),\n },\n resolver: {\n sourceExts: [...sourceExts, \"css\"],\n },\n };\n})();\n```\n\nIf you are using [Expo](https://expo.io/), you also need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"config\": \"metro.config.js\",\n \"sourceExts\": [\"js\", \"jsx\", \"css\"]\n }\n }\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\nIf you are using React Native without Expo, add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nmodule.exports = {\n getTransformModulePath() {\n return require.resolve(\"react-native-css-transformer\");\n },\n getSourceExts() {\n return [\"js\", \"jsx\", \"css\"];\n },\n};\n```\n\n---\n\n#### For Expo SDK v30.0.0 or older\n\nIf you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"sourceExts\": [\"js\", \"jsx\", \"css\"],\n \"transformer\": \"node_modules/react-native-css-transformer/index.js\"\n }\n }\n}\n```\n\n### Step 6: Add some CSS to your project and use it inside a React component\n\n`styles.css`:\n\n```css\n.container {\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: #f5fcff;\n}\n\n.blue-text {\n color: blue;\n font-size: 30px;\n}\n```\n\nAdd style import and `BlueText` component to `App.js`:\n\n```jsx\nimport React, { Component } from \"react\";\nimport { Text, View } from \"react-native\";\nimport \"./styles.css\";\n\nconst BlueText = () => {\n return Blue Text;\n};\n\nexport default class App extends Component<{}> {\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n### Step 7: Restart packager and clear cache\n\nRestart React Native packager and clear it's cache (important) to see the styles that you added.\n\n```sh\nyarn start --reset-cache\n```\n"
},
{
"path": "docs/setup-stylus.md",
"content": "## Setup CSS modules for React Native (with Stylus support)\n\nFollowing libraries are needed:\n\n- [react-native-stylus-transformer](https://github.com/kristerkari/react-native-stylus-transformer) - Transforms Stylus to a React Native compatible style object and handles live reloading\n- [babel-plugin-react-native-platform-specific-extensions](https://github.com/kristerkari/babel-plugin-react-native-platform-specific-extensions) - Transforms ES6 `import` statements to platform specific `require` statements if the platform specific files exist on disk.\n- [babel-plugin-react-native-classname-to-style](https://github.com/kristerkari/babel-plugin-react-native-classname-to-style) - Transforms `className` property to `style` property.\n\n### Step 1: Install depencies to run React Native\n\nMake sure that you have `react-native-cli` installed (`npm install -g react-native-cli`) and [XCode](https://developer.apple.com/xcode/) (for iOS development) / [Android Studio](https://developer.android.com/studio/index.html) (for Android development) installed and working.\n\n- Go to \"Building Projects with Native Code\" tab and follow the guide: https://facebook.github.io/react-native/docs/getting-started.html\n\n### Step 2: Create a new React Native app and test that it works\n\ne.g.\n\n```sh\nreact-native init AwesomeProject\ncd AwesomeProject\n```\n\nStart packager:\n\n```sh\nyarn start\n```\n\nRun project on iOS simulator:\n\n```sh\nreact-native run-ios\n```\n\n### Step 3: Install dependencies for React Native CSS modules\n\n```sh\nyarn add babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions react-native-stylus-transformer stylus --dev\n```\n\n### Step 4: Setup Babel configuration\n\n#### For React Native v0.57 or newer\n\n`.babelrc` (or `babel.config.js`)\n\n```json\n{\n \"presets\": [\"module:metro-react-native-babel-preset\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"styl\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\n`.babelrc`\n\n```json\n{\n \"presets\": [\"react-native\"],\n \"plugins\": [\n \"react-native-classname-to-style\",\n [\n \"react-native-platform-specific-extensions\",\n {\n \"extensions\": [\"styl\"]\n }\n ]\n ]\n}\n```\n\n---\n\n#### For Expo\n\n`babel.config.js` (older Expo versions use `.babelrc`)\n\n```js\nmodule.exports = function (api) {\n api.cache(true);\n return {\n presets: [\"babel-preset-expo\"],\n plugins: [\n \"react-native-classname-to-style\",\n [\"react-native-platform-specific-extensions\", { extensions: [\"styl\"] }],\n ],\n };\n};\n```\n\n### Step 5: Setup Metro bundler configuration\n\n#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer\n\nAdd this to `metro.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nconst { getDefaultConfig } = require(\"metro-config\");\n\nmodule.exports = (async () => {\n const {\n resolver: { sourceExts },\n } = await getDefaultConfig();\n return {\n transformer: {\n babelTransformerPath: require.resolve(\"react-native-stylus-transformer\"),\n },\n resolver: {\n sourceExts: [...sourceExts, \"styl\"],\n },\n };\n})();\n```\n\nIf you are using [Expo](https://expo.io/), you also need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"config\": \"metro.config.js\",\n \"sourceExts\": [\"js\", \"jsx\", \"styl\"]\n }\n }\n}\n```\n\n---\n\n#### For React Native v0.56 or older\n\nIf you are using React Native without Expo, add this to `rn-cli.config.js` in your project's root (create the file if you don't have one already):\n\n```js\nmodule.exports = {\n getTransformModulePath() {\n return require.resolve(\"react-native-stylus-transformer\");\n },\n getSourceExts() {\n return [\"js\", \"jsx\", \"styl\"];\n },\n};\n```\n\n---\n\n#### For Expo SDK v30.0.0 or older\n\nIf you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:\n\n```json\n{\n \"expo\": {\n \"packagerOpts\": {\n \"sourceExts\": [\"js\", \"jsx\", \"styl\"],\n \"transformer\": \"node_modules/react-native-stylus-transformer/index.js\"\n }\n }\n}\n```\n\n### Step 6: Add some Stylus to your project and use it inside a React component\n\n`styles.styl`:\n\n```styl\n.container {\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: #f5fcff;\n}\n\n.blue {\n color: blue;\n font-size: 30px;\n}\n```\n\nAdd style import and `BlueText` component to `App.js`:\n\n```jsx\nimport React, { Component } from \"react\";\nimport { Text, View } from \"react-native\";\nimport styles from \"./styles.styl\";\n\nconst BlueText = () => {\n return Blue Text;\n};\n\nexport default class App extends Component<{}> {\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n### Step 7: Restart packager and clear cache\n\nRestart React Native packager and clear it's cache (important) to see the styles that you added.\n\n```sh\nyarn start --reset-cache\n```\n"
},
{
"path": "docs/setup-typescript.md",
"content": "_Have a look at the example app to see how you can use CSS modules and Typescript for both React Native and web browsers using the same code._\n\n:point_right: [react-native-css-modules-with-typescript-example](https://github.com/kristerkari/react-native-css-modules-with-typescript-example)\n\n## Setup CSS modules for React Native + Typescript\n\n### Step 1: Setup React Native CSS modules\n\n_If you want Typescript types (`.d.ts` files) being generated your CSS/Sass/Less/Stylus files, then follow any of the guides below, but install a \"typed\" transformer instead of the regular one. E.g. `react-native-sass-transformer` -> `react-native-typed-sass-transformer`. That way you can avoid unused CSS classes in your app._\n\n- [Setup React Native CSS modules with CSS support](setup-css.md)\n- [Setup React Native CSS modules with PostCSS support](setup-postcss.md)\n- [Setup React Native CSS modules with Sass support](setup-sass.md)\n- [Setup React Native CSS modules with Less support](setup-less.md)\n- [Setup React Native CSS modules with Stylus support](setup-stylus.md)\n\n### Step 2: Install Typescript dependencies\n\n#### For React Native v0.57 or newer\n\n```\nyarn add typescript --dev\n```\n\n#### For React Native v0.56 or older\n\n```\nyarn add react-native-typescript-transformer typescript --dev\n```\n\n### Step 3: Install custom `@types/react-native` package with `className` support\n\nThis package is needed to get the `className` property to work correctly:\n\n- https://github.com/kristerkari/react-native-types-for-css-modules#installation\n\n### Step 4: Check project's `tsconfig.json`\n\nMake sure that `jsx` property is set to `react-native` in Typescript's `compilerOptions`. This is important so that `className` property can be mapped to `style` property (won't work if `jsx` option is set to `react`).\n\n`tsconfig.json`:\n\n```json\n\"compilerOptions\": {\n ...\n \"jsx\": \"react-native\"\n}\n```\n\n### Step 5: Setup transformer to support CSS modules and Typescript\n\n#### For React Native v0.57 or newer\n\n_This step is not needed if you are using React Native v0.57 or newer._\n\n#### For React Native v0.56 or older (Typescript is supported by default on React Native 0.57+)\n\n_This example only shows how to setup CSS support. Have a look at the setup documentation if you need PostCSS, Sass, Less or Stylus support._\n\nIn your project's root folder:\n\n`rn-cli.config.js`\n\n```js\nmodule.exports = {\n getTransformModulePath() {\n return require.resolve(\"./transformer.js\");\n },\n getSourceExts() {\n return [\"ts\", \"tsx\", \"css\"];\n },\n};\n```\n\n`transformer.js`\n\n```js\n// For React Native version 0.56 or later\nvar upstreamTransformer = require(\"metro/src/reactNativeTransformer\");\n\n// For React Native version 0.52-0.55\n// var upstreamTransformer = require(\"metro/src/transformer\");\n\n// For React Native version 0.47-0.51\n// var upstreamTransformer = require(\"metro-bundler/src/transformer\");\n\n// For React Native version 0.46\n// var upstreamTransformer = require(\"metro-bundler/build/transformer\");\n\nvar cssTransformer = require(\"react-native-css-transformer\");\nvar typescriptTransformer = require(\"react-native-typescript-transformer\");\n\nmodule.exports.transform = function ({ src, filename, options }) {\n if (filename.endsWith(\".css\")) {\n return cssTransformer.transform({ src, filename, options });\n } else if (filename.endsWith(\".ts\") || filename.endsWith(\".tsx\")) {\n return typescriptTransformer.transform({ src, filename, options });\n }\n return upstreamTransformer.transform({ src, filename, options });\n};\n```\n"
},
{
"path": "docs/web-compatibility.md",
"content": "## Setup browser compatibility for a project that uses React Native CSS modules\n\nWhat you need is:\n\n- [Webpack](https://webpack.js.org/) (or some other bundler)\n- [React Native for Web](https://github.com/necolas/react-native-web)\n\n### Step 1: Setup React Native CSS modules\n\n- [Setup React Native CSS modules with CSS support](setup-css.md)\n- [Setup React Native CSS modules with PostCSS support](setup-postcss.md)\n- [Setup React Native CSS modules with Sass support](setup-sass.md)\n- [Setup React Native CSS modules with Less support](setup-less.md)\n- [Setup React Native CSS modules with Stylus support](setup-stylus.md)\n\n### Step 2: Install Webpack + React Native for Web\n\n#### Install Webpack dependencies\n\nfor React Native v0.56 or newer (uses Babel 7):\n\n```sh\nyarn add babel-loader babel-core@7.0.0-bridge.0 @babel/preset-env babel-preset-react@7.0.0-beta.3 webpack webpack-cli css-loader react-hot-loader style-loader webpack-dev-server --dev\n```\n\nfor React Native v0.55 or older (uses Babel 6):\n\n```sh\nyarn add babel-loader babel-core babel-preset-env babel-preset-react webpack webpack-cli css-loader react-hot-loader style-loader webpack-dev-server --dev\n```\n\n#### Install React Native for Web dependencies\n\n```sh\nyarn add react-art react-dom react-native-web --save\n```\n\n### Step 3: Add Webpack config\n\nIn your project's root folder, add a file called `webpack.config.js`:\n\n**For React Native v0.56:**\n\nUse the config below, but change `babel-loader`'s presets to:\n\n```js\npresets: [\"@babel/preset-env\", \"react\", \"react-native\"];\n```\n\n**For React Native v0.55 or older:**\n\nUse the config below, but change `babel-loader`'s presets to:\n\n```js\npresets: [\"babel-preset-env\", \"react\", \"react-native\"];\n```\n\n**For React Native v0.57 or newer:**\n\n```js\nconst webpack = require(\"webpack\");\n\nmodule.exports = {\n entry: [\"react-hot-loader/patch\", \"./index.web.js\"],\n devServer: {\n hot: true,\n },\n plugins: [\n new webpack.NamedModulesPlugin(),\n new webpack.HotModuleReplacementPlugin(),\n ],\n module: {\n rules: [\n {\n test: /\\.jsx?$/,\n exclude: /node_modules/,\n loader: \"babel-loader\",\n query: {\n babelrc: false,\n configFile: false,\n presets: [\n \"@babel/preset-env\",\n \"react\",\n \"module:metro-react-native-babel-preset\",\n ],\n plugins: [\"react-hot-loader/babel\"],\n },\n },\n {\n test: /\\.css$/,\n use: [\n {\n loader: \"style-loader\",\n },\n {\n loader: \"css-loader\",\n options: {\n modules: true,\n localIdentName: \"[path]___[name]__[local]___[hash:base64:5]\",\n },\n },\n ],\n },\n ],\n },\n resolve: {\n alias: {\n \"react-native\": \"react-native-web\",\n },\n extensions: [\".web.js\", \".js\", \".web.jsx\", \".jsx\"],\n mainFields: [\"browser\", \"main\"],\n },\n};\n```\n\nIf you need support for Sass or other CSS pre/post processors, have a look at the documentation for a specific webpack loader, e.g. https://github.com/webpack-contrib/sass-loader\n\n### Step 4: Add index.html and index.web.js\n\nIn your project's root folder, add a file called `index.web.js`:\n\n```js\nimport { AppRegistry } from \"react-native\";\nimport App from \"./App\";\n\nAppRegistry.registerComponent(\"AwesomeProject\", () => App);\nAppRegistry.runApplication(\"AwesomeProject\", {\n rootTag: document.getElementById(\"react-app\"),\n});\n\nif (module.hot) {\n module.hot.accept();\n}\n```\n\nAlso add a file called `index.html` to your project's root folder:\n\n```html\n\n\n \n AwesomeProject\n \n \n \n\n \n \n \n \n\n```\n\n### Step 5: Add npm script to start Webpack development server\n\nIn your project's `package.json`, add a new command called `web` to `scripts`, so that it looks like this:\n\n```json\n\"scripts\": {\n \"web\": \"NODE_ENV=development webpack-dev-server --mode development\"\n}\n```\n\n### Step 6: Start Webpack development server and open the project in a browser\n\nRun `yarn web` in a terminal window and if there are no warnings, open `http://localhost:8080` in a web browser to see your React Native project running in a browser environment.\n"
}
]