Tailwindcss 3.3.0 breaks generated elm code (through from|to|via utilities)

[nidico]

Tailwind 3.3.0 introduced new from-x%|to-x%|via-x% utility classes which break the generated elm code in both elm-tailwind-modules 0.4.1 and 0.5.0-alpha5.

The invalid generated elm code looks like this:

from_0% : Css.Style
from_0% =
    Css.property "--tw-gradient-from-position" "0%"

Unfortunately, package.json currently allows updates to ^3.1.6 (semver compatible to 3.1.6) which includes 3.3.x, so (as long as this isn't properly fixed) intermediate releases with pinned tailwindcss < 3.3 could be a quick fix. Otherwise users of the library can just locally pin tailwindcss to e.g. 3.2.7.

[matheus23]

Good catch.
This needs to be fixed here:

elm-tailwind-modules/src/helpers.ts

Lines 24 to 50 in f3bb237

	export function toElmName(cls: string): string {
	var elm = cls;
	// This is faster than a general solution
	elm = elm.replace(/^2(x[ls].*$)/, "x$1");
	elm = elm.replace(/^3(x[ls].*$)/, "xx$1");
	elm = elm.replace(/^4(x[ls].*$)/, "xxx$1");
	elm = elm.replace(/^5(x[ls].*$)/, "xxxx$1");
	// handle negative at start of string
	elm = elm.replace(/^-([a-z])/, "_neg_$1");
	// handle negative with variant
	elm = elm.replace(/:-([a-z])/, "__neg_$1");
	// replace dashes now we have sorted the negative stuff
	elm = elm.replace(/-/g, "_");
	// replace :
	elm = elm.replace(/:/g, "__");
	// handle fractions
	elm = elm.replace(/\//g, "over");
	// clean up
	elm = elm.replace(/\\__/g, "_");
	elm = elm.replace(/^_/g, "");
	// handle :nth-child(even), etc
	elm = elm.replace(/_nth_child\(.+\)/, "");
	elm = elm.replace(/_(last|first)_child/, "");
	// replace any other dots
	elm = elm.replace(/\./g, "_dot_");
	return elm;
	}