@solid-primitives/styles 0.0.100

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Solid Primitives Working Group
+
+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.

package/README.md

@@ -0,0 +1,77 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=styles" alt="Solid Primitives styles">
+</p>
+
+# @solid-primitives/styles
+
+[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/styles?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/styles)
+[![version](https://img.shields.io/npm/v/@solid-primitives/styles?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/styles)
+[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
+
+Collection of reactive primitives focused on styles.
+
+- [`createRemSize`](#createRemSize) - Create a reactive signal of css `rem` size in pixels.
+
+## Installation
+
+```bash
+npm install @solid-primitives/styles
+# or
+yarn add @solid-primitives/styles
+# or
+pnpm add @solid-primitives/styles
+```
+
+## `createRemSize`
+
+Creates a reactive signal with value of the current rem size in pixels, and tracks it's changes.
+
+### How to use it
+
+It takes no arguments and returns a number signal.
+
+```ts
+import { createRemSize } from "@solid-primitives/styles";
+
+const remSize = createRemSize();
+console.log(remSize()); // 16
+
+createEffect(() => {
+  console.log(remSize()); // remSize value will be logged on every change to the root font size
+});
+```
+
+### `useRemSize`
+
+This primitive provides a [shared root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) variant that will reuse signals, HTML elements and the ResizeObserver instance across all dependents that use it.
+
+It's behavior is the same as [`createRemSize`](#createRemSize).
+
+```ts
+import { useRemSize } from "@solid-primitives/styles";
+
+const remSize = useRemSize();
+console.log(remSize()); // 16
+```
+
+### Server fallback
+
+When using this primitive on the server, it will return a signal with a value of `16` by default. You can override this value by calling the `setServerRemSize` helper with a new value, before calling `createRemSize` or `useRemSize`.
+
+```ts
+import { setServerRemSize, createRemSize } from "@solid-primitives/styles";
+
+setServerRemSize(10);
+
+const remSize = createRemSize();
+console.log(remSize()); // 10 instead of 16 (only on the server!)
+```
+
+## Demo
+
+TODO
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)

package/dist/index.cjs

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createRemSize: () => createRemSize,
+  getRemSize: () => getRemSize,
+  setServerRemSize: () => setServerRemSize,
+  useRemSize: () => useRemSize
+});
+module.exports = __toCommonJS(src_exports);
+var import_rootless = require("@solid-primitives/rootless");
+var import_solid_js = require("solid-js");
+var totallyHiddenStyles = {
+  border: "0",
+  padding: "0",
+  visibility: "hidden",
+  position: "absolute",
+  top: "-9999px",
+  left: "-9999px"
+};
+var getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+function createRemSize() {
+  const [remSize, setRemSize] = (0, import_solid_js.createSignal)(getRemSize());
+  const el = document.createElement("div");
+  Object.assign(el.style, totallyHiddenStyles, { width: "1rem" });
+  document.body.appendChild(el);
+  let init = true;
+  const ro = new ResizeObserver(() => {
+    if (init)
+      return init = false;
+    setRemSize(getRemSize());
+  });
+  ro.observe(el);
+  (0, import_solid_js.onCleanup)(() => {
+    el.remove();
+    ro.disconnect();
+  });
+  return remSize;
+}
+var useRemSize = /* @__PURE__ */ (0, import_rootless.createSharedRoot)(createRemSize);
+var setServerRemSize = (size) => {
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createRemSize,
+  getRemSize,
+  setServerRemSize,
+  useRemSize
+});

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import { Accessor } from 'solid-js';
+
+/**
+ * Reads the current rem size from the document root.
+ */
+declare const getRemSize: () => number;
+/**
+ * Creates a reactive signal with value of the current rem size, and tracks it's changes.
+ * @returns A signal with the current rem size in pixels.
+ * @see [Primitive documentation](https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#createRemSize).
+ * @example
+ * const remSize = createRemSize();
+ * console.log(remSize()); // 16
+ */
+declare function createRemSize(): Accessor<number>;
+/**
+ * Returns a reactive signal with value of the current rem size, and tracks it's changes.
+ *
+ * This is a [shared root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot).
+ * @returns A signal with the current rem size in pixels.
+ * @see [Primitive documentation](https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#useRemSize).
+ * @example
+ * const remSize = useRemSize();
+ * console.log(remSize()); // 16
+ */
+declare const useRemSize: () => Accessor<number>;
+/**
+ * Set the server fallback value for the rem size. {@link getRemSize}, {@link createRemSize} and {@link useRemSize} will return this value on the server.
+ */
+declare const setServerRemSize: (size: number) => void;
+
+export { createRemSize, getRemSize, setServerRemSize, useRemSize };

