https://github.com/metonym/svelte-preprocess-global
Svelte preprocessor that applies the :global() directive to id, class, and data attribute selectors passed to Svelte components.
https://github.com/metonym/svelte-preprocess-global
global svelte svelte-preprocessor
Last synced: 4 months ago
JSON representation
Svelte preprocessor that applies the :global() directive to id, class, and data attribute selectors passed to Svelte components.
- Host: GitHub
- URL: https://github.com/metonym/svelte-preprocess-global
- Owner: metonym
- License: mit
- Created: 2022-05-15T20:02:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T21:27:14.000Z (almost 3 years ago)
- Last Synced: 2025-06-11T03:11:12.605Z (5 months ago)
- Topics: global, svelte, svelte-preprocessor
- Language: TypeScript
- Homepage:
- Size: 66.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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 style globally.
`svelte-preprocess` already supports ``; however, it will apply the `:global` directive to _all_ selectors in the style block.
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;
}
```
**Output**
```svelte
:global(#component) {
color: red;
}
:global([data-component]) {
outline: 1px solid white;
}
:global(.bg-blue) {
color: blue;
}
```
The preprocessor can also detect `@keyframes` usage:
**Input**
```css
.animate {
animation: fade 1.5s linear infinite;
}
@keyframes fade {
50% {
opacity: 0;
}
}
```
**Output**
```css
:global(.animate) {
animation: fade 1.5s linear infinite;
}
@keyframes -global-fade {
50% {
opacity: 0;
}
}
```
## 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`.
```js
// svelte.config.js
import { global } from "svelte-preprocess-global";
const config = {
preprocess: [global()],
};
export default config;
```
## Changelog
[CHANGELOG.md](CHANGELOG.md)
## License
[MIT](LICENSE)