diff --git a/packages/postcss-ordered-values/src/__tests__/index.js b/packages/postcss-ordered-values/src/__tests__/index.js index ffc6e84e2..532e00daa 100644 --- a/packages/postcss-ordered-values/src/__tests__/index.js +++ b/packages/postcss-ordered-values/src/__tests__/index.js @@ -590,6 +590,24 @@ test( ) ); +test( + 'should order columns declarations width first', + processCSS('h1 {columns: 2 20px;}', 'h1 {columns: 20px 2;}') +); + +test( + 'should preserve already ordered columns declaration', + passthroughCSS('h1 {columns: 20px 2;}') +); + +test( + 'should not crash on invalid columns declarations', + processCSS( + 'h1 {columns: 2px 2px; columns: inherit 3rem; columns: 3rem 2 12em;}', + 'h1 {columns: 2px 2px; columns: 3rem inherit; columns: 3rem 2 12em;}' + ) +); + test( 'should order column-rule like border', processCSS( diff --git a/packages/postcss-ordered-values/src/rules/columns.js b/packages/postcss-ordered-values/src/rules/columns.js index f34a126de..0b4da7aaf 100644 --- a/packages/postcss-ordered-values/src/rules/columns.js +++ b/packages/postcss-ordered-values/src/rules/columns.js @@ -1,28 +1,30 @@ import { unit } from 'postcss-value-parser'; import border from './border.js'; -const strValues = ['auto', 'inherit', 'unset', 'initial']; +function hasUnit(value) { + const parsedVal = unit(value); + return parsedVal && parsedVal.unit !== ''; +} export const column = (columns) => { - let newValue = { front: '', back: '' }; - let shouldNormalize = false; + const widths = []; + const other = []; columns.walk((node) => { const { type, value } = node; - if (type === 'word' && strValues.indexOf(value.toLowerCase())) { - const parsedVal = unit(value); - if (parsedVal.unit !== '') { - // surely its the column's width - // it needs to be at the front - newValue.front = `${newValue.front} ${value}`; - shouldNormalize = true; + if (type === 'word') { + if (hasUnit(value)) { + widths.push(value); + } else { + other.push(value); } - } else if (type === 'word') { - newValue.back = `${newValue.back} ${value}`; } }); - if (shouldNormalize) { - return `${newValue.front.trimStart()} ${newValue.back.trimStart()}`; + + // only transform if declaration is not invalid or a single value + if (other.length === 1 && widths.length === 1) { + return `${widths[0].trimStart()} ${other[0].trimStart()}`; } + return columns; };