# svelte-preprocess-global

> Svelte preprocessor that applies the `:global()` directive to id, class, and data attribute selectors passed to Svelte components.

Latest version **0.2.0** (published 2022-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-preprocess-global
pnpm add svelte-preprocess-global
yarn add svelte-preprocess-global
bun add svelte-preprocess-global
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-05-16 |
| First published | 2022-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eric Liu |
| Maintainers | metonym |
| Keywords | svelte, svelte preprocessor, global |

## Links

- npm: https://www.npmjs.com/package/svelte-preprocess-global
- Repository: https://github.com/metonym/svelte-preprocess-global
- Issues: https://github.com/metonym/svelte-preprocess-global/issues
- npm.io page: https://npm.io/package/svelte-preprocess-global

## Dependencies (1)

- [magic-string](https://npm.io/package/magic-string.md) ^0.26.2

## Recent versions

- 0.2.0 (latest) — 2022-05-16
- 0.1.0 — 2022-05-15

## README

# svelte-preprocess-global

> Svelte preprocessor that applies the `:global()` directive to id, class, and data attribute selectors passed to Svelte components.

By design, Svelte styles are [component-scoped](https://svelte.dev/docs#component-format-style). The `:global(...)` directive is required to apply a selector globally.

`svelte-preprocess` already supports `<style global>` where every CSS selector is made to apply globally.

Instead of making every selector global, this preprocessor only applies the `:global` directive to ids, classes, and data attributes passed to other Svelte components.

**Input**

```svelte
<Component id="component" data-component class="bg-blue" />

<style>
  #component {
    color: red;
  }

  [data-component] {
    outline: 1px solid white;
  }

  .bg-blue {
    background: blue;
  }
</style>
```

**Output**

```svelte
<Component id="component" class="bg-blue" />

<style>
  :global(#component) {
    color: red;
  }

  :global([data-component]) {
    outline: 1px solid white;
  }

  :global(.bg-blue) {
    color: blue;
  }
</style>
```

## Installation

```bash
# Yarn
yarn add -D svelte-preprocess-global

# NPM
npm i -D svelte-preprocess-global

# pnpm
pnpm i -D svelte-preprocess-global
```

## Usage

Add `global` to the list of preprocessors in your svelte config.

```js
// svelte.config.js
import { global } from "svelte-preprocess-global";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [global()],
};

export default config;
```

## Changelog

[CHANGELOG.md](CHANGELOG.md)

## License

[MIT](LICENSE)

---
_Source: https://npm.io/package/svelte-preprocess-global · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._