Smart Spacing Breaks CSS Columns

UPDATE: ACCS 4 RC 2 fixes this issue.

The problem: You are trying to use CSS Columns and ACSS smart-spacing, and no matter what you do, you cannot get the column-gap to work correctly.

The cause: The smart-spacing sets its gap properties to !important by default, forcing the gap to 0.

Solution: I had run into this several times and typically add custom spacing to my column class rather than using smart-spacing. This works, but accounting for everything is cumbersome. Apparently, this is a known issue that will eventually be resolved, but in the meantime, you can simply add a specificity override using the power of nested CSS:

.columns--2 {
   &&{
        column-count: 2;
        column-gap: 5rem !important;
    }
}

.columns--2 {
   &&{
        column-count: 2;
        column-gap: 5rem !important;
    }
}

The && forces the class to be duplicated (.columns–2.columns–2), and thereby increases specificity.

Thanks to Zack Pyle for tracking down the solution