test_arbitrary_property_machine_extraction() — tailwindcss Function Reference

Source Code

crates/oxide/src/extractor/arbitrary_property_machine.rs lines 333–434

    fn test_arbitrary_property_machine_extraction() {
        for (input, expected) in [
            // Simple arbitrary property
            ("[color:red]", vec!["[color:red]"]),
            // Name with dashes
            ("[background-color:red]", vec!["[background-color:red]"]),
            // Name with leading `-` is valid
            ("[-webkit-value:red]", vec!["[-webkit-value:red]"]),
            // Setting a CSS Variable
            ("[--my-color:red]", vec!["[--my-color:red]"]),
            // Value with nested brackets
            (
                "[background:url(https://example.com)]",
                vec!["[background:url(https://example.com)]"],
            ),
            // Value containing strings
            (
                "[background:url('https://example.com')]",
                vec!["[background:url('https://example.com')]"],
            ),
            // --------------------------------------------------------

            // Invalid CSS Variable
            ("[--my#color:red]", vec![]),
            // Spaces are not allowed
            ("[color: red]", vec![]),
            // Multiple colons are not allowed
            ("[color:red:blue]", vec![]),
            // Only alphanumeric characters are allowed in the property name
            ("[background_color:red]", vec![]),
            // A color is required
            ("[red]", vec![]),
            // The property cannot be empty
            ("[:red]", vec![]),
            // Empty brackets are not allowed
            ("[]", vec![]),
            // URLs
            ("[http://example.com]", vec![]),
            ("[https://example.com]", vec![]),
            // Missing colon in more complex example
            (r#"[CssClass("gap-y-4")]"#, vec![]),
            // Brackets must be balanced
            ("[background:url(https://example.com]", vec![]),
            // Many brackets (>= 8) must be balanced
            (
                "[background:url(https://example.com?q={[{[([{[[2]]}])]}]})]",
                vec!["[background:url(https://example.com?q={[{[([{[[2]]}])]}]})]"],
            ),
            // A property containing `!` at the top-level is invalid
            ("[color:red!]", vec![]),
            ("[color:red!important]", vec![]),
        ] {
            for wrapper in [
                // No wrapper
                "{}",
                // With leading spaces
                " {}",
                // With trailing spaces
                "{} ",
                // Surrounded by spaces
                " {} ",
                // Inside a string
                "'{}'",
                // Inside a function call
                "fn({})",
                // Inside nested function calls
                "fn1(fn2({}))",
                // --------------------------
                //
                // HTML
                // Inside a class (on its own)
                r#"<div class="{}"></div>"#,
                // Inside a class (first)
                r#"<div class="{} foo"></div>"#,
                // Inside a class (second)
                r#"<div class="foo {}"></div>"#,
                // Inside a class (surrounded)
                r#"<div class="foo {} bar"></div>"#,
                // --------------------------
                //
                // JavaScript