# @startupjs/babel-plugin-rn-stylename-inline

> Use styleName attributes with inline css and styl template strings

Latest version **0.55.11** (published 2023-12-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @startupjs/babel-plugin-rn-stylename-inline
pnpm add @startupjs/babel-plugin-rn-stylename-inline
yarn add @startupjs/babel-plugin-rn-stylename-inline
bun add @startupjs/babel-plugin-rn-stylename-inline
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.55.11 |
| Published | 2023-12-22 |
| First published | 2020-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 109 |
| Author | Pavel Zhukov |
| Maintainers | cray0000, yska, zag2art, fctsvirus, maestro.sc, byshock |
| Keywords | babel, babel-plugin, react, lazy, import |

## Links

- npm: https://www.npmjs.com/package/@startupjs/babel-plugin-rn-stylename-inline
- Repository: https://github.com/startupjs/startupjs
- Homepage: https://github.com/startupjs/startupjs#readme
- Issues: https://github.com/startupjs/startupjs/issues
- npm.io page: https://npm.io/package/@startupjs/babel-plugin-rn-stylename-inline

## Dependencies (5)

- [@babel/types](https://npm.io/package/@babel/types.md) ^7.0.0
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.0.0
- [@babel/template](https://npm.io/package/@babel/template.md) ^7.4.0
- [@startupjs/bundler](https://npm.io/package/@startupjs/bundler.md) ^0.55.11
- [@startupjs/babel-plugin-rn-stylename-to-style](https://npm.io/package/@startupjs/babel-plugin-rn-stylename-to-style.md) ^0.55.8

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.55.11 (latest) — 2023-12-22
- 0.59.0-canary.14 (canary) — 2025-09-02
- 0.56.0-alpha.69 (next) — 2024-04-16
- 0.59.0-canary.13 — 2025-05-29
- 0.59.0-canary.12 — 2025-05-29
- 0.59.0-canary.10 — 2025-01-20
- 0.59.0-canary.9 — 2024-12-18
- 0.59.0-canary.7 — 2024-12-03
- 0.59.0-canary.1 — 2024-11-08
- 0.59.0-canary.0 — 2024-11-08
- 0.57.0-canary.91 — 2024-11-05
- 0.57.0-canary.83 — 2024-10-07
- 0.57.0-canary.82 — 2024-10-04
- 0.57.0-canary.76 — 2024-09-23
- 0.57.0-canary.75 — 2024-09-23
- … 211 more at https://npm.io/package/@startupjs/babel-plugin-rn-stylename-inline/versions

## README

# @startupjs/babel-plugin-rn-stylename-inline

Adds support for in-JS template strings `css\`\`` and `styl\`\``
for CSS styles for react-native.

Must be used together with `@startupjs/babel-plugin-rn-stylename` library.

## Options

`platform` -- what platform the compilation is on. For example, `web` or `ios` or `android`.

## Example

### File-level scope (global to file)

```jsx
import React from 'react'
import { View } from 'react-native'
import { css } from 'startupjs'

export default function Card () {
  return <View styleName='card active'><Line /></View>
}
function Line () {
  return <View styleName='line' />
}
css`
  .card {
    padding: 8px 16px;
  }
  .line {
    margin-top: 16px;
    border-radius: 8px;
  }
  .active {
    background-color: red;
  }
`
```

### Local component scope (inside particular react component function)

```jsx
import React from 'react'
import { View } from 'react-native'
import { css, styl } from 'startupjs'

export default function Card () {
  return <View styleName='root active'><Line /></View>
  // .root will be scoped only to this specific component
  styl`
    .root
      padding: 8px 16px
  `
}
function Line () {
  return <View styleName='root' />
  // .root will be scoped only to this specific component
  css`
    .root {
      margin-top: 16px;
      border-radius: 8px;
    }
  `
}
// you can use global- and local- scoped styles together
styl`
  .active
    background-color red
`
```

## License

MIT

---
_Source: https://npm.io/package/@startupjs/babel-plugin-rn-stylename-inline · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._