From e410185b13444f98d6dce7db5e970411deb475a4 Mon Sep 17 00:00:00 2001 From: Jacek Koziol Date: Fri, 27 Sep 2024 15:26:57 +0200 Subject: [PATCH 1/3] feature: added svg icons generation bundle --- .../chisel-scripts/lib/extensions/icons.mjs | 448 ++++++++++++++++++ packages/chisel-scripts/package.json | 3 +- yarn.lock | 129 +++++ 3 files changed, 579 insertions(+), 1 deletion(-) create mode 100644 packages/chisel-scripts/lib/extensions/icons.mjs diff --git a/packages/chisel-scripts/lib/extensions/icons.mjs b/packages/chisel-scripts/lib/extensions/icons.mjs new file mode 100644 index 00000000..e9bb7171 --- /dev/null +++ b/packages/chisel-scripts/lib/extensions/icons.mjs @@ -0,0 +1,448 @@ +import fs from 'fs/promises'; +import fastGlob from 'fast-glob'; +import path from 'path'; +import svgo from 'svgo'; +import { chalk } from 'chisel-shared-utils'; + +const { convertPathToPattern } = fastGlob; + +const printLog = (...args) => console.log(chalk.dim('[icons]::'), ...args); + +const icons = (api) => { + const svgSourceFilesDirectory = api.resolve('assets/icons-source'); + const svgSourceFilesDirectoryMono = svgSourceFilesDirectory + '/'; + const svgSourceFilesDirectoryColor = svgSourceFilesDirectory + '/color/'; + + const iconsDestinationFolder = api.resolve('assets/icons'); + const iconsJsonFileDestinationFile = iconsDestinationFolder + '/icons.json'; + const iconsFileDestinationFile = iconsDestinationFolder + '/icons.svg'; + + const iconsScssSettingsFileDestinationFolder = api.resolve('src/design/settings'); + const iconsScssSettingsFileDestinationFile = + iconsScssSettingsFileDestinationFolder + '/_icon-settings.scss'; + + function optimizeSVG(svgContent, idPrefix, colorfulIcons) { + const configMono = [ + { + name: 'removeAttrs', + params: { + attrs: ['path:(fill|stroke)', 'fill'], + }, + }, + ]; + + const configColor = []; + const config = colorfulIcons ? configColor : configMono; + + const result = svgo.optimize(svgContent, { + removeViewBox: false, + removeDimensions: false, + plugins: [ + 'preset-default', + 'removeDimensions', + { + name: 'prefixIds', + params: { + delim: '', + prefixIds: true, + prefixClassNames: true, + prefix: (data) => { + const prefix = + data.type === 'element' && + data.name === 'use' && + data.attributes?.href?.startsWith('#icon-') + ? '' + : `${idPrefix}__`; + return prefix; + }, + }, + }, + ...config, + ], + }); + return result.data; + } + + async function parseSVGFileData(iconSourceFilePath, iconColorful) { + const iconName = path.basename(iconSourceFilePath, '.svg').replace(/[_|\s]/gm, '-'); + const iconId = iconColorful ? `icon-color-${iconName}` : `icon-${iconName}`; + const svgContent = await fs.readFile(iconSourceFilePath, 'utf-8'); + const optimizedSvgContent = optimizeSVG(svgContent, iconId, iconColorful); + const viewBoxMatch = optimizedSvgContent.match(/viewBox=["']([^'|^"]+)["']/); + const svgViewBox = viewBoxMatch ? viewBoxMatch[1] : null; + const defsRegex = /([\s\S]*?)<\/defs>/gm; + const defsMatches = optimizedSvgContent.matchAll(defsRegex); + const svgDefsContent = Array.from(defsMatches) + .map((data) => data[1].trim()) + .join('\n'); + + if (!svgViewBox) { + throw Error(`SVG viewBox not found in file ${iconSourceFilePath}.`); + } + + const svgWidth = parseInt(svgViewBox.split(' ')[2], 10); + const svgHeight = parseInt(svgViewBox.split(' ')[3], 10); + const svgRectangle = svgWidth !== svgHeight; + const svgIconDataFull = optimizedSvgContent.replace(/]*>|<\/svg>/gi, '').trim(); + const svgIconDataNoDefs = svgIconDataFull.replace(defsRegex, ''); + + return { + iconSourceFilePath, + iconName, + iconColorful, + iconId, + svgViewBox, + svgWidth, + svgHeight, + svgIconDataFull, + svgIconDataNoDefs, + svgDefsContent, + svgRectangle, + }; + } + + async function readSVGFilesDataOptimized(sourceDir = svgSourceFilesDirectory, iconsColorful) { + const sourceDirExists = await fs.access(sourceDir).then(() => true).catch(() => false); + if (!sourceDirExists) { + printLog(chalk.yellow(`Path to source SVG files not found!!!`), chalk.italic.underline(sourceDir)); + return []; + } + + const svgFiles = await fs.readdir(sourceDir); + const svgFilesDataPromises = svgFiles + .filter((file) => file.endsWith('.svg')) + .map((file) => parseSVGFileData(path.join(sourceDir, file), iconsColorful)); + + const svgIconsData = await Promise.all(svgFilesDataPromises); + return svgIconsData; + } + + async function createDestinationDir() { + const dirCreation = await fs.mkdir(iconsDestinationFolder, { recursive: true }); + dirCreation && printLog(`Destination directory created:`, chalk.italic.underline(dirCreation)); + } + + async function generateFileContentDataOfSvgIconsMono(svgIconsData) { + const contentData = { + defs: ``, + symbols: ``, + }; + + svgIconsData.forEach((data) => { + contentData.defs += data.svgDefsContent ? `\t\t${data.svgDefsContent}\n` : ''; + contentData.symbols += ` + + ${data.svgIconDataNoDefs} + `; + }); + + return contentData; + } + + async function generateFileContentDataOfSvgIconsColor(svgIconsData) { + const iconsViewGap = 10; + const viewBoxMaxWidth = svgIconsData + .map((data) => data.svgWidth) + .reduce((max, width) => (width > max ? width : max), 0); + + const contentData = { + views: ``, + groups: ``, + defs: ``, + viewBoxTotalHeight: 0, + viewBoxMaxWidth, + }; + + let viewBoxY = 0; + + svgIconsData.forEach((data) => { + const tmpViewBoxElementPositionY = viewBoxY; + const tmpViewBoxForView = `0 ${tmpViewBoxElementPositionY} ${data.svgWidth} ${data.svgHeight}`; + + viewBoxY += data.svgHeight + iconsViewGap; + contentData.viewBoxTotalHeight += data.svgHeight + iconsViewGap; + contentData.defs += data.svgDefsContent ? `\t\t${data.svgDefsContent}\n` : ''; + contentData.views += `\t\n`; + + contentData.groups += ` + + + ${data.svgIconDataNoDefs} + + `; + }); + + return contentData; + } + + async function generateIconsFile(svgIconsDataMono, svgIconsDataColor) { + const contentDataMono = await generateFileContentDataOfSvgIconsMono(svgIconsDataMono); + const contentDataColor = await generateFileContentDataOfSvgIconsColor(svgIconsDataColor); + + const iconsSVG = + ` + + + + + ${contentDataColor.defs.trim()} + ${contentDataMono.defs.trim()} + ${contentDataMono.symbols.trim()} + + + ${contentDataColor.views.trim()} + + ${contentDataColor.groups.trim()} +`.trim() + '\n'; + + try { + await fs.writeFile(iconsFileDestinationFile, iconsSVG, 'utf-8'); + printLog(`Generated SVG icons file: ${chalk.italic.underline(iconsFileDestinationFile)}`); + } catch (error) { + throw new Error(`Error generating ${iconsFileDestinationFile}: ${error.message}`); + } + } + + async function generateScssSettingsFile(svgIconsData) { + const scssVariables = svgIconsData + .filter((data) => data.svgWidth / data.svgHeight !== 1) + .map((data) => { + return ` + ${data.iconId}: math.div(${data.svgWidth}, ${data.svgHeight}),`; + }) + .join('') + .trim(); + + const scssSettingsFileContent = + `@use 'sass:math'; + +/* This file is auto generated. Do not edit directly. */ + +$o-icon-icons: ( + ${scssVariables} +);`.trim() + '\n'; + + try { + await fs.writeFile(iconsScssSettingsFileDestinationFile, scssSettingsFileContent, 'utf-8'); + printLog(`Generated SCSS file: ${chalk.italic.underline(iconsScssSettingsFileDestinationFile)}`); + } catch (error) { + throw new Error(`Error generating ${iconsScssSettingsFileDestinationFile}: ${error.message}`); + } + } + + async function generateIconsJsonFile(svgIconsData) { + try { + const jsonContent = JSON.stringify(svgIconsData, null, 2).trim() + '\n'; + await fs.writeFile(iconsJsonFileDestinationFile, jsonContent, 'utf-8'); + printLog(`Generated JSON icons data file: ${chalk.italic.underline(iconsJsonFileDestinationFile)}`); + } catch (error) { + throw new Error(`Error generating ${iconsJsonFileDestinationFile}: ${error.message}`); + } + } + + async function generateIconsHTMLPreviewColor(svgIconsDataMono = [], svgIconsDataColor = []) { + const allIconsData = [...svgIconsDataColor, ...svgIconsDataMono]; + + const iconsColorHTML = svgIconsDataColor + .map((data) => { + return ` +
+
+ ${data.iconId} + +
+

${data.iconId.replace('icon-', '')}

+

ID: ${data.iconId}

+
`; + }) + .join('\n').trim(); + + const iconsMonoHTML = svgIconsDataMono + .map((data) => { + return ` +
+
+ + + +
+

${data.iconId.replace('icon-', '')}

+

ID: ${data.iconId}

+
`; + }) + .join('\n').trim(); + + const cssClasses = allIconsData + .filter((data) => data.svgWidth / data.svgHeight !== 1) + .map((data) => { + return `\t.o-icon--${data.iconId}{ width: calc(${data.svgWidth / data.svgHeight} * 1em); }\n`; + }) + .join('') + .trim(); + + const htmlContent = ` + + + + + + Icons Preview + + + + +

To properly display this file, it shouldn't be opened directly in the browser, but it should be served.

+
+

Colorful Icons

+ ${iconsColorHTML} +
+
+

Monochromatic Icons

+ ${iconsMonoHTML} +
+ + + `.trim(); + + const previewDestinationFolder = `${iconsDestinationFolder}/icons-preview.html`; + try { + await fs.writeFile(previewDestinationFolder, htmlContent, 'utf-8'); + printLog(`Generated HTML preview file: ${chalk.italic.underline(previewDestinationFolder)}`); + } catch (error) { + throw new Error(`Error generating icons-preview.html: ${error.message}`); + } + } + + return async function generateIcons() { + printLog(chalk.cyanBright('Starting icons files generation')); + printLog('Path to source SVG files:', chalk.italic.underline(svgSourceFilesDirectory)); + + const svgIconsDataMono = await readSVGFilesDataOptimized(svgSourceFilesDirectoryMono, false); + const svgIconsDataColor = await readSVGFilesDataOptimized(svgSourceFilesDirectoryColor, true); + const allIconsData = [...svgIconsDataMono, ...svgIconsDataColor]; + + if (allIconsData.length === 0) { + printLog(chalk.yellow('No icons found!!!')); + printLog(chalk.yellow('Warning: Skipping icons files generation!')); + return; + } + + await createDestinationDir(); + await Promise.all([ + generateIconsFile(svgIconsDataMono, svgIconsDataColor), + generateScssSettingsFile(allIconsData), + generateIconsJsonFile(allIconsData), + generateIconsHTMLPreviewColor(svgIconsDataMono, svgIconsDataColor), + ]); + + printLog(chalk.green('Icons files generated successfully')); + } +} + +export const build = async (api) => { + await icons(api)(); +}; + +export const start = async (api) => { + const { default: chokidar } = await import('chokidar'); + + const sourceIconsDir = api.resolve('assets/icons-source'); + const pattern = convertPathToPattern(sourceIconsDir) + '/**/*.svg'; + + const watcher = chokidar.watch(pattern, { + persistent: true, + ignoreInitial: true, + awaitWriteFinish: true, + }); + + watcher.on('add', () => icons(api)()); + watcher.on('change', () => icons(api)()); + watcher.on('unlink', () => icons(api)()); +}; diff --git a/packages/chisel-scripts/package.json b/packages/chisel-scripts/package.json index 44d261b7..3f4d996d 100644 --- a/packages/chisel-scripts/package.json +++ b/packages/chisel-scripts/package.json @@ -32,7 +32,8 @@ "fs-extra": "^9.0.1", "globby": "^11.0.1", "inquirer": "^7.1.0", - "lodash": "^4.17.15" + "lodash": "^4.17.15", + "svgo": "^3.3.2" }, "peerDependencies": { "@wordpress/scripts": "^27.9.0" diff --git a/yarn.lock b/yarn.lock index c861846e..561b5758 100644 --- a/yarn.lock +++ b/yarn.lock @@ -937,6 +937,11 @@ dependencies: defer-to-connect "^1.0.1" +"@trysound/sax@0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" + integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA== + "@types/color-name@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" @@ -1316,6 +1321,11 @@ bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== +boolbase@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" + integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww== + boxen@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.2.0.tgz#e411b62357d6d6d36587c8ac3d5d974daa070e64" @@ -1759,6 +1769,11 @@ commander@^5.1.0: resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae" integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg== +commander@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" + integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== + compare-func@^1.3.1: version "1.3.4" resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.4.tgz#6b07c4c5e8341119baf44578085bda0f4a823516" @@ -2059,6 +2074,45 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-select@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6" + integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg== + dependencies: + boolbase "^1.0.0" + css-what "^6.1.0" + domhandler "^5.0.2" + domutils "^3.0.1" + nth-check "^2.0.1" + +css-tree@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20" + integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw== + dependencies: + mdn-data "2.0.30" + source-map-js "^1.0.1" + +css-tree@~2.2.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032" + integrity sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA== + dependencies: + mdn-data "2.0.28" + source-map-js "^1.0.1" + +css-what@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" + integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== + +csso@^5.0.5: + version "5.0.5" + resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6" + integrity sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ== + dependencies: + css-tree "~2.2.0" + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -2258,6 +2312,36 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-serializer@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" + integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg== + dependencies: + domelementtype "^2.3.0" + domhandler "^5.0.2" + entities "^4.2.0" + +domelementtype@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" + integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== + +domhandler@^5.0.2, domhandler@^5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" + integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w== + dependencies: + domelementtype "^2.3.0" + +domutils@^3.0.1: + version "3.1.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e" + integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA== + dependencies: + dom-serializer "^2.0.0" + domelementtype "^2.3.0" + domhandler "^5.0.3" + dot-prop@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177" @@ -2338,6 +2422,11 @@ enquirer@^2.3.5: dependencies: ansi-colors "^3.2.1" +entities@^4.2.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48" + integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw== + env-paths@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43" @@ -4115,6 +4204,16 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +mdn-data@2.0.28: + version "2.0.28" + resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba" + integrity sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g== + +mdn-data@2.0.30: + version "2.0.30" + resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc" + integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA== + meow@^3.3.0: version "3.7.0" resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb" @@ -4619,6 +4718,13 @@ npmlog@^4.1.2: gauge "~2.7.3" set-blocking "~2.0.0" +nth-check@^2.0.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d" + integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w== + dependencies: + boolbase "^1.0.0" + number-is-nan@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d" @@ -5006,6 +5112,11 @@ performance-now@^2.1.0: resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= +picocolors@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59" + integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw== + picomatch@^2.0.4, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -5718,6 +5829,11 @@ sort-keys@^2.0.0: dependencies: is-plain-obj "^1.0.0" +source-map-js@^1.0.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46" + integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== + source-map-resolve@^0.5.0: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" @@ -6035,6 +6151,19 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +svgo@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.3.2.tgz#ad58002652dffbb5986fc9716afe52d869ecbda8" + integrity sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw== + dependencies: + "@trysound/sax" "0.2.0" + commander "^7.2.0" + css-select "^5.1.0" + css-tree "^2.3.1" + css-what "^6.1.0" + csso "^5.0.5" + picocolors "^1.0.0" + table@^5.2.3: version "5.4.6" resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e" From 5dc7c180ef3d131279affc323316be79ac0e2a08 Mon Sep 17 00:00:00 2001 From: Jacek Koziol Date: Fri, 27 Sep 2024 15:30:52 +0200 Subject: [PATCH 2/3] fix: added missing files --- .../assets/icons-source/chisel_icon.svg | 1 + .../assets/icons-source/chisel_logo.svg | 1 + .../assets/icons-source/close_line.svg | 1 + .../assets/icons-source/color/chisel_icon.svg | 1 + .../assets/icons-source/color/chisel_logo.svg | 1 + .../icons-source/color/facebook_logo.svg | 10 ++++++ .../icons-source/color/instagram_logo.svg | 14 ++++++++ .../assets/icons-source/x_logo.svg | 1 + .../assets/icons/.gitignore | 3 ++ .../src/design/.gitignore | 1 + .../src/styles/objects/_icon.scss | 33 +++++++++++++++++++ .../views/objects/icon.twig | 32 ++++++++++++++++++ .../views/partials/icons-preview.twig | 11 +++++++ 13 files changed, 110 insertions(+) create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel_icon.svg create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel_logo.svg create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/close_line.svg create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel_icon.svg create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel_logo.svg create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/facebook_logo.svg create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/instagram_logo.svg create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/x_logo.svg create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons/.gitignore create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/design/.gitignore create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/objects/_icon.scss create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/objects/icon.twig create mode 100644 packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/partials/icons-preview.twig diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel_icon.svg b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel_icon.svg new file mode 100644 index 00000000..dec83ac6 --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel_logo.svg b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel_logo.svg new file mode 100644 index 00000000..2337f70f --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/close_line.svg b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/close_line.svg new file mode 100644 index 00000000..4427b8e2 --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/close_line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel_icon.svg b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel_icon.svg new file mode 100644 index 00000000..59f1b3f6 --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel_logo.svg b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel_logo.svg new file mode 100644 index 00000000..de573613 --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/facebook_logo.svg b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/facebook_logo.svg new file mode 100644 index 00000000..13ff0691 --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/facebook_logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/instagram_logo.svg b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/instagram_logo.svg new file mode 100644 index 00000000..a6ce701c --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/instagram_logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/x_logo.svg b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/x_logo.svg new file mode 100644 index 00000000..a3df83c5 --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/x_logo.svg @@ -0,0 +1 @@ + diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons/.gitignore b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons/.gitignore new file mode 100644 index 00000000..1db68624 --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/assets/icons/.gitignore @@ -0,0 +1,3 @@ +/icons.json +/icons.svg +/icons-preview.html diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/design/.gitignore b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/design/.gitignore new file mode 100644 index 00000000..2771b97e --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/design/.gitignore @@ -0,0 +1 @@ +/tools/_icon-settings.scss diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/objects/_icon.scss b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/objects/_icon.scss new file mode 100644 index 00000000..34b8564e --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/src/styles/objects/_icon.scss @@ -0,0 +1,33 @@ +@use 'sass:math'; +@use '../../design/settings/icon-settings' as *; + +.o-icon { + display: flex; + align-items: center; + justify-content: center; + width: 1em; + font-size: var(--o-icon-size, 1em); + color: var(--o-icon-color, currentcolor); + + &--inline { + display: inline-flex; + } + + @each $icon, $width-ratio in $o-icon-icons { + &--#{$icon} { + width: $width-ratio * 1em; + } + } +} + +.o-icon__icon { + display: block; + width: 100%; + height: 1em; + + &:not(&--color) { + fill: currentcolor; + stroke: currentcolor; + stroke-width: 0; + } +} diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/objects/icon.twig b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/objects/icon.twig new file mode 100644 index 00000000..4d20e9ce --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/objects/icon.twig @@ -0,0 +1,32 @@ +{# +Input Data: + +name: string // name of the icon +inline: boolean // required for icons that should be displayed as an inline element and not a block +rectangle: boolean // required for icons that are rectangles (not squares) to be properly sized +forceMono: boolean // use in case the monochromatic icons name starts with "color-" +alt: string +#} + +{% set nameHintIsColor = name matches '/^color-.*/' %} +{% set isColor = forceMono ? false : nameHintIsColor %} +{% set inlineClass = inline ? 'o-icon--inline' : '' %} +{% set rectangleClass = rectangle ? 'o-icon--icon-' ~ name : '' %} +{% set iconPrefix = 'icon-' %} +{% set iconName = iconPrefix ~ name %} + +
+ {% if isColor %} + {{ alt ? alt : '' }} + {% else %} + + {% if alt %} + + {{ alt }} + + {% endif %} + + + {% endif %} +
diff --git a/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/partials/icons-preview.twig b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/partials/icons-preview.twig new file mode 100644 index 00000000..f1743f48 --- /dev/null +++ b/packages/generator-chisel/lib/commands/create/creators/app/chisel-starter-theme/views/partials/icons-preview.twig @@ -0,0 +1,11 @@ +
+

Icons preview

+ +
+ {% include 'objects/icon.twig' with {name: 'color-chisel-logo', alt: 'Chisel logo ALT', rectangle: true, inline: true} %} + {% include 'objects/icon.twig' with {name: 'color-facebook-logo', inline: true} %} + {% include 'objects/icon.twig' with {name: 'color-pallet', forceMono: true} %} + {% include 'objects/icon.twig' with {name: 'chisel-logo', rectangle: true} %} + {% include 'objects/icon.twig' with {name: 'x-logo'} %} +
+
From ae0352bf907130965fad9fdd79ea7f6101af2216 Mon Sep 17 00:00:00 2001 From: Jacek Koziol Date: Fri, 27 Sep 2024 16:02:13 +0200 Subject: [PATCH 3/3] chore: renamed name of the function generateIconsHTMLPreviewColor -> generateIconsHTMLPreview --- packages/chisel-scripts/lib/extensions/icons.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/chisel-scripts/lib/extensions/icons.mjs b/packages/chisel-scripts/lib/extensions/icons.mjs index e9bb7171..39015acb 100644 --- a/packages/chisel-scripts/lib/extensions/icons.mjs +++ b/packages/chisel-scripts/lib/extensions/icons.mjs @@ -240,7 +240,7 @@ $o-icon-icons: ( } } - async function generateIconsHTMLPreviewColor(svgIconsDataMono = [], svgIconsDataColor = []) { + async function generateIconsHTMLPreview(svgIconsDataMono = [], svgIconsDataColor = []) { const allIconsData = [...svgIconsDataColor, ...svgIconsDataMono]; const iconsColorHTML = svgIconsDataColor @@ -419,7 +419,7 @@ $o-icon-icons: ( generateIconsFile(svgIconsDataMono, svgIconsDataColor), generateScssSettingsFile(allIconsData), generateIconsJsonFile(allIconsData), - generateIconsHTMLPreviewColor(svgIconsDataMono, svgIconsDataColor), + generateIconsHTMLPreview(svgIconsDataMono, svgIconsDataColor), ]); printLog(chalk.green('Icons files generated successfully'));