react-native-ueno-css-modules
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

react-native-ueno-css-modules

React Native CSS Modules with variables and theme support

Transformer

const upstreamTransformer = require('metro/src/reactNativeTransformer');
const uenoCssModulesTransformer = require('react-native-ueno-css-modules/transformer');

module.exports.transform = ({ src, filename, options }) => {

  if (filename.endsWith('.css') || filename.endsWith('.styl') || filename.endsWith('.scss') || filename.endsWith('.sass') || filename.endsWith('.less')) {
    return uenoCssModulesTransformer.transform({ src, filename, options });
  }

  return upstreamTransformer.transform({ src, filename, options });
};

Add themes and variables

import { setThemeVars, setVars } from 'react-native-ueno-css-modules';

setThemeVars('light', { '--background-color': 'orange' });

setVars({
  '--hairline-width': StyleSheet.hairlineWidth,
  '--mobx-value': [MobxStore, 'propertyName'],
});

Change theme

import { setTheme } from 'react-native-ueno-css-modules';

setTheme('dark');

Usage in styles

Refer to the classNames documentation

const styles = require('mystyle.css');

styles.foo;
styles({ foo: true });
styles('foo', 'bar', { baz: true });

/react-native-ueno-css-modules/

    Package Sidebar

    Install

    npm i react-native-ueno-css-modules@1.0.4

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • magnearun
    • olafursverrir
    • birkir
    • ueno-personal