babel-plugin-rn-platform-specific-extensions

Allow react-native platform specific extensions to be used for other file types than Javascript inspired by react-native-platform-specific-extensions.

Example:

import styles from "./styles.css";

• styles.android.css <- Android only
• styles.ios.css <- iOS only
• styles.native.css <- Both Android and iOS
• styles.rn.css <- rn only
• styles.css <- Default. Android, iOS and Web

Usage

Step 1: Install

yarn add --dev babel-plugin-rn-platform-specific-extensions

or

npm install --save-dev babel-plugin-rn-platform-specific-extensions

Step 2: Configure .babelrc

You must give one or more file extensions inside an array in the plugin options.

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["rn-platform-specific-extensions", {
      // default ["os", "native", "rn"]. 'os' includes 'ios' and 'andriod'
      "platforms": ["os", "native", "rn"],
      "extensions": [".css", ".scss", ".sass"],
      // default [".tsx", ".ts", ".jsx", ".js"]. Recommand custom config, should be prioritized by language
      "omitExtensions": [".tsx", ".ts", ".jsx", ".js"],
      "include": [
        "workspaceFolder/src/external",
        {
          // especially config, modify current file path
          'node_modules/metro/src/node-haste/DependencyGraph/assets/empty-module.js': 'entry path.js',
        }
      ],
    }]
  ]
}