diff --git a/README.md b/README.md index a4c71f5..eeaadbe 100644 --- a/README.md +++ b/README.md @@ -16,8 +16,12 @@ See a [live demo](https://yet3.github.io/tailwindcss-bg-patterns/) - [Installation](#installation) - [Config](#config) - [Example usage](#grid) +- [Pattern offsets](#pattern-offsets) - [Patterns](#patterns) + - [Horizontal lines](#horizontal-lines) + - [Vertical lines](#vertical-lines) - [Grid](#grid) + - [Checkers](#checkers) - [Hatching](#hatching) - [Cross-Hatching](#cross-hatching) - [Polka dot](#polka-dot) @@ -77,9 +81,40 @@ this code will result in: Grid pattern +## Pattern offsets +Each pattern can be offset using ``bg-pattern-offset-x`` and ``bg-pattern-offset-y`` + +Offset also accept arbritary values ``bg-pattern-offset-x-[321px]`` as well as negative values ``-bg-pattern-offset-y-24`` + ## Patterns + +### Horizontal lines + +See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#x-lines) + +```html +
+``` + +Horizontal lines + +### Vertical lines + +See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#y-lines) + +```html +
+``` + +Vertical lines + ### Grid + See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid) ```html @@ -90,7 +125,20 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid) Grid pattern +### Checkers + +See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#checkers) + +```html +
+``` + +Checkers pattern + ### Hatching + See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching) ```html @@ -102,6 +150,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching) Hatching pattern ### Cross-Hatching + See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#cross-hatching) ```html @@ -113,6 +162,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#cross-hatching Cross-Hatching pattern ### Polka dot + See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#polka-dot) ```html @@ -124,6 +174,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#polka-dot) Polka dot pattern ### Hexagonal polka dot + See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polka-dot) ```html @@ -137,9 +188,6 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polk ## Todo - [ ] Add utility to adjust pattern opacity -- [ ] Add pattern: horizontal-lines (x-lines?) -- [ ] Add pattern: vertical-lines (y-lines?) -- [ ] Add pattern: checkers - [ ] Add pattern: honeycomb - [ ] Add pattern: bricks diff --git a/example/src/routes/+page.svelte b/example/src/routes/+page.svelte index 950cfc1..683d92e 100644 --- a/example/src/routes/+page.svelte +++ b/example/src/routes/+page.svelte @@ -16,6 +16,23 @@ } ]; + const OFFSETS_CONFIGS: IPatternConfig[] = [ + { + name: 'bg-pattern-offset-x', + options: [ + { name: '-2', description: 'Offset x' }, + { name: '-[321px]', description: 'Custom offset x' } + ] + }, + { + name: 'bg-pattern-offset-y', + options: [ + { name: '-2', description: 'Offset x' }, + { name: '-[321px]', description: 'Custom offset x' } + ] + } + ]; + const DOT_CONFIGS: IPatternConfig[] = [ { name: 'bg-pattern-dot', @@ -28,6 +45,18 @@ } ]; + const SQUARE_CONFIGS: IPatternConfig[] = [ + { + name: 'bg-pattern-square', + options: [ + { name: '-2', description: 'Squares width' }, + { name: '-[321]', description: 'Custom squares width (in px without unit)' }, + { name: '-red-500', description: 'Squares colors' }, + { name: '-[#a8a8a8]', description: 'Custom squares color' } + ] + } + ]; + const SPACING_CONFIGS: IPatternConfig[] = [ { name: 'bg-pattern-spacing', @@ -49,36 +78,54 @@ ]; const PATTERNS: IPattern[] = [ + { + id: 'x-lines', + name: 'Horizontal lines', + configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS], + class: 'bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-20' + }, + { + id: 'y-lines', + name: 'Vertical lines', + configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS], + class: 'bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32' + }, { id: 'grid', name: 'Grid', - configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS], + configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS], class: 'bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32' }, + { + id: 'checkers', + name: 'Checkers', + configClasses: [...SQUARE_CONFIGS, ...OFFSETS_CONFIGS], + class: 'bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32' + }, { id: 'hatching', name: 'Hatching', - configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS], + configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS, ...OFFSETS_CONFIGS], class: 'bg-blue-500 bg-pattern-hatching bg-pattern-line-0.5 bg-pattern-spacing-16 bg-pattern-hatching-left-to-right' }, { id: 'cross-hatching', name: 'Cross-Hatching', - configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS], + configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS, ...OFFSETS_CONFIGS], class: 'bg-blue-500 bg-pattern-cross-hatching bg-pattern-line-0.5 bg-pattern-spacing-16' }, { id: 'polka-dot', name: 'Polka dot', - configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS], + configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS], class: 'bg-blue-500 bg-pattern-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32' }, { id: 'hexagonal-polka-dot', name: 'Hexagonal polka dot', - configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS], + configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS], class: 'bg-blue-500 bg-pattern-hex-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32' } diff --git a/package.json b/package.json index 4ee9296..51690f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yet3/tailwindcss-bg-patterns", - "version": "2.1.0", + "version": "2.2.0", "author": "yet3", "description": "TailwindCSS plugin that css background patterns", "license": "MIT", diff --git a/public/checkers.png b/public/checkers.png new file mode 100644 index 0000000..981c2c3 Binary files /dev/null and b/public/checkers.png differ diff --git a/public/x-lines.png b/public/x-lines.png new file mode 100644 index 0000000..d9d6b6d Binary files /dev/null and b/public/x-lines.png differ diff --git a/public/y-lines.png b/public/y-lines.png new file mode 100644 index 0000000..fccc805 Binary files /dev/null and b/public/y-lines.png differ diff --git a/src/consts.ts b/src/consts.ts index 6cdceb5..e6774d8 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -4,6 +4,7 @@ export const LINE_WIDTHS = [ 0.5, 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 14, 15, 16, ]; export const DOT_SIZES: number[] = [...Array(96)].map((_, i) => i + 1); +export const SQUARE_SIZES: number[] = [...Array(96)].map((_, i) => i + 1); export const SPACING: number[] = [...Array(128 + 1)].map((_, i) => i); export const OFFSETS: number[] = [...Array(128 + 17)].map((_, i) => i); diff --git a/src/index.ts b/src/index.ts index 7458bbe..a2e929a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,11 @@ import plugin from "tailwindcss/plugin"; -import { DOT_SIZES, LINE_WIDTHS, OFFSETS, SPACING } from "./consts"; +import { DOT_SIZES, LINE_WIDTHS, OFFSETS, SPACING, SQUARE_SIZES } from "./consts"; import { arrToTwConfig } from "./lib/arrToTwConfig"; +import { + generateDotColors, + generateDotSize, + matchDotSizeAndColors, +} from "./lib/dot"; import { generateLineColors, generateLineWidths, @@ -9,14 +14,16 @@ import { import { generateOffsets, matchOffsets } from "./lib/offsets"; import { resolveOptions } from "./lib/resolveOptions"; import { generateSpacing, matchSpacing } from "./lib/spacing"; +import { generateCheckersClass } from "./patterns/checkers"; import { generateGridClass } from "./patterns/grid"; import { generateHatchingClass, genreateHatchingDirection, } from "./patterns/hatching"; +import { generateLinesClass } from "./patterns/lines"; import { generatePolkaDotClass } from "./patterns/polkaDot"; import type { IOptions } from "./types"; -import { generateDotColors, generateDotSize, matchDotSizeAndColors } from "./lib/dot"; +import { generateSquareColors, generateSuqareSize, matchSquareSizeAndColors } from "./lib/square"; export default plugin.withOptions( (options) => (api) => { @@ -36,11 +43,22 @@ export default plugin.withOptions( isHexagonal: true, }), + generateLinesClass(e(`${opts.prefix}pattern-x-lines`), { + angle: 0, + }), + generateLinesClass(e(`${opts.prefix}pattern-y-lines`), { + angle: 90, + }), + + generateCheckersClass(e(`${opts.prefix}pattern-checkers`)), + // Configs generateLineWidths(api, opts), generateLineColors(api, opts), generateDotSize(api, opts), generateDotColors(api, opts), + generateSuqareSize(api, opts), + generateSquareColors(api, opts), generateSpacing(api, opts), genreateHatchingDirection(api, opts), generateOffsets(api, opts), @@ -50,6 +68,7 @@ export default plugin.withOptions( ...matchSpacing(api, opts), ...matchLineWidthsAndColors(api, opts), ...matchDotSizeAndColors(api, opts), + ...matchSquareSizeAndColors(api, opts), ...matchOffsets(api, opts), }); }, @@ -57,6 +76,7 @@ export default plugin.withOptions( theme: { bgPatternLineWidth: arrToTwConfig(LINE_WIDTHS), bgPatternDotSize: arrToTwConfig(DOT_SIZES), + bgPatternSquareSize: arrToTwConfig(SQUARE_SIZES), bgPatternSpacing: arrToTwConfig(SPACING), bgPatternOffsets: arrToTwConfig(OFFSETS, "px"), }, diff --git a/src/lib/offsets.ts b/src/lib/offsets.ts index 13f1201..f989e6b 100644 --- a/src/lib/offsets.ts +++ b/src/lib/offsets.ts @@ -16,6 +16,13 @@ export const generateOffsets = ( styles[`.${api.e(`${opts.prefix}pattern-offset-y-${key}`)}`] = { "--tw-offset-y": offset, } as unknown as CSSRuleObject; + + styles[`.${api.e(`-${opts.prefix}pattern-offset-x-${key}`)}`] = { + "--tw-offset-x": `-${offset}`, + } as unknown as CSSRuleObject; + styles[`.${api.e(`-${opts.prefix}pattern-offset-y-${key}`)}`] = { + "--tw-offset-y": `-${offset}`, + } as unknown as CSSRuleObject; } } return styles as CSSRuleObject; diff --git a/src/lib/square.ts b/src/lib/square.ts new file mode 100644 index 0000000..b9474f5 --- /dev/null +++ b/src/lib/square.ts @@ -0,0 +1,62 @@ +import type { CSSRuleObject, PluginAPI } from "tailwindcss/types/config"; +import type { IOptions } from "../types"; + +export const generateSquareColors = ( + api: PluginAPI, + opts: IOptions, +): CSSRuleObject => { + const colors = api.theme("backgroundColor"); + const styles: Record = {}; + + for (const colorKey in colors) { + const color = colors[colorKey] as string | Record; + + if (typeof color === "string") { + styles[`.${api.e(`${opts.prefix}pattern-square-${colorKey}`)}`] = { + "--tw-square-color": color, + } as unknown as CSSRuleObject; + } else { + for (const variant in color) { + styles[ + `.${api.e(`${opts.prefix}pattern-square-${colorKey}-${variant}`)}` + ] = { + "--tw-square-color": color[variant], + } as unknown as CSSRuleObject; + } + } + } + + return styles as CSSRuleObject; +}; + +export const generateSuqareSize = ( + api: PluginAPI, + opts: IOptions, +): CSSRuleObject => { + const themeSquareSizes = api.theme("bgPatternSquareSize"); + const styles: Record = {}; + if (themeSquareSizes) { + for (const key in themeSquareSizes) { + const width = themeSquareSizes[key] as number; + styles[`.${api.e(`${opts.prefix}pattern-square-${key}`)}`] = { + "--tw-square-size": `${width} /* px */`, + }; + } + } + return styles as CSSRuleObject; +}; + +export const matchSquareSizeAndColors = (api: PluginAPI, opts: IOptions) => ({ + [api.e(`${opts.prefix}pattern-square`)]: (value: string) => { + const parsed = Number(value); + if (!Number.isNaN(parsed)) { + return { + "--tw-square-size": `${value} /* px */`, + } as unknown as CSSRuleObject; + } + + return { + "--tw-square-color": value, + } as unknown as CSSRuleObject; + }, +}); diff --git a/src/patterns/checkers.ts b/src/patterns/checkers.ts new file mode 100644 index 0000000..f739a49 --- /dev/null +++ b/src/patterns/checkers.ts @@ -0,0 +1,40 @@ +import type { CSSRuleObject } from "tailwindcss/types/config"; + +interface IOpts { + squareSize: number; + offsetX: number; + offsetY: number; + + squareColor: string; +} + +export const generateCheckersClass = ( + className: string, + opts: IOpts = { + squareColor: "#ffffff", + squareSize: 32, + offsetX: 0, + offsetY: 0, + }, +): CSSRuleObject => { + return { + [`.${className}`]: { + "--tw-square-size": opts.squareSize.toString(), + "--tw-offset-x": `${opts.offsetX}px`, + "--tw-offset-y": `${opts.offsetY}px`, + "--tw-square-color": opts.squareColor, + + "--tw-unit": "calc(var(--tw-square-size) * 1px)", + "--tw-total-size": "calc(var(--tw-unit) * 2)", + backgroundImage: ` + linear-gradient(45deg, var(--tw-square-color) 25%, transparent 25%), + linear-gradient(-45deg, var(--tw-square-color) 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, var(--tw-square-color) 75%), + linear-gradient(-45deg, transparent 75%, var(--tw-square-color) 75%) + `, + backgroundSize: "var(--tw-total-size) var(--tw-total-size)", + backgroundPosition: + "var(--tw-offset-x) var(--tw-offset-y), var(--tw-offset-x) calc(var(--tw-offset-y) + var(--tw-unit)), calc(var(--tw-offset-x) + var(--tw-unit)) calc(var(--tw-offset-y) - var(--tw-unit)), calc(var(--tw-offset-x) - var(--tw-unit)) var(--tw-offset-y)", + } as unknown as CSSRuleObject, + }; +}; diff --git a/src/patterns/grid.ts b/src/patterns/grid.ts index be6a01d..24034a9 100644 --- a/src/patterns/grid.ts +++ b/src/patterns/grid.ts @@ -23,8 +23,8 @@ export const generateGridClass = ( [`.${className}`]: { "--tw-line-size": opts.lineSize.toString(), "--tw-spacing": opts.spacing.toString(), - "--tw-offset-x": `${opts.offsetX * -1}px`, - "--tw-offset-y": `${opts.offsetY * -1}px`, + "--tw-offset-x": `${opts.offsetX}px`, + "--tw-offset-y": `${opts.offsetY}px`, "--tw-line-color": opts.lineColor, "--tw-unit": "calc(var(--tw-line-size) + var(--tw-spacing))", diff --git a/src/patterns/hatching.ts b/src/patterns/hatching.ts index 22ff01a..68b6085 100644 --- a/src/patterns/hatching.ts +++ b/src/patterns/hatching.ts @@ -67,8 +67,8 @@ export const generateHatchingClass = ( [`.${className}`]: { "--tw-line-size": opts.lineSize.toString(), "--tw-spacing": opts.spacing.toString(), - "--tw-offset-x": `${opts.offsetX * -1}px`, - "--tw-offset-y": `${opts.offsetY * -1}px`, + "--tw-offset-x": `${opts.offsetX}px`, + "--tw-offset-y": `${opts.offsetY}px`, "--tw-hatching-angle": `${opts.isRightLeaning ? -45 : 45}deg`, "--tw-line-color": opts.lineColor, diff --git a/src/patterns/lines.ts b/src/patterns/lines.ts new file mode 100644 index 0000000..8c79e41 --- /dev/null +++ b/src/patterns/lines.ts @@ -0,0 +1,53 @@ +import type { CSSRuleObject } from "tailwindcss/types/config"; + +interface IOpts { + lineSize: number; + spacing: number; + offsetX: number; + offsetY: number; + + lineColor: string; + + angle: number; +} + +export const generateLinesClass = ( + className: string, + _opts?: Partial, +): CSSRuleObject => { + const opts: IOpts = { + angle: 0, + lineColor: "#ffffff", + lineSize: 1, + spacing: 24, + offsetX: 0, + offsetY: 0, + ..._opts, + }; + + return { + [`.${className}`]: { + "--tw-line-size": opts.lineSize.toString(), + "--tw-spacing": opts.spacing.toString(), + "--tw-offset-x": `${opts.offsetX}px`, + "--tw-offset-y": `${opts.offsetY}px`, + "--tw-line-color": opts.lineColor, + + "--tw-unit": "calc(var(--tw-line-size) + var(--tw-spacing))", + "--tw-line-stop": + "calc((var(--tw-line-size) / var(--tw-unit) * 100%) / 2)", + "--tw-line-start-stop": "calc(50% - var(--tw-line-stop))", + "--tw-line-end-stop": "calc(50% + var(--tw-line-stop))", + backgroundImage: `linear-gradient( + ${opts.angle}deg, + transparent var(--tw-line-start-stop), + var(--tw-line-color) var(--tw-line-start-stop), + var(--tw-line-color) var(--tw-line-end-stop), + transparent var(--tw-line-end-stop), + transparent 100% + )`, + backgroundSize: "calc(var(--tw-unit) * 1px) calc(var(--tw-unit) * 1px)", + backgroundPosition: "var(--tw-offset-x) var(--tw-offset-y)", + } as unknown as CSSRuleObject, + }; +}; diff --git a/src/patterns/polkaDot.ts b/src/patterns/polkaDot.ts index f255033..9c69c55 100644 --- a/src/patterns/polkaDot.ts +++ b/src/patterns/polkaDot.ts @@ -52,8 +52,8 @@ export const generatePolkaDotClass = ( [`.${className}`]: { "--tw-dot-size": opts.dotSize.toString(), "--tw-spacing": opts.spacing.toString(), - "--tw-offset-x": `${opts.offsetX * -1}px`, - "--tw-offset-y": `${opts.offsetY * -1}px`, + "--tw-offset-x": `${opts.offsetX}px`, + "--tw-offset-y": `${opts.offsetY}px`, "--tw-dot-color": opts.dotColor, ...varsCode, diff --git a/tests/config.test.ts b/tests/config.test.ts index fed5af1..85c8330 100644 --- a/tests/config.test.ts +++ b/tests/config.test.ts @@ -5,6 +5,7 @@ import { LINE_WIDTHS, OFFSETS, SPACING, + SQUARE_SIZES, } from "../src/consts"; import { css, expectCssToBe, generateTwCss } from "./utils"; @@ -55,6 +56,31 @@ describe("dot sizes", () => { }); }); +describe("square sizes", () => { + test(`square sizes ${SQUARE_SIZES[0]}-${SQUARE_SIZES[SQUARE_SIZES.length - 1]}`, async () => { + const expected: string[] = []; + const classes: string[] = []; + for (const value of SQUARE_SIZES) { + classes.push(`${DEFAULT_OPTS.prefix}pattern-square-${value}`); + expected.push( + css`.${DEFAULT_OPTS.prefix}pattern-square-${value} { + --tw-square-size: ${value} /* px */ + }`, + ); + } + expectCssToBe(await generateTwCss(classes.join(" ")), expected.join("")); + }); + + test("custom square size", async () => { + expectCssToBe( + await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-[321]`), + css`.${DEFAULT_OPTS.prefix}pattern-square-[321] { + --tw-square-size: 321 /* px */ + }`, + ); + }); +}); + describe("spacing", () => { test(`spacing ${SPACING[0]}-${SPACING[SPACING.length - 1]}`, async () => { const expected: string[] = []; @@ -86,7 +112,7 @@ describe("offsets", () => { const classes: string[] = []; for (const offset of OFFSETS) { classes.push( - `${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} -${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} -${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} `, ); expected.push( css`.${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} { @@ -94,6 +120,12 @@ describe("offsets", () => { } .${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} { --tw-offset-y: ${offset}px + } + .-${DEFAULT_OPTS.prefix}pattern-offset-x-${offset} { + --tw-offset-x: -${offset}px + } + .-${DEFAULT_OPTS.prefix}pattern-offset-y-${offset} { + --tw-offset-y: -${offset}px }`, ); } @@ -110,8 +142,7 @@ describe("offsets", () => { } .${DEFAULT_OPTS.prefix}pattern-offset-y-[321px] { --tw-offset-y: 321px - } - `, + }`, ); }); }); @@ -145,7 +176,6 @@ describe("line colors", () => { }); }); - describe("dot colors", () => { test("custom color", async () => { expectCssToBe( @@ -174,3 +204,32 @@ describe("dot colors", () => { ); }); }); + +describe("square colors", () => { + test("custom color", async () => { + expectCssToBe( + await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-[#f8f8f8]`), + css`.${DEFAULT_OPTS.prefix}pattern-square-[#f8f8f8] { + --tw-square-color: #f8f8f8 + }`, + ); + }); + + test("color with variant", async () => { + expectCssToBe( + await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-red-300`), + css`.${DEFAULT_OPTS.prefix}pattern-square-red-300 { + --tw-square-color: #fca5a5 + }`, + ); + }); + + test("color without variant", async () => { + expectCssToBe( + await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-white`), + css`.${DEFAULT_OPTS.prefix}pattern-square-white { + --tw-square-color: #fff + }`, + ); + }); +}); diff --git a/tests/consts.test.ts b/tests/consts.test.ts index e432ae0..206af97 100644 --- a/tests/consts.test.ts +++ b/tests/consts.test.ts @@ -5,6 +5,7 @@ import { LINE_WIDTHS, OFFSETS, SPACING, + SQUARE_SIZES, } from "../src/consts"; describe("default production values", () => { @@ -23,6 +24,10 @@ describe("default production values", () => { expect(DOT_SIZES).toEqual([...Array(96)].map((_, i) => i + 1)); }); + test("square sizes", () => { + expect(SQUARE_SIZES).toEqual([...Array(96)].map((_, i) => i + 1)); + }); + test("offsets", () => { expect(OFFSETS).toEqual([...Array(128 + 17)].map((_, i) => i)); }); diff --git a/tests/patterns/checkers.test.ts b/tests/patterns/checkers.test.ts new file mode 100644 index 0000000..3d7ca1f --- /dev/null +++ b/tests/patterns/checkers.test.ts @@ -0,0 +1,20 @@ +import { test } from "vitest"; +import { DEFAULT_OPTS } from "../../src/consts"; +import { css, expectCssToBe, generateTwCss } from "../utils"; + +test("checkers pattern", async () => { + expectCssToBe( + await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-checkers`), + css`.${DEFAULT_OPTS.prefix}pattern-checkers { + --tw-square-size: 32; + --tw-offset-x: 0px; + --tw-offset-y: 0px; + --tw-square-color: #ffffff; + --tw-unit: calc(var(--tw-square-size)* 1px); + --tw-total-size: calc(var(--tw-unit)* 2); + background-image: linear-gradient(45deg, var(--tw-square-color) 25%, transparent 25%), linear-gradient(-45deg, var(--tw-square-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--tw-square-color) 75%), linear-gradient(-45deg, transparent 75%, var(--tw-square-color) 75%); + background-size: var(--tw-total-size) var(--tw-total-size); + background-position: var(--tw-offset-x) var(--tw-offset-y), var(--tw-offset-x) calc(var(--tw-offset-y) + var(--tw-unit)), calc(var(--tw-offset-x) + var(--tw-unit)) calc(var(--tw-offset-y) - var(--tw-unit)), calc(var(--tw-offset-x) - var(--tw-unit)) var(--tw-offset-y) + }`, + ); +}); diff --git a/tests/grid.test.ts b/tests/patterns/grid.test.ts similarity index 92% rename from tests/grid.test.ts rename to tests/patterns/grid.test.ts index e4d88c9..1dcfd05 100644 --- a/tests/grid.test.ts +++ b/tests/patterns/grid.test.ts @@ -1,6 +1,6 @@ import { describe, test } from "vitest"; -import { DEFAULT_OPTS } from "../src/consts"; -import { css, expectCssToBe, generateTwCss } from "./utils"; +import { DEFAULT_OPTS } from "../../src/consts"; +import { css, expectCssToBe, generateTwCss } from "../utils"; describe("grid pattern", () => { test("grid pattern", async () => { diff --git a/tests/hatching.test.ts b/tests/patterns/hatching.test.ts similarity index 97% rename from tests/hatching.test.ts rename to tests/patterns/hatching.test.ts index 264fecd..d6961ef 100644 --- a/tests/hatching.test.ts +++ b/tests/patterns/hatching.test.ts @@ -1,6 +1,6 @@ import { describe, test } from "vitest"; -import { DEFAULT_OPTS } from "../src/consts"; -import { css, expectCssToBe, generateTwCss } from "./utils"; +import { DEFAULT_OPTS } from "../../src/consts"; +import { css, expectCssToBe, generateTwCss } from "../utils"; const DEFAULT_HATCHING_CSS = css` .${DEFAULT_OPTS.prefix}pattern-hatching { diff --git a/tests/patterns/lines.test.ts b/tests/patterns/lines.test.ts new file mode 100644 index 0000000..e8210ff --- /dev/null +++ b/tests/patterns/lines.test.ts @@ -0,0 +1,45 @@ +import { describe, test } from "vitest"; +import { DEFAULT_OPTS } from "../../src/consts"; +import { css, expectCssToBe, generateTwCss } from "../utils"; + +describe("lines patterns", () => { + test("horizontal lines pattern", async () => { + expectCssToBe( + await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-x-lines`), + css`.${DEFAULT_OPTS.prefix}pattern-x-lines { + --tw-line-size: 1; + --tw-spacing: 24; + --tw-offset-x: 0px; + --tw-offset-y: 0px; + --tw-line-color: #ffffff; + --tw-unit: calc(var(--tw-line-size) + var(--tw-spacing)); + --tw-line-stop: calc((var(--tw-line-size) / var(--tw-unit)* 100%) / 2); + --tw-line-start-stop: calc(50% - var(--tw-line-stop)); + --tw-line-end-stop: calc(50% + var(--tw-line-stop)); + background-image: linear-gradient(0deg, transparent var(--tw-line-start-stop), var(--tw-line-color) var(--tw-line-start-stop), var(--tw-line-color) var(--tw-line-end-stop), transparent var(--tw-line-end-stop), transparent 100%); + background-size: calc(var(--tw-unit)* 1px) calc(var(--tw-unit)* 1px); + background-position: var(--tw-offset-x) var(--tw-offset-y) + }`, + ); + }); + + test("vertical lines pattern", async () => { + expectCssToBe( + await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-y-lines`), + css`.${DEFAULT_OPTS.prefix}pattern-y-lines { + --tw-line-size: 1; + --tw-spacing: 24; + --tw-offset-x: 0px; + --tw-offset-y: 0px; + --tw-line-color: #ffffff; + --tw-unit: calc(var(--tw-line-size) + var(--tw-spacing)); + --tw-line-stop: calc((var(--tw-line-size) / var(--tw-unit)* 100%) / 2); + --tw-line-start-stop: calc(50% - var(--tw-line-stop)); + --tw-line-end-stop: calc(50% + var(--tw-line-stop)); + background-image: linear-gradient(90deg, transparent var(--tw-line-start-stop), var(--tw-line-color) var(--tw-line-start-stop), var(--tw-line-color) var(--tw-line-end-stop), transparent var(--tw-line-end-stop), transparent 100%); + background-size: calc(var(--tw-unit)* 1px) calc(var(--tw-unit)* 1px); + background-position: var(--tw-offset-x) var(--tw-offset-y) + }`, + ); + }); +}); diff --git a/tests/polkaDot.test.ts b/tests/patterns/polkaDot.test.ts similarity index 94% rename from tests/polkaDot.test.ts rename to tests/patterns/polkaDot.test.ts index de2e367..373ac8b 100644 --- a/tests/polkaDot.test.ts +++ b/tests/patterns/polkaDot.test.ts @@ -1,6 +1,6 @@ import { describe, test } from "vitest"; -import { DEFAULT_OPTS } from "../src/consts"; -import { css, expectCssToBe, generateTwCss } from "./utils"; +import { DEFAULT_OPTS } from "../../src/consts"; +import { css, expectCssToBe, generateTwCss } from "../utils"; describe("polka dot patterns", () => { test("polka dot pattern", async () => {