v0.1.0

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+/dist
+/node_modules

CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased
+
+- `use:shadow`
+
+## [0.1.0](https://github.com/metonym/svelte-style/releases/tag/v0.1.0) - 2021-10-30
+
+- Initial release

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Eric Liu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,111 @@
+# svelte-style
+
+[![NPM][npm]][npm-url]
+
+> Style utilities as Svelte actions
+
+<!-- REPO_URL -->
+
+`svelte-style` provides style utilities as Svelte actions as an alternative to writing CSS.
+
+---
+
+<!-- TOC -->
+
+## Installation
+
+**Yarn**
+
+```bash
+yarn add -D svelte-style
+```
+
+**NPM**
+
+```bash
+npm i -D svelte-style
+```
+
+**pnpm**
+
+```bash
+pnpm i -D svelte-style
+```
+
+## Usage
+
+### Visually hidden
+
+Use the `visuallyHidden` action to hide content without breaking screen readers.
+
+```svelte
+<script>
+  import { visuallyHidden } from "svelte-style";
+</script>
+
+<div use:visuallyHidden>Text</div>
+```
+
+The action accepts an argument that conditionally toggles the style.
+
+```svelte
+<script>
+  import { visuallyHidden } from "svelte-style";
+
+  let toggled = false;
+</script>
+
+<button on:click={() => (toggled = !toggled)}>
+  Toggle <span style="color: red" use:visuallyHidden={toggled}>Text</span>
+</button>
+```
+
+## API
+
+### Style class
+
+Create your own Svelte action that conditionally applies styles using the `Style` class.
+
+**JavaScript**
+
+```svelte no-eval
+<script>
+  import { Style } from "svelte-style";
+
+  const style = "color: red";
+
+  const colorRed = (node, enabled) => new Style(node, enabled, style).init();
+</script>
+
+<div use:colorRed>Red text</div>
+```
+
+**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

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "svelte-style",
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "Style utilities as Svelte actions",
+  "author": "Eric Liu (https://github.com/metonym)",
+  "svelte": "./src/index.js",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "rollup -cw",
+    "predeploy": "rollup -c",
+    "deploy": "gh-pages -d dist",
+    "test": "svelte-check --workspace test"
+  },
+  "devDependencies": {
+    "gh-pages": "^3.2.3",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.2.8",
+    "svelte-readme": "^3.6.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/metonym/svelte-style"
+  },
+  "homepage": "https://github.com/metonym/svelte-style",
+  "bugs": "https://github.com/metonym/svelte-style/issues",
+  "keywords": [
+    "svelte",
+    "svelte action",
+    "action",
+    "utility",
+    "style",
+    "css"
+  ],
+  "files": [
+    "src"
+  ],
+  "prettier": {
+    "printWidth": 120
+  }
+}

rollup.config.js

@@ -0,0 +1,3 @@
+import svelteReadme from "svelte-readme";
+
+export default svelteReadme();

src/Style.d.ts

@@ -0,0 +1,21 @@
+export class Style {
+  node: HTMLElement;
+  enabled: boolean;
+  cached: null | string;
+  styles: string;
+
+  constructor(node: HTMLElement, enabled: boolean, styles: string);
+
+  public init(): {
+    update: (enabled?: boolean) => void;
+  };
+
+  private _updateStyle(enabled?: boolean): void;
+}
+
+export type UseStyleType = (
+  node: HTMLElement,
+  enabled?: boolean
+) => {
+  update: (enabled?: boolean) => void;
+};

src/Style.js

@@ -0,0 +1,37 @@
+export class Style {
+  node = null;
+  enabled = true;
+  initialStyle = null;
+  newStyle = "";
+
+  /**
+   * @param {HTMLElement} node
+   * @param {boolean} enabled
+   * @param {string} newStyle
+   */
+  constructor(node, enabled, newStyle) {
+    this.node = node;
+    this.enabled = enabled !== false;
+    this.newStyle = newStyle;
+    this.initialStyle = this.node.getAttribute("style");
+    this._updateStyle(this.enabled);
+  }
+
+  /** @public */
+  init = () => ({
+    update: this._updateStyle,
+  });
+
+  /** @private */
+  _updateStyle = (enabled) => {
+    if (enabled) {
+      this.node.setAttribute("style", this.newStyle);
+    } else {
+      this.node.removeAttribute("style");
+
+      if (this.initialStyle != null) {
+        this.node.setAttribute("style", this.initialStyle);
+      }
+    }
+  };
+}

src/index.d.ts

@@ -0,0 +1,2 @@
+export { Style } from "./Style";
+export { visuallyHidden } from "./visually-hidden";

src/index.js

@@ -0,0 +1,2 @@
+export { Style } from "./Style";
+export { visuallyHidden } from "./visually-hidden";

src/visually-hidden.d.ts

@@ -0,0 +1,4 @@
+import { UseStyleType } from "./Style";
+
+/** Visually hide an HTML element */
+export const visuallyHidden: UseStyleType;

src/visually-hidden.js

@@ -0,0 +1,22 @@
+import { Style } from "./Style";
+
+/**
+ * Hide content without breaking screen readers
+ * https://a11yproject.com/posts/how-to-hide-content/
+ */
+const styles = `
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+`;
+
+/**
+ * Visually hide an HTML element
+ * @param {HTMLElement} node
+ * @param {boolean} [enabled]
+ */
+export const visuallyHidden = (node, enabled) => new Style(node, enabled, styles).init();

test/Style.test.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Style, visuallyHidden } from "../src";
+  import { visuallyHidden as useVisuallyHidden } from "../src/visually-hidden";
+  import { UseStyleType } from "../src/Style";
+
+  const customStyle: UseStyleType = (node, enabled) => new Style(node, enabled, "").init();
+</script>
+
+<div use:visuallyHidden />
+<div use:visuallyHidden={false} />
+<div use:useVisuallyHidden />
+<div use:customStyle />