fix(v-bind): rendering of custom properties using v-bind (fix #5443) #5444
Conversation
|
✔️ Deploy Preview for vue-sfc-playground ready! 🔨 Explore the source changes: 9a03a17 🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-sfc-playground/deploys/621360b8ad41590008db0316 😎 Browse the preview: https://deploy-preview-5444--vue-sfc-playground.netlify.app/ |
|
✔️ Deploy Preview for vuejs-coverage ready! 🔨 Explore the source changes: 9a03a17 🔍 Inspect the deploy log: https://app.netlify.com/sites/vuejs-coverage/deploys/621360b8907c310008c89090 😎 Browse the preview: https://deploy-preview-5444--vuejs-coverage.netlify.app |
|
✔️ Deploy Preview for vue-next-template-explorer ready! 🔨 Explore the source changes: 9a03a17 🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-next-template-explorer/deploys/621360b8a7e0730007a5e2d8 😎 Browse the preview: https://deploy-preview-5444--vue-next-template-explorer.netlify.app |
packages/shared/src/normalizeProp.ts
Outdated
| @@ -1,6 +1,35 @@ | |||
| import { isArray, isString, isObject, hyphenate } from './' | |||
| import { isNoUnitNumericStyleProp } from './domAttrConfig' | |||
|
|
|||
| const hashedCustomProperty = /^[0-9a-f]{8}-/i; | |||
There was a problem hiding this comment.
The generated hashes does not contain a "-" character at the end. So, the regex is not matching. A working regex:
const hashedCustomProperty = /^[0-9a-f]{8}$/i;
There was a problem hiding this comment.
Hi @jahermosilla ,
Good catch! 🐛
fix #5443
v-bind ssr fix
The problem
The first paint will not contain styles that have used v-bind. Due to
@vue/sharedoutputting non-valid CSS custom propertiesThe proposed solution
I was in doubt whether or not to place the fix in
normalizeProp.ts. I tried to do some research in the generation of the id. But when doing a similar fix in @vue/sfc-compiler it broke client side hydration.