Build error encountered when setting multi-word kebab-case attribute on icon

Question

Build error encountered when setting multi-word kebab-case attribute on icon

radusuciu opened this issue a year ago · comments

Describe the bug

Hi, thanks for the awesome project! I recently attempted an upgrade to Vue 3.3 and encountered an error when trying to build the project. Build worked fine before the upgrade.

I did some testing in the linked repro and discovered that the error occurs even with Vue 3.2.47 when upgrading vue-tsc from 1.4.3 to 1.4.4, and it persists to the latest version of vue-tsc. See this fork of the repro. Perhaps this issue is relevant: vuejs/language-tools#2676.

<!-- App.vue -->
<script setup lang="ts">
import IconAdd from '~icons/mdi/plus-box';
</script>

<template>
  <IconAdd font-size="5rem" />
</template>

I get this error when attempting to build (everything displays fine otherwise):

❯ npm run build
$ vue-tsc && vite build
src/App.vue:7:12 - error TS2345: Argument of type '{ fontSize: string; "font-size": string; }' is not assignable to parameter of type 'SVGAttributes'.
  Object literal may only specify known properties, but 'fontSize' does not exist in type 'SVGAttributes'. Did you mean to write 'font-size'?

7   <IconAdd font-size="5rem" />
             ~~~~~~~~~~~~~~~~


Found 1 error in src/App.vue:7

Am I doing something wrong that just happened to work previously? The error is a bit confusing since it seems to suggest that I need to use font-size... but I am using font-size lol.

Reproduction

https://stackblitz.com/edit/vitejs-vite-pg2ydf?file=package.json

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (20) x64 Intel(R) Xeon(R) Silver 4210 CPU @ 2.20GHz
    Memory: 19.32 GB / 31.16 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm

Used Package Manager

npm

Validations

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Vjacheslav Trushkin · Answer 1 · Fri May 26 2023 03:30:24 GMT+0800 (China Standard Time)

I'm not sure what you are trying to do there, but you are most likely doing it wrong.

That icon has no text nodes, so setting font-size doesn't make any sense. It affects only text elements such as <text>, <tspan> and so on, not <svg> element. If you are trying to resize icon, use style, not attribute.

Radu Suciu · Answer 2 · Fri May 26 2023 04:00:31 GMT+0800 (China Standard Time)

I'm not sure what you are trying to do there, but you are most likely doing it wrong.

That icon has no text nodes, so setting font-size doesn't make any sense. It affects only text elements such as <text>, <tspan> and so on, not <svg> element. If you are trying to resize icon, use style, not attribute.

Thank you for the reply. I am trying to make the icon larger and it does in fact achieve this -- see the Stackblitz repro link. Your suggestion makes sense, thank you! I probably should have used style in the first place anyway.

However, font-size is still a valid attribute that can be set on the root svg element according to the spec, where font-size is listed as a presentation attribute, all of which are valid on svg as well as g. So I still think that this may be a bug (though potentially with vue-tsc > 1.4.3), so while you may expect that it has no effect on the rendering of the icon, the build should still succeed, no?

Edit: I've been able to reproduce this with other multi-word presentation attributes like clip-rule and fill-opacity, but not with single-word presentational attributes like cursor.

Vjacheslav Trushkin · Answer 3 · Fri May 26 2023 04:27:24 GMT+0800 (China Standard Time)

Actually, you are correct. While older docs refer to it as applicable only to text elements, newer spec allows it on any element, so it should be usable on <svg> element and if height is in em, which it is in this package, it should affect icon size.

Very weird use case, I've never seen it used like that, but it is a valid use case.

So it is a bug.

Radu Suciu · Answer 4 · Fri May 26 2023 04:50:09 GMT+0800 (China Standard Time)

After a bit more digging, it does seem to likely be a vue-tsc bug.. Now that I've realized it's not limited to font-size, I've come across these related issues:

It seems that when the attribute is defined as kebab-case it is translated to camelCase which does not match the SVGAttributes type definition. Switching to camelCase (eg. fontSize or clipRule) does not work either.

Please feel free to close if this is out of scope for this project.