package/dist/index.js

@@ -0,0 +1,39 @@
+// src/index.ts
+import { createSharedRoot } from "@solid-primitives/rootless";
+import { createSignal, onCleanup } from "solid-js";
+var totallyHiddenStyles = {
+  border: "0",
+  padding: "0",
+  visibility: "hidden",
+  position: "absolute",
+  top: "-9999px",
+  left: "-9999px"
+};
+var getRemSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+function createRemSize() {
+  const [remSize, setRemSize] = createSignal(getRemSize());
+  const el = document.createElement("div");
+  Object.assign(el.style, totallyHiddenStyles, { width: "1rem" });
+  document.body.appendChild(el);
+  let init = true;
+  const ro = new ResizeObserver(() => {
+    if (init)
+      return init = false;
+    setRemSize(getRemSize());
+  });
+  ro.observe(el);
+  onCleanup(() => {
+    el.remove();
+    ro.disconnect();
+  });
+  return remSize;
+}
+var useRemSize = /* @__PURE__ */ createSharedRoot(createRemSize);
+var setServerRemSize = (size) => {
+};
+export {
+  createRemSize,
+  getRemSize,
+  setServerRemSize,
+  useRemSize
+};

package/dist/server.cjs

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/server.ts
+var server_exports = {};
+__export(server_exports, {
+  createRemSize: () => createRemSize,
+  getRemSize: () => getRemSize,
+  setServerRemSize: () => setServerRemSize,
+  useRemSize: () => useRemSize
+});
+module.exports = __toCommonJS(server_exports);
+var serverRemSize = 16;
+var getRemSize = () => serverRemSize;
+var createRemSize = () => () => serverRemSize;
+var useRemSize = () => () => serverRemSize;
+var setServerRemSize = (size) => {
+  serverRemSize = size;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createRemSize,
+  getRemSize,
+  setServerRemSize,
+  useRemSize
+});

package/dist/server.js

@@ -0,0 +1,14 @@
+// src/server.ts
+var serverRemSize = 16;
+var getRemSize = () => serverRemSize;
+var createRemSize = () => () => serverRemSize;
+var useRemSize = () => () => serverRemSize;
+var setServerRemSize = (size) => {
+  serverRemSize = size;
+};
+export {
+  createRemSize,
+  getRemSize,
+  setServerRemSize,
+  useRemSize
+};

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@solid-primitives/styles",
+  "version": "0.0.100",
+  "description": "Collection of reactive primitives focused on styles.",
+  "author": "Damian Tarnawski <gthetaranv@gmail.com>",
+  "contributors": [],
+  "license": "MIT",
+  "homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/styles#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/solidjs-community/solid-primitives/issues"
+  },
+  "primitive": {
+    "name": "styles",
+    "stage": 0,
+    "list": [
+      "createRemSize"
+    ],
+    "category": "Display & Media"
+  },
+  "private": false,
+  "sideEffects": false,
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/server.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "node": {
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "keywords": [
+    "solid",
+    "primitives",
+    "styles",
+    "css"
+  ],
+  "devDependencies": {
+    "jsdom": "^20.0.0",
+    "prettier": "^2.7.1",
+    "solid-js": "^1.5.4",
+    "tslib": "^2.4.0",
+    "tsup": "^6.2.3",
+    "typescript": "^4.8.2",
+    "unocss": "^0.45.15",
+    "vite": "^3.0.9",
+    "vite-plugin-solid": "^2.3.0",
+    "vitest": "^0.23.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.5.0"
+  },
+  "dependencies": {
+    "@solid-primitives/rootless": "^1.1.3"
+  },
+  "scripts": {
+    "start": "vite serve dev --host",
+    "dev": "npm run start",
+    "build": "tsup",
+    "test": "vitest"
+  }
+}