kristerkari / babel-plugin-react-native-stylename-to-style Goto Github PK

Thanks for build the amazing tools for us.

As you know, we can use kristerkari/react-native-types-for-css-modules to support className in react native. to avoid error in my typescript react-native project.

But I can not use styleName in typescript react-native project.

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 like,

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


styleName={[globalStyles.button, localStyles.button]}                 // before
styleName="button"                                                    // after

Linked to #29 in the parent sass-transformer repo.