diff --git a/.changeset/new-points-jam.md b/.changeset/new-points-jam.md new file mode 100644 index 0000000..c63ed2c --- /dev/null +++ b/.changeset/new-points-jam.md @@ -0,0 +1,5 @@ +--- +'@tokens-studio/sd-transforms': major +--- + +BREAKING: remove CommonJS entrypoint and tools/scripts required to dual publish. Now that Style Dictionary v4 is ESM-only, this library will follow suit. diff --git a/README.md b/README.md index 4d2add4..a53a721 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,8 @@ Both APIs will be stable then. ## Usage -> Note: this library is available both in CJS and ESM +> [!NOTE] +> This library is only available in ESM ```js import { registerTransforms } from '@tokens-studio/sd-transforms'; @@ -215,6 +216,7 @@ StyleDictionary.registerTransform({ ### Custom Transform Group +> [!NOTE] > From Style-Dictionary `4.0.0-prerelease.18`, [`transformGroup` and `transforms` can now be combined in a platform inside your config](https://github.com/amzn/style-dictionary/blob/v4/CHANGELOG.md#400-prerelease18). You can create a custom `transformGroup` that includes the individual transforms from this package. @@ -255,7 +257,8 @@ Options: | ['ts/color/modifiers'] | ColorModifierOptions | ❌ | See props below | Color modifier options | | ['ts/color/modifiers'].format | ColorModifierFormat | ❌ | `undefined` | Color modifier output format override ('hex' \| 'hsl' \| 'lch' \| 'p3' \| 'srgb'), uses local format or modifier space as default | -> Note: you can also import and use the `parseTokens` function to run the parsing steps on your tokens object manually. +> [!NOTE] +> You can also import and use the `parseTokens` function to run the parsing steps on your tokens object manually. > Handy if you have your own preprocessors set up (e.g. for JS files), and you want the preprocessor-based features like composites-expansion to work there too. ## Theming diff --git a/handle-bundled-cjs-deps.js b/handle-bundled-cjs-deps.js deleted file mode 100644 index 96dcc1c..0000000 --- a/handle-bundled-cjs-deps.js +++ /dev/null @@ -1,26 +0,0 @@ -import { readFileSync, writeFileSync, renameSync } from 'node:fs'; -import path from 'node:path'; -import { globSync } from 'glob'; -import { CJSOnlyDeps } from './rollup.config.mjs'; - -// Because we bundle our CJS deps and we preserveModules, normally it would create -// a dist/node_modules folder for the deps. This is an issue because then the consumer's NodeJS -// resolution algorithm will pull bare import specifiers from this folder rather than their own root -// node_modules folder, even for CJS usage :( -// Therefore, we temporarily move the CJS deps to a different folder, include that -// in the nodeResolve moduleDirectories and move things back after we're done. -async function run() { - renameSync(path.resolve('dist/node_modules'), path.resolve('dist/bundled_CJS_deps')); - const files = await globSync('dist/**/*.js', { nodir: true }); - - files.forEach(file => { - CJSOnlyDeps.forEach(dep => { - const reg = new RegExp(`node_modules/${dep}`, 'g'); - const filePath = path.resolve(file); - const currentFileContents = readFileSync(filePath, 'utf-8'); - const newFileContents = currentFileContents.replace(reg, `bundled_CJS_deps/${dep}`); - writeFileSync(filePath, newFileContents, 'utf-8'); - }); - }); -} -run(); diff --git a/package-lock.json b/package-lock.json index 8badbf6..fcef374 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,24 +9,21 @@ "version": "0.16.1", "license": "MIT", "dependencies": { + "@bundled-es-modules/deepmerge": "^4.3.1", + "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6", "@tokens-studio/types": "^0.4.0", "color2k": "^2.0.1", "colorjs.io": "^0.4.3", - "deepmerge": "^4.3.1", "expr-eval-fork": "^2.0.2", - "is-mergeable-object": "^1.1.1", - "postcss-calc-ast-parser": "^0.1.4" + "is-mergeable-object": "^1.1.1" }, "devDependencies": { "@changesets/cli": "^2.26.0", "@esm-bundle/chai": "^4.3.4-fix.0", - "@rollup/plugin-commonjs": "^24.1.0", - "@rollup/plugin-typescript": "^11.0.0", "@types/tinycolor2": "^1.4.6", "@typescript-eslint/eslint-plugin": "^5.54.0", "@typescript-eslint/parser": "^5.54.0", "@web/dev-server-esbuild": "^0.3.3", - "@web/dev-server-rollup": "^0.5.0", "@web/test-runner": "^0.15.1", "@web/test-runner-playwright": "^0.9.0", "eslint": "^8.32.0", @@ -40,8 +37,6 @@ "npm-run-all": "^4.1.5", "prettier": "^2.8.3", "prettier-package-json": "^2.8.0", - "rimraf": "^4.1.3", - "rollup": "^3.18.0", "tinycolor2": "^1.6.0", "ts-mocha": "^10.0.0", "ts-node": "^10.9.1", @@ -51,7 +46,7 @@ "node": ">=17.0.0" }, "peerDependencies": { - "style-dictionary": "https://github.com/amzn/style-dictionary.git#exit-pre" + "style-dictionary": "^4.0.0-prerelease.35" } }, "node_modules/@75lb/deep-merge": { @@ -127,7 +122,6 @@ "version": "4.3.1", "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz", "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==", - "peer": true, "dependencies": { "deepmerge": "^4.3.1" } @@ -212,6 +206,14 @@ "ieee754": "^1.2.1" } }, + "node_modules/@bundled-es-modules/postcss-calc-ast-parser": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.6.tgz", + "integrity": "sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==", + "dependencies": { + "postcss-calc-ast-parser": "^0.1.4" + } + }, "node_modules/@changesets/apply-release-plan": { "version": "6.1.3", "resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-6.1.3.tgz", @@ -1283,144 +1285,6 @@ "node": ">=12" } }, - "node_modules/@rollup/plugin-commonjs": { - "version": "24.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.1.0.tgz", - "integrity": "sha512-eSL45hjhCWI0jCCXcNtLVqM5N1JlBGvlFfY0m6oOYnLCJ6N0qEXoZql4sY2MOUArzhH4SA/qBpTxvvZp2Sc+DQ==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^5.0.1", - "commondir": "^1.0.1", - "estree-walker": "^2.0.2", - "glob": "^8.0.3", - "is-reference": "1.2.1", - "magic-string": "^0.27.0" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^2.68.0||^3.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, - "node_modules/@rollup/plugin-commonjs/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "dev": true, - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/@rollup/plugin-commonjs/node_modules/glob": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", - "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", - "dev": true, - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^5.0.1", - "once": "^1.3.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/@rollup/plugin-commonjs/node_modules/minimatch": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", - "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", - "dev": true, - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@rollup/plugin-node-resolve": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.1.0.tgz", - "integrity": "sha512-xeZHCgsiZ9pzYVgAo9580eCGqwh/XCEUM9q6iQfGNocjgkufHAqC3exA+45URvhiYV8sBF9RlBai650eNs7AsA==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^5.0.1", - "@types/resolve": "1.20.2", - "deepmerge": "^4.2.2", - "is-builtin-module": "^3.2.1", - "is-module": "^1.0.0", - "resolve": "^1.22.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^2.78.0||^3.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, - "node_modules/@rollup/plugin-typescript": { - "version": "11.1.1", - "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.1.1.tgz", - "integrity": "sha512-Ioir+x5Bejv72Lx2Zbz3/qGg7tvGbxQZALCLoJaGrkNXak/19+vKgKYJYM3i/fJxvsb23I9FuFQ8CUBEfsmBRg==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^5.0.1", - "resolve": "^1.22.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^2.14.0||^3.0.0", - "tslib": "*", - "typescript": ">=3.7.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - }, - "tslib": { - "optional": true - } - } - }, - "node_modules/@rollup/pluginutils": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", - "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", - "dev": true, - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^2.0.2", - "picomatch": "^2.3.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, "node_modules/@tokens-studio/types": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.4.0.tgz", @@ -1536,12 +1400,6 @@ "integrity": "sha512-epMsEE85fi4lfmJUH/89/iV/LI+F5CvNIvmgs5g5jYFPfhO2S/ae8WSsLOKWdwtoaZw9Q2IhJ4tQ5tFCcS/4HA==", "dev": true }, - "node_modules/@types/estree": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz", - "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", - "dev": true - }, "node_modules/@types/express": { "version": "4.17.17", "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz", @@ -1714,12 +1572,6 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", "dev": true }, - "node_modules/@types/resolve": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", - "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", - "dev": true - }, "node_modules/@types/semver": { "version": "6.2.3", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-6.2.3.tgz", @@ -2123,74 +1975,6 @@ "node": ">=10.0.0" } }, - "node_modules/@web/dev-server-rollup": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@web/dev-server-rollup/-/dev-server-rollup-0.5.0.tgz", - "integrity": "sha512-5bdMynXaNqY2+zDLk0FNQSqGpAazewTVZV8zUBnz790RxayYeITIWQLpBA6pnKZWEBQsh9ITbXoK2a4AVm9xSQ==", - "dev": true, - "dependencies": { - "@rollup/plugin-node-resolve": "^15.0.1", - "@web/dev-server-core": "^0.5.0", - "nanocolors": "^0.2.1", - "parse5": "^6.0.1", - "rollup": "^3.15.0", - "whatwg-url": "^11.0.0" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@web/dev-server-rollup/node_modules/@web/dev-server-core": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.5.1.tgz", - "integrity": "sha512-pXgb4bjDmPIaIQT9luixTSqTvRQxttUEzSKOZqLNl6pVgrl4n47ZtmZte936G2tM7nHmpT+oaMDDtCM0CgbQNQ==", - "dev": true, - "dependencies": { - "@types/koa": "^2.11.6", - "@types/ws": "^7.4.0", - "@web/parse5-utils": "^2.0.0", - "chokidar": "^3.4.3", - "clone": "^2.1.2", - "es-module-lexer": "^1.0.0", - "get-stream": "^6.0.0", - "is-stream": "^2.0.0", - "isbinaryfile": "^5.0.0", - "koa": "^2.13.0", - "koa-etag": "^4.0.0", - "koa-send": "^5.0.1", - "koa-static": "^5.0.0", - "lru-cache": "^8.0.4", - "mime-types": "^2.1.27", - "parse5": "^6.0.1", - "picomatch": "^2.2.2", - "ws": "^7.4.2" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@web/dev-server-rollup/node_modules/@web/parse5-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@web/parse5-utils/-/parse5-utils-2.0.0.tgz", - "integrity": "sha512-9pxjAg1k0Ie3t4gTQr/nmoTrvq6wmP40MNPwaetaN+jPc328MpO+WzmEApvJOW65v7lamjlvYFDsdvG8Lrd87Q==", - "dev": true, - "dependencies": { - "@types/parse5": "^6.0.1", - "parse5": "^6.0.1" - }, - "engines": { - "node": ">=16.0.0" - } - }, - "node_modules/@web/dev-server-rollup/node_modules/lru-cache": { - "version": "8.0.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz", - "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==", - "dev": true, - "engines": { - "node": ">=16.14" - } - }, "node_modules/@web/dev-server/node_modules/@rollup/plugin-node-resolve": { "version": "13.3.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz", @@ -3402,12 +3186,6 @@ "node": ">=14" } }, - "node_modules/commondir": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", - "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==", - "dev": true - }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -4525,12 +4303,6 @@ "node": ">=4.0" } }, - "node_modules/estree-walker": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true - }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -5766,15 +5538,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-reference": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", - "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==", - "dev": true, - "dependencies": { - "@types/estree": "*" - } - }, "node_modules/is-regex": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", @@ -6778,18 +6541,6 @@ "node": ">=10" } }, - "node_modules/magic-string": { - "version": "0.27.0", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz", - "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==", - "dev": true, - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.13" - }, - "engines": { - "node": ">=12" - } - }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -7014,15 +6765,6 @@ "node": ">= 6" } }, - "node_modules/minipass": { - "version": "4.2.8", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz", - "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, "node_modules/mitt": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz", @@ -8981,82 +8723,6 @@ "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==", "dev": true }, - "node_modules/rimraf": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.4.1.tgz", - "integrity": "sha512-Gk8NlF062+T9CqNGn6h4tls3k6T1+/nXdOcSZVikNVtlRdYpA7wRJJMoXmuvOnLW844rPjdQ7JgXCYM6PPC/og==", - "dev": true, - "dependencies": { - "glob": "^9.2.0" - }, - "bin": { - "rimraf": "dist/cjs/src/bin.js" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/rimraf/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "dev": true, - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/rimraf/node_modules/glob": { - "version": "9.3.5", - "resolved": "https://registry.npmjs.org/glob/-/glob-9.3.5.tgz", - "integrity": "sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==", - "dev": true, - "dependencies": { - "fs.realpath": "^1.0.0", - "minimatch": "^8.0.2", - "minipass": "^4.2.4", - "path-scurry": "^1.6.1" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/rimraf/node_modules/minimatch": { - "version": "8.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-8.0.4.tgz", - "integrity": "sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==", - "dev": true, - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/rollup": { - "version": "3.21.8", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.8.tgz", - "integrity": "sha512-SSFV2T2fWtQ/vvBip85u2Nr0GNKireabH9d7nXswBg+XSH+jbVDSYptRAEbCEsquhs503rpPA9POYAp0/Jhasw==", - "dev": true, - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=14.18.0", - "npm": ">=8.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", diff --git a/package.json b/package.json index 3316551..f39ab03 100644 --- a/package.json +++ b/package.json @@ -10,18 +10,13 @@ }, "type": "module", "exports": { - ".": { - "require": "./dist/src/index.cjs", - "import": "./dist/src/index.js" - } + ".": "./dist/src/index.js" }, - "main": "./dist/src/index.cjs", - "module": "./dist/src/index.js", "files": [ - "dist" + "dist/src" ], "scripts": { - "build": "rimraf dist && rollup -c rollup.config.mjs && node ./handle-bundled-cjs-deps.js", + "build": "tsc", "format": "npm run format:eslint && npm run format:prettier", "format:eslint": "eslint --ext .ts,.html . --fix", "format:prettier": "prettier \"**/*.{ts,md,mjs,js,cjs}\" \"package.json\" --write", @@ -37,29 +32,25 @@ "test:unit:coverage": "cd coverage/lcov-report && npx http-server -o -c-1", "test:unit:watch": "web-test-runner --watch" }, - "types": "./dist/src/index.d.ts", "dependencies": { + "@bundled-es-modules/deepmerge": "^4.3.1", + "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6", "@tokens-studio/types": "^0.4.0", "color2k": "^2.0.1", "colorjs.io": "^0.4.3", - "deepmerge": "^4.3.1", "expr-eval-fork": "^2.0.2", - "is-mergeable-object": "^1.1.1", - "postcss-calc-ast-parser": "^0.1.4" + "is-mergeable-object": "^1.1.1" }, "peerDependencies": { - "style-dictionary": "https://github.com/amzn/style-dictionary.git#exit-pre" + "style-dictionary": "^4.0.0-prerelease.35" }, "devDependencies": { "@changesets/cli": "^2.26.0", "@esm-bundle/chai": "^4.3.4-fix.0", - "@rollup/plugin-commonjs": "^24.1.0", - "@rollup/plugin-typescript": "^11.0.0", "@types/tinycolor2": "^1.4.6", "@typescript-eslint/eslint-plugin": "^5.54.0", "@typescript-eslint/parser": "^5.54.0", "@web/dev-server-esbuild": "^0.3.3", - "@web/dev-server-rollup": "^0.5.0", "@web/test-runner": "^0.15.1", "@web/test-runner-playwright": "^0.9.0", "eslint": "^8.32.0", @@ -73,8 +64,6 @@ "npm-run-all": "^4.1.5", "prettier": "^2.8.3", "prettier-package-json": "^2.8.0", - "rimraf": "^4.1.3", - "rollup": "^3.18.0", "tinycolor2": "^1.6.0", "ts-mocha": "^10.0.0", "ts-node": "^10.9.1", @@ -86,7 +75,7 @@ "style-dictionary" ], "engines": { - "node": ">=17.0.0" + "node": ">=18.0.0" }, "prettier": { "printWidth": 100, diff --git a/rollup.config.mjs b/rollup.config.mjs index 6795094..d62b161 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -1,28 +1,5 @@ import nodeResolve from '@rollup/plugin-node-resolve'; import typescript from '@rollup/plugin-typescript'; -import commonjs from '@rollup/plugin-commonjs'; -import path from 'node:path'; -import fs from 'node:fs'; - -export const CJSOnlyDeps = [ - 'style-dictionary', - 'deepmerge', - 'postcss-calc-ast-parser', - 'postcss-value-parser', // used dep of postcss-calc-ast-parser -]; - -const pkg = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf-8')); - -const externalPackages = [ - ...Object.keys(pkg.dependencies || {}), - ...Object.keys(pkg.peerDependencies || {}), -]; - -// Creating regexes of the packages to make sure subpaths of the -// packages are also treated as external -function regexOfExternals(externalPackages) { - return externalPackages.map(packageName => new RegExp(`^${packageName}(/.*)?`)); -} const baseCfg = { input: 'src/index.ts', @@ -40,33 +17,13 @@ const baseCfg = { ], }; -// Dual CJS / ESM publish -export default [ - // ESM - { - ...baseCfg, - // commonjs dependencies, which we should bundle so that it's converted to ESM - // sad reality of NodeJS ecosystem, many packages still don't publish ESM files - external: regexOfExternals(externalPackages.filter(pkg => !CJSOnlyDeps.includes(pkg))), - output: { - ...baseCfg.output, - dir: 'dist', - format: 'esm', - entryFileNames: '[name].js', - }, - plugins: [...baseCfg.plugins, commonjs()], - }, - // CJS - { - ...baseCfg, - external: regexOfExternals(externalPackages), - output: { - ...baseCfg.output, - // due to our esm output bundling style-dictionary external (cjs -> esm conversion needed by commonjs plugin) - // a subfolder is created for our ESM output source -> src folder - dir: 'dist/src', - format: 'cjs', - entryFileNames: '[name].cjs', - }, +export default { + ...baseCfg, + output: { + ...baseCfg.output, + dir: 'dist', + format: 'esm', + entryFileNames: '[name].js', }, -]; + plugins: [...baseCfg.plugins], +}; diff --git a/src/checkAndEvaluateMath.ts b/src/checkAndEvaluateMath.ts index 4d4e9e4..324266b 100644 --- a/src/checkAndEvaluateMath.ts +++ b/src/checkAndEvaluateMath.ts @@ -1,6 +1,6 @@ import { DesignToken } from 'style-dictionary/types'; import { Parser } from 'expr-eval-fork'; -import { parse, reduceExpression } from 'postcss-calc-ast-parser'; +import { parse, reduceExpression } from '@bundled-es-modules/postcss-calc-ast-parser'; const mathChars = ['+', '-', '*', '/']; @@ -74,7 +74,7 @@ function splitMultiIntoSingleValues(expr: string): string[] { return [expr]; } -function parseAndReduce(expr: string): string | boolean | number { +function parseAndReduce(expr: string): string | number { let result: string | number = expr; let evaluated; @@ -97,7 +97,9 @@ function parseAndReduce(expr: string): string | boolean | number { let matchArr; const foundUnits: Set = new Set(); while ((matchArr = unitRegex.exec(noPixExpr)) !== null) { - foundUnits.add(matchArr.groups.unit); + if (matchArr?.groups) { + foundUnits.add(matchArr.groups.unit); + } } // multiple units (besides px) found, cannot parse the expression if (foundUnits.size > 1) { @@ -138,7 +140,7 @@ export function checkAndEvaluateMath(token: DesignToken): DesignToken['value'] { return expr; } - const resolveMath = expr => { + const resolveMath = (expr: number | string) => { if (typeof expr !== 'string') { return expr; } @@ -150,7 +152,7 @@ export function checkAndEvaluateMath(token: DesignToken): DesignToken['value'] { return reducedExprs.join(' '); }; - const transformProp = (val, prop) => { + const transformProp = (val: Record, prop: string) => { val[prop] = resolveMath(val[prop]); return val; }; @@ -159,6 +161,7 @@ export function checkAndEvaluateMath(token: DesignToken): DesignToken['value'] { switch (type) { case 'typography': case 'border': { + transformed = transformed as Record; // double check that expr is still an object and not already shorthand transformed to a string if (typeof expr === 'object') { Object.keys(transformed).forEach(prop => { @@ -168,7 +171,10 @@ export function checkAndEvaluateMath(token: DesignToken): DesignToken['value'] { break; } case 'shadow': { - const transformShadow = shadowVal => { + transformed = transformed as + | Record + | Record[]; + const transformShadow = (shadowVal: Record) => { // double check that expr is still an object and not already shorthand transformed to a string if (typeof expr === 'object') { Object.keys(shadowVal).forEach(prop => { diff --git a/src/compose/transformTypography.ts b/src/compose/transformTypography.ts index 8f6d24c..5f809d2 100644 --- a/src/compose/transformTypography.ts +++ b/src/compose/transformTypography.ts @@ -32,7 +32,7 @@ export function transformTypographyForCompose(token: DesignToken): DesignToken[' return `${Object.entries(val).reduce( (acc, [propName, v]) => `${acc}${ - textStylePropertiesMapping[propName] + textStylePropertiesMapping[propName as keyof typeof textStylePropertiesMapping] ? `${ propName === 'fontWeight' ? transformFontWeight({ diff --git a/src/css/transformHEXRGBa.ts b/src/css/transformHEXRGBa.ts index f1c1cc0..b437c38 100644 --- a/src/css/transformHEXRGBa.ts +++ b/src/css/transformHEXRGBa.ts @@ -11,7 +11,7 @@ export function transformHEXRGBaForCSS(token: DesignToken): DesignToken['value'] const type = token.$type ?? token.type; if (val === undefined) return undefined; - const transformHEXRGBa = val => { + const transformHEXRGBa = (val: string) => { const regex = /rgba\(\s*(?#.+?)\s*,\s*(?\d*(\.\d*|%)*)\s*\)/g; return val.replace(regex, (match, hex, alpha) => { try { @@ -24,7 +24,7 @@ export function transformHEXRGBaForCSS(token: DesignToken): DesignToken['value'] }); }; - const transformProp = (val, prop) => { + const transformProp = (val: Record, prop: string) => { if (val[prop] !== undefined) { val[prop] = transformHEXRGBa(val[prop]); } @@ -36,6 +36,9 @@ export function transformHEXRGBaForCSS(token: DesignToken): DesignToken['value'] switch (type) { case 'border': case 'shadow': { + transformed = transformed as + | Record + | Record[]; if (Array.isArray(transformed)) { transformed = transformed.map(item => transformProp(item, 'color')); } else { diff --git a/src/css/transformLetterSpacing.ts b/src/css/transformLetterSpacing.ts index 0453578..5ae2409 100644 --- a/src/css/transformLetterSpacing.ts +++ b/src/css/transformLetterSpacing.ts @@ -9,7 +9,7 @@ export function transformLetterSpacingForCSS(token: DesignToken): DesignToken['v const type = token.$type ?? token.type; if (val === undefined) return undefined; - const transformLetterSpacing = letterspacing => { + const transformLetterSpacing = (letterspacing: string | number) => { const decimal = percentageToDecimal(letterspacing); return typeof decimal === 'string' || isNaN(decimal) ? `${letterspacing}` : `${decimal}em`; }; diff --git a/src/css/transformShadow.ts b/src/css/transformShadow.ts index e9f9ae5..7be1d6c 100644 --- a/src/css/transformShadow.ts +++ b/src/css/transformShadow.ts @@ -1,7 +1,7 @@ -import { SingleBoxShadowToken } from '@tokens-studio/types'; +import { SingleBoxShadowToken, BoxShadowTypes } from '@tokens-studio/types'; export function transformShadow(value: SingleBoxShadowToken['value']) { - const alignShadowType = val => { + const alignShadowType = (val: string) => { return val === 'innerShadow' || val === 'inset' ? 'inset' : undefined; }; @@ -13,8 +13,7 @@ export function transformShadow(value: SingleBoxShadowToken['value']) { } if (typeof value === 'object') { - // @ts-expect-error we're converting to a value that isn't recognized by BoxShadowTypes enum, can't union enums either :( - value.type = alignShadowType(value.type); + value.type = alignShadowType(value.type) as BoxShadowTypes; } return value; } diff --git a/src/permutateThemes.ts b/src/permutateThemes.ts index e6b3c78..29b99f3 100644 --- a/src/permutateThemes.ts +++ b/src/permutateThemes.ts @@ -13,7 +13,7 @@ function mapThemesToSetsObject(themes: ThemeObject[]) { export function permutateThemes(themes: ThemeObject[], { separator = '-' } = {} as Options) { if (themes.some(theme => theme.group)) { // Sort themes by groups - const groups = {}; + const groups: Record = {}; themes.forEach(theme => { if (theme.group) { groups[theme.group] = [...(groups[theme.group] ?? []), theme]; diff --git a/src/preprocessors/add-font-styles.ts b/src/preprocessors/add-font-styles.ts index eb96950..22b6265 100644 --- a/src/preprocessors/add-font-styles.ts +++ b/src/preprocessors/add-font-styles.ts @@ -47,15 +47,18 @@ function recurse( refCopy: DeepKeyTokenMap, alwaysAddFontStyle = false, ) { - Object.keys(slice).forEach(key => { + (Object.keys(slice) as (keyof typeof slice)[]).forEach(key => { + const potentiallyToken = slice[key]; const isToken = - (Object.hasOwn(slice[key], '$type') && Object.hasOwn(slice[key], '$value')) || - (Object.hasOwn(slice[key], 'type') && Object.hasOwn(slice[key], 'value')); + typeof potentiallyToken === 'object' && + ((Object.hasOwn(potentiallyToken, '$type') && Object.hasOwn(potentiallyToken, '$value')) || + (Object.hasOwn(potentiallyToken, 'type') && Object.hasOwn(potentiallyToken, 'value'))); if (isToken) { - const usesDTCG = Object.hasOwn(slice[key], '$value'); - const { value, $value, type, $type } = slice[key]; - const tokenType = usesDTCG ? $type : type; + const token = potentiallyToken as SingleToken; + const usesDTCG = Object.hasOwn(token, '$value'); + const { value, $value, type, $type } = token; + const tokenType = (usesDTCG ? $type : type) as string; const tokenValue = (usesDTCG ? $value : value) as | (TokenTypographyValue & { fontStyle: string }) | SingleFontWeightsToken['value']; @@ -76,17 +79,21 @@ function recurse( const { weight, style } = splitWeightStyle(fontWeight, alwaysAddFontStyle); // since tokenFontWeightsValue is a primitive (string), we have to permutate the change directly - slice[key][`${usesDTCG ? '$' : ''}value`] = weight; + token[`${usesDTCG ? '$' : ''}value`] = weight; if (style) { - slice[`fontStyle`] = { - ...slice[key], + (slice as DeepKeyTokenMap)[`fontStyle`] = { + ...token, [`${usesDTCG ? '$' : ''}type`]: 'fontStyle', [`${usesDTCG ? '$' : ''}value`]: style, }; } } - } else if (typeof slice[key] === 'object') { - recurse(slice[key], refCopy, alwaysAddFontStyle); + } else if (typeof potentiallyToken === 'object') { + recurse( + potentiallyToken as DeepKeyTokenMap | SingleToken, + refCopy, + alwaysAddFontStyle, + ); } }); } diff --git a/src/preprocessors/align-types.ts b/src/preprocessors/align-types.ts index 63f2cfb..29e5122 100644 --- a/src/preprocessors/align-types.ts +++ b/src/preprocessors/align-types.ts @@ -1,8 +1,10 @@ -import { DeepKeyTokenMap, SingleToken } from '@tokens-studio/types'; +import { DeepKeyTokenMap, SingleToken, TokenTypes } from '@tokens-studio/types'; // TODO: composition tokens props also need the same types alignments.. // nested composition tokens are out of scope. +type valueOfTokenTypes = (typeof TokenTypes)[keyof typeof TokenTypes]; + const typesMap = { fontFamilies: 'fontFamily', fontWeights: 'fontWeight', @@ -13,14 +15,14 @@ const typesMap = { sizing: 'dimension', borderRadius: 'dimension', text: 'content', -}; +} as Partial>; const propsMap = { shadow: { x: 'offsetX', y: 'offsetY', }, -}; +} as Partial>>; function recurse(slice: DeepKeyTokenMap | SingleToken) { const isToken = @@ -31,14 +33,15 @@ function recurse(slice: DeepKeyTokenMap | SingleToken) { const usesDTCG = Object.hasOwn(slice, '$value'); const t = (usesDTCG ? $type : type) as string; const v = usesDTCG ? $value : value; - const newT = typesMap[t] ?? t; - slice[`${usesDTCG ? '$' : ''}type`] = newT; + const tProp = `${usesDTCG ? '$' : ''}type` as '$type' | 'type'; + const newT = (typesMap[t as keyof typeof typesMap] ?? t) as valueOfTokenTypes; + (slice[tProp] as valueOfTokenTypes) = newT; // now also check propsMap if we need to map some props if (typeof v === 'object') { const pMap = propsMap[newT as keyof typeof propsMap]; if (pMap) { - const convertProps = obj => { + const convertProps = (obj: Record) => { Object.entries(pMap).forEach(([key, propValue]) => { if (obj[key] !== undefined) { obj[propValue] = obj[key]; diff --git a/src/preprocessors/exclude-parent-keys.ts b/src/preprocessors/exclude-parent-keys.ts index 6140354..9e1286c 100644 --- a/src/preprocessors/exclude-parent-keys.ts +++ b/src/preprocessors/exclude-parent-keys.ts @@ -1,5 +1,6 @@ import { DeepKeyTokenMap } from '@tokens-studio/types'; -import deepmerge from 'deepmerge'; +// @ts-expect-error untyped library... +import deepmerge from '@bundled-es-modules/deepmerge'; import { TransformOptions } from '../TransformOptions.js'; export function excludeParentKeys( diff --git a/src/transformDimension.ts b/src/transformDimension.ts index 47d69a2..514e6d4 100644 --- a/src/transformDimension.ts +++ b/src/transformDimension.ts @@ -14,12 +14,17 @@ function _transformDimension(dim: string | number): string { * Helper: Transforms dimensions to px */ export function transformDimension(token: DesignToken): DesignToken['value'] { - const val = token.$value ?? token.value; + const val = (token.$value ?? token.value) as + | Record + | Record[] + | number + | string; + const type = token.$type ?? token.type; if (val === undefined) return undefined; - const transformProp = (val, prop) => { + const transformProp = (val: Record, prop: string) => { if (val[prop] !== undefined) { val[prop] = _transformDimension(val[prop]); } @@ -27,13 +32,18 @@ export function transformDimension(token: DesignToken): DesignToken['value'] { }; let transformed = val; + switch (type) { case 'typography': { + transformed = transformed as Record; transformed = transformProp(transformed, 'fontSize'); break; } case 'shadow': { - const transformShadow = shadowVal => { + transformed = transformed as + | Record + | Record[]; + const transformShadow = (shadowVal: Record) => { ['offsetX', 'offsetY', 'blur', 'spread'].forEach(prop => { shadowVal = transformProp(shadowVal, prop); }); @@ -41,16 +51,19 @@ export function transformDimension(token: DesignToken): DesignToken['value'] { }; if (Array.isArray(transformed)) { transformed = transformed.map(transformShadow); + } else { + transformed = transformShadow(transformed); } - transformed = transformShadow(transformed); break; } case 'border': { + transformed = transformed as Record; transformed = transformProp(transformed, 'width'); break; } default: - transformed = _transformDimension(val); + transformed = transformed as number | string; + transformed = _transformDimension(transformed); } return transformed; diff --git a/src/transformFontWeight.ts b/src/transformFontWeight.ts index dd6fbdb..95ed7bc 100644 --- a/src/transformFontWeight.ts +++ b/src/transformFontWeight.ts @@ -47,12 +47,15 @@ export function transformFontWeight(token: DesignToken): DesignToken['value'] { const type = token.$type ?? token.type; if (val === undefined) return undefined; - const transformWeight = weight => { + const transformWeight = (weight: number | string) => { const match = `${weight}`.match(fontWeightReg); let mapped; if (match?.groups?.weight) { - mapped = fontWeightMap[match?.groups?.weight.replace(/\s/g, '').toLowerCase()]; + mapped = + fontWeightMap[ + match?.groups?.weight.replace(/\s/g, '').toLowerCase() as keyof typeof fontWeightMap + ]; if (match.groups.style) { mapped = `${mapped} ${match.groups.style.toLowerCase()}`; } diff --git a/src/transformLineHeight.ts b/src/transformLineHeight.ts index 12953a5..2dac8f6 100644 --- a/src/transformLineHeight.ts +++ b/src/transformLineHeight.ts @@ -11,7 +11,7 @@ export function transformLineHeight(token: DesignToken): DesignToken['value'] { const type = token.$type ?? token.type; if (val === undefined) return undefined; - const transformLH = lineHeight => { + const transformLH = (lineHeight: number | string) => { const decimal = percentageToDecimal(lineHeight); return typeof decimal === 'string' || isNaN(decimal) ? `${lineHeight}` : decimal; }; diff --git a/test/integration/utils.ts b/test/integration/utils.ts index b43e9f4..a5fecbc 100644 --- a/test/integration/utils.ts +++ b/test/integration/utils.ts @@ -12,11 +12,9 @@ export async function init(cfg: Config, transformOpts = {}) { return dict; } -export async function cleanup(dict?: StyleDictionary) { - // @ts-expect-error polluting dictionary it on purpose +export async function cleanup(dict?: StyleDictionary & { cleaned?: boolean }) { if (dict && !dict.cleaned) { await dict.cleanAllPlatforms(); - // @ts-expect-error polluting dictionary it on purpose dict.cleaned = true; } StyleDictionary.hooks.preprocessors = {}; diff --git a/tsconfig.json b/tsconfig.json index 2aca9e1..aca8e5b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,11 +10,11 @@ "alwaysStrict": true, "types": ["node", "mocha"], "esModuleInterop": true, - "noImplicitAny": false, - "outDir": "dist/src", + "noImplicitAny": true, + "outDir": "dist", "declaration": true, "skipLibCheck": true }, - "include": ["**/*.ts", "**/*.d.ts"], + "include": ["**/*.ts", "**/*.d.ts", "untyped-deps.ts"], "exclude": ["node_modules", "**/coverage/*"] } diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs index fa7837b..01ab2a3 100644 --- a/web-test-runner.config.mjs +++ b/web-test-runner.config.mjs @@ -1,9 +1,5 @@ import { playwrightLauncher } from '@web/test-runner-playwright'; import { esbuildPlugin } from '@web/dev-server-esbuild'; -import { fromRollup } from '@web/dev-server-rollup'; -import commonjsRollup from '@rollup/plugin-commonjs'; - -const commonjs = fromRollup(commonjsRollup); export default { nodeResolve: true, @@ -19,8 +15,5 @@ export default { }, }, browsers: [playwrightLauncher({ product: 'chromium' })], - plugins: [ - commonjs({ requireReturnsDefault: 'preferred' }), - esbuildPlugin({ ts: true, target: 'auto' }), - ], + plugins: [esbuildPlugin({ ts: true, target: 'auto' })], };