fix: has-pseudo-class polyfill

This commit is contained in:
Dominik Pschenitschni 2023-03-29 13:31:20 +02:00
parent fd699ad777
commit 4703f9c4d5
Signed by untrusted user: dpschen
GPG Key ID: B257AC0149F43A77
7 changed files with 50 additions and 64 deletions

10
env.d.ts vendored
View File

@ -3,6 +3,16 @@
/// <reference types="cypress" />
/// <reference types="@histoire/plugin-vue/components" />
declare module 'postcss-focus-within/browser' {
import focusWithinInit from 'postcss-focus-within/browser'
export default focusWithinInit
}
declare module 'css-has-pseudo/browser' {
import cssHasPseudo from 'css-has-pseudo/browser'
export default cssHasPseudo
}
interface ImportMetaEnv {
readonly VITE_IS_ONLINE: boolean
}

View File

@ -72,7 +72,6 @@
"flatpickr": "4.6.13",
"flexsearch": "0.7.31",
"floating-vue": "2.0.0-beta.20",
"focus-within": "3.0.2",
"highlight.js": "11.7.0",
"is-touch-device": "1.0.1",
"klona": "2.0.6",
@ -102,7 +101,6 @@
"@types/codemirror": "5.60.7",
"@types/dompurify": "3.0.0",
"@types/flexsearch": "0.7.3",
"@types/focus-within": "1.0.1",
"@types/lodash.debounce": "4.0.7",
"@types/marked": "4.0.8",
"@types/node": "18.15.11",
@ -117,6 +115,7 @@
"autoprefixer": "10.4.14",
"browserslist": "4.21.5",
"caniuse-lite": "1.0.30001470",
"css-has-pseudo": "5.0.2",
"csstype": "3.1.1",
"cypress": "12.9.0",
"esbuild": "0.17.14",
@ -128,6 +127,7 @@
"postcss": "8.4.21",
"postcss-easing-gradients": "3.0.1",
"postcss-easings": "3.0.1",
"postcss-focus-within": "7.0.2",
"postcss-preset-env": "8.2.0",
"rollup": "3.20.2",
"rollup-plugin-visualizer": "5.9.0",

View File

