search

kristerkari / react-native-css-modules

Style React Native components using CSS, PostCSS, Sass, Less or Stylus.
MIT License
327 stars 21 forks source link

Allow platform extensions in preprocessor imports #12

Open birkir opened 6 years ago

birkir commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

kristerkari commented 6 years ago

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 commented 5 years ago

I started doing this by adding support for the Sass transformer: https://github.com/kristerkari/react-native-sass-transformer/pull/16

kristerkari commented 5 years ago

Status: