diff --git a/index.js b/index.js index 1c8455a..d2803c8 100644 --- a/index.js +++ b/index.js @@ -16,6 +16,20 @@ function trbl (prefix) { ]) } +function logical (prefix) { + const rules = [prefix] + prefix += '-' + + return rules.concat([ + prefix + 'block', + prefix + 'block-start', + prefix + 'block-end', + prefix + 'inline', + prefix + 'inline-start', + prefix + 'inline-end', + ]) +} + function minMax (suffix) { return [suffix, 'min-' + suffix, 'max-' + suffix] } @@ -49,6 +63,7 @@ const positioning = [] 'z-index' ]) .concat(trbl()) + .concat(logical("inset")) const displayAndBoxModel = [] .concat([ @@ -73,13 +88,18 @@ const displayAndBoxModel = [] 'order' ]) .concat(trbl('padding')) - .concat([] - .concat(border()) - .concat(border('top')) - .concat(border('right')) - .concat(border('bottom')) - .concat(border('left'))) + .concat(logical('padding')) + .concat(border()) + .concat(border('top')) + .concat(border('right')) + .concat(border('bottom')) + .concat(border('left')) + .concat(border('block-start')) + .concat(border('block-end')) + .concat(border('inline-start')) + .concat(border('inline-end')) .concat(trbl('margin')) + .concat(logical('margin')) module.exports = { plugins: 'stylelint-order', diff --git a/test/expected.css b/test/expected.css index 645edce..333ea1a 100755 --- a/test/expected.css +++ b/test/expected.css @@ -427,6 +427,20 @@ hr { margin-bottom: 1rem; } +button { + position: absolute; + inset: 5px 2px 3px 1px; + inset-block-start: 5px; + inset-block-end: 2px; + inset-inline-start: 12px; + inset-inline-end: 2rem; + padding-inline-start: var(--selected-left-border-width); + border-block-start: 1px solid var(--grey-30); + border-inline-start: none; + margin-inline-start: 1px; + background-color: #fff; +} + small, .small { font-size: 80%; diff --git a/test/fixture.css b/test/fixture.css index 55bd965..a718082 100755 --- a/test/fixture.css +++ b/test/fixture.css @@ -427,6 +427,20 @@ hr { border-top: 1px solid rgba(0, 0, 0, 0.1); } +button { + position: absolute; + background-color: #fff; + border-block-start: 1px solid var(--grey-30); + padding-inline-start: var(--selected-left-border-width); + border-inline-start: none; + margin-inline-start: 1px; + inset: 5px 2px 3px 1px; + inset-block-start: 5px; + inset-block-end: 2px; + inset-inline-end: 2rem; + inset-inline-start: 12px; +} + small, .small { font-size: 80%;