@ -87,9 +87,6 @@ dependencies:
floating-vue:
specifier: 2.0.0-beta.20
version: 2.0.0-beta.20(vue@3.2.47)
focus-within:
specifier: 3.0.2
version: 3.0.2
highlight.js:
specifier: 11.7.0
version: 11.7.0
@ -173,9 +170,6 @@ devDependencies:
'@types/flexsearch':
specifier: 0.7.3
version: 0.7.3
'@types/focus-within':
specifier: 1.0.1
version: 1.0.1
'@types/lodash.debounce':
specifier: 4.0.7
version: 4.0.7
@ -218,6 +212,9 @@ devDependencies:
caniuse-lite:
specifier: 1.0.30001470
version: 1.0.30001470
css-has-pseudo:
specifier: 5.0.2
version: 5.0.2(postcss@8.4.21)
csstype:
specifier: 3.1.1
version: 3.1.1
@ -251,6 +248,9 @@ devDependencies:
postcss-easings:
specifier: 3.0.1
version: 3.0.1(postcss@8.4.21)
postcss-focus-within:
specifier: 7.0.2
version: 7.0.2(postcss@8.4.21)
postcss-preset-env:
specifier: 8.2.0
version: 8.2.0(postcss@8.4.21)
@ -2245,7 +2245,7 @@ packages:
eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
dependencies:
eslint: 8.37.0
eslint-visitor-keys: 3.3.0
eslint-visitor-keys: 3.4.0
dev: true
/@eslint-community/regexpp@4.4.0:
@ -3900,10 +3900,6 @@ packages:
resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
dev: true
/@types/focus-within@1.0.1:
resolution: {integrity: sha512-ClIiYA9fOJUcZzb8nQXlvwta5obDHd5aQw4I2L/b1lvFSPXXImgiN7ueRVfMlIEkpAvc22hMjbu3g3RiPzZEUQ==}
dev: true
/@types/fs-extra@9.0.13:
resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
dependencies:
@ -4224,7 +4220,7 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
'@typescript-eslint/types': 5.57.0
eslint-visitor-keys: 3.3.0
eslint-visitor-keys: 3.4.0
dev: true
/@vercel/nft@0.22.1(supports-color@9.2.1):
@ -5977,7 +5973,7 @@ packages:
dev: true
/concat-map@0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
dev: true
/concordance@5.0.4:
@ -7255,11 +7251,6 @@ packages:
engines: {node: '>=4'}
dev: false
/eslint-visitor-keys@3.3.0:
resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
/eslint-visitor-keys@3.4.0:
resolution: {integrity: sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -7323,15 +7314,6 @@ packages:
eslint-visitor-keys: 1.3.0
dev: false
/espree@9.4.0:
resolution: {integrity: sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
acorn: 8.8.2
acorn-jsx: 5.3.2(acorn@8.8.2)
eslint-visitor-keys: 3.3.0
dev: true
/espree@9.5.1:
resolution: {integrity: sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -7346,13 +7328,6 @@ packages:
engines: {node: '>=4'}
hasBin: true
/esquery@1.4.0:
resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
engines: {node: '>=0.10'}
dependencies:
estraverse: 5.3.0
dev: true
/esquery@1.4.2:
resolution: {integrity: sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==}
engines: {node: '>=0.10'}
@ -7990,14 +7965,6 @@ packages:
resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
dev: true
/focus-within@3.0.2:
resolution: {integrity: sha512-TMn2sLUwi02dSPElXFPyzBkiQN+Xo1oYta5Jd2zC54MQoBOCMht6xar7gJgw5a9+GtFxkG9c2k4ptI6cU37soA==}
engines: {node: '>=6.0.0'}
hasBin: true
dependencies:
postcss: 7.0.39
dev: false
/folder-walker@3.2.0:
resolution: {integrity: sha512-VjAQdSLsl6AkpZNyrQJfO7BXLo4chnStqb055bumZMbRUPpVuPN3a4ktsnRCmrFZjtMlYLkyXiR5rAs4WOpC4Q==}
dependencies:
@ -11627,6 +11594,7 @@ packages:
/picocolors@0.2.1:
resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
dev: true
/picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@ -12126,6 +12094,7 @@ packages:
dependencies:
picocolors: 0.2.1
source-map: 0.6.1
dev: true
/postcss@8.4.21:
resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
@ -14666,9 +14635,9 @@ packages:
debug: 4.3.4(supports-color@9.2.1)
eslint: 8.37.0
eslint-scope: 7.1.1
eslint-visitor-keys: 3.3.0
espree: 9.4.0
esquery: 1.4.0
eslint-visitor-keys: 3.4.0
espree: 9.5.1
esquery: 1.4.2
lodash: 4.17.21
semver: 7.3.8
transitivePeerDependencies:

View File

@ -10,7 +10,7 @@
@update:model-value="value => emit('update:modelValue', value)"
>
<CheckboxIcon class="fancycheckbox__icon" />
<span class="fancycheckbox__content">
<span v-if="$slots.default" class="fancycheckbox__content">
<slot/>
</span>
</BaseCheckbox>
@ -58,33 +58,36 @@ const emit = defineEmits<{
padding-left: .5rem;
}
.fancycheckbox__icon {
--stroke-color: #c8ccd4;
.fancycheckbox__icon:deep() {
position: relative;
z-index: 1;
stroke: var(--stroke-color);
stroke: var(--stroke-color, #c8ccd4);
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
:deep(path) {
// stroke-dasharray: 60;
transition: all 0.2s linear, color 0.2s ease;
}
:deep(polyline) {
// stroke-dasharray: 22;
// stroke-dashoffset: 66;
path,
polyline {
transition: all 0.2s linear, color 0.2s ease;
}
}
.fancycheckbox:not(:has(input:disabled)):hover .fancycheckbox__icon {
.fancycheckbox:not(:has(input:disabled)):hover .fancycheckbox__icon,
.fancycheckbox:has(input:checked) .fancycheckbox__icon {
--stroke-color: var(--primary);
}
</style>
.fancycheckbox:has(input:checked) .fancycheckbox__icon:deep() {
--stroke-color: var(--primary);
<style lang="scss">
// Since css-has-pseudo doesn't work with deep classes,
// the following rules can't be scoped
.fancycheckbox:has(:not(input:checked)) .fancycheckbox__icon {
path {
transition-delay: 0.05s;
}
}
.fancycheckbox:has(input:checked) .fancycheckbox__icon {
path {
stroke-dashoffset: 60;
}

View File

@ -1,3 +1,4 @@
import './polyfills'
import {defineSetupVue3} from '@histoire/plugin-vue'
import {i18n} from './i18n'

View File

@ -1,4 +1,6 @@
// in order to use postcss-preset-env correctly we need some client side plugins
import focusWithin from 'focus-within'
import focusWithinInit from 'postcss-focus-within/browser'
import cssHasPseudo from 'css-has-pseudo/browser'
focusWithin(document)
focusWithinInit()
cssHasPseudo(document)

View File

@ -81,6 +81,7 @@ export default defineConfig(({mode}) => {
// See also './src/polyfills.ts'
features: {
'focus-within-pseudo-class': true,
'has-pseudo-class': true,
},
}),
],