Skip to content
This repository has been archived by the owner on Feb 18, 2022. It is now read-only.

Commit

Permalink
use postcss 8 visitor pattern per property
Browse files Browse the repository at this point in the history
  • Loading branch information
@romainmenke @jonathantneal
romainmenke authored and jonathantneal committed Aug 19, 2021
1 parent d0bab53 commit 7438fc0
Showing 1 changed file with 104 additions and 55 deletions.
159 changes: 104 additions & 55 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,50 +10,6 @@ import transformTextAlign from './lib/transform-text-align';
import transformTransition from './lib/transform-transition';
import { splitBySpace } from './lib/split';

// supported transforms
const transforms = {
// Flow-Relative Values
'clear': transformFloat,
'float': transformFloat,
'resize': transformResize,
'text-align': transformTextAlign,

// Logical Height and Logical Width
'block-size': transformSize, 'max-block-size': transformSize, 'min-block-size': transformSize,
'inline-size': transformSize, 'max-inline-size': transformSize, 'min-inline-size': transformSize,

// Flow-relative Margins
'margin': transformDirectionalShorthands, 'margin-inline': transformSide['inline'], 'margin-inline-end': transformSide['inline-end'], 'margin-inline-start': transformSide['inline-start'], 'margin-block': transformSide['block'], 'margin-block-end': transformSide['block-end'], 'margin-block-start': transformSide['block-start'],

// Flow-relative Offsets
'inset': transformInset, 'inset-inline': transformSide['inline'], 'inset-inline-end': transformSide['inline-end'], 'inset-inline-start': transformSide['inline-start'], 'inset-block': transformSide['block'], 'inset-block-end': transformSide['block-end'], 'inset-block-start': transformSide['block-start'],

// Flow-relative Padding
'padding': transformDirectionalShorthands, 'padding-inline': transformSide['inline'], 'padding-inline-end': transformSide['inline-end'], 'padding-inline-start': transformSide['inline-start'], 'padding-block': transformSide['block'], 'padding-block-end': transformSide['block-end'], 'padding-block-start': transformSide['block-start'],

// Flow-relative Borders
'border-block': transformBorder['border-block'], 'border-block-color': transformBorder['border-block'], 'border-block-style': transformBorder['border-block'], 'border-block-width': transformBorder['border-block'],
'border-block-end': transformBorder['border-block-end'], 'border-block-end-color': transformBorder['border-block-end'], 'border-block-end-style': transformBorder['border-block-end'], 'border-block-end-width': transformBorder['border-block-end'],
'border-block-start': transformBorder['border-block-start'], 'border-block-start-color': transformBorder['border-block-start'], 'border-block-start-style': transformBorder['border-block-start'], 'border-block-start-width': transformBorder['border-block-start'],
'border-inline': transformBorder['border-inline'], 'border-inline-color': transformBorder['border-inline'], 'border-inline-style': transformBorder['border-inline'], 'border-inline-width': transformBorder['border-inline'],
'border-inline-end': transformBorder['border-inline-end'], 'border-inline-end-color': transformBorder['border-inline-end'], 'border-inline-end-style': transformBorder['border-inline-end'], 'border-inline-end-width': transformBorder['border-inline-end'],
'border-inline-start': transformBorder['border-inline-start'], 'border-inline-start-color': transformBorder['border-inline-start'], 'border-inline-start-style': transformBorder['border-inline-start'], 'border-inline-start-width': transformBorder['border-inline-start'],

// Flow-relative Corner Rounding
'border-end-end-radius': transformBorderRadius, 'border-end-start-radius': transformBorderRadius, 'border-start-end-radius': transformBorderRadius, 'border-start-start-radius': transformBorderRadius,

// Four-Directional Shorthand Border Properties
'border-color': transformDirectionalShorthands, 'border-style': transformDirectionalShorthands, 'border-width': transformDirectionalShorthands,

// Transition helpers
'transition': transformTransition, 'transition-property': transformTransition
};

const transformsRegExp = new RegExp(`^(${Object.keys(transforms).join('|')})$`, 'i');

// properties whose values will not be split
const unsplitPropRegExp = /^(border-block|border-block-end|border-block-start|border-inline|border-inline-end|border-inline-start)$/i;

// plugin
function postcssLogicalProperties(opts) {
opts = Object(opts);
Expand All @@ -65,19 +21,112 @@ function postcssLogicalProperties(opts) {
: 'ltr'
: false;

const makeTransform = (transform) => {
return (decl) => {
const parent = decl.parent;
const values = splitBySpace(decl.value, true);
transform(decl, values, dir, preserve);
if (!parent.nodes.length) {
parent.remove();
}
}
}

const makeTransformWithoutSplittingValues = (transform) => {
return (decl) => {
const parent = decl.parent;
const values = [decl.value];
transform(decl, values, dir, preserve);
if (!parent.nodes.length) {
parent.remove();
}
}
}

return {
postcssPlugin: 'postcss-logical-properties',
Declaration: (decl) => {
if (transformsRegExp.test(decl.prop)) {
const parent = decl.parent;
const values = unsplitPropRegExp.test(decl.prop) ? [decl.value] : splitBySpace(decl.value, true);
const prop = decl.prop.toLowerCase();

transforms[prop](decl, values, dir, preserve);
if (!parent.nodes.length) {
parent.remove();
}
}
Declaration: {
// Flow-Relative Values
'clear': makeTransform(transformFloat),
'float': makeTransform(transformFloat),
'resize': makeTransform(transformResize),
'text-align': makeTransform(transformTextAlign),

// Logical Height and Logical Width
'block-size': makeTransform(transformSize),
'max-block-size': makeTransform(transformSize),
'min-block-size': makeTransform(transformSize),
'inline-size': makeTransform(transformSize),
'max-inline-size': makeTransform(transformSize),
'min-inline-size': makeTransform(transformSize),

// Flow-relative Margins
'margin': makeTransform(transformDirectionalShorthands),
'margin-inline': makeTransform(transformSide['inline']),
'margin-inline-end': makeTransform(transformSide['inline-end']),
'margin-inline-start': makeTransform(transformSide['inline-start']),
'margin-block': makeTransform(transformSide['block']),
'margin-block-end': makeTransform(transformSide['block-end']),
'margin-block-start': makeTransform(transformSide['block-start']),

// Flow-relative Offsets
'inset': makeTransform(transformInset),
'inset-inline': makeTransform(transformSide['inline']),
'inset-inline-end': makeTransform(transformSide['inline-end']),
'inset-inline-start': makeTransform(transformSide['inline-start']),
'inset-block': makeTransform(transformSide['block']),
'inset-block-end': makeTransform(transformSide['block-end']),
'inset-block-start': makeTransform(transformSide['block-start']),

// Flow-relative Padding
'padding': makeTransform(transformDirectionalShorthands),
'padding-inline': makeTransform(transformSide['inline']),
'padding-inline-end': makeTransform(transformSide['inline-end']),
'padding-inline-start': makeTransform(transformSide['inline-start']),
'padding-block': makeTransform(transformSide['block']),
'padding-block-end': makeTransform(transformSide['block-end']),
'padding-block-start': makeTransform(transformSide['block-start']),

// Flow-relative Borders
'border-block': makeTransformWithoutSplittingValues(transformBorder['border-block']),
'border-block-color': makeTransform(transformBorder['border-block']),
'border-block-style': makeTransform(transformBorder['border-block']),
'border-block-width': makeTransform(transformBorder['border-block']),
'border-block-end': makeTransformWithoutSplittingValues(transformBorder['border-block-end']),
'border-block-end-color': makeTransform(transformBorder['border-block-end']),
'border-block-end-style': makeTransform(transformBorder['border-block-end']),
'border-block-end-width': makeTransform(transformBorder['border-block-end']),
'border-block-start': makeTransformWithoutSplittingValues(transformBorder['border-block-start']),
'border-block-start-color': makeTransform(transformBorder['border-block-start']),
'border-block-start-style': makeTransform(transformBorder['border-block-start']),
'border-block-start-width': makeTransform(transformBorder['border-block-start']),
'border-inline': makeTransformWithoutSplittingValues(transformBorder['border-inline']),
'border-inline-color': makeTransform(transformBorder['border-inline']),
'border-inline-style': makeTransform(transformBorder['border-inline']),
'border-inline-width': makeTransform(transformBorder['border-inline']),
'border-inline-end': makeTransformWithoutSplittingValues(transformBorder['border-inline-end']),
'border-inline-end-color': makeTransform(transformBorder['border-inline-end']),
'border-inline-end-style': makeTransform(transformBorder['border-inline-end']),
'border-inline-end-width': makeTransform(transformBorder['border-inline-end']),
'border-inline-start': makeTransformWithoutSplittingValues(transformBorder['border-inline-start']),
'border-inline-start-color': makeTransform(transformBorder['border-inline-start']),
'border-inline-start-style': makeTransform(transformBorder['border-inline-start']),
'border-inline-start-width': makeTransform(transformBorder['border-inline-start']),

// Flow-relative Corner Rounding
'border-end-end-radius': makeTransform(transformBorderRadius),
'border-end-start-radius': makeTransform(transformBorderRadius),
'border-start-end-radius': makeTransform(transformBorderRadius),
'border-start-start-radius': makeTransform(transformBorderRadius),

// Four-Directional Shorthand Border Properties
'border-color': makeTransform(transformDirectionalShorthands),
'border-style': makeTransform(transformDirectionalShorthands),
'border-width': makeTransform(transformDirectionalShorthands),

// Transition helpers
'transition': makeTransform(transformTransition),
'transition-property': makeTransform(transformTransition)
}
};
}
Expand Down

0 comments on commit 7438fc0

Please sign in to comment.