(fix) Don't break on upcoming custom css properties (#963)

Remove --custom-css-propeties during Component attribute transformations. They have no property which they can be checked against and the leading dashes are invalid JSX

Related RFC: sveltejs/rfcs#13

Author: dummdidumm

packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts

@@ -82,6 +82,12 @@ export function handleAttribute(
         }
     }
 
+    // Custom property -> remove completely due to JSX incompatibility
+    if (parent.type === 'InlineComponent' && attr.name.startsWith('--')) {
+        str.overwrite(attr.start, attr.end, '', { contentOnly: true });
+        return;
+    }
+
     //we are a bare attribute
     if (attr.value === true) {
         if (

packages/svelte2tsx/src/htmlxtojsx/utils/node-utils.ts

@@ -106,7 +106,7 @@ function getNameValuePairsFromAttributes(
     complexExpression?: true;
 }> {
     return ((node.attributes as Node[]) || [])
-        .filter((attr) => attr.type === 'Attribute')
+        .filter((attr) => attr.type === 'Attribute' && !attr.name.startsWith('--'))
         .map((attr) => {
             const name: string = attr.name;
 

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-invalid-jsx-name/expected.jsx

@@ -1,2 +1,2 @@
-<><Hello __custom-prop="foo"></Hello>
+<><Hello __wtf="foo"></Hello>
 <div __custom-prop="foo"></div></>

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-invalid-jsx-name/input.svelte

@@ -1,2 +1,2 @@
-<Hello --custom-prop="foo"></Hello>
+<Hello |-wtf="foo"></Hello>
 <div --custom-prop="foo"></div>

packages/svelte2tsx/test/htmlx2jsx/samples/component-slot-infer-props/expected.jsx

@@ -1,4 +1,4 @@
-<><Parent bare shorthand={shorthand} text1="val1" text2="val2" text3={`a${a}b${b}`} textEmpty="" literal={true} strLiteral={'foo'} complex={{a}} a-dashed-complex={{a}} >{() => {/*Ωignore_startΩ*/const Ψcomplex={a},Ψa_dashed_complex={a};/*Ωignore_endΩ*/() => { let {foo} = /*Ωignore_startΩ*/new Parent({target: __sveltets_any(''), props: {'bare':true, 'shorthand':shorthand, 'text1':"", 'text2':"", 'text3':"", 'textEmpty':"", 'literal':true, 'strLiteral':"", 'complex':Ψcomplex, 'a-dashed-complex':Ψa_dashed_complex}})/*Ωignore_endΩ*/.$$slot_def['default'];<>
+<><Parent bare shorthand={shorthand} text1="val1" text2="val2" text3={`a${a}b${b}`} textEmpty="" literal={true} strLiteral={'foo'} complex={{a}} a-dashed-complex={{a}}  >{() => {/*Ωignore_startΩ*/const Ψcomplex={a},Ψa_dashed_complex={a};/*Ωignore_endΩ*/() => { let {foo} = /*Ωignore_startΩ*/new Parent({target: __sveltets_any(''), props: {'bare':true, 'shorthand':shorthand, 'text1':"", 'text2':"", 'text3':"", 'textEmpty':"", 'literal':true, 'strLiteral':"", 'complex':Ψcomplex, 'a-dashed-complex':Ψa_dashed_complex}})/*Ωignore_endΩ*/.$$slot_def['default'];<>
     {() => { let {bar} = /*Ωignore_startΩ*/new Parent({target: __sveltets_any(''), props: {'bare':true, 'shorthand':shorthand, 'text1':"", 'text2':"", 'text3':"", 'textEmpty':"", 'literal':true, 'strLiteral':"", 'complex':Ψcomplex, 'a-dashed-complex':Ψa_dashed_complex}})/*Ωignore_endΩ*/.$$slot_def['named'];<><Component  >
         {foo} {bar}
     </Component></>}}

packages/svelte2tsx/test/htmlx2jsx/samples/component-slot-infer-props/input.svelte

@@ -1,4 +1,4 @@
-<Parent bare {shorthand} text1=val1 text2="val2" text3="a{a}b{b}" textEmpty="" literal={true} strLiteral={'foo'} complex={{a}} a-dashed-complex={{a}} let:foo>
+<Parent bare {shorthand} text1=val1 text2="val2" text3="a{a}b{b}" textEmpty="" literal={true} strLiteral={'foo'} complex={{a}} a-dashed-complex={{a}} --custom-cssprop="foo" let:foo>
     <Component slot="named" let:bar>
         {foo} {bar}
     </Component>

packages/svelte2tsx/test/htmlx2jsx/samples/custom-css-properties/expected.jsx

@@ -0,0 +1 @@
+<><Component   betweenprop   /></>

packages/svelte2tsx/test/htmlx2jsx/samples/custom-css-properties/input.svelte

@@ -0,0 +1 @@
+<Component --custom-css-property1={'hi'} --custom-css-property2="hi" betweenprop  --custom-css-property3="hi{jo}hi" />

packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-component-infer-props/expected.jsx

@@ -1 +1 @@
-<><Component bare shorthand={shorthand} text1="val1" text2="val2" text3={`a${a}b${b}`} textEmpty="" literal={true} strLiteral={'foo'} complex={{a}} a-dashed-complex={{a}}  />{/*Ωignore_startΩ*/new Component({target: __sveltets_any(''), props: {'bare':true, 'shorthand':shorthand, 'text1':"", 'text2':"", 'text3':"", 'textEmpty':"", 'literal':true, 'strLiteral':"", 'complex':{a}, 'a-dashed-complex':{a}}})/*Ωignore_endΩ*/.$on('click', e => e)}</>
+<><Component bare shorthand={shorthand} text1="val1" text2="val2" text3={`a${a}b${b}`} textEmpty="" literal={true} strLiteral={'foo'} complex={{a}} a-dashed-complex={{a}}   />{/*Ωignore_startΩ*/new Component({target: __sveltets_any(''), props: {'bare':true, 'shorthand':shorthand, 'text1':"", 'text2':"", 'text3':"", 'textEmpty':"", 'literal':true, 'strLiteral':"", 'complex':{a}, 'a-dashed-complex':{a}}})/*Ωignore_endΩ*/.$on('click', e => e)}</>

packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-component-infer-props/input.svelte

@@ -1 +1 @@
-<Component bare {shorthand} text1=val1 text2="val2" text3="a{a}b{b}" textEmpty="" literal={true} strLiteral={'foo'} complex={{a}} a-dashed-complex={{a}} on:click={e => e} />
+<Component bare {shorthand} text1=val1 text2="val2" text3="a{a}b{b}" textEmpty="" literal={true} strLiteral={'foo'} complex={{a}} a-dashed-complex={{a}} --custom-cssprop="foo" on:click={e => e} />