solid-styled-components: Build error on attributes with '-'

[kavsingh]

Overview:

Build errors out when using a styled wrapper with props that contain dashes, and i'm guessing other invalid object key chars. Dashed attributes work fine with standard div, button etc.

---

Codesandbox: https://codesandbox.io/s/solid-styled-components-fkrtm?file=/index.js:498-880
Example repro repo: https://github.com/kavsingh/tsblank/tree/solid-js-styled

example error when building repo:

ERROR in ./src/components/count.tsx 54:12
Module parse failed: Unexpected token (54:12)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       return [_$createComponent(Stepper, {
|         onClick: decrement,
>         data-testid: "button-decrement",
|         children: "-"
|       }), _$createComponent(Count, {
 @ ./src/app.tsx 27:9-37
 @ ./src/index.tsx
 @ multi ./src/index.tsx
ℹ ｢wdm｣: Failed to compile.

thanks!

[ryansolid]

Yes we should string wrap those thanks for reporting.

[ryansolid]

Ok I've implemented this in babel-plugin-jsx-dom-expressions 0.17.5. The current babel-preset-solid (0.17.0) will support it but it is sub dependencies so you might need to wipe any package locks and remove and re-install all node modules.

[ryansolid]

I fixed the build error but it still isn't working since there is an issue with spreading. Re-opening until this is properly fixed.

[ryansolid]

I'm happy to report this is fixed in v0.18.0.