Skip to content

Commit 33d37dc

Browse files
yet3yet3
committed
feat: add negative offsets
1 parent 91701f5 commit 33d37dc

File tree

7 files changed

+49
-21
lines changed

7 files changed

+49
-21
lines changed

‎example/src/routes/+page.svelte‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,23 @@
1616
}
1717
];
1818
19+
const OFFSETS_CONFIGS: IPatternConfig[] = [
20+
{
21+
name: 'bg-pattern-offset-x',
22+
options: [
23+
{ name: '-2', description: 'Offset x' },
24+
{ name: '-[321px]', description: 'Custom offset x' }
25+
]
26+
},
27+
{
28+
name: 'bg-pattern-offset-y',
29+
options: [
30+
{ name: '-2', description: 'Offset x' },
31+
{ name: '-[321px]', description: 'Custom offset x' }
32+
]
33+
}
34+
];
35+
1936
const DOT_CONFIGS: IPatternConfig[] = [
2037
{
2138
name: 'bg-pattern-dot',
@@ -64,51 +81,51 @@
6481
{
6582
id: 'x-lines',
6683
name: 'Horizontal lines',
67-
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
84+
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
6885
class: 'bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-20'
6986
},
7087
{
7188
id: 'y-lines',
7289
name: 'Vertical lines',
73-
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
90+
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
7491
class: 'bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32'
7592
},
7693
{
7794
id: 'grid',
7895
name: 'Grid',
79-
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
96+
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
8097
class: 'bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32'
8198
},
8299
{
83100
id: 'checkers',
84101
name: 'Checkers',
85-
configClasses: SQUARE_CONFIGS,
102+
configClasses: [...SQUARE_CONFIGS, ...OFFSETS_CONFIGS],
86103
class: 'bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32'
87104
},
88105
{
89106
id: 'hatching',
90107
name: 'Hatching',
91-
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS],
108+
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS, ...OFFSETS_CONFIGS],
92109
class:
93110
'bg-blue-500 bg-pattern-hatching bg-pattern-line-0.5 bg-pattern-spacing-16 bg-pattern-hatching-left-to-right'
94111
},
95112
{
96113
id: 'cross-hatching',
97114
name: 'Cross-Hatching',
98-
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS],
115+
configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS, ...OFFSETS_CONFIGS],
99116
class: 'bg-blue-500 bg-pattern-cross-hatching bg-pattern-line-0.5 bg-pattern-spacing-16'
100117
},
101118
{
102119
id: 'polka-dot',
103120
name: 'Polka dot',
104-
configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS],
121+
configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
105122
class:
106123
'bg-blue-500 bg-pattern-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32'
107124
},
108125
{
109126
id: 'hexagonal-polka-dot',
110127
name: 'Hexagonal polka dot',
111-
configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS],
128+
configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
112129
class:
113130
'bg-blue-500 bg-pattern-hex-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32'
114131
}

‎src/lib/offsets.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@ export const generateOffsets = (
1616
styles[`.${api.e(`${opts.prefix}pattern-offset-y-${key}`)}`] = {
1717
"--tw-offset-y": offset,
1818
} as unknown as CSSRuleObject;
19+
20+
styles[`.${api.e(`-${opts.prefix}pattern-offset-x-${key}`)}`] = {
21+
"--tw-offset-x": `-${offset}`,
22+
} as unknown as CSSRuleObject;
23+
styles[`.${api.e(`-${opts.prefix}pattern-offset-y-${key}`)}`] = {
24+
"--tw-offset-y": `-${offset}`,
25+
} as unknown as CSSRuleObject;
1926
}
2027
}
2128
return styles as CSSRuleObject;

