From daf7294f1640800efcb958ce94730c9ef86961b0 Mon Sep 17 00:00:00 2001 From: sullivanp Date: Tue, 8 Nov 2022 11:40:41 -0500 Subject: [PATCH] fix(tools): SVG generator in progress --- .../assets/Icon => assets}/alert-info.svg | 0 .../components/os-input/os-input.stories.tsx | 2 +- .../src/components/os-input/os-input.tsx | 38 +- .../assets/{Icon => images}/Frame.svg | 0 .../assets/{Icon => images}/alert-error.svg | 0 .../open-system/assets/images/alert-info.svg | 3 + .../assets/{Icon => images}/alert-warning.svg | 0 .../assets/{Icon => images}/large-check.svg | 0 .../assets/{Icon => images}/medium-check.svg | 0 .../assets/{Icon => images}/small-check.svg | 0 package-lock.json | 666 +++++++++++++----- package.json | 1 + .../typescript/design-tokens-build/impl.ts | 126 +++- tools/executors/typescript/project.json | 4 +- .../parsers/svgo/svgo.parser.ts | 69 +- 15 files changed, 690 insertions(+), 219 deletions(-) rename {design-system/tokens/src/open-system/assets/Icon => assets}/alert-info.svg (100%) rename design-system/tokens/src/open-system/assets/{Icon => images}/Frame.svg (100%) rename design-system/tokens/src/open-system/assets/{Icon => images}/alert-error.svg (100%) create mode 100644 design-system/tokens/src/open-system/assets/images/alert-info.svg rename design-system/tokens/src/open-system/assets/{Icon => images}/alert-warning.svg (100%) rename design-system/tokens/src/open-system/assets/{Icon => images}/large-check.svg (100%) rename design-system/tokens/src/open-system/assets/{Icon => images}/medium-check.svg (100%) rename design-system/tokens/src/open-system/assets/{Icon => images}/small-check.svg (100%) diff --git a/design-system/tokens/src/open-system/assets/Icon/alert-info.svg b/assets/alert-info.svg similarity index 100% rename from design-system/tokens/src/open-system/assets/Icon/alert-info.svg rename to assets/alert-info.svg diff --git a/design-system/components/src/components/os-input/os-input.stories.tsx b/design-system/components/src/components/os-input/os-input.stories.tsx index 00808aea2..7092d901f 100644 --- a/design-system/components/src/components/os-input/os-input.stories.tsx +++ b/design-system/components/src/components/os-input/os-input.stories.tsx @@ -31,7 +31,7 @@ Primary.args = { }; /** - * Primary + * Placeholder */ export const Placeholder = Template.bind({}); diff --git a/design-system/components/src/components/os-input/os-input.tsx b/design-system/components/src/components/os-input/os-input.tsx index ecc6c5d25..1e08cff34 100644 --- a/design-system/components/src/components/os-input/os-input.tsx +++ b/design-system/components/src/components/os-input/os-input.tsx @@ -3,6 +3,7 @@ import { Element, Event, EventEmitter, + getAssetPath, h, Host, Listen, @@ -11,6 +12,7 @@ import { State, Watch, } from "@stencil/core"; +import { ReactComponent as Icon } from "assets/alert-info.svg"; import clsx from "clsx"; /** @@ -265,7 +267,7 @@ export class OsInput { : "border-l-input-label"; } - getFillColor() { + getInputFillColor() { return this.disabled ? "bg-disabled" : "bg-input-fill"; } @@ -288,6 +290,16 @@ export class OsInput { ); } + getSvgFillStyle() { + return this.error + ? "fill-error" + : this.warning + ? "fill-warning" + : this.info + ? "fill-info" + : null; + } + getInputMessage() { return this.error ? this.error @@ -313,14 +325,17 @@ export class OsInput { { "pl-5": !this.isBorderDisplayed() }, "gap-xxs flex h-fit w-full flex-col self-start" )}> - +
+ + +
+ + diff --git a/design-system/tokens/src/open-system/assets/Icon/alert-warning.svg b/design-system/tokens/src/open-system/assets/images/alert-warning.svg similarity index 100% rename from design-system/tokens/src/open-system/assets/Icon/alert-warning.svg rename to design-system/tokens/src/open-system/assets/images/alert-warning.svg diff --git a/design-system/tokens/src/open-system/assets/Icon/large-check.svg b/design-system/tokens/src/open-system/assets/images/large-check.svg similarity index 100% rename from design-system/tokens/src/open-system/assets/Icon/large-check.svg rename to design-system/tokens/src/open-system/assets/images/large-check.svg diff --git a/design-system/tokens/src/open-system/assets/Icon/medium-check.svg b/design-system/tokens/src/open-system/assets/images/medium-check.svg similarity index 100% rename from design-system/tokens/src/open-system/assets/Icon/medium-check.svg rename to design-system/tokens/src/open-system/assets/images/medium-check.svg diff --git a/design-system/tokens/src/open-system/assets/Icon/small-check.svg b/design-system/tokens/src/open-system/assets/images/small-check.svg similarity index 100% rename from design-system/tokens/src/open-system/assets/Icon/small-check.svg rename to design-system/tokens/src/open-system/assets/images/small-check.svg diff --git a/package-lock.json b/package-lock.json index 47757b833..bbabec05b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -97,6 +97,7 @@ "stencil-tailwind-plugin": "^1.6.0", "storybook-tailwind-dark-mode": "^1.0.15", "style-dictionary": "^3.7.1", + "svgo": "^3.0.0", "tailwindcss": "^3.1.8", "ts-jest": "28.0.5", "ts-node": "10.9.1", @@ -16907,6 +16908,133 @@ "@svgr/core": "*" } }, + "node_modules/@svgr/plugin-svgo/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "engines": { + "node": ">= 10" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/css-select": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", + "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.0.1", + "domhandler": "^4.3.1", + "domutils": "^2.8.0", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/csso": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", + "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "dependencies": { + "css-tree": "^1.1.2" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/dom-serializer": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", + "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/domhandler": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", + "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", + "dependencies": { + "domelementtype": "^2.2.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/domutils": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", + "dependencies": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" + }, + "node_modules/@svgr/plugin-svgo/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@svgr/plugin-svgo/node_modules/svgo": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", + "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==", + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^4.1.3", + "css-tree": "^1.1.3", + "csso": "^4.2.0", + "picocolors": "^1.0.0", + "stable": "^0.1.8" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@svgr/webpack": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.5.1.tgz", @@ -22906,23 +23034,17 @@ } }, "node_modules/css-tree": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", - "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dev": true, "dependencies": { - "mdn-data": "2.0.14", - "source-map": "^0.6.1" + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" }, "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/css-tree/node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "engines": { - "node": ">=0.10.0" + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" } }, "node_modules/css-unit-converter": { @@ -23055,14 +23177,16 @@ } }, "node_modules/csso": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", - "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dev": true, "dependencies": { - "css-tree": "^1.1.2" + "css-tree": "~2.2.0" }, "engines": { - "node": ">=8.0.0" + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" } }, "node_modules/cssom": { @@ -32790,9 +32914,10 @@ } }, "node_modules/mdn-data": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", - "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "dev": true }, "node_modules/mdurl": { "version": "1.0.1", @@ -39636,6 +39761,133 @@ "postcss": "^8.2.15" } }, + "node_modules/postcss-svgo/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "engines": { + "node": ">= 10" + } + }, + "node_modules/postcss-svgo/node_modules/css-select": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", + "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.0.1", + "domhandler": "^4.3.1", + "domutils": "^2.8.0", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/postcss-svgo/node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/postcss-svgo/node_modules/csso": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", + "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "dependencies": { + "css-tree": "^1.1.2" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/postcss-svgo/node_modules/dom-serializer": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", + "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/postcss-svgo/node_modules/domhandler": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", + "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", + "dependencies": { + "domelementtype": "^2.2.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/postcss-svgo/node_modules/domutils": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", + "dependencies": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/postcss-svgo/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/postcss-svgo/node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" + }, + "node_modules/postcss-svgo/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/postcss-svgo/node_modules/svgo": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", + "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==", + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^4.1.3", + "css-tree": "^1.1.3", + "csso": "^4.2.0", + "picocolors": "^1.0.0", + "stable": "^0.1.8" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/postcss-unique-selectors": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz", @@ -47758,96 +48010,38 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, "node_modules/svgo": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", - "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.0.tgz", + "integrity": "sha512-mSqPn6RDeNqJvCeqHERlfWJjd4crP/2PgFelil9WpTwC4D3okAUopPsH3lnEyl7ONXfDVyISOihDjO0uK8YVAA==", + "dev": true, "dependencies": { "@trysound/sax": "0.2.0", "commander": "^7.2.0", - "css-select": "^4.1.3", - "css-tree": "^1.1.3", - "csso": "^4.2.0", - "picocolors": "^1.0.0", - "stable": "^0.1.8" + "css-select": "^5.1.0", + "css-tree": "^2.2.1", + "csso": "^5.0.5", + "picocolors": "^1.0.0" }, "bin": { "svgo": "bin/svgo" }, "engines": { - "node": ">=10.13.0" + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/svgo" } }, "node_modules/svgo/node_modules/commander": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true, "engines": { "node": ">= 10" } }, - "node_modules/svgo/node_modules/css-select": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", - "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==", - "dependencies": { - "boolbase": "^1.0.0", - "css-what": "^6.0.1", - "domhandler": "^4.3.1", - "domutils": "^2.8.0", - "nth-check": "^2.0.1" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, - "node_modules/svgo/node_modules/dom-serializer": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", - "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", - "dependencies": { - "domelementtype": "^2.0.1", - "domhandler": "^4.2.0", - "entities": "^2.0.0" - }, - "funding": { - "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" - } - }, - "node_modules/svgo/node_modules/domhandler": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", - "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", - "dependencies": { - "domelementtype": "^2.2.0" - }, - "engines": { - "node": ">= 4" - }, - "funding": { - "url": "https://github.com/fb55/domhandler?sponsor=1" - } - }, - "node_modules/svgo/node_modules/domutils": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", - "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", - "dependencies": { - "dom-serializer": "^1.0.1", - "domelementtype": "^2.2.0", - "domhandler": "^4.2.0" - }, - "funding": { - "url": "https://github.com/fb55/domutils?sponsor=1" - } - }, - "node_modules/svgo/node_modules/entities": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", - "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, "node_modules/swagger2openapi": { "version": "7.0.8", "resolved": "https://registry.npmjs.org/swagger2openapi/-/swagger2openapi-7.0.8.tgz", @@ -64212,6 +64406,99 @@ "cosmiconfig": "^7.0.1", "deepmerge": "^4.2.2", "svgo": "^2.8.0" + }, + "dependencies": { + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" + }, + "css-select": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", + "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==", + "requires": { + "boolbase": "^1.0.0", + "css-what": "^6.0.1", + "domhandler": "^4.3.1", + "domutils": "^2.8.0", + "nth-check": "^2.0.1" + } + }, + "css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "requires": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + } + }, + "csso": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", + "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "requires": { + "css-tree": "^1.1.2" + } + }, + "dom-serializer": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", + "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", + "requires": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + } + }, + "domhandler": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", + "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", + "requires": { + "domelementtype": "^2.2.0" + } + }, + "domutils": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", + "requires": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + } + }, + "entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==" + }, + "mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + }, + "svgo": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", + "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==", + "requires": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^4.1.3", + "css-tree": "^1.1.3", + "csso": "^4.2.0", + "picocolors": "^1.0.0", + "stable": "^0.1.8" + } + } } }, "@svgr/webpack": { @@ -69010,19 +69297,13 @@ } }, "css-tree": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", - "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dev": true, "requires": { - "mdn-data": "2.0.14", - "source-map": "^0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" } }, "css-unit-converter": { @@ -69106,11 +69387,12 @@ "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==" }, "csso": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", - "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dev": true, "requires": { - "css-tree": "^1.1.2" + "css-tree": "~2.2.0" } }, "cssom": { @@ -76615,9 +76897,10 @@ "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==" }, "mdn-data": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", - "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "dev": true }, "mdurl": { "version": "1.0.1", @@ -81689,6 +81972,99 @@ "requires": { "postcss-value-parser": "^4.2.0", "svgo": "^2.7.0" + }, + "dependencies": { + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" + }, + "css-select": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", + "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==", + "requires": { + "boolbase": "^1.0.0", + "css-what": "^6.0.1", + "domhandler": "^4.3.1", + "domutils": "^2.8.0", + "nth-check": "^2.0.1" + } + }, + "css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "requires": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + } + }, + "csso": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", + "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", + "requires": { + "css-tree": "^1.1.2" + } + }, + "dom-serializer": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", + "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", + "requires": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + } + }, + "domhandler": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", + "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", + "requires": { + "domelementtype": "^2.2.0" + } + }, + "domutils": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", + "requires": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + } + }, + "entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==" + }, + "mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + }, + "svgo": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", + "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==", + "requires": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^4.1.3", + "css-tree": "^1.1.3", + "csso": "^4.2.0", + "picocolors": "^1.0.0", + "stable": "^0.1.8" + } + } } }, "postcss-unique-selectors": { @@ -87790,68 +88166,24 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, "svgo": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", - "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.0.tgz", + "integrity": "sha512-mSqPn6RDeNqJvCeqHERlfWJjd4crP/2PgFelil9WpTwC4D3okAUopPsH3lnEyl7ONXfDVyISOihDjO0uK8YVAA==", + "dev": true, "requires": { "@trysound/sax": "0.2.0", "commander": "^7.2.0", - "css-select": "^4.1.3", - "css-tree": "^1.1.3", - "csso": "^4.2.0", - "picocolors": "^1.0.0", - "stable": "^0.1.8" + "css-select": "^5.1.0", + "css-tree": "^2.2.1", + "csso": "^5.0.5", + "picocolors": "^1.0.0" }, "dependencies": { "commander": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" - }, - "css-select": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", - "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==", - "requires": { - "boolbase": "^1.0.0", - "css-what": "^6.0.1", - "domhandler": "^4.3.1", - "domutils": "^2.8.0", - "nth-check": "^2.0.1" - } - }, - "dom-serializer": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", - "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", - "requires": { - "domelementtype": "^2.0.1", - "domhandler": "^4.2.0", - "entities": "^2.0.0" - } - }, - "domhandler": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", - "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", - "requires": { - "domelementtype": "^2.2.0" - } - }, - "domutils": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", - "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", - "requires": { - "dom-serializer": "^1.0.1", - "domelementtype": "^2.2.0", - "domhandler": "^4.2.0" - } - }, - "entities": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", - "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==" + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true } } }, diff --git a/package.json b/package.json index 2823257b2..cefc1eaa2 100644 --- a/package.json +++ b/package.json @@ -133,6 +133,7 @@ "stencil-tailwind-plugin": "^1.6.0", "storybook-tailwind-dark-mode": "^1.0.15", "style-dictionary": "^3.7.1", + "svgo": "^3.0.0", "tailwindcss": "^3.1.8", "ts-jest": "28.0.5", "ts-node": "10.9.1", diff --git a/tools/executors/typescript/design-tokens-build/impl.ts b/tools/executors/typescript/design-tokens-build/impl.ts index 3cc41bfbd..69623af77 100644 --- a/tools/executors/typescript/design-tokens-build/impl.ts +++ b/tools/executors/typescript/design-tokens-build/impl.ts @@ -1,12 +1,20 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { ExecutorContext } from "@nrwl/devkit"; -import fs from "fs"; +import fs, { + existsSync, + mkdirSync, + readdir, + readFileSync, + writeFileSync, +} from "fs"; import Path from "path"; +import SVGO from "svgo"; import { execute, printError, printInfo, printSuccess, + svgoParser, toCssFontImportParser, toTailwindParser, } from "../utilities"; @@ -20,7 +28,8 @@ export default async function ( context: ExecutorContext ) { try { - const { tokensDir, tokensFile, fontsDir, clean, verbose } = options; + const { tokensDir, tokensFile, fontsDir, imagesDir, clean, verbose } = + options; printInfo("Executing design-tokens-build executor..."); verbose && printInfo(`Options: ${JSON.stringify(options, null, 2)}`); @@ -66,7 +75,7 @@ export default async function ( verbose && printInfo(`Loading design tokens file for theme: ${themeName}`); - const tokenJsonStr = fs.readFileSync(tokenJson, "utf-8"); + const tokenJsonStr = readFileSync(tokenJson, "utf-8"); verbose && printInfo(tokenJsonStr); const dataArray = JSON.parse(tokenJsonStr); @@ -297,18 +306,18 @@ export default async function ( verbose && printSuccess(result); - if (!fs.existsSync(Path.join(outputPath, "js"))) { - fs.mkdirSync(Path.join(outputPath, "js"), { recursive: true }); + if (!existsSync(Path.join(outputPath, "js"))) { + mkdirSync(Path.join(outputPath, "js"), { recursive: true }); } - fs.writeFileSync(Path.join(outputPath, "js", `theme.js`), result, "utf8"); + writeFileSync(Path.join(outputPath, "js", `theme.js`), result, "utf8"); printSuccess(`Design token theme.js (tailwind import) created.`); - const fontsPath = fs.existsSync(Path.join(tokensDir, fontsDir)) + const fontsPath = existsSync(Path.join(tokensDir, fontsDir)) ? Path.join(tokensDir, fontsDir) : fontsDir; - if (fs.existsSync(fontsPath) && dataArray["font"]) { + if (existsSync(fontsPath) && dataArray["font"]) { result = await toCssFontImportParser( Object.entries(dataArray["font"]).reduce( ( @@ -345,17 +354,110 @@ export default async function ( verbose && printSuccess(result); - if (!fs.existsSync(Path.join(outputPath, "css"))) { - fs.mkdirSync(Path.join(outputPath, "css"), { recursive: true }); + if (!existsSync(Path.join(outputPath, "css"))) { + mkdirSync(Path.join(outputPath, "css"), { recursive: true }); + } + + writeFileSync(Path.join(outputPath, "css", `fonts.css`), result, "utf8"); + + printSuccess(`Theme specific fonts (font.css) created.`); + } + + const imagesPath = existsSync(Path.join(tokensDir, imagesDir)) + ? Path.join(tokensDir, imagesDir) + : imagesDir; + if (existsSync(imagesPath)) { + printInfo( + `Building SVG images from design system assets in ${imagesPath}...` + ); + + let fileList = []; + + readdir(imagesPath, (err: NodeJS.ErrnoException, files: string[]) => { + verbose && + printInfo(`Found the following assets: ${files.join(", ")}.`); + + fileList = files.reduce((ret: string[], file: string) => { + if (err) { + throw err; + } + + if (file && file.endsWith("svg")) { + ret.push(file); + } + + return ret; + }, fileList); + }); + + printInfo( + `Building SVG images for the following: ${fileList.join(", ")}.` + ); + + result = await svgoParser( + fileList.map((file: string) => ({ + name: file, + url: file, + value: { + url: file, + type: "svg", + }, + type: "svg", + })), + { + svgo: { + js2svg: { + pretty: true, + }, + plugins: [ + { + removeDimensions: true, + }, + { + removeAttrs: { + attrs: "*:(fill|stroke)", + }, + }, + { + addAttributesToSVGElement: { + // The svg also has a focusable attribute set + // to false which prevents the icon itself + // from receiving focus in IE, because otherwise + // the button will have two Tab stops, which is + // not the expected or desired behavior. + attributes: [ + 'width="1em"', + 'height="1em"', + 'focusable="false"', + ], + }, + }, + ], + }, + }, + { SVGO } as any + ); + + verbose && printSuccess(result); + + if (!result?.value) { + printError(`An error occurred generating SVGs`); + return { success: false }; + } + + if (!existsSync(Path.join(outputPath, "assets", "images"))) { + mkdirSync(Path.join(outputPath, "assets", "images"), { + recursive: true, + }); } fs.writeFileSync( - Path.join(outputPath, "css", `fonts.css`), + Path.join(result?.value, "assets", "images"), result, "utf8" ); - printSuccess(`Theme specific fonts (font.css) created.`); + printSuccess(`Theme specific images (assets/images/*.svg) created.`); } printSuccess("Design tokens sync succeeded."); diff --git a/tools/executors/typescript/project.json b/tools/executors/typescript/project.json index d6e9d9991..ff660ec72 100644 --- a/tools/executors/typescript/project.json +++ b/tools/executors/typescript/project.json @@ -28,7 +28,7 @@ "assets": [ { "input": "./tools/executors/typescript", - "glob": "**/*.d.ts", + "glob": "**/*!(design-token-parsers)/**/*.md", "output": "." }, { @@ -96,7 +96,7 @@ "assets": [ { "input": "./tools/executors/typescript", - "glob": "**/*.md", + "glob": "**/*!(design-token-parsers)/**/*.md", "output": "." }, { diff --git a/tools/executors/typescript/utilities/design-token-parsers/parsers/svgo/svgo.parser.ts b/tools/executors/typescript/utilities/design-token-parsers/parsers/svgo/svgo.parser.ts index e9c86e787..02a8f1d6d 100644 --- a/tools/executors/typescript/utilities/design-token-parsers/parsers/svgo/svgo.parser.ts +++ b/tools/executors/typescript/utilities/design-token-parsers/parsers/svgo/svgo.parser.ts @@ -1,15 +1,17 @@ -import type { OptimizeOptions, DefaultPlugins, OptimizedSvg } from 'svgo'; -import { LibsType } from '../global-libs'; -import { DownloadableFile } from '../../types'; +import { readFileSync } from "fs"; +import type { Config, DefaultPlugin, Output } from "svgo"; +import { printError, printInfo } from "../../../helper-utilities"; +import { DownloadableFile } from "../../types"; +import { LibsType } from "../global-libs"; import { - defaultPresetPlugins, DefaultPresetOverride, + defaultPresetPlugins, + DefaultPresetPluginsName, + DefaultPresetPluginsParams, Plugins, PluginV1, PluginV2, - DefaultPresetPluginsName, - DefaultPresetPluginsParams, -} from './svgo.type'; +} from "./svgo.type"; export type InputDataType = Array< Record & { @@ -25,29 +27,31 @@ export type OutputDataType = Array< export type OptionsType = | undefined | { - svgo?: Omit & + svgo?: Omit & ( - | { plugins?: Array } + | { plugins?: Array } | { plugins: Array } ); }; -function getSyntaxPlugin(plugins: NonNullable): 'v1' | 'v2' { - return plugins.some(plugin => typeof plugin === 'string' || 'name' in plugin) ? 'v2' : 'v1'; +function getSyntaxPlugin(plugins: NonNullable): "v1" | "v2" { + return plugins.some(plugin => typeof plugin === "string" || "name" in plugin) + ? "v2" + : "v1"; } function migrateSvgoPlugins(plugins?: Plugins): Array { if (!plugins) { - return [{ name: 'preset-default' }]; + return [{ name: "preset-default" }]; } - if (getSyntaxPlugin(plugins) === 'v2') { + if (getSyntaxPlugin(plugins) === "v2") { return plugins as Array; } const { overrides, pluginsV2 } = (plugins as Array).reduce<{ overrides: DefaultPresetOverride; - pluginsV2: Array; + pluginsV2: Array; }>( (acc, plugin) => { const pluginName = Object.keys(plugin)[0]; @@ -61,16 +65,16 @@ function migrateSvgoPlugins(plugins?: Plugins): Array { acc.pluginsV2.push({ name: pluginName, params: params, - } as DefaultPlugins); + } as DefaultPlugin); } } return acc; }, - { overrides: {}, pluginsV2: [] }, + { overrides: {}, pluginsV2: [] } ); return [ { - name: 'preset-default', + name: "preset-default", params: { overrides, }, @@ -82,31 +86,44 @@ function migrateSvgoPlugins(plugins?: Plugins): Array { export default async function ( tokens: InputDataType, options: OptionsType, - { SVGO, _, SpServices }: Pick, + { SVGO, _ }: Pick ): Promise { try { options = options || {}; options.svgo = options?.svgo || {}; options.svgo.plugins = migrateSvgoPlugins(options.svgo.plugins); + printInfo(JSON.stringify(tokens, null, 2)); return (await Promise.all( tokens.map(async token => { - if (token.type === 'vector' && token.value.format === 'svg') { - const baseString = await SpServices.assets.getSource(token.value.url!, 'text'); - try { - const result = SVGO.optimize(baseString, options?.svgo as OptimizeOptions); - if (result.error) throw result.error; - token.value.content = (result as OptimizedSvg).data!; + if (token.type === "vector" && token.value.format === "svg") { + printInfo(token.value.url); + + const baseString = readFileSync(token.value.url, "utf8"); + + /*SpServices.assets.getSource( + token.value.url!, + "text" + )*/ try { + const result: Output = SVGO.optimize( + baseString, + options?.svgo as Config + ); + token.value.content = result.data!; } catch (err) { + printError(err); + token.value.content = baseString; } - return { ...token, value: _.omit(token.value, ['url']) }; + return { ...token, value: _.omit(token.value, ["url"]) }; } return token; - }), + }) )) as OutputDataType; } catch (err) { + printError(err); + throw err; } }