PreviousNext
AI-assisted engineering/Reviewing AI code

Fix the logical property rewriter for chat bubble CSS

Review the AI's codeEasy12 minAirbnb style

Your task

Your chat product is launching in Arabic and Hebrew. An AI wrote the message bubble's CSS with physical sides: margin-left, border-left, text-align: left and float: right. In a right-to-left (RTL) layout those stay where they are instead of mirroring. Your team is converting the declarations to CSS logical properties, which follow the writing direction.

An assistant wrote rewrite_to_logical_properties(declarations). It is in the editor. It has a bug. Find it and fix it.

Input and output:

  • declarations: CSS declarations, one per entry, like "margin-left: 48px".
  • Return the rewritten declarations, in the same order.

Rules the tests check:

  • Trim the declaration. If it then ends with ;, remove that one ; and trim again.
  • If there is no :, return the declaration as it now is.
  • Otherwise split at the first :. Trim both parts, and lowercase the property name. CSS property names and keywords are not case sensitive.
  • Rename these properties and keep the value: margin-left and margin-right become margin-inline-start and margin-inline-end. padding-left, padding-right, border-left and border-right change the same way. left and right become inset-inline-start and inset-inline-end.
  • For text-align, a value of left or right in any case becomes start or end. For float, it becomes inline-start or inline-end.
  • Leave every other property and value as it is. Block sides like margin-top do not mirror, and neither do values like center.
  • Write the result as <property>: <value>, with one space after the colon.

Examples

rewrite_to_logical_properties(declarations: list[str]) -> list[str]
Example 1
Inputrewrite_to_logical_properties(["margin-left: 48px", "padding-right: 12px", "text-align: left", "border-left: 3px solid var(--accent)", "float: right"])
Output["margin-inline-start: 48px", "padding-inline-end: 12px", "text-align: start", "border-inline-start: 3px solid var(--accent)", "float: inline-end"]
Example 2
Inputrewrite_to_logical_properties(["margin-top: 8px", "text-align: center", "color: var(--ink)"])
Output["margin-top: 8px", "text-align: center", "color: var(--ink)"]
Example 3
Inputrewrite_to_logical_properties(["left: 0", "right: 12px"])
Output["inset-inline-start: 0", "inset-inline-end: 12px"]