Add landing page for kjol, documentation

go/tw/custom_variant_test.go

@@ -0,0 +1,52 @@
+package tw
+
+import (
+	"strings"
+	"testing"
+)
+
+// @custom-variant is how a project redefines `dark:` as a CLASS toggle. The built-in
+// dark variant is a prefers-color-scheme media query, which a site with its own theme
+// switch cannot use: the OS says one thing and the switch says another, and the media
+// query wins.
+func TestCustomVariantDarkClass(t *testing.T) {
+	css, _, err := Compile(
+		"@import \"tailwindcss\";\n@custom-variant dark (&:where(.dark, .dark *));\n",
+		".", []string{"dark:bg-black", "bg-white"})
+	if err != nil {
+		t.Fatal(err)
+	}
+	if strings.Contains(css, "prefers-color-scheme") {
+		t.Error("dark: still compiled to a media query — the @custom-variant was ignored")
+	}
+	if !strings.Contains(css, ".dark") {
+		t.Errorf("dark: did not compile to a class selector:\n%s", css)
+	}
+}
+
+// The shorthand's selector may itself contain commas — &:where(.dark, .dark *) is ONE
+// selector, and splitting it on that comma yields two broken halves.
+func TestCustomVariantKeepsNestedCommas(t *testing.T) {
+	css, _, err := Compile(
+		"@import \"tailwindcss\";\n@custom-variant dark (&:where(.dark, .dark *));\n",
+		".", []string{"dark:bg-black"})
+	if err != nil {
+		t.Fatal(err)
+	}
+	if !strings.Contains(css, ".dark *") {
+		t.Errorf("the descendant half of the selector was lost:\n%s", css)
+	}
+}
+
+// The block form, with an explicit @slot.
+func TestCustomVariantBlockForm(t *testing.T) {
+	css, _, err := Compile(
+		"@import \"tailwindcss\";\n@custom-variant tall {\n  @media (min-height: 800px) { @slot; }\n}\n",
+		".", []string{"tall:bg-black"})
+	if err != nil {
+		t.Fatal(err)
+	}
+	if !strings.Contains(css, "min-height: 800px") && !strings.Contains(css, "min-height:800px") {
+		t.Errorf("the block-form variant did not compile:\n%s", css)
+	}
+}