Skip to content

Function call in class: and style: directives are inconsistent with standard attributes #18465

Description

@adiguba

Describe the bug

Function call in class: and style: directives are inconsistent with standard attributes.

color={func()} will be re-trigerred only if a reactive state is updated.
style:color={func()} will also be re-trigerred when any of the other style: directive is updated

Reproduction

In this example we use an function to generate a random color, ans a state to change the size of the text (using the obsolete<font> only in order to have a visual result).
Updating the size of the text do no re-trigger the function :
https://svelte.dev/playground/hello-world?version=5.56.4#H4sIAAAAAAAACm2QQW_bMAyF_wrHDbC82U67dRngOQGGAcMuPfU476DYjCNApQyJTrsZ_u-D7BQLCuskfHwkH9-IrB8JS_xJ1jp4ct62oKg1Qm2KGR6NpYDlrxHlTx91EWD20vWt74twJiuRHXSgNd44FmIJWGIVGm962ddccy3HgRsxjqEjJq-FvjvrvEphjNVaGsdBoIkQdpC8TeADqHstp8Jrbt2jSuE93Dz_mF9aiHsQb7hTt9u06HX7INqLSm6SDLZpEaxpSOXb9Ov_4c5SYV2nanzloMZs2fui9iSD54XNaFpOsCQQzF-CHbwLooVUcpdcmrjaXJ0bVSVUgSw1AgfDbXnWdqDdGCtT1Ejl-pjH_rbaXH7X9OMq_bRK71bp51W6XaVfrmi1WWzPh1StOS_KN3kOQzDcgYbq6Fj2IA4CEciJoDlp7gjyfBHH-pLfbnyV9jRHeB1ELYFE4uTLfBFvDoNQmGdt5mXR1-IFMxR6FizFDzT9zlC0sU-GWyyP2gaa_gGZOj6-5wIAAA

In this exemple, we do the same thing using style: directive, and updating and changing the size restarts the generateColor() function :
https://svelte.dev/playground/hello-world?version=5.56.4#H4sIAAAAAAAACnWQQY_TMBCF_8poQIqzZNMWlh5CWgkhIS6c9kg4eONpseSOI3uS3SXKf0dOu6KsiA-W_L33bL8ZkfWJsMJv5JyHRx-cAUXGCpkcCzxYRxGrHyPKc5d8CWDxkvrcdWUcyEliDzrS_3jrWYglYoV1bIPtZN9ww40cem7FeoYjMQUt9MU7H1QOY1IbaT1HgTZB2EH2JoN3oL5r-VUGzcafVA43sH76Oq-8FH8vwfJRbbZ52WlzLzqIytZZAdu8jM62pG63-ae_l3tHpfNH1eCrHzRYnN99cQeSPvCZzWg6V3AkEO1vgh28jaKFVLahU3aJcb26Kpx8FdSRHLUCD5ZNNWjX025MypQ8UvsuTWS_Lj_SqV5dTtfKZokvJt4v8cXEhwV-9w-vV-cqc7na2AGiPDuq5iHtxlcjnS7qwbPcpsLXtRuJJGL5CH1M-2wFYwO1YgdKbxk77BvGAoWeBCsJPU0_CxRt3aNlg9VBu0jTH1Mj-xDRAgAA

It's event worse with async function, since this can lead to an await_reactivity_loss :

https://svelte.dev/playground/hello-world?version=5.56.4#H4sIAAAAAAAACnWRQW_bMAyF_wqhDbDcuU7SdTl4ToBhQLHLTj3OPagSkwlQKEOinaaG__sgJ8WyYtZBgD6-J-pRgyB1QFGJH-ich6MPzoBEYxlNLgqxsw6jqH4Ngk9t0iUgijfXt7YtY4-OE3tWEf_HtSdG4igqUUcdbMvbhhpqWMUTadh1pNl6gj0SBsX43TsfZA5D0jSsPUUGnSBsIPuQwSeQPxX_LoMi4w8yhxtYvjxMKy_ZP3KwtJerdV62yjyyCiyzZVbAOi-jsxrl7Tr_-vdy77B0fi8b8e4FjSjOfd_UAbkLdGYTGs9BHDJE-4qwgY-RFaPMVnjILjaqF1exk66COqJDzfBsyVS9ch1uhlQZk4Zr36aJbJflFzzUi8vpurKa47OOuzk-6_g8w-__4fXiHGUKVxvbQ-STw2oa0mZQR2X5_deOF83OE9-m2NfhG47IbGkPXUz7JAVjA2q2PaaOxvbbhkQhGF9YVBw6HJ8Kwcq6oyUjqp1yEcc_DOdqbd0CAAA

We can see that the same problem can occurs on the class: directives :

https://svelte.dev/playground/hello-world?version=5.56.4#H4sIAAAAAAAACm1QQY7bMAz8CkH04ACpswXai-oE2FsvfUFdFJLFaIlVKEOis7sN_PdCttPuoRcBGs4Mh3NDsRdCg98oxgQvKUcPDXlW8jvc45kjFTQ_bqhvY-VVAPd31eM4tuVKUSvmbKH_4UMSJdGCBrsyZB711EsvvZ4nGZSTAJdfmXyzg1uFex2SlBSpjSk0Pd6nPe6-rvNMOmWB71af2mzFp0uzgxM8tF8WwrzaR1JwHOAIH4papeZsY6HNQ7rDuyxdtI7iqWMZJ4V66rHH4YmGZ5deewTH4s3yJ3-8OQ7zSVMIkeqC7rCqFyPPVxiiLcXkSr1nnzfQcdj06yWFVFkCTKW-VjWzm5RKzef5unoWfYu0CKr71tHF5sBi4BNd4GHrZbTes4QF_NuEtpn8XeXs8BxymsQbyOTfkWpTG-mcRD8W_k0GPv8z6g5rDtyj0qui0TzR_HOPajm-sHg0S8HzH9vPU1xUAgAA

Logs

Note : I'm working on a fix for that

System Info

REPL

Severity

annoyance

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Fields

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions