Pseudo-instances

.card {
  border-radius: 8px;
}

.circle {
  border-radius: 50%;
}

.mixed-units {
  border-radius: 0.5rem; /* 8px */
}

-- Rule: .card::UICorner
local rule1 = Instance.new("StyleRule")
rule1.Selector = ".card::UICorner"
rule1:SetProperty("CornerRadius", UDim.new(0, 8))

-- Rule: .circle::UICorner
local rule2 = Instance.new("StyleRule")
rule2.Selector = ".circle::UICorner"
rule2:SetProperty("CornerRadius", UDim.new(0.5, 0))

-- Rule: .mixed-units::UICorner
local rule3 = Instance.new("StyleRule")
rule3.Selector = ".mixed-units::UICorner"
rule3:SetProperty("CornerRadius", UDim.new(0, 8))

.card {
  border: 2px solid #333;
}

.separate {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.1);
  border-style: solid;
}

-- Rule: .card::UIStroke
local rule1 = Instance.new("StyleRule")
rule1.Selector = ".card::UIStroke"
rule1:SetProperties({
  Thickness = 2,
  Color = Color3.fromRGB(51, 51, 51),
  ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
})

-- Rule: .separate::UIStroke
local rule2 = Instance.new("StyleRule")
rule2.Selector = ".separate::UIStroke"
rule2:SetProperties({
  Thickness = 1,
  Color = Color3.fromRGB(0, 0, 0),
  Transparency = 0.9,
  ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
})

.focused {
  outline: 2px solid blue;
}

-- Rule: .focused::UIStroke
local rule = Instance.new("StyleRule")
rule.Selector = ".focused::UIStroke"
rule:SetProperties({
  Thickness = 2,
  Color = Color3.fromRGB(0, 0, 255),
  ApplyStrokeMode = Enum.ApplyStrokeMode.Contextual,
})

.box-1 {
  padding: 16px;
}

.box-2 {
  padding: 12px 16px; /* vertical | horizontal */
}

.box-3 {
  padding: 8px 12px 16px; /* top | horizontal | bottom */
}

.box-4 {
  padding: 8px 12px 16px 20px; /* top | right | bottom | left */
}

-- Rule: .box-1::UIPadding
rule1:SetProperties({
  PaddingTop = UDim.new(0, 16),
  PaddingBottom = UDim.new(0, 16),
  PaddingLeft = UDim.new(0, 16),
  PaddingRight = UDim.new(0, 16),
})

-- Rule: .box-2::UIPadding
rule2:SetProperties({
  PaddingTop = UDim.new(0, 12),
  PaddingBottom = UDim.new(0, 12),
  PaddingLeft = UDim.new(0, 16),
  PaddingRight = UDim.new(0, 16),
})

-- Similar for box-3 and box-4...

.box {
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 12px;
  padding-left: 20px;
}

-- Rule: .box::UIPadding
rule:SetProperties({
  PaddingTop = UDim.new(0, 8),
  PaddingRight = UDim.new(0, 16),
  PaddingBottom = UDim.new(0, 12),
  PaddingLeft = UDim.new(0, 20),
})

.box {
  padding-inline: 16px; /* left + right in LTR */
  padding-block: 12px;  /* top + bottom */
}

.box-2 {
  padding-inline-start: 8px;  /* left in LTR */
  padding-inline-end: 16px;   /* right in LTR */
  padding-block-start: 12px;  /* top */
  padding-block-end: 20px;    /* bottom */
}

-- Logical properties are converted to physical equivalents
-- (LTR assumed for Roblox)
rule1:SetProperties({
  PaddingLeft = UDim.new(0, 16),
  PaddingRight = UDim.new(0, 16),
  PaddingTop = UDim.new(0, 12),
  PaddingBottom = UDim.new(0, 12),
})

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

-- Rule: .container::UIListLayout
local rule = Instance.new("StyleRule")
rule.Selector = ".container::UIListLayout"
rule:SetProperties({
  FillDirection = Enum.FillDirection.Horizontal,
  HorizontalAlignment = Enum.HorizontalAlignment.Center,
  VerticalAlignment = Enum.VerticalAlignment.Center,
  Padding = UDim.new(0, 8),
})

