Allow platform extensions in preprocessor imports

[birkir]

Currently the import system for each supported preprocessor works independently, so we won't get the features from metro bundler built in.

It would be great to be able to do something like this:

// variables.ios.scss
$primary-color: blue;

// variables.android.scss
$primary-color: red;

// helloworld.scss
@include 'variables.scss';

.helloWorld {
  color: $primary-color;
}

Which would result in blue color for android and red color for ios.

It would be great to be able to use metros resolver for this, but second option would be to implement extension to each preprocessors resolver somehow.

Note: platform extensions work when importing from JavaScript, this issue is about within an css file.

[kristerkari]

I think that we can add support for platform specific Sass/Less/Stylus imports to the transformers.

It would be great to have it supported by React Native's bundler, but at the same time it's probably much faster to do it for each transfomer.

[birkir]

Good news! With react native 57, the metro packager has been updated with support for custom config.

We should be getting closer to hooking into the resolver!

https://github.com/facebook/metro/tree/master/packages/metro-config

[kristerkari]

That's great! Looking forward to RN 57 to be released.

[kristerkari]

I've been playing around with v0.57.0-rc.2 today. I'm trying to get a good understanding of the new Metro options before the final version is released.

So far I only managed to get some errors when updating to the new config, so I need to get past that to test the new config options.

[kristerkari]

I started doing this by adding support for the Sass transformer:
kristerkari/react-native-sass-transformer#16

[kristerkari]

Status:

• Support for Sass transformer (as of v1.3.0)
• Support for Less transformer
• Support for PostCSS transformer
• Support for Stylus transformer