‎src/patterns/grid.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export const generateGridClass = (
2323
[`.${className}`]: {
2424
"--tw-line-size": opts.lineSize.toString(),
2525
"--tw-spacing": opts.spacing.toString(),
26-
"--tw-offset-x": `${opts.offsetX * -1}px`,
27-
"--tw-offset-y": `${opts.offsetY * -1}px`,
26+
"--tw-offset-x": `${opts.offsetX}px`,
27+
"--tw-offset-y": `${opts.offsetY}px`,
2828
"--tw-line-color": opts.lineColor,
2929

3030
"--tw-unit": "calc(var(--tw-line-size) + var(--tw-spacing))",

‎src/patterns/hatching.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ export const generateHatchingClass = (
6767
[`.${className}`]: {
6868
"--tw-line-size": opts.lineSize.toString(),
6969
"--tw-spacing": opts.spacing.toString(),
70-
"--tw-offset-x": `${opts.offsetX * -1}px`,
71-
"--tw-offset-y": `${opts.offsetY * -1}px`,
70+
"--tw-offset-x": `${opts.offsetX}px`,
71+
"--tw-offset-y": `${opts.offsetY}px`,
7272
"--tw-hatching-angle": `${opts.isRightLeaning ? -45 : 45}deg`,
7373
"--tw-line-color": opts.lineColor,
7474

‎src/patterns/lines.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ export const generateLinesClass = (
2929
[`.${className}`]: {
3030
"--tw-line-size": opts.lineSize.toString(),
3131
"--tw-spacing": opts.spacing.toString(),
32-
"--tw-offset-x": `${opts.offsetX * -1}px`,
33-
"--tw-offset-y": `${opts.offsetY * -1}px`,
32+
"--tw-offset-x": `${opts.offsetX}px`,
33+
"--tw-offset-y": `${opts.offsetY}px`,
3434
"--tw-line-color": opts.lineColor,
3535

3636
"--tw-unit": "calc(var(--tw-line-size) + var(--tw-spacing))",

‎src/patterns/polkaDot.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export const generatePolkaDotClass = (
5252
[`.${className}`]: {
5353
"--tw-dot-size": opts.dotSize.toString(),
5454
"--tw-spacing": opts.spacing.toString(),
55-
"--tw-offset-x": `${opts.offsetX * -1}px`,
56-
"--tw-offset-y": `${opts.offsetY * -1}px`,
55+
"--tw-offset-x": `${opts.offsetX}px`,
56+
"--tw-offset-y": `${opts.offsetY}px`,
5757
"--tw-dot-color": opts.dotColor,
5858

5959
...varsCode,

‎tests/config.test.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
LINE_WIDTHS,
66
OFFSETS,
77
SPACING,
8-
SQUARE_SIZES,
8+
SQUARE_SIZES,
99
} from "../src/consts";
1010
import { css, expectCssToBe, generateTwCss } from "./utils";
1111

@@ -112,14 +112,20 @@ describe("offsets", () => {
112112
const classes: string[] = [];
113113
for (const offset of OFFSETS) {
114114
classes.push(
115-
`${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} ${DEFAULT_OPTS.prefix}pattern-offset-y-${offset}`,
115+
`${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} ${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} -${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} -${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} `,
116116
);
117117
expected.push(
118118
css`.${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} {
119119
--tw-offset-x: ${offset}px
120120
}
121121
.${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} {
122122
--tw-offset-y: ${offset}px
123+
}
124+
.-${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} {
125+
--tw-offset-x: -${offset}px
126+
}
127+
.-${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} {
128+
--tw-offset-y: -${offset}px
123129
}`,
124130
);
125131
}
@@ -136,8 +142,7 @@ describe("offsets", () => {
136142
}
137143
.${DEFAULT_OPTS.prefix}pattern-offset-y-[321px] {
138144
--tw-offset-y: 321px
139-
}
140-
`,
145+
}`,
141146
);
142147
});
143148
});
@@ -171,7 +176,6 @@ describe("line colors", () => {
171176
});
172177
});
173178

174-
175179
describe("dot colors", () => {
176180
test("custom color", async () => {
177181
expectCssToBe(

0 commit comments

Comments
 (0)