.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

rule1:SetProperty("FillDirection", Enum.FillDirection.Horizontal)
rule2:SetProperty("FillDirection", Enum.FillDirection.Vertical)

.start {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.end {
  justify-content: flex-end;
}

.space-between {
  justify-content: space-between;
}

-- For row direction:
rule1:SetProperty("HorizontalAlignment", Enum.HorizontalAlignment.Left)
rule2:SetProperty("HorizontalAlignment", Enum.HorizontalAlignment.Center)
rule3:SetProperty("HorizontalAlignment", Enum.HorizontalAlignment.Right)
rule4:SetProperty("HorizontalFlex", Enum.UIFlexAlignment.SpaceBetween)

-- For column direction, uses VerticalAlignment instead

.start {
  align-items: flex-start;
}

.center {
  align-items: center;
}

.stretch {
  align-items: stretch;
}

-- For row direction (cross-axis is vertical):
rule1:SetProperty("VerticalAlignment", Enum.VerticalAlignment.Top)
rule2:SetProperty("VerticalAlignment", Enum.VerticalAlignment.Center)
rule3:SetProperty("ItemLineAlignment", Enum.ItemLineAlignment.Stretch)

.container {
  gap: 8px; /* uniform gap */
}

rule:SetProperty("Padding", UDim.new(0, 8))

.container {
  flex-wrap: wrap;
}

rule:SetProperty("Wraps", true)

.item {
  flex-grow: 1;
  flex-shrink: 0;
}

-- Rule: .item::UIFlexItem
local rule = Instance.new("StyleRule")
rule.Selector = ".item::UIFlexItem"
rule:SetProperties({
  FlexMode = Enum.UIFlexMode.Custom,
  GrowRatio = 1,
  ShrinkRatio = 0,
})

.item {
  align-self: center;
}

rule:SetProperty("ItemLineAlignment", Enum.ItemLineAlignment.Center)

.item {
  flex-basis: 200px;
}

-- flex-basis is converted to Size on the element itself
rule:SetProperty("Size", UDim2.new(0, 200, 0, 0)) -- for row direction

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 8px;
}

-- Rule: .grid::UIGridLayout
local rule = Instance.new("StyleRule")
rule.Selector = ".grid::UIGridLayout"
rule:SetProperties({
  FillDirectionMaxCells = 3,
  CellSize = UDim2.new(0, 100, 0, 100),
  CellPadding = UDim2.new(0, 8, 0, 8),
})

.gradient {
  background: linear-gradient(90deg, #ff0099, #ffcc00);
}

.multi-stop {
  background: linear-gradient(180deg, red 0%, yellow 50%, green 100%);
}

-- Rule: .gradient::UIGradient
local rule1 = Instance.new("StyleRule")
rule1.Selector = ".gradient::UIGradient"
rule1:SetProperties({
  Color = ColorSequence.new({
    ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 153)),
    ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 204, 0)),
  }),
  Rotation = 90,
})

-- Rule: .multi-stop::UIGradient with 3 color stops

.scaled {
  transform: scale(1.5);
}

.scaled-xy {
  transform: scale(1.2, 0.8);
}

-- Rule: .scaled::UIScale
rule1:SetProperty("Scale", 1.5)

-- Rule: .scaled-xy::UIScale (averaged if x != y)
rule2:SetProperty("Scale", 1.0) -- (1.2 + 0.8) / 2

.square {
  aspect-ratio: 1;
}

.video {
  aspect-ratio: 16 / 9;
}

-- Rule: .square::UIAspectRatioConstraint
rule1:SetProperty("AspectRatio", 1)

-- Rule: .video::UIAspectRatioConstraint
rule2:SetProperty("AspectRatio", 1.7778) -- 16/9

.constrained {
  min-width: 200px;
  max-width: 500px;
  min-height: 100px;
  max-height: 300px;
}

-- Rule: .constrained::UISizeConstraint
local rule = Instance.new("StyleRule")
rule.Selector = ".constrained::UISizeConstraint"
rule:SetProperties({
  MinSize = Vector2.new(200, 100),
  MaxSize = Vector2.new(500, 300),
})