solid-styled-jsx icon indicating copy to clipboard operation
solid-styled-jsx copied to clipboard

works with className="", but not with class=""

Open trusktr opened this issue 3 years ago • 4 comments

I've been taking solid-styled-jsx for a test run in porting an app from Vue to Solid (easy to copy/paste styles from <style scoped> to <style jsx> that way).

I'm encountering an issue where this template,

		return <div class="command">
			<h1>Foo</h1>
			<style jsx>{
				/*css*/ `
					h1 {
						margin-top: 5vh;
					}
				`
			}</style>
		</div>

produces this output in the DOM:

<div class="undefinedjsx-4071452694undefined">
  <h1 class="jsx-4071452694">Foo</h1>
</div>

trusktr avatar Jan 18 '22 04:01 trusktr

Not sure if it is clashing actually, because I tried moving my JSX class="command" to classList={{command: true}} but get the same output.

trusktr avatar Jan 18 '22 04:01 trusktr

Using className="command" works!

trusktr avatar Jan 18 '22 04:01 trusktr

@lxsmnsyc any chance you'd be willing to use your compiler chops to fix this?

trusktr avatar Mar 28 '22 18:03 trusktr

@LXSMNSYC any chance you'd be willing to use your compiler chops to fix this?

solid-styled doesn't utilize classes to surgically add scoping so this is all good

lxsmnsyc avatar Mar 29 '22 04:03 lxsmnsyc