Skip to content

Commit

Permalink
Add more shorthand data
Browse files Browse the repository at this point in the history
  • Loading branch information
@hudochenkov
hudochenkov committed Oct 20, 2024
1 parent a1c9a4f commit 8667085
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 56 deletions.
25 changes: 25 additions & 0 deletions lib/properties-order/__tests__/isShorthand.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
const { isShorthand } = require('../isShorthand');

test('margin is shorthand for margin-top', () => {
expect(isShorthand('margin', 'margin-top')).toBe(true);
});

test('margin-top is not shorthand for margin', () => {
expect(isShorthand('margin-top', 'margin')).toBe(false);
});

test('margin-block is shorthand for margin-top', () => {
expect(isShorthand('margin-block', 'margin-top')).toBe(true);
});

test('margin-top is not shorthand for margin-block', () => {
expect(isShorthand('margin-top', 'margin-block')).toBe(false);
});

test('border-inline is shorthand for border-top-color', () => {
expect(isShorthand('border-inline', 'border-top-color')).toBe(true);
});

test('border-top-color is not shorthand for border-inline', () => {
expect(isShorthand('border-top-color', 'border-inline')).toBe(false);
});
19 changes: 19 additions & 0 deletions lib/properties-order/isShorthand.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const shorthandData = require('./shorthandData');

exports.isShorthand = function isShorthand(a, b) {
if (!shorthandData[a]) {
return false;
}

if (shorthandData[a].includes(b)) {
return true;
}

for (const longhand of shorthandData[a]) {
if (isShorthand(longhand, b)) {
return true;
}
}

return false;
};
207 changes: 158 additions & 49 deletions lib/properties-order/shorthandData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,12 @@ module.exports = {
'margin-left',
'margin-right',
'margin-block',
'margin-block-start',
'margin-block-end',
'margin-inline',
'margin-inline-start',
'margin-inline-end',
],
'margin-block': [
'margin-block-start',
'margin-block-end',
'margin-top',
'margin-bottom',
'margin-left',
'margin-right',
],
'margin-block': ['margin-block-start', 'margin-block-end'],
'margin-block-start': ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
'margin-block-end': ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
'margin-inline': [
'margin-inline-start',
'margin-inline-end',
'margin-top',
'margin-bottom',
'margin-left',
'margin-right',
],
'margin-inline': ['margin-inline-start', 'margin-inline-end'],
'margin-inline-start': ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
'margin-inline-end': ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
padding: [
Expand Down Expand Up @@ -87,19 +69,149 @@ module.exports = {
'line-height',
],
border: [
'border-inline',
'border-block',
'border-top',
'border-bottom',
'border-left',
'border-right',
'border-width',
'border-style',
'border-color',
],
'border-inline': [
'border-inline-start',
'border-inline-end',
'border-inline-width',
'border-inline-style',
'border-inline-color',
],
'border-inline-width': ['border-inline-start-width', 'border-inline-end-width'],
'border-inline-style': ['border-inline-start-style', 'border-inline-end-style'],
'border-inline-color': ['border-inline-start-color', 'border-inline-end-color'],
'border-inline-start': [
'border-inline-start-width',
'border-inline-start-style',
'border-inline-start-color',

'border-top',
'border-bottom',
'border-left',
'border-right',
],
'border-inline-start-width': [
'border-top-width',
'border-bottom-width',
'border-left-width',
'border-right-width',
],
'border-inline-start-style': [
'border-top-style',
'border-bottom-style',
'border-left-style',
'border-right-style',
],
'border-inline-start-color': [
'border-top-color',
'border-bottom-color',
'border-left-color',
'border-right-color',
],
'border-inline-end': [
'border-inline-end-width',
'border-inline-end-style',
'border-inline-end-color',

'border-top',
'border-bottom',
'border-left',
'border-right',
],
'border-inline-end-width': [
'border-top-width',
'border-bottom-width',
'border-left-width',
'border-right-width',
],
'border-inline-end-style': [
'border-top-style',
'border-bottom-style',
'border-left-style',
'border-right-style',
],
'border-inline-end-color': [
'border-top-color',
'border-bottom-color',
'border-left-color',
'border-right-color',
],
'border-block': [
'border-block-start',
'border-block-end',
'border-block-width',
'border-block-style',
'border-block-color',
],
'border-block-width': ['border-block-start-width', 'border-block-end-width'],
'border-block-style': ['border-block-start-style', 'border-block-end-style'],
'border-block-color': ['border-block-start-color', 'border-block-end-color'],
'border-block-start': [
'border-block-start-width',
'border-block-start-style',
'border-block-start-color',

'border-top',
'border-bottom',
'border-left',
'border-right',
],
'border-block-start-width': [
'border-top-width',
'border-bottom-width',
'border-left-width',
'border-right-width',
],
'border-block-start-style': [
'border-top-style',
'border-bottom-style',
'border-left-style',
'border-right-style',
],
'border-block-start-color': [
'border-top-color',
'border-bottom-color',
'border-left-color',
'border-right-color',
],
'border-block-end': [
'border-block-end-width',
'border-block-end-style',
'border-block-end-color',

'border-top',
'border-bottom',
'border-left',
'border-right',
],
'border-block-end-width': [
'border-top-width',
'border-bottom-width',
'border-left-width',
'border-right-width',
],
'border-block-end-style': [
'border-top-style',
'border-bottom-style',
'border-left-style',
'border-right-style',
],
'border-block-end-color': [
'border-top-color',
'border-bottom-color',
'border-left-color',
'border-right-color',
],

'border-top': ['border-top-width', 'border-top-style', 'border-top-color'],
'border-bottom': ['border-bottom-width', 'border-bottom-style', 'border-bottom-color'],
'border-left': ['border-left-width', 'border-left-style', 'border-left-color'],
Expand All @@ -122,13 +234,20 @@ module.exports = {
'border-left-color',
'border-right-color',
],
'list-style': ['list-style-type', 'list-style-position', 'list-style-image'],
'border-image': [
'border-image-source',
'border-image-slice',
'border-image-width',
'border-image-outset',
'border-image-repeat',
],
'border-radius': [
'border-top-right-radius',
'border-top-left-radius',
'border-bottom-right-radius',
'border-bottom-left-radius',
],
'list-style': ['list-style-type', 'list-style-position', 'list-style-image'],
transition: [
'transition-delay',
'transition-duration',
Expand All @@ -145,33 +264,6 @@ module.exports = {
'animation-fill-mode',
'animation-play-state',
],
'border-block-end': [
'border-block-end-width',
'border-block-end-style',
'border-block-end-color',
],
'border-block-start': [
'border-block-start-width',
'border-block-start-style',
'border-block-start-color',
],
'border-image': [
'border-image-source',
'border-image-slice',
'border-image-width',
'border-image-outset',
'border-image-repeat',
],
'border-inline-end': [
'border-inline-end-width',
'border-inline-end-style',
'border-inline-end-color',
],
'border-inline-start': [
'border-inline-start-width',
'border-inline-start-style',
'border-inline-start-color',
],
'column-rule': ['column-rule-width', 'column-rule-style', 'column-rule-color'],
columns: ['column-width', 'column-count'],
flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
Expand All @@ -193,7 +285,17 @@ module.exports = {
'grid-template': ['grid-template-columns', 'grid-template-rows', 'grid-template-areas'],
offset: ['offset-anchor', 'offset-distance', 'offset-path', 'offset-position', 'offset-rotate'],
outline: ['outline-color', 'outline-style', 'outline-width'],
overflow: ['overflow-x', 'overflow-y'],
overflow: ['overflow-block', 'overflow-inline', 'overflow-x', 'overflow-y'],
'overflow-block': ['overflow-x', 'overflow-y'],
'overflow-inline': ['overflow-x', 'overflow-y'],
'overscroll-behavior': [
'overscroll-behavior-x',
'overscroll-behavior-y',
'overscroll-behavior-block',
'overscroll-behavior-inline',
],
'overscroll-behavior-block': ['overscroll-behavior-x', 'overscroll-behavior-y'],
'overscroll-behavior-inline': ['overscroll-behavior-x', 'overscroll-behavior-y'],
'text-decoration': ['text-decoration-color', 'text-decoration-style', 'text-decoration-line'],
'text-emphasis': ['text-emphasis-style', 'text-emphasis-color'],
mask: [
Expand All @@ -214,4 +316,11 @@ module.exports = {
'mask-border-source',
'mask-border-width',
],
inset: ['top', 'right', 'bottom', 'left', 'inset-block', 'inset-inline'],
'inset-block': ['inset-block-end', 'inset-block-start'],
'inset-inline': ['inset-inline-end', 'inset-inline-start'],
'inset-block-start': ['top', 'bottom', 'left', 'right'],
'inset-block-end': ['top', 'bottom', 'left', 'right'],
'inset-inline-start': ['top', 'bottom', 'left', 'right'],
'inset-inline-end': ['top', 'bottom', 'left', 'right'],
};
8 changes: 1 addition & 7 deletions lib/properties-order/sortDeclarationsAlphabetically.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
let shorthandData = require('./shorthandData');
const { isShorthand } = require('./isShorthand');
let vendor = require('./vendor');

module.exports = function sortDeclarationsAlphabetically(a, b) {
Expand Down Expand Up @@ -27,9 +27,3 @@ module.exports = function sortDeclarationsAlphabetically(a, b) {

return a.unprefixedName <= b.unprefixedName ? -1 : 1;
};

function isShorthand(a, b) {
const longhands = shorthandData[a] || [];

return longhands.includes(b);
}

0 comments on commit 8667085

Please sign in to comment.