npm - @jesscss/patch-css - Versions diffs - 2.0.0-alpha.1 → 2.0.0-alpha.10 - Mend

@jesscss/patch-css 2.0.0-alpha.1 → 2.0.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md CHANGED Viewed

@@ -1,5 +1,35 @@
-# patch-css
+# @jesscss/patch-css
-A small utility module to be loaded in the head of a document, without async or defer, to attach any cached stylesheets in localStorage.
+**A tiny runtime helper that attaches cached stylesheets from `localStorage` in
+the document head.**
-To refresh the cache, run `updateSheet` for every stylesheet.
+`@jesscss/patch-css` is a small browser utility from the
+[Jess](https://github.com/jesscss/jess) project. Loaded synchronously in the
+`<head>` — without `async` or `defer` — it re-attaches any stylesheets that were
+previously cached in `localStorage`, so styling is in place before first paint.
+It exposes a single function, `updateSheet(text, id)`, which inserts (or updates)
+a `<style>` element for the given id and writes the current stylesheet cache back
+to `localStorage`. To refresh the cache, call `updateSheet` for each stylesheet.
+## Install
+```sh
+npm install @jesscss/patch-css
+```
+The `latest` and `alpha` dist-tags both point at the current alpha.
+## Status
+Alpha, and an early utility surface — expect the shape to change. Please
+[report bugs](https://github.com/jesscss/jess/issues).
+## Links
+- Repository: <https://github.com/jesscss/jess>
+- Documentation: <https://jesscss.github.io/> (currently pre-alpha content)
+## License
+[MIT](https://github.com/jesscss/jess/blob/dev/LICENSE)

package/dist/index.js CHANGED Viewed

@@ -8,6 +8,7 @@
   const isBrowser = new Function('try { return this===window } catch(e) { return false }')();
   const sheetMap = {};
   /**
    * Insert a stylesheet by id
    */

package/lib/index.cjs ADDED Viewed

@@ -0,0 +1,50 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/index.ts
+/** Detect that we're in a browser */
+const isBrowser = new Function("try { return this===window } catch(e) { return false }")();
+const sheetMap = {};
+/**
+* Insert a stylesheet by id
+*/
+const updateSheet = (text, id) => {
+	if (!isBrowser) return;
+	if (!id) throw new Error("ID is required.");
+	id = "id_" + id;
+	let el = document.getElementById(id);
+	if (!el) {
+		el = document.createElement("style");
+		el.setAttribute("id", id);
+		const head = document.getElementsByTagName("head")[0];
+		if (!head) throw new Error("Missing <head> element.");
+		el.innerHTML = text;
+		head.appendChild(el);
+	} else el.innerHTML = text;
+	sheetMap[id] = text;
+	localStorage.setItem("patchcss:sheets", JSON.stringify(sheetMap));
+	return el;
+};
+/**
+* We don't set sheetMap to the cached value, because ids can
+* change (maybe?), and we expect the host script to run
+* updateSheet for every current value.
+*/
+function getCachedSheets() {
+	const cache = localStorage.getItem("patchcss:sheets");
+	if (!cache) return;
+	const coll = JSON.parse(cache);
+	const head = document.getElementsByTagName("head")[0];
+	if (!head) return;
+	const fragment = document.createDocumentFragment();
+	for (let id in coll) if (coll.hasOwnProperty(id)) {
+		if (document.getElementById(id)) continue;
+		const el = document.createElement("style");
+		const text = coll[id];
+		el.setAttribute("id", id);
+		el.innerHTML = text ?? "";
+		fragment.appendChild(el);
+	}
+	head.appendChild(fragment);
+}
+if (isBrowser) getCachedSheets();
+//#endregion
+exports.updateSheet = updateSheet;

package/lib/index.js CHANGED Viewed

@@ -1,68 +1,49 @@
+//#region src/index.ts
 /** Detect that we're in a browser */
-const isBrowser = new Function('try { return this===window } catch(e) { return false }')();
+const isBrowser = new Function("try { return this===window } catch(e) { return false }")();
 const sheetMap = {};
 /**
- * Insert a stylesheet by id
- */
-export const updateSheet = (text, id) => {
-    if (!isBrowser) {
-        return;
-    }
-    if (!id) {
-        throw new Error('ID is required.');
-    }
-    id = 'id_' + id;
-    let el = document.getElementById(id);
-    if (!el) {
-        el = document.createElement('style');
-        el.setAttribute('id', id);
-        const head = document.getElementsByTagName('head')[0];
-        if (!head) {
-            throw new Error('Missing <head> element.');
-        }
-        el.innerHTML = text;
-        head.appendChild(el);
-    }
-    else {
-        el.innerHTML = text;
-    }
-    sheetMap[id] = text;
-    localStorage.setItem('patchcss:sheets', JSON.stringify(sheetMap));
-    return el;
+* Insert a stylesheet by id
+*/
+const updateSheet = (text, id) => {
+	if (!isBrowser) return;
+	if (!id) throw new Error("ID is required.");
+	id = "id_" + id;
+	let el = document.getElementById(id);
+	if (!el) {
+		el = document.createElement("style");
+		el.setAttribute("id", id);
+		const head = document.getElementsByTagName("head")[0];
+		if (!head) throw new Error("Missing <head> element.");
+		el.innerHTML = text;
+		head.appendChild(el);
+	} else el.innerHTML = text;
+	sheetMap[id] = text;
+	localStorage.setItem("patchcss:sheets", JSON.stringify(sheetMap));
+	return el;
 };
 /**
- * We don't set sheetMap to the cached value, because ids can
- * change (maybe?), and we expect the host script to run
- * updateSheet for every current value.
- */
+* We don't set sheetMap to the cached value, because ids can
+* change (maybe?), and we expect the host script to run
+* updateSheet for every current value.
+*/
 function getCachedSheets() {
-    const cache = localStorage.getItem('patchcss:sheets');
-    if (!cache) {
-        return;
-    }
-    const coll = JSON.parse(cache);
-    const head = document.getElementsByTagName('head')[0];
-    if (!head) {
-        return;
-    }
-    const fragment = document.createDocumentFragment();
-    for (let id in coll) {
-        if (coll.hasOwnProperty(id)) {
-            /** Sanity check, in case this script gets loaded twice */
-            const exists = document.getElementById(id);
-            if (exists) {
-                continue;
-            }
-            const el = document.createElement('style');
-            const text = coll[id];
-            el.setAttribute('id', id);
-            el.innerHTML = text ?? '';
-            fragment.appendChild(el);
-        }
-    }
-    head.appendChild(fragment);
+	const cache = localStorage.getItem("patchcss:sheets");
+	if (!cache) return;
+	const coll = JSON.parse(cache);
+	const head = document.getElementsByTagName("head")[0];
+	if (!head) return;
+	const fragment = document.createDocumentFragment();
+	for (let id in coll) if (coll.hasOwnProperty(id)) {
+		if (document.getElementById(id)) continue;
+		const el = document.createElement("style");
+		const text = coll[id];
+		el.setAttribute("id", id);
+		el.innerHTML = text ?? "";
+		fragment.appendChild(el);
+	}
+	head.appendChild(fragment);
 }
-if (isBrowser) {
-    getCachedSheets();
-}
-//# sourceMappingURL=index.js.map
+if (isBrowser) getCachedSheets();
+//#endregion
+export { updateSheet };

package/package.json CHANGED Viewed

@@ -1,19 +1,38 @@
 {
   "name": "@jesscss/patch-css",
-  "version": "2.0.0-alpha.1",
+  "type": "module",
+  "version": "2.0.0-alpha.10",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
   "publishConfig": {
     "access": "public"
   },
   "description": "Attach stylesheets given an id",
-  "main": "lib/index",
+  "main": "lib/index.cjs",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "dist"
+  ],
   "author": "Matthew Dean",
   "license": "MIT",
   "scripts": {
     "ci": "pnpm build && pnpm test",
+    "test": "echo 'patch-css has no active test suite (see test:tofix)'",
     "dist": "rollup -c",
     "build": "pnpm clean && pnpm compile",
     "clean": "shx rm -rf ./dist ./lib tsconfig.tsbuildinfo",
-    "compile": "tsc -p tsconfig.build.json && pnpm dist",
+    "compile": "tsdown --tsconfig tsconfig.build.json --no-dts && tsc -p tsconfig.build.json --emitDeclarationOnly && pnpm dist",
     "dev": "tsc -p tsconfig.build.json -w",
     "serve": "lite-server --baseDir=\"test\"",
     "test:tofix": "pnpm dist && jest",

package/bs-config.js DELETED Viewed

@@ -1,8 +0,0 @@
-module.exports = {
-  open: false,
-  server: {
-    middleware: {
-      0: null
-    }
-  }
-}

package/eslint.config.mjs DELETED Viewed

@@ -1,16 +0,0 @@
-import rootConfig from '../../eslint.config.mjs';
-import tseslint from 'typescript-eslint';
-export default tseslint.config([
-  ...rootConfig,
-  {
-    files: ['*.ts', '*.tsx'],
-    languageOptions: {
-      parser: tseslint.parser,
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname
-      }
-    }
-  }
-]);

package/lib/index.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,MAAM,SAAS,GAAG,IAAI,QAAQ,CAAC,wDAAwD,CAAC,EAAE,CAAC;AAE3F,MAAM,QAAQ,GAA2B,EAAE,CAAC;AAC5C;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAU,EAAE,EAAE;IACtD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO;IACT,CAAC;IACD,IAAI,CAAC,EAAE,EAAE,CAAC;QACR,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACrC,CAAC;IACD,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;IAChB,IAAI,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,EAAE,CAAC;QACR,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACrC,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC1B,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QACD,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;SAAM,CAAC;QACN,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,CAAC;IACD,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACpB,YAAY,CAAC,OAAO,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClE,OAAO,EAAE,CAAC;AACZ,CAAC,CAAA;AAED;;;;GAIG;AACH,SAAS,eAAe;IACtB,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACtD,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO;IACT,CAAC;IACD,MAAM,IAAI,GAA2B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvD,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO;IACT,CAAC;IAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;IAEnD,KAAK,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;YAC5B,0DAA0D;YAC1D,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;YAC3C,IAAI,MAAM,EAAE,CAAC;gBACX,SAAS;YACX,CAAC;YACD,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;YACtB,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC1B,EAAE,CAAC,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;YAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC;IACD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AAC7B,CAAC;AAED,IAAI,SAAS,EAAE,CAAC;IACd,eAAe,EAAE,CAAC;AACpB,CAAC"}

package/rollup.config.mjs DELETED Viewed

@@ -1,16 +0,0 @@
-import sucrase from '@rollup/plugin-sucrase'
-export default {
-  input: './src/index.ts',
-  plugins: [
-    sucrase({
-      transforms: ['typescript']
-    })
-  ],
-  output: {
-    file: './dist/index.js',
-    format: 'umd',
-    name: 'patchCss'
-  }
-}

package/src/index.ts DELETED Viewed

@@ -1,71 +0,0 @@
-/** Detect that we're in a browser */
-const isBrowser = new Function('try { return this===window } catch(e) { return false }')();
-const sheetMap: Record<string, string> = {};
-/**
- * Insert a stylesheet by id
- */
-export const updateSheet = (text: string, id: string) => {
-  if (!isBrowser) {
-    return;
-  }
-  if (!id) {
-    throw new Error('ID is required.');
-  }
-  id = 'id_' + id;
-  let el = document.getElementById(id);
-  if (!el) {
-    el = document.createElement('style');
-    el.setAttribute('id', id);
-    const head = document.getElementsByTagName('head')[0];
-    if (!head) {
-      throw new Error('Missing <head> element.');
-    }
-    el.innerHTML = text;
-    head.appendChild(el);
-  } else {
-    el.innerHTML = text;
-  }
-  sheetMap[id] = text;
-  localStorage.setItem('patchcss:sheets', JSON.stringify(sheetMap));
-  return el;
-}
-/**
- * We don't set sheetMap to the cached value, because ids can
- * change (maybe?), and we expect the host script to run
- * updateSheet for every current value.
- */
-function getCachedSheets() {
-  const cache = localStorage.getItem('patchcss:sheets');
-  if (!cache) {
-    return;
-  }
-  const coll: Record<string, string> = JSON.parse(cache);
-  const head = document.getElementsByTagName('head')[0];
-  if (!head) {
-    return;
-  }
-  const fragment = document.createDocumentFragment();
-  for (let id in coll) {
-    if (coll.hasOwnProperty(id)) {
-      /** Sanity check, in case this script gets loaded twice */
-      const exists = document.getElementById(id);
-      if (exists) {
-        continue;
-      }
-      const el = document.createElement('style');
-      const text = coll[id];
-      el.setAttribute('id', id);
-      el.innerHTML = text ?? '';
-      fragment.appendChild(el);
-    }
-  }
-  head.appendChild(fragment);
-}
-if (isBrowser) {
-  getCachedSheets();
-}

package/test/bootstrap.js DELETED Viewed

@@ -1,46 +0,0 @@
-const puppeteer = require('puppeteer')
-const globalVariables = {
-  browser: global.browser,
-  expect: global.expect
-}
-// puppeteer options
-const opts = {
-  headless: true,
-  timeout: 10000
-}
-const startServer = () => new Promise((resolve) => {
-  let browserSync = require('browser-sync').create()
-  browserSync.init({
-    watch: true,
-    open: false,
-    server: {
-      baseDir: './',
-      directory: true
-    },
-    callbacks: {
-      ready() {
-        resolve(browserSync)
-      }
-    }
-  })
-})
-let browserSync
-let browser
-// expose variables
-beforeAll(async () => {
-  browserSync = await startServer()
-  global.expect = expect
-  browser = global.browser = await puppeteer.launch(opts)
-})
-// close browser and reset global variables
-afterAll(() => {
-  browser.close()
-  browserSync.exit()
-  global.browser = globalVariables.browser
-  global.expect = globalVariables.expect
-})

package/test/files/01.html DELETED Viewed

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    .box { color: red; }
-  </style>
-</head>
-<body>
-  <script src="../../dist/index.js"></script>
-  <script>
-    console.log('foo')
-  </script>
-</body>
-</html>

package/test/files/01.spec.js DELETED Viewed

@@ -1,20 +0,0 @@
-describe('simple test for updated CSS', function() {
-  let page
-  let browser
-  beforeAll(async () => {
-    page = await browser.newPage()
-    await page.goto('http://localhost:3000/test/files/01.html')
-  })
-  afterAll(async () => {
-    await page.close()
-  })
-  it('should add a new style block', async () => {
-    console.log(await browser.version())
-    await page.evaluate('patchCss.updateSheet(\'body { background: blue }\', \'foo\')')
-    let bg = await page.$eval('body', el => getComputedStyle(el).backgroundColor)
-    expect(bg).to.eq('rgb(0, 0, 255)')
-  })
-})

package/tsconfig.build.json DELETED Viewed

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./lib",
-    "rootDir": "./src",
-    "noEmit": false
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "lib", "dist"]
-}

package/tsconfig.json DELETED Viewed

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "outDir": "./lib",
-    "rootDir": "./src",
-    "lib": ["DOM"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "lib", "dist"]
-}