Skip to content

Algorithm for generating border shorthand is incorrect when individual side border declarations exist #87

Open
@willtcarey

Description

@willtcarey

My client bought an email template that I'm trying to inline into our emails using premailer. The template has the following css in it

.bb {
  border-bottom: 1px solid; }

.bt,
.bb {
  border-color: #dfdfdf; }

After going through the expand_shorthand phase the declarations have properties like

"border-bottom-width" => { :value => "1px" },
"border-bottom-style" => { :value => "solid" },
"border-bottom-color" => { :value => "#dfdfdf"},
"border-top-color" => { :value => "#dfdfdf"},
"border-left-color" => { :value => "#dfdfdf"},
"border-right-color" => { :value => "#dfdfdf"}

Then it goes through the create_shorthands phase and when it runs create_dimensions_shorthand! all the border-color declarations are collapsed back into one property which is still correct.

"border-bottom-width" => { :value => "1px" },
"border-bottom-style" => { :value => "solid" },
"border-color" => { :value => "#dfdfdf"}

The problem occurs at the next phase when it runs create_border_shorthand!. It runs through the declarations checking for border-width border-style and border-color. And I do have a border color declaration so it picks that up and creates a shorthand out of it for border: #dfdfdf which then overrides the border-bottom-width and border-bottom-style declarations.

So my suggestion would be when creating border shorthands to first check if there are any individual side border styles set and if so bail out. An alternate way to fix this would be to ensure that the border-bottom-width and border-bottom-style styles are set after the border shorthand so they override the shorthand properties but I don't know if there's a good way to do that.

Do you have any thoughts?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions