Styles generated for a given element fail to generate if class string has newlines.

[willnationsdev]

Problem

The presence of any style classes declared in the CSS module block where the classes are referred to by multi-line class strings in at least one element in the Svelte component result in the corresponding hashed style classes failing to be applied to those specific elements (though they will apply to other elements with single-line class strings that include the specified class name).

Example:

<style module>
    .test1 {
        border-color: red;
    }
    .test2 {
        font-size: 20px;
        border-color: blue;
    }
</style>
<!-- Generates .test1-<hash> and .test2-<hash> properly and applies them to this element. -->
<p id="p1" class="test1 test2">The quick brown fox...</p>
<!-- The `test1` and `test2` classes have no hash appended to them and thus the styles are not applied. -->
<p id="p2" class="test1
                  test2"
                 >jumps over the lazy dog.</p>

Use Case

I'm using Tailwind and prefer to see all of the styles relevant to a given element on the element where possible. In practice, if there are many style classes, I space them out on newlines to sort them by purpose or context. Sometimes, while doing this, I also need to include styles that are specific to the element, won't conflict with the page's CSS, and/or are driven by the data (via the class directive). For example

<script>
    export let invalid = false;
</script>
<style lang="postcss" module>
    .invalid {
        @apply border border-red-500;
    }
</style>
<!-- line 1: "tag" class to easily find in the global context, outside of Svelte components -->
<!-- line 2: default style classes -->
<!-- line 3: other style classes, sorted by same context prefix (like `hover:`) -->
<p class="story
          prose w-full
          hover:bg-slate-100
          hover:active:bg-slate-200"
   class:invalid>
    The quick brown fox jumps over the lazy dog.
</p>

However, adding the module attribute to block conflicts with the local page didn't work. Switching from class:invalid to appending to the string ("story invalid<newline>...") also failed to style things properly. The resulting .invalid-<hash> CSS rule wasn't being applied to the markup at all, and I couldn't find it in the generated CSS output. But, if I put everything onto one line, like below, it does generate properly:

<script>
    export let invalid = false;
</script>
<style lang="postcss" module>
    .invalid {
        @apply border border-red-500;
    }
</style>
<!-- `class` string has no newlines, so it works -->
<p class="story prose w-full  hover:bg-slate-100 hover:active:bg-slate-200"
   class:invalid>
    The quick brown fox jumps over the lazy dog.
</p>

I can only assume the parsing process fails if there are newlines which smells like a bug to me. It works fine if I remove the module attribute, so I came to believe(?) that it was a bug related to this plugin. Sorry if I'm wrong.

[micantoine]

Thank you for spotting this bug. It was indeed coming from the preprocessor.
I pushed a new release v2.1.2 fixing that issue.