https://github.com/metonym/svelte-style

Style utilities as Svelte actions
https://github.com/metonym/svelte-style

style svelte svelte-action utility

Last synced: 25 days ago
JSON representation

Style utilities as Svelte actions

• Host: GitHub
• URL: https://github.com/metonym/svelte-style
• Owner: metonym
• License: mit
• Created: 2021-10-31T02:31:12.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-31T17:26:04.000Z (about 3 years ago)
• Last Synced: 2024-04-25T17:42:32.044Z (7 months ago)
• Topics: style, svelte, svelte-action, utility
• Language: JavaScript
• Homepage: https://metonym.github.io/svelte-style
• Size: 42 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-style

[![NPM][npm]][npm-url]

> Style utilities as Svelte actions

`svelte-style` provides Svelte actions that conditionally apply styles as an alternative to writing CSS.

Try it in the [Svelte REPL](https://svelte.dev/repl/f759197ad49348b1bb4e181e735e08bc).

---

## Installation

**Yarn**

```bash

yarn add -D svelte-style

```

**NPM**

```bash

npm i -D svelte-style

```

**pnpm**

```bash

pnpm i -D svelte-style

```

## Available actions

### Visually hidden

Use the `visuallyHidden` action to hide content without breaking screen readers.

```svelte

  import { visuallyHidden } from "svelte-style";

Text

```


The action accepts an argument that conditionally toggles the style.

```svelte

  import { visuallyHidden } from "svelte-style";

  let toggled = false;

 (toggled = !toggled)}>

  Toggle Text

```

## API

### Style class

Create your own Svelte action that conditionally applies styles using the `Style` class.

**JavaScript**

```svelte no-eval

  import { Style } from "svelte-style";

  const style = "color: red";

  const colorRed = (node, enabled) => new Style(node, enabled, style).init();

Red text

```


**TypeScript**

If your set-up includes TypeScript, use `UseStyleType` to statically type the action.

```ts

import { Style } from "svelte-style";

import { UseStyleType } from "svelte-style/src/Style";

const style = "color: red";

const colorRed: UseStyleType = (node, enabled) => new Style(node, enabled, style).init();

```

## TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the [types folder](types/).

## Changelog

[CHANGELOG.md](CHANGELOG.md)

## License

[MIT](LICENSE)

[npm]: https://img.shields.io/npm/v/svelte-style.svg?style=for-the-badge&color=%23ff3e00

[npm-url]: https://npmjs.com/package/svelte-style