Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Added missing rules for static border colors #123

Merged
merged 2 commits into from Jun 14, 2023
Merged

fix: Added missing rules for static border colors #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97e913f
fix: Add classes for static border colors (border-transparent|inherit…
magnuh Jun 14, 2023
8b183ad
chore: fixed merge issue
magnuh Jun 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 9 additions & 8 deletions src/_rules/border.js
View file
Open in desktop
Expand Up @@ -17,16 +17,16 @@ const borderStyles = [

export const borders = [
[/^border$/, handlerBorder],
[/^border-transparent$/, () => ({ 'border-color': 'transparent' })],
[/^border-inherit$/, () => ({ 'border-color': 'inherit' })],
[/^border-current$/, () => ({ 'border-color': 'currentColor' })],
[/^border()-(\d+)$/, handlerBorder, { autocomplete: "(border)-<directions>" }],
[/^border-([xy])$/, handlerBorder],
[/^border-([xy])-(\d+)$/, handlerBorder],
[/^border-([rltb])$/, handlerBorder],
[/^border-([rltb])-(\d+)$/, handlerBorder],
[/^border-([lrtbxy])$/, handlerBorder],
[/^border-([lrtbxy])-(\d+)$/, handlerBorder],
[/^border()-(.+)$/, handlerBorderStyle, { autocomplete: "(border)-style" }],
[/^border-([xy])-(.+)$/, handlerBorderStyle],
[/^border-([rltb])-(.+)$/, handlerBorderStyle],
[/^border-([lrtbxy])-(.+)$/, handlerBorderStyle],
[
/^border-([rltb])?-?\[(\d+)\]$/,
/^border-([lrtb])?-?\[(\d+)\]$/,
handlerArbitraryBorderSize,
{
autocomplete: [
Expand Down Expand Up @@ -82,7 +82,7 @@ function handleDivideBorderSizes(direction, width, reverse, theme) {
}
return `border${i}-width:calc(${borderWidth} * calc(1 - var(--w-divide-${direction}-reverse)))`;
});
};
}
}

function handlerDivideBorder([_selector, direction = "", width, reverse], { theme }) {
Expand All @@ -93,3 +93,4 @@ function handlerDivideBorder([_selector, direction = "", width, reverse], { them
return `.${selector}>*+*{${defaultReverse};${sizes}}`;
}
}

7 changes: 7 additions & 0 deletions test/__snapshots__/border.js.snap
View file
Open in desktop
Expand Up @@ -60,6 +60,13 @@ exports[`border > supports setting arbitrary border width 1`] = `
.border-t-\\\\[7\\\\]{border-top-width:7px;}"
`;

exports[`border > supports setting border color 1`] = `
"/* layer: default */
.border-transparent{border-color:transparent;}
.border-inherit{border-color:inherit;}
.border-current{border-color:currentColor;}"
`;

exports[`border > supports setting border style 1`] = `
"/* layer: default */
.border-dashed{border-style:dashed;}
Expand Down
13 changes: 13 additions & 0 deletions test/border.js
View file
Open in desktop
Expand Up @@ -50,6 +50,18 @@ describe("border", () => {
expect(css).toMatchSnapshot();
});

test("supports setting border color", async (t) => {
const classes = [
"border-transparent",
"border-inherit",
"border-current",
];

const { css } = await t.uno.generate(classes);

expect(css).toMatchSnapshot();
});

test("right, left, top bottom", async (t) => {
const right = [
"border-r",
Expand Down Expand Up @@ -127,3 +139,4 @@ describe("rounded", () => {
expect(css).toMatchSnapshot();
});
});