default button styling + <style> pseudoclasses fix

This commit is contained in:
Face
2025-07-29 17:31:31 +03:00
parent 4362991412
commit 700c819612
4 changed files with 37 additions and 15 deletions

View File

@@ -16,8 +16,8 @@ class CSSRule:
if selector.contains(":"):
var parts = selector.split(":", false, 1)
if parts.size() == 2:
event_prefix = parts[0]
selector = parts[1]
selector = parts[0]
event_prefix = parts[1]
func calculate_specificity():
specificity = 1
@@ -148,9 +148,26 @@ func parse_rule(rule_data: Dictionary) -> CSSRule:
return rule
func parse_utility_class(rule: CSSRule, utility_name: String) -> void:
var pseudo_classes = ["hover", "active"]
for pseudo in pseudo_classes:
var prefix = pseudo + ":"
if utility_name.begins_with(prefix):
var actual_utility = utility_name.substr(prefix.length())
var pseudo_rule = CSSRule.new()
pseudo_rule.selector = rule.selector + ":" + pseudo
pseudo_rule.init(pseudo_rule.selector)
parse_utility_class_internal(pseudo_rule, actual_utility)
stylesheet.add_rule(pseudo_rule)
return
# Fallback to normal parsing
parse_utility_class_internal(rule, utility_name)
# Parses a utility class (e.g. "text-red-500") and adds properties to the rule (e.g. "color: red")
# Used as a translation layer for Tailwind-like utility classes, as it becomes easier to manage these programmatically
static func parse_utility_class(rule: CSSRule, utility_name: String) -> void:
static func parse_utility_class_internal(rule: CSSRule, utility_name: String) -> void:
# Handle color classes like text-[#ff0000]
if utility_name.begins_with("text-[") and utility_name.ends_with("]"):
var color_value = extract_bracket_content(utility_name, 5) # after 'text-'
@@ -455,10 +472,15 @@ static func parse_color(color_string: String) -> Color:
_: return Color.from_string(color_string, Color.WHITE)
static func parse_inline_style(style_string: String) -> Dictionary:
var parser = CSSParser.new()
var rule_data = {
"selector": "",
"properties": style_string
}
var rule = parser.parse_rule(rule_data)
return rule.properties if rule else {}
var rule = CSSRule.new()
rule.selector = ""
rule.init(rule.selector)
var utility_classes = style_string.split(" ")
for utility_name in utility_classes:
utility_name = utility_name.strip_edges()
if utility_name.is_empty():
continue
parse_utility_class_internal(rule, utility_name)
return rule.properties

View File

@@ -186,13 +186,13 @@ func parse_inline_style_with_event(style_string: String, event: String = "") ->
if utility_name.begins_with(event + ":"): # e.g. "hover:bg-blue-500"
var actual_utility = utility_name.substr(event.length() + 1) # bg-blue-500
var rule = CSSParser.CSSRule.new()
CSSParser.parse_utility_class(rule, actual_utility)
CSSParser.parse_utility_class_internal(rule, actual_utility)
for property in rule.properties:
properties[property] = rule.properties[property]
else:
if not utility_name.contains(":"):
var rule = CSSParser.CSSRule.new()
CSSParser.parse_utility_class(rule, utility_name)
CSSParser.parse_utility_class_internal(rule, utility_name)
for property in rule.properties:
properties[property] = rule.properties[property]

View File

@@ -19,6 +19,8 @@ mark { bg-[#FFFF00] }
code { text-xl font-mono }
a { text-[#1a0dab] }
pre { text-xl font-mono }
button { bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] }
"""
var HTML_CONTENT2 = "<head>

View File

@@ -94,13 +94,11 @@ func apply_button_text_color(button: Button, normal_styles: Dictionary, hover_st
button.add_theme_color_override("font_focus_color", normal_color)
func apply_button_color_with_states(button: Button, normal_color: Color, hover_color: Color, active_color: Color) -> void:
var existing_normal: StyleBoxFlat = button.get_theme_stylebox("normal") if button.has_theme_stylebox_override("normal") else null
var style_normal = StyleBoxFlat.new()
var style_hover = StyleBoxFlat.new()
var style_pressed = StyleBoxFlat.new()
var radius: int = existing_normal.corner_radius_top_left if existing_normal else 0
var radius: int = 0
style_normal.set_corner_radius_all(radius)
style_hover.set_corner_radius_all(radius)