From 008d3912e5b7a544c93ab8f223c5b63a7b2861c4 Mon Sep 17 00:00:00 2001 From: Yudai Nakata <yudai.nkt@gmail.com> Date: Sat, 24 Feb 2024 04:50:07 +0900 Subject: [PATCH 1/4] docs: configure Open Graph metadata properly (#472) --- docsite/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index a4f5860e..f8eededd 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -4,11 +4,11 @@ <meta charset="utf-8"> <title>Open Props: sub-atomic styles</title> - <meta name="og:title" content="Open Props: sub-atomic styles"> + <meta property="og:title" content="Open Props: sub-atomic styles"> <meta name="twitter:title" content="Open Props: sub-atomic styles"> <meta name="description" content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript."> - <meta name="og:description" content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript."> + <meta property="og:description" content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript."> <meta name="twitter:description" content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript."> <meta name="viewport" content="width=device-width, initial-scale=1"> From b4f75ba9d6c8b22cb91fa073752ab8058e359ca2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Theart?= <bjorntheart@users.noreply.github.com> Date: Tue, 27 Feb 2024 00:55:50 +0200 Subject: [PATCH 2/4] Add script to generate bundle sizes (#474) Add script to generate bundle sizes --- build/bundle-sizes.js | 92 +++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 77 +++++++++++++++++++++++++++++++++++- package.json | 3 ++ 3 files changed, 170 insertions(+), 2 deletions(-) create mode 100644 build/bundle-sizes.js diff --git a/build/bundle-sizes.js b/build/bundle-sizes.js new file mode 100644 index 00000000..0e621d8a --- /dev/null +++ b/build/bundle-sizes.js @@ -0,0 +1,92 @@ +import path from 'node:path'; +import postcss from 'postcss'; +import fs from 'node:fs/promises'; +import pkg from '../postcss.config.cjs'; +import { createRequire } from 'node:module'; +import { sync as brotli } from 'brotli-size'; +import { gzipSizeSync as gzip } from 'gzip-size'; + +// Comes in handy later when we run postcss +const { plugins } = pkg; + +// @ts-ignore +const require = createRequire(import.meta.url); +const { scripts } = require('../package.json'); +/** + * We build up an object with script:command pairs from package.json + * + * @type {Object.<string, string>} + */ +const filtered = Object.keys(scripts) + .filter((key) => key.startsWith('lib:')) + .reduce((obj, key) => { + obj[key] = scripts[key]; + return obj; + }, {}); + +/** + * The regex captures a filepath and filename group from an npm command. + * + * Captures for the command `postcss src/extra/normalize.light.css -o normalize.light.min.css` yields + * { + * groups: { + * filepath: 'src/extra/normalize.light.css', + * filename: 'normalize.light.min.css' + * } + * } + */ +const regex = /postcss\s(?<filepath>\S+)\s\-[o]\s(?<filename>.*\.css)(?:.*$)/; + +/** + * @typedef {Object} Size + * @propety {number} raw - Unminified size in bytes + * @property {string} size - Unminified size in KiB + * @property {string} minified - Minified size in KiB + * @property {string} brotli - Brotli compressed minified size in KiB + * @property {string} gzip - Gzip compressed minified size in KiB + */ + /** @type {Object.<string, Size>} sizes */ +let sizes = {} + +for (const [_, script] of Object.entries(filtered)) { + const found = script.match(regex); + + if (!found) continue; + + /** + * @typedef {object} CaptureGroup + * @property {string} filepath + * @property {string} filename + */ + /** @type {CaptureGroup} */ + const { filepath, filename } = found.groups; + + /** + * @type {import('postcss').ProcessOptions} + */ + const options = { from: path.resolve(`../${filepath}`), to: undefined }; + const css = await fs.readFile(path.resolve(`../${filepath}`), 'utf-8'); + /** + * Run the css through PostCSS (just like Open-Props). + * plugins.slice(0, -1) remove `cssnano` plugin so we can get the size of the unminified code + */ + const code = await postcss(plugins.slice(0, -1)).process(css, options); + /** + * This time we want to get the minified size. + */ + const minified = await postcss(plugins).process(css, options); + + /** + * Build the sizes object. + * Strip `.min` from the filename + */ + sizes[filename.replace('.min', '')] = { + raw: code.css.length, // in bytes + size: (code.css.length / 1024).toFixed(2), // in KiB + minified: (minified.css.length / 1024).toFixed(2), // KiB + brotli: (brotli(minified.css) / 1024).toFixed(2), // in KiB + gzip: (gzip(minified.css) / 1024).toFixed(2), // in KiB + } +} + +await fs.writeFile('bundle-sizes.json', JSON.stringify(sizes, null, 2), { encoding: 'utf8' }); diff --git a/package-lock.json b/package-lock.json index 1efa6ab6..02ffb787 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,20 @@ { "name": "open-props", - "version": "1.6.8", + "version": "1.6.19", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "open-props", - "version": "1.6.8", + "version": "1.6.19", "license": "MIT", "devDependencies": { "ava": "^3.15.0", + "brotli-size": "^4.0.0", "colorjs.io": "^0.4.1-patch.1", "concurrently": "^7.2.2", "cssnano": "^5.1.10", + "gzip-size": "^7.0.0", "json": "^11.0.0", "open-color": "^1.9.1", "postcss": "^8.3.9", @@ -695,6 +697,18 @@ "node": ">=8" } }, + "node_modules/brotli-size": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/brotli-size/-/brotli-size-4.0.0.tgz", + "integrity": "sha512-uA9fOtlTRC0iqKfzff1W34DXUA3GyVqbUaeo3Rw3d4gd1eavKVCETXrn3NzO74W+UVkG3UHu8WxUi+XvKI/huA==", + "dev": true, + "dependencies": { + "duplexer": "0.1.1" + }, + "engines": { + "node": ">= 10.16.0" + } + }, "node_modules/browserslist": { "version": "4.20.3", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz", @@ -1766,6 +1780,12 @@ "node": ">=8" } }, + "node_modules/duplexer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", + "integrity": "sha512-sxNZ+ljy+RA1maXoUReeqBBpBC6RLKmg5ewzV+x+mSETmWNoKdZN6vcQjpFROemza23hGFskJtFNoUWUaQ+R4Q==", + "dev": true + }, "node_modules/duplexer3": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", @@ -2113,6 +2133,27 @@ "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==", "dev": true }, + "node_modules/gzip-size": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz", + "integrity": "sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==", + "dev": true, + "dependencies": { + "duplexer": "^0.1.2" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/gzip-size/node_modules/duplexer": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", + "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==", + "dev": true + }, "node_modules/has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -6810,6 +6851,15 @@ "fill-range": "^7.0.1" } }, + "brotli-size": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/brotli-size/-/brotli-size-4.0.0.tgz", + "integrity": "sha512-uA9fOtlTRC0iqKfzff1W34DXUA3GyVqbUaeo3Rw3d4gd1eavKVCETXrn3NzO74W+UVkG3UHu8WxUi+XvKI/huA==", + "dev": true, + "requires": { + "duplexer": "0.1.1" + } + }, "browserslist": { "version": "4.20.3", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz", @@ -7581,6 +7631,12 @@ "is-obj": "^2.0.0" } }, + "duplexer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", + "integrity": "sha512-sxNZ+ljy+RA1maXoUReeqBBpBC6RLKmg5ewzV+x+mSETmWNoKdZN6vcQjpFROemza23hGFskJtFNoUWUaQ+R4Q==", + "dev": true + }, "duplexer3": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", @@ -7841,6 +7897,23 @@ "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==", "dev": true }, + "gzip-size": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz", + "integrity": "sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==", + "dev": true, + "requires": { + "duplexer": "^0.1.2" + }, + "dependencies": { + "duplexer": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", + "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==", + "dev": true + } + } + }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", diff --git a/package.json b/package.json index 7490fe8f..8d501795 100644 --- a/package.json +++ b/package.json @@ -186,6 +186,7 @@ "build": "concurrently npm:gen:op npm:gen:shadowdom && npm run gen:types", "test": "ava test/basic.test.cjs", "bundle": "concurrently npm:lib:* -m 25 && concurrently npm:shadow:* -m 25", + "bundle:sizes": "cd build && node bundle-sizes.js", "gen:op": "cd build && node props.js \"\" true", "gen:nowhere": "cd build && node props \"\" false", "gen:shadowdom": "cd build && node props \"\" false \":host\" \"shadow\"", @@ -313,9 +314,11 @@ }, "devDependencies": { "ava": "^3.15.0", + "brotli-size": "^4.0.0", "colorjs.io": "^0.4.1-patch.1", "concurrently": "^7.2.2", "cssnano": "^5.1.10", + "gzip-size": "^7.0.0", "json": "^11.0.0", "open-color": "^1.9.1", "postcss": "^8.3.9", From bfaeba5c499d21096dc9ef7ecc72ece06239f277 Mon Sep 17 00:00:00 2001 From: trych <trych@users.noreply.github.com> Date: Tue, 27 Feb 2024 00:29:27 +0100 Subject: [PATCH 3/4] =?UTF-8?q?durations.css=20=E2=80=93=C2=A0correct=20le?= =?UTF-8?q?ap-year=20duration;=20introduce=20olympiad=20(#475)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hi there, just noted an error in the durations. A leap year does not refer to a time span of four years, but to the length of the year where the leap day occurs, i.e. 366 days. On the other hand, conveniently, there *is* a duration that describes a four-year timespan, an olympiad, which I introduced as a new property. --- src/extra/durations.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/extra/durations.css b/src/extra/durations.css index 4c7be7fa..030e52d1 100644 --- a/src/extra/durations.css +++ b/src/extra/durations.css @@ -7,7 +7,8 @@ --month: calc( 30 * var(--day)); --quarter: calc( 13 * var(--week)); --year: calc(365 * var(--day)); - --leap-year: calc( 4 * var(--year)); + --leap-year: calc(366 * var(--day)); + --olympiad: calc( 4 * var(--year)); --decade: calc( 10 * var(--year)); --generation: calc( 3 * var(--decade)); --lifetime: calc( 8 * var(--decade)); From 40d08ded4b3a05e13b8fc1764fd563544462994b Mon Sep 17 00:00:00 2001 From: Adam Argyle <argyle@google.com> Date: Mon, 26 Feb 2024 15:30:24 -0800 Subject: [PATCH 4/4] cut v1.6.20 with a fix in durations --- docsite/index.html | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index f8eededd..71dca090 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -119,7 +119,7 @@ <h1><span>CSS</span> <span>variables.</span></h1> </li> </ul> <small> - v1.6.19 + v1.6.20 <span class="license"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"> <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path> diff --git a/package.json b/package.json index 8d501795..c963c6e2 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "name": "open-props", "author": "Adam Argyle", "license": "MIT", - "version": "1.6.19", + "version": "1.6.20", "repository": { "type": "git", "url": "https://github.com/argyleink/open-props"