kristerkari / react-native-sass-transformer

Use Sass to style your React Native apps.
MIT License
219 stars 19 forks source link

Feature: Support multiple anonymous imports #29

Closed saravanabalagi closed 4 years ago

saravanabalagi commented 4 years ago

Anonymous imports don't work when you have more than one css file to import, even when the other import is a named import. It is very common to have a global css file in addition to the currentFile.css file so certain styles can be reused anywhere in the app.

// Doesn't work
import styles from '../../app.scss';
import './welcome.scss';

// Doesn't work
import '../../app.scss';
import styles from './welcome.scss';

// Doesn't work
import '../../app.scss';
import  './welcome.scss';

// Works
import globalStyles from '../../app.scss';
import localStyles from './welcome.scss';

Is there a way to combine the transformed json objects and overriding based on the order of import: Use write new property if doesn't exist, overwrite otherwise strategy when combining?

Is it a deal breaker? Yes. Because that would allow us to write

styleName={[globalStyles.container, localStyles.welcomeContainer]}    // before
styleName="container welcome-container"                               // after

styleName={[globalStyles.button, localStyles.button]}                 // before
styleName="button"                                                    // after
saravanabalagi commented 4 years ago

Ah! This issue is supposed to be in the styleName repo. Nonetheless, I'm leaving it here as there is a possibility that this has to be taken into consideration while transforming the css files.

kristerkari commented 4 years ago

Thanks, let's continue the discussion in the repo for the styleName plugin.