https://github.com/kristerkari/react-native-typed-css-transformer
CSS transformer with Typescript support for React Native
https://github.com/kristerkari/react-native-typed-css-transformer
loader react-native sass scss transform typescript
Last synced: 6 months ago
JSON representation
CSS transformer with Typescript support for React Native
- Host: GitHub
- URL: https://github.com/kristerkari/react-native-typed-css-transformer
- Owner: kristerkari
- License: mit
- Created: 2018-09-11T21:00:04.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T20:34:12.000Z (over 3 years ago)
- Last Synced: 2025-08-16T10:42:18.896Z (11 months ago)
- Topics: loader, react-native, sass, scss, transform, typescript
- Language: JavaScript
- Size: 786 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-typed-css-transformer
[](https://www.npmjs.org/package/react-native-typed-css-transformer)
[](http://npmcharts.com/compare/react-native-typed-css-transformer?periodLength=30)
[](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
Load CSS files to [react native style objects](https://facebook.github.io/react-native/docs/style.html).
This transformer also generates `.d.ts` Typescript typings for the CSS files. Notice that platform specific extensions are not supported in the Typescript typings.
> This transformer can be used together with [React Native CSS modules](https://github.com/kristerkari/react-native-css-modules).
## Usage
### Step 1: Install
```sh
yarn add --dev react-native-typed-css-transformer
```
### 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):
```js
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve(
"react-native-typed-css-transformer"
)
},
resolver: {
sourceExts: [...sourceExts, "css"]
}
};
})();
```
If you are using [Expo](https://expo.io/), you also need to add this to `app.json`:
```json
{
"expo": {
"packagerOpts": {
"config": "metro.config.js",
"sourceExts": ["ts", "tsx", "css"]
}
}
}
```
#### 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):
```js
module.exports = {
getTransformModulePath() {
return require.resolve("react-native-typed-css-transformer");
},
getSourceExts() {
return ["ts", "tsx", "css"];
}
};
```
---
#### For Expo SDK v30.0.0 or older
If you are using [Expo](https://expo.io/), instead of adding the `rn-cli.config.js` file, you need to add this to `app.json`:
```json
{
"expo": {
"packagerOpts": {
"sourceExts": ["ts", "tsx", "css"],
"transformer": "node_modules/react-native-typed-css-transformer/index.js"
}
}
}
```
## How does it work?
Your `App.css` file might look like this:
```css
.myClass {
color: blue;
}
.myOtherClass {
color: red;
}
```
When you import your stylesheet:
```js
import styles from "./App.css";
```
Your imported styles will look like this:
```js
var styles = {
myClass: {
color: "blue"
},
myOtherClass: {
color: "red"
}
};
```
The generated `App.css.d.ts` file looks like this:
```ts
export const myClass: string;
export const myOtherClass: string;
```
You can then use that style object with an element:
```jsx
```