react-native-typed-less-transformer
Load Less files to react native style objects.
This transformer also generates .d.ts
Typescript typings for the Less files. Notice that platform specific extensions are not supported in the Typescript typings.
This transformer can be used together with React Native CSS modules.
Minimum React Native version for this transformer is 0.52. If you are using an older version, please update to a newer React Native version before trying to use this transformer.
Usage
Step 1: Install
yarn add --dev react-native-typed-less-transformer less
Step 2: Configure the react native packager
For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
Add this to metro.config.js
in your project's root (create the file if it does not exist already):
const getDefaultConfig = ;moduleexports = async { const resolver: sourceExts } = await ; return transformer: babelTransformerPath: require resolver: sourceExts: ...sourceExts "less" ;};
If you are using Expo, you also need to add this to app.json
:
For React Native v0.56 or older
If you are using React Native without Expo, add this to rn-cli.config.js
in your project's root (create the file if you don't have one already):
moduleexports = { return require; } { return "js" "jsx" "less"; };
For Expo SDK v30.0.0 or older
If you are using Expo, instead of adding the rn-cli.config.js
file, you need to add this to app.json
:
How does it work?
Your App.less
file might look like this:
@nice-blue: #5b83ad;@light-blue: @nice-blue + #111; .myClass color: @light-blue;.myOtherClass color: red;
When you import your stylesheet:
;
Your imported styles will look like this:
var styles = myClass: color: "#6c94be" myOtherClass: color: "red" ;
The generated App.less.d.ts
file looks like this:
;;
You can then use that style object with an element:
<MyElement = />
CSS Custom Properties (CSS variables)
You need version 0.11.1 or newer
CSS variables are not supported by default, but you can add support for them by using PostCSS and postcss-css-variables plugin.
Start by installing dependencies:
yarn add postcss postcss-css-variables react-native-postcss-transformer --dev
Add postcss-css-variables
to your PostCSS configuration with one of the supported config formats, e.g. package.json
, .postcssrc
, postcss.config.js
, etc.
After that create a transformer.js
file and do the following:
// For React Native version 0.59 or latervar upstreamTransformer = ; // For React Native version 0.56-0.58// var upstreamTransformer = require("metro/src/reactNativeTransformer"); // For React Native version 0.52-0.55// var upstreamTransformer = require("metro/src/transformer"); // For React Native version 0.47-0.51// var upstreamTransformer = require("metro-bundler/src/transformer"); // For React Native version 0.46// var upstreamTransformer = require("metro-bundler/build/transformer"); var lessTransformer = ;var postCSSTransformer = ; moduleexports { if filename return lessTransformer ; else return upstreamTransformer; };
After that in metro.config.js
point the babelTransformerPath
to that file:
const getDefaultConfig = ; moduleexports = async { const resolver: sourceExts } = await ; return transformer: babelTransformerPath: require resolver: sourceExts: ...sourceExts "less" ;};