From cd27311715c7b6b583208b294959a30db2324684 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 11:28:19 +0200 Subject: [PATCH 01/10] Rename main variables --- src/shareon.css | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/shareon.css b/src/shareon.css index bb6a646..f298446 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -1,13 +1,13 @@ :root { - --button-size: 36px; - --icon-size: 20px; + --shareon-size: 36px; + --shareon-icon-size: 20px; - --padding-ver: calc(0.3 * var(--icon-size)); - --padding-hor: calc(var(--icon-size) / 2); - --padding-icon: calc((var(--button-size) - var(--icon-size)) / 2); + --padding-ver: calc(0.3 * var(--shareon-icon-size)); + --padding-hor: calc(var(--shareon-icon-size) / 2); + --padding-icon: calc((var(--shareon-size) - var(--shareon-icon-size)) / 2); - --height: calc(var(--button-size) - 2 * var(--padding-ver)); - --width: calc(var(--button-size) - 2 * var(--padding-hor)); + --height: calc(var(--shareon-size) - 2 * var(--padding-ver)); + --width: calc(var(--shareon-size) - 2 * var(--padding-hor)); } .shareon { @@ -25,7 +25,7 @@ padding: var(--padding-ver) var(--padding-hor); background-color: #333; - border-radius: calc(var(--icon-size) / 6); + border-radius: calc(var(--shareon-icon-size) / 6); border: none; box-sizing: content-box; color: white; @@ -41,7 +41,7 @@ } .shareon > *:not(:empty) { - font-size: calc(0.8 * var(--icon-size)); + font-size: calc(0.8 * var(--shareon-icon-size)); text-decoration: none; } @@ -49,7 +49,7 @@ position: relative; height: 100%; - width: calc(var(--icon-size) + var(--padding-icon)); + width: calc(var(--shareon-icon-size) + var(--padding-icon)); top: 0; left: 0; @@ -61,14 +61,14 @@ display: inline-block; position: absolute; - height: var(--icon-size); - width: var(--icon-size); + height: var(--shareon-icon-size); + width: var(--shareon-icon-size); top: var(--padding-icon); left: var(--padding-icon); background-repeat: no-repeat; - background-size: var(--icon-size) var(--icon-size); + background-size: var(--shareon-icon-size) var(--shareon-icon-size); content: ""; vertical-align: bottom; } From d13b124da9e101bdee27a38454a3ff42fe1b7649 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 11:48:12 +0200 Subject: [PATCH 02/10] Disable compilation of variables and calc --- package.json | 4 ---- pnpm-lock.yaml | 50 -------------------------------------------------- 2 files changed, 54 deletions(-) diff --git a/package.json b/package.json index 7206f96..cc235df 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,6 @@ "eslint-config-prettier": "^8.8.0", "eslint-plugin-unicorn": "^48.0.0", "postcss": "^8.4.26", - "postcss-calc": "^9.0.1", - "postcss-css-variables": "^0.19.0", "postcss-csso": "^6.0.1", "postcss-url": "^10.1.3", "prettier": "^3.0.0", @@ -101,8 +99,6 @@ "url": "inline", "optimizeSvgEncode": true }, - "postcss-css-variables": {}, - "postcss-calc": {}, "autoprefixer": {}, "postcss-csso": {} } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e9a5257..c2a93ff 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,12 +26,6 @@ devDependencies: postcss: specifier: ^8.4.26 version: 8.4.26 - postcss-calc: - specifier: ^9.0.1 - version: 9.0.1(postcss@8.4.26) - postcss-css-variables: - specifier: ^0.19.0 - version: 0.19.0(postcss@8.4.26) postcss-csso: specifier: ^6.0.1 version: 6.0.1(postcss@8.4.26) @@ -611,12 +605,6 @@ packages: source-map-js: 1.0.2 dev: true - /cssesc@3.0.0: - resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} - engines: {node: '>=4'} - hasBin: true - dev: true - /csso@5.0.5: resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} @@ -838,10 +826,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /extend@3.0.2: - resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} - dev: true - /fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} dev: true @@ -1362,28 +1346,6 @@ packages: engines: {node: '>=4'} dev: true - /postcss-calc@9.0.1(postcss@8.4.26): - resolution: {integrity: sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==} - engines: {node: ^14 || ^16 || >=18.0} - peerDependencies: - postcss: ^8.2.2 - dependencies: - postcss: 8.4.26 - postcss-selector-parser: 6.0.13 - postcss-value-parser: 4.2.0 - dev: true - - /postcss-css-variables@0.19.0(postcss@8.4.26): - resolution: {integrity: sha512-Hr0WEYKLK9VCrY15anHXOd4RCvJy/xRvCnWdplGBeLInwEj6Z14hgzTb2W/39dYTCnS8hnHUfU4/F1zxX0IZuQ==} - peerDependencies: - postcss: ^8.2.6 - dependencies: - balanced-match: 1.0.2 - escape-string-regexp: 1.0.5 - extend: 3.0.2 - postcss: 8.4.26 - dev: true - /postcss-csso@6.0.1(postcss@8.4.26): resolution: {integrity: sha512-ZV4yEziMrx6CEiqabGLrDva0pMD7Fbw7yP+LzJvaynM4OJgTssGN6dHiMsJMJdpmNaLJltXVLsrb/5sxbFa8sA==} engines: {node: ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} @@ -1394,14 +1356,6 @@ packages: postcss: 8.4.26 dev: true - /postcss-selector-parser@6.0.13: - resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==} - engines: {node: '>=4'} - dependencies: - cssesc: 3.0.0 - util-deprecate: 1.0.2 - dev: true - /postcss-url@10.1.3(postcss@8.4.26): resolution: {integrity: sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==} engines: {node: '>=10'} @@ -1697,10 +1651,6 @@ packages: punycode: 2.3.0 dev: true - /util-deprecate@1.0.2: - resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} - dev: true - /validate-npm-package-license@3.0.4: resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==} dependencies: From a3d7fcc636123bb10b9668cbaef2718bfd03118c Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 11:49:54 +0200 Subject: [PATCH 03/10] Use flexbox and better box-sizing --- src/shareon.css | 77 +++++++++++++++++-------------------------------- 1 file changed, 27 insertions(+), 50 deletions(-) diff --git a/src/shareon.css b/src/shareon.css index f298446..bb9c58e 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -1,37 +1,37 @@ :root { - --shareon-size: 36px; - --shareon-icon-size: 20px; - - --padding-ver: calc(0.3 * var(--shareon-icon-size)); - --padding-hor: calc(var(--shareon-icon-size) / 2); - --padding-icon: calc((var(--shareon-size) - var(--shareon-icon-size)) / 2); - - --height: calc(var(--shareon-size) - 2 * var(--padding-ver)); - --width: calc(var(--shareon-size) - 2 * var(--padding-hor)); + --shareon-size: 20px; + --shareon-padding: 8px; + --shareon-radius: 4px; } .shareon { - font-size: 0 !important; + display: flex; + flex-flow: row wrap; + gap: 4px; } .shareon > * { - display: inline-block; - position: relative; + --shareon-background: #333; - height: var(--height); - min-width: var(--width); - - margin: calc(var(--padding-ver) / 2); - padding: var(--padding-ver) var(--padding-hor); - - background-color: #333; - border-radius: calc(var(--shareon-icon-size) / 6); - border: none; box-sizing: content-box; + height: var(--shareon-size); + min-width: var(--shareon-size); + padding: var(--shareon-padding); + + display: flex; + align-items: center; + justify-content: center; + gap: var(--shareon-padding); + + border: none; + border-radius: var(--shareon-radius); color: white; - line-height: 1.5; + background-color: var(--shareon-background); + + font-size: calc(var(--shareon-size) * 0.8); + text-decoration: none; + transition: opacity 300ms ease; - vertical-align: middle; } .shareon > *:hover { @@ -40,37 +40,14 @@ opacity: 0.7; } -.shareon > *:not(:empty) { - font-size: calc(0.8 * var(--shareon-icon-size)); - text-decoration: none; -} - -.shareon > *:not(:empty)::before { - position: relative; - - height: 100%; - width: calc(var(--shareon-icon-size) + var(--padding-icon)); - - top: 0; - left: 0; - - background-position: 0 50%; -} - .shareon > *::before { - display: inline-block; - position: absolute; - - height: var(--shareon-icon-size); - width: var(--shareon-icon-size); - - top: var(--padding-icon); - left: var(--padding-icon); + height: var(--shareon-size); + width: var(--shareon-size); background-repeat: no-repeat; - background-size: var(--shareon-icon-size) var(--shareon-icon-size); + background-size: var(--shareon-size) var(--shareon-size); content: ""; - vertical-align: bottom; + vertical-align: middle; } .shareon > .copy-url:before { From d552332757f7e2b33c40ecf62fb5d42aefe51ff7 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 12:05:10 +0200 Subject: [PATCH 04/10] Use more CSS variables --- src/shareon.css | 105 ++++++++++++++++++------------------------------ 1 file changed, 39 insertions(+), 66 deletions(-) diff --git a/src/shareon.css b/src/shareon.css index bb9c58e..8cb113e 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -2,6 +2,8 @@ --shareon-size: 20px; --shareon-padding: 8px; --shareon-radius: 4px; + --shareon-svg: none; + --shareon-background: #333; } .shareon { @@ -11,8 +13,6 @@ } .shareon > * { - --shareon-background: #333; - box-sizing: content-box; height: var(--shareon-size); min-width: var(--shareon-size); @@ -44,121 +44,94 @@ height: var(--shareon-size); width: var(--shareon-size); + background-image: var(--shareon-svg); background-repeat: no-repeat; background-size: var(--shareon-size) var(--shareon-size); content: ""; vertical-align: middle; } -.shareon > .copy-url:before { - background-image: url("icons/copy-url.svg"); +.shareon > .copy-url { + --shareon-svg: url("icons/copy-url.svg"); } -.shareon > .copy-url.done:before { - background-image: url("icons/copy-url-done.svg"); +.shareon > .copy-url.done { + --shareon-svg: url("icons/copy-url-done.svg"); } .shareon > .facebook { - background-color: #1877f2; -} -.shareon > .facebook:before { - background-image: url("icons/facebook.svg"); + --shareon-svg: url("icons/facebook.svg"); + --shareon-background: #1877f2; } .shareon > .linkedin { - background-color: #0a66c2; + --shareon-svg: url("icons/linkedin-in.svg"); + --shareon-background: #0a66c2; } -.shareon > .linkedin:before { - background-image: url("icons/linkedin-in.svg"); -} -.shareon > .linkedin:not(:empty):before { - background-image: url("icons/linkedin.svg"); +.shareon > .linkedin:not(:empty) { + --shareon-svg: url("icons/linkedin.svg"); } .shareon > .mastodon { - background-color: #6364ff; -} -.shareon > .mastodon:before { - background-image: url("icons/mastodon.svg"); + --shareon-svg: url("icons/mastodon.svg"); + --shareon-background: #6364ff; } .shareon > .messenger { - background-color: #00b2ff; -} -.shareon > .messenger:before { - background-image: url("icons/messenger.svg"); + --shareon-svg: url("icons/messenger.svg"); + --shareon-background: #00b2ff; } .shareon > .odnoklassniki { - background-color: #ee8208; -} -.shareon > .odnoklassniki:before { - background-image: url("icons/odnoklassniki.svg"); + --shareon-svg: url("icons/odnoklassniki.svg"); + --shareon-background: #ee8208; } .shareon > .pinterest { - background-color: #bd081c; -} -.shareon > .pinterest:before { - background-image: url("icons/pinterest.svg"); + --shareon-svg: url("icons/pinterest.svg"); + --shareon-background: #bd081c; } .shareon > .pocket { - background-color: #ef3f56; -} -.shareon > .pocket:before { - background-image: url("icons/pocket.svg"); + --shareon-svg: url("icons/pocket.svg"); + --shareon-background: #ef3f56; } .shareon > .reddit { - background-color: #ff4500; -} -.shareon > .reddit:before { - background-image: url("icons/reddit.svg"); + --shareon-svg: url("icons/reddit.svg"); + --shareon-background: #ff4500; } .shareon > .telegram { - background-color: #26a5e4; -} -.shareon > .telegram:before { - background-image: url("icons/telegram.svg"); + --shareon-svg: url("icons/telegram.svg"); + --shareon-background: #26a5e4; } .shareon > .teams { - background-color: #6264a7; -} -.shareon > .teams:before { - background-image: url("icons/teams.svg"); + --shareon-svg: url("icons/teams.svg"); + --shareon-background: #6264a7; } .shareon > .twitter { - background-color: #1d9bf0; -} -.shareon > .twitter:before { - background-image: url("icons/twitter.svg"); + --shareon-svg: url("icons/twitter.svg"); + --shareon-background: #1d9bf0; } .shareon > .viber { - background-color: #7360f2; -} -.shareon > .viber:before { - background-image: url("icons/viber.svg"); + --shareon-svg: url("icons/viber.svg"); + --shareon-background: #7360f2; } .shareon > .vkontakte { - background-color: #0077ff; -} -.shareon > .vkontakte:before { - background-image: url("icons/vkontakte.svg"); + --shareon-svg: url("icons/vkontakte.svg"); + --shareon-background: #0077ff; } -.shareon > .web-share:before { - background-image: url("icons/web-share.svg"); +.shareon > .web-share { + --shareon-svg: url("icons/web-share.svg"); } .shareon > .whatsapp { - background-color: #25d366; -} -.shareon > .whatsapp:before { - background-image: url("icons/whatsapp.svg"); + --shareon-svg: url("icons/whatsapp.svg"); + --shareon-background: #25d366; } From ec7053f0a16cee1c92e7108f069e5f54917ee9ed Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 12:14:17 +0200 Subject: [PATCH 05/10] Replace most PostCSS plugins with Lightning CSS --- package.json | 8 +-- pnpm-lock.yaml | 160 +++++++++++++++++++++++++++++++------------------ 2 files changed, 106 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index cc235df..c56ca75 100644 --- a/package.json +++ b/package.json @@ -53,13 +53,12 @@ }, "devDependencies": { "@size-limit/preset-small-lib": "^8.2.6", - "autoprefixer": "^10.4.14", "clean-publish": "^4.2.0", "eslint": "^8.45.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-unicorn": "^48.0.0", "postcss": "^8.4.26", - "postcss-csso": "^6.0.1", + "postcss-lightningcss": "^0.9.0", "postcss-url": "^10.1.3", "prettier": "^3.0.0", "size-limit": "^8.2.6", @@ -99,8 +98,9 @@ "url": "inline", "optimizeSvgEncode": true }, - "autoprefixer": {}, - "postcss-csso": {} + "postcss-lightningcss": { + "browsers": "cover 95%, last 3 versions, Firefox ESR, not dead" + } } }, "size-limit": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2a93ff..0838126 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,6 @@ devDependencies: '@size-limit/preset-small-lib': specifier: ^8.2.6 version: 8.2.6(size-limit@8.2.6) - autoprefixer: - specifier: ^10.4.14 - version: 10.4.14(postcss@8.4.26) clean-publish: specifier: ^4.2.0 version: 4.2.0 @@ -26,9 +23,9 @@ devDependencies: postcss: specifier: ^8.4.26 version: 8.4.26 - postcss-csso: - specifier: ^6.0.1 - version: 6.0.1(postcss@8.4.26) + postcss-lightningcss: + specifier: ^0.9.0 + version: 0.9.0(postcss@8.4.26) postcss-url: specifier: ^10.1.3 version: 10.1.3(postcss@8.4.26) @@ -440,22 +437,6 @@ packages: engines: {node: '>=8'} dev: true - /autoprefixer@10.4.14(postcss@8.4.26): - resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==} - engines: {node: ^10 || ^12 || >=14} - hasBin: true - peerDependencies: - postcss: ^8.1.0 - dependencies: - browserslist: 4.21.5 - caniuse-lite: 1.0.30001516 - fraction.js: 4.2.0 - normalize-range: 0.1.2 - picocolors: 1.0.0 - postcss: 8.4.26 - postcss-value-parser: 4.2.0 - dev: true - /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} dev: true @@ -597,21 +578,6 @@ packages: which: 2.0.2 dev: true - /css-tree@2.2.1: - resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} - engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} - dependencies: - mdn-data: 2.0.28 - source-map-js: 1.0.2 - dev: true - - /csso@5.0.5: - resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} - engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} - dependencies: - css-tree: 2.2.1 - dev: true - /cuint@0.2.2: resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==} dev: true @@ -632,6 +598,12 @@ packages: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} dev: true + /detect-libc@1.0.3: + resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==} + engines: {node: '>=0.10'} + hasBin: true + dev: true + /dir-glob@3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} @@ -897,10 +869,6 @@ packages: resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==} dev: true - /fraction.js@4.2.0: - resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} - dev: true - /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} dev: true @@ -1112,6 +1080,94 @@ packages: type-check: 0.4.0 dev: true + /lightningcss-darwin-arm64@1.21.5: + resolution: {integrity: sha512-z05hyLX85WY0UfhkFUOrWEFqD69lpVAmgl3aDzMKlIZJGygbhbegqb4PV8qfUrKKNBauut/qVNPKZglhTaDDxA==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /lightningcss-darwin-x64@1.21.5: + resolution: {integrity: sha512-MSJhmej/U9MrdPxDk7+FWhO8+UqVoZUHG4VvKT5RQ4RJtqtANTiWiI97LvoVNMtdMnHaKs1Pkji6wHUFxjJsHQ==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-arm-gnueabihf@1.21.5: + resolution: {integrity: sha512-xN6+5/JsMrbZHL1lPl+MiNJ3Xza12ueBKPepiyDCFQzlhFRTj7D0LG+cfNTzPBTO8KcYQynLpl1iBB8LGp3Xtw==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-arm64-gnu@1.21.5: + resolution: {integrity: sha512-KfzFNhC4XTbmG3ma/xcTs/IhCwieW89XALIusKmnV0N618ZDXEB0XjWOYQRCXeK9mfqPdbTBpurEHV/XZtkniQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-arm64-musl@1.21.5: + resolution: {integrity: sha512-bc0GytQO5Mn9QM6szaZ+31fQHNdidgpM1sSCwzPItz8hg3wOvKl8039rU0veMJV3ZgC9z0ypNRceLrSHeRHmXw==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-x64-gnu@1.21.5: + resolution: {integrity: sha512-JwMbgypPQgc2kW2av3OwzZ8cbrEuIiDiXPJdXRE6aVxu67yHauJawQLqJKTGUhiAhy6iLDG8Wg0a3/ziL+m+Kw==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-linux-x64-musl@1.21.5: + resolution: {integrity: sha512-Ib8b6IQ/OR/VrPU6YBgy4T3QnuHY7DUa95O+nz+cwrTkMSN6fuHcTcIaz4t8TJ6HI5pl3uxUOZjmtls2pyQWow==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /lightningcss-win32-x64-msvc@1.21.5: + resolution: {integrity: sha512-A8cSi8lUpBeVmoF+DqqW7cd0FemDbCuKr490IXdjyeI+KL8adpSKUs8tcqO0OXPh1EoDqK7JNkD/dELmd4Iz5g==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /lightningcss@1.21.5: + resolution: {integrity: sha512-/pEUPeih2EwIx9n4T82aOG6CInN83tl/mWlw6B5gWLf36UplQi1L+5p3FUHsdt4fXVfOkkh9KIaM3owoq7ss8A==} + engines: {node: '>= 12.0.0'} + dependencies: + detect-libc: 1.0.3 + optionalDependencies: + lightningcss-darwin-arm64: 1.21.5 + lightningcss-darwin-x64: 1.21.5 + lightningcss-linux-arm-gnueabihf: 1.21.5 + lightningcss-linux-arm64-gnu: 1.21.5 + lightningcss-linux-arm64-musl: 1.21.5 + lightningcss-linux-x64-gnu: 1.21.5 + lightningcss-linux-x64-musl: 1.21.5 + lightningcss-win32-x64-msvc: 1.21.5 + dev: true + /lilconfig@2.1.0: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} engines: {node: '>=10'} @@ -1157,10 +1213,6 @@ packages: semver: 6.3.1 dev: true - /mdn-data@2.0.28: - resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} - dev: true - /merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} @@ -1235,11 +1287,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /normalize-range@0.1.2: - resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} - engines: {node: '>=0.10.0'} - dev: true - /once@1.4.0: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} dependencies: @@ -1346,13 +1393,14 @@ packages: engines: {node: '>=4'} dev: true - /postcss-csso@6.0.1(postcss@8.4.26): - resolution: {integrity: sha512-ZV4yEziMrx6CEiqabGLrDva0pMD7Fbw7yP+LzJvaynM4OJgTssGN6dHiMsJMJdpmNaLJltXVLsrb/5sxbFa8sA==} - engines: {node: ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + /postcss-lightningcss@0.9.0(postcss@8.4.26): + resolution: {integrity: sha512-Qfmei+Pq31AJUkqcF53s08VWhMIbCYvgsuFyEk0urnm6O5kA4C1/utnSNEKPTAzXx4Fm/IwK/1zFDRUjDGn+KQ==} + engines: {node: ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} peerDependencies: postcss: ^8.0.0 dependencies: - csso: 5.0.5 + browserslist: 4.21.5 + lightningcss: 1.21.5 postcss: 8.4.26 dev: true @@ -1369,10 +1417,6 @@ packages: xxhashjs: 0.2.2 dev: true - /postcss-value-parser@4.2.0: - resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - dev: true - /postcss@8.4.26: resolution: {integrity: sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==} engines: {node: ^10 || ^12 || >=14} From 9e77d444404ac018088e24ba412100acf7c40a4f Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 12:46:43 +0200 Subject: [PATCH 06/10] Use masks to be able to change colour --- src/shareon.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/shareon.css b/src/shareon.css index 8cb113e..ac644ad 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -44,11 +44,10 @@ height: var(--shareon-size); width: var(--shareon-size); - background-image: var(--shareon-svg); - background-repeat: no-repeat; - background-size: var(--shareon-size) var(--shareon-size); + background-color: currentColor; + mask: no-repeat center / 100%; + mask-image: var(--shareon-svg); content: ""; - vertical-align: middle; } .shareon > .copy-url { From 35fb9a211f8e26e91e10798383b13aba15ed0cff Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 12:46:50 +0200 Subject: [PATCH 07/10] Update browserslist --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index c56ca75..6ad08ab 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "size-limit": "^8.2.6", "vite": "^4.4.4" }, + "browserslist": "> 0.3%, last 2 versions, Firefox ESR, not dead, not op_mini all", "prettier": { "embeddedLanguageFormatting": "off" }, @@ -99,7 +100,7 @@ "optimizeSvgEncode": true }, "postcss-lightningcss": { - "browsers": "cover 95%, last 3 versions, Firefox ESR, not dead" + "browsers": "> 0.3%, last 2 versions, Firefox ESR, not dead, not op_mini all" } } }, From 9792194ac6e2e9e79caec44654a3e2cb44f425a0 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 13:13:44 +0200 Subject: [PATCH 08/10] Remove fill from icons --- src/icons/copy-url-done.svg | 2 +- src/icons/copy-url.svg | 2 +- src/icons/facebook.svg | 2 +- src/icons/linkedin-in.svg | 2 +- src/icons/linkedin.svg | 2 +- src/icons/mastodon.svg | 2 +- src/icons/messenger.svg | 2 +- src/icons/odnoklassniki.svg | 2 +- src/icons/pinterest.svg | 2 +- src/icons/pocket.svg | 2 +- src/icons/reddit.svg | 2 +- src/icons/teams.svg | 2 +- src/icons/telegram.svg | 2 +- src/icons/twitter.svg | 2 +- src/icons/viber.svg | 2 +- src/icons/vkontakte.svg | 2 +- src/icons/web-share.svg | 2 +- src/icons/whatsapp.svg | 2 +- svgo.config.js | 2 +- 19 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/icons/copy-url-done.svg b/src/icons/copy-url-done.svg index 1e80207..f3f2b10 100644 --- a/src/icons/copy-url-done.svg +++ b/src/icons/copy-url-done.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/copy-url.svg b/src/icons/copy-url.svg index fd53f99..7e358c1 100644 --- a/src/icons/copy-url.svg +++ b/src/icons/copy-url.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/facebook.svg b/src/icons/facebook.svg index 69502dc..025f8c7 100644 --- a/src/icons/facebook.svg +++ b/src/icons/facebook.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/linkedin-in.svg b/src/icons/linkedin-in.svg index 1cc6003..86737ac 100644 --- a/src/icons/linkedin-in.svg +++ b/src/icons/linkedin-in.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/linkedin.svg b/src/icons/linkedin.svg index ba6c36e..7e5a87e 100644 --- a/src/icons/linkedin.svg +++ b/src/icons/linkedin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/mastodon.svg b/src/icons/mastodon.svg index cbd34f8..7936bed 100644 --- a/src/icons/mastodon.svg +++ b/src/icons/mastodon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/messenger.svg b/src/icons/messenger.svg index 98e9e45..6ff9acf 100644 --- a/src/icons/messenger.svg +++ b/src/icons/messenger.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/odnoklassniki.svg b/src/icons/odnoklassniki.svg index be75989..c514aad 100644 --- a/src/icons/odnoklassniki.svg +++ b/src/icons/odnoklassniki.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/pinterest.svg b/src/icons/pinterest.svg index cf6aeca..1e8c6be 100644 --- a/src/icons/pinterest.svg +++ b/src/icons/pinterest.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/pocket.svg b/src/icons/pocket.svg index e653b34..e03ea50 100644 --- a/src/icons/pocket.svg +++ b/src/icons/pocket.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/reddit.svg b/src/icons/reddit.svg index 4af9483..65c5b6a 100644 --- a/src/icons/reddit.svg +++ b/src/icons/reddit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/teams.svg b/src/icons/teams.svg index 91aea5a..fe4339a 100644 --- a/src/icons/teams.svg +++ b/src/icons/teams.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/telegram.svg b/src/icons/telegram.svg index c814858..567dbb8 100644 --- a/src/icons/telegram.svg +++ b/src/icons/telegram.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/twitter.svg b/src/icons/twitter.svg index 5006ce7..59ebbea 100644 --- a/src/icons/twitter.svg +++ b/src/icons/twitter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/viber.svg b/src/icons/viber.svg index e9ee52e..06913c4 100644 --- a/src/icons/viber.svg +++ b/src/icons/viber.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/vkontakte.svg b/src/icons/vkontakte.svg index 87452a8..ef4466f 100644 --- a/src/icons/vkontakte.svg +++ b/src/icons/vkontakte.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/web-share.svg b/src/icons/web-share.svg index 081fdb7..df68f1f 100644 --- a/src/icons/web-share.svg +++ b/src/icons/web-share.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/whatsapp.svg b/src/icons/whatsapp.svg index 9c3917d..3643e4d 100644 --- a/src/icons/whatsapp.svg +++ b/src/icons/whatsapp.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/svgo.config.js b/svgo.config.js index 1dcd46a..1d7fb61 100644 --- a/svgo.config.js +++ b/svgo.config.js @@ -65,7 +65,7 @@ export default { // Sort the attributes on the tag name: "sortAttrs", params: { - order: ["fill", "stroke", "viewBox"], + order: ["viewBox"], xmlnsOrder: "end", }, }, From fb9359820f336c609a4edfb18e915a433bc34ce2 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 13:15:39 +0200 Subject: [PATCH 09/10] Rename an scope variables for SVG and color --- src/shareon.css | 74 ++++++++++++++++++++++++------------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/shareon.css b/src/shareon.css index ac644ad..dc50158 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -2,8 +2,6 @@ --shareon-size: 20px; --shareon-padding: 8px; --shareon-radius: 4px; - --shareon-svg: none; - --shareon-background: #333; } .shareon { @@ -13,6 +11,9 @@ } .shareon > * { + --svg: unset; + --color: #333; + box-sizing: content-box; height: var(--shareon-size); min-width: var(--shareon-size); @@ -26,7 +27,7 @@ border: none; border-radius: var(--shareon-radius); color: white; - background-color: var(--shareon-background); + background-color: var(--color); font-size: calc(var(--shareon-size) * 0.8); text-decoration: none; @@ -45,92 +46,91 @@ width: var(--shareon-size); background-color: currentColor; - mask: no-repeat center / 100%; - mask-image: var(--shareon-svg); + mask: var(--svg) no-repeat center / 100%; content: ""; } .shareon > .copy-url { - --shareon-svg: url("icons/copy-url.svg"); + --svg: url("icons/copy-url.svg"); } .shareon > .copy-url.done { - --shareon-svg: url("icons/copy-url-done.svg"); + --svg: url("icons/copy-url-done.svg"); } .shareon > .facebook { - --shareon-svg: url("icons/facebook.svg"); - --shareon-background: #1877f2; + --svg: url("icons/facebook.svg"); + --color: #1877f2; } .shareon > .linkedin { - --shareon-svg: url("icons/linkedin-in.svg"); - --shareon-background: #0a66c2; + --svg: url("icons/linkedin-in.svg"); + --color: #0a66c2; } .shareon > .linkedin:not(:empty) { - --shareon-svg: url("icons/linkedin.svg"); + --svg: url("icons/linkedin.svg"); } .shareon > .mastodon { - --shareon-svg: url("icons/mastodon.svg"); - --shareon-background: #6364ff; + --svg: url("icons/mastodon.svg"); + --color: #6364ff; } .shareon > .messenger { - --shareon-svg: url("icons/messenger.svg"); - --shareon-background: #00b2ff; + --svg: url("icons/messenger.svg"); + --color: #00b2ff; } .shareon > .odnoklassniki { - --shareon-svg: url("icons/odnoklassniki.svg"); - --shareon-background: #ee8208; + --svg: url("icons/odnoklassniki.svg"); + --color: #ee8208; } .shareon > .pinterest { - --shareon-svg: url("icons/pinterest.svg"); - --shareon-background: #bd081c; + --svg: url("icons/pinterest.svg"); + --color: #bd081c; } .shareon > .pocket { - --shareon-svg: url("icons/pocket.svg"); - --shareon-background: #ef3f56; + --svg: url("icons/pocket.svg"); + --color: #ef3f56; } .shareon > .reddit { - --shareon-svg: url("icons/reddit.svg"); - --shareon-background: #ff4500; + --svg: url("icons/reddit.svg"); + --color: #ff4500; } .shareon > .telegram { - --shareon-svg: url("icons/telegram.svg"); - --shareon-background: #26a5e4; + --svg: url("icons/telegram.svg"); + --color: #26a5e4; } .shareon > .teams { - --shareon-svg: url("icons/teams.svg"); - --shareon-background: #6264a7; + --svg: url("icons/teams.svg"); + --color: #6264a7; } .shareon > .twitter { - --shareon-svg: url("icons/twitter.svg"); - --shareon-background: #1d9bf0; + --svg: url("icons/twitter.svg"); + --color: #1d9bf0; } .shareon > .viber { - --shareon-svg: url("icons/viber.svg"); - --shareon-background: #7360f2; + --svg: url("icons/viber.svg"); + --color: #7360f2; } .shareon > .vkontakte { - --shareon-svg: url("icons/vkontakte.svg"); - --shareon-background: #0077ff; + --svg: url("icons/vkontakte.svg"); + --color: #0077ff; } .shareon > .web-share { - --shareon-svg: url("icons/web-share.svg"); + --svg: url("icons/web-share.svg"); } .shareon > .whatsapp { - --shareon-svg: url("icons/whatsapp.svg"); - --shareon-background: #25d366; + --svg: url("icons/whatsapp.svg"); + --color: #25d366; } From 83433f0faf79df6a97159d3eef69f3cee574ef6a Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Tue, 18 Jul 2023 13:16:04 +0200 Subject: [PATCH 10/10] Allow customizing foreground and background colour --- src/shareon.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/shareon.css b/src/shareon.css index dc50158..3265830 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -2,6 +2,8 @@ --shareon-size: 20px; --shareon-padding: 8px; --shareon-radius: 4px; + --shareon-fg: #fff; + --shareon-bg: unset; } .shareon { @@ -26,8 +28,8 @@ border: none; border-radius: var(--shareon-radius); - color: white; - background-color: var(--color); + color: var(--shareon-fg, var(--color)); + background-color: var(--shareon-bg, var(--color)); font-size: calc(var(--shareon-size) * 0.8); text-decoration: none;