Mitigates several styled errors when using expressions

[csvn]

There are several styled errors that can occur when using expressions (${}) inside template strings with this plugin.

Issue

const tmpl = html`
  <style>${ importedStyle }</style>
  <style>${ importedStyle } ${ importedStyle2 }</style>
  <style>
    body {
      background: ${ 'steelblue' };
      ${ colorRed }
    }
    ${ headerStyle }
  </style>
  <div style="${ colorRed }"></div>
  <div style="${ colorRed } ${ fontSize } ${ fontWeight }"></div>
  <div style="${ colorRed } color: red;"></div>
  <div style="color: blue; ${ colorRed }"></div>
  <div style="color: blue; ${ colorRed } font-size: 16px;"></div>
`;

Will currently turn into the following:

const tmpl = html`
         xxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx

    body {
      background: xxxxxxxxxxxxxxxx;

    }

           __{xxxxxxxxxxxxx}
           __{xxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxx}
           __{xxxxxxxxxxxxx color: red;}
           __{color: blue; xxxxxxxxxxxxx}
           __{color: blue; xxxxxxxxxxxxx font-size: 16px;}
`;

When this VirtualDocument is checked for CSS errors xxxxxxxxxxxxxxxxxx will complain on missing { and __{xxxxxxxxxxxxx} will complain on missing :.

The x placeholder values for expressions come from PlaceholderSubstituter in `typescript-template-language-service-decorator.

My work so far will substitue x's for whitespace for CSS parts that use only expressions and whitespace:

const tmpl = html`

    body {
      background: xxxxxxxxxxxxxxxx;

    }

           __{xxxxxxxxxxxxx color: red;}
           __{color: blue; xxxxxxxxxxxxx}
           __{color: blue; xxxxxxxxxxxxx font-size: 16px;}
`;

Mitigates

The above fix will make the scenarios above much better. And these seem like they would be the most common scenarios when using lit-html.

• [ts-styled-plugin] { expected is no longer thrown when only using expressions in in style tag. This is what I am currently using in a project with lit-html to get CSS minification and vendor-prefixing via webpack loaders.

  html`
  <style>${ myImportedStyle }</style>
  `

• [ts-styled-plugin] colon expected is avoided when only using expressions in style attribute.

  html`
  <div style="${ color } ${ fontSize }"></div>
  `

Fixes #19

[csvn]

I managed to get e2e running locally, but I copied manually. My npm install failed on "typescript-lit-html-plugin": "file:./.." just like Travis seems to do. Any suggestions here?

[mjbvz]

Thanks! Sorry I missed this PR when it first came in. Will look at why npm 10+ keeps failing. Yarn and older npm versions seem to work just fine