From 7b115d50be5d35d6019d6eb2fc1116ecaf4bba17 Mon Sep 17 00:00:00 2001 From: Cole Peters Date: Tue, 2 Jul 2024 16:16:50 -0500 Subject: [PATCH] Fix breakpoint issues, test total output --- v7/classes/custom/borders.mjs | 10 +++++----- v7/classes/custom/font-family.mjs | 4 ++-- v7/classes/custom/margin.mjs | 4 ++-- v7/classes/custom/padding.mjs | 2 +- v7/index.mjs | 15 ++++++++------- v7/package.json | 2 +- v7/test/index.test.js | 17 +++++++++++++++++ 7 files changed, 36 insertions(+), 18 deletions(-) create mode 100644 v7/test/index.test.js diff --git a/v7/classes/custom/borders.mjs b/v7/classes/custom/borders.mjs index f2050fe..68fc38a 100644 --- a/v7/classes/custom/borders.mjs +++ b/v7/classes/custom/borders.mjs @@ -15,12 +15,12 @@ export default function borders(state = {}) { const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'none'] borderStyles.forEach(style => { output += '\n' - output += `.border-${style} { border-style: ${style}; }` + output += `.border-${style}${breakpoint} { border-style: ${style}; }` }) directionEntries.forEach(dir => { borderStyles.forEach(style => { output += '\n' - output += `.border-${dir[0]}-${style} { border-${dir[1]}-style: ${style}; }` + output += `.border-${dir[0]}-${style}${breakpoint} { border-${dir[1]}-style: ${style}; }` }) }) @@ -28,11 +28,11 @@ export default function borders(state = {}) { if (widthProperties.length) { widthProperties.forEach((w, i) => { output += '\n' - output += `.border${i} { border-width: var(${w}); }` + output += `.border${i}${breakpoint} { border-width: var(${w}); }` directionEntries.forEach(dir => { output += '\n' - output += `.border-${dir[0]}${i} { border-${dir[1]}-width: var(${w}); }` + output += `.border-${dir[0]}${i}${breakpoint} { border-${dir[1]}-width: var(${w}); }` }) }) } @@ -47,7 +47,7 @@ export default function borders(state = {}) { if (radiusProperties.length) { radiusProperties.forEach((r, i) => { output += '\n' - output += `.radius${i} { border-radius: var(${r}); }` + output += `.radius${i}${breakpoint} { border-radius: var(${r}); }` }) } diff --git a/v7/classes/custom/font-family.mjs b/v7/classes/custom/font-family.mjs index 94fa945..6ed23b4 100644 --- a/v7/classes/custom/font-family.mjs +++ b/v7/classes/custom/font-family.mjs @@ -2,7 +2,7 @@ import getCustomProperties from '../../lib/getCustomProperties.mjs' import fonts from '../../properties/fonts.mjs' export default function fontFamily(state = {}) { - const { config = {} } = state + const { config = {}, breakpoint = '' } = state const families = getCustomProperties(fonts({ config })) let output = '' @@ -11,7 +11,7 @@ export default function fontFamily(state = {}) { output += '/*** Font Family ***/' families.forEach(family => { output += '\n' - output += `.${family.replace('--', '')} { font-family: var(${family}); }` + output += `.${family.replace('--', '')}${breakpoint} { font-family: var(${family}); }` }) } diff --git a/v7/classes/custom/margin.mjs b/v7/classes/custom/margin.mjs index a677731..469dc88 100644 --- a/v7/classes/custom/margin.mjs +++ b/v7/classes/custom/margin.mjs @@ -12,7 +12,7 @@ export default function margin(state = {}) { output += `.m-none${breakpoint} { margin: 0; }` directionEntries.forEach(dir => { output += '\n' - output += `.m${dir[0]}${breakpoint}-none { margin-${dir[1]}: 0; }` + output += `.m${dir[0]}-none${breakpoint} { margin-${dir[1]}: 0; }` }) // Auto margins @@ -20,7 +20,7 @@ export default function margin(state = {}) { output += `.m-auto${breakpoint} { margin: auto; }` directionEntries.forEach(dir => { output += '\n' - output += `.m${dir[0]}${breakpoint}-auto { margin-${dir[1]}: auto; }` + output += `.m${dir[0]}-auto${breakpoint} { margin-${dir[1]}: auto; }` }) // Margin scale diff --git a/v7/classes/custom/padding.mjs b/v7/classes/custom/padding.mjs index 75c231f..db9d724 100644 --- a/v7/classes/custom/padding.mjs +++ b/v7/classes/custom/padding.mjs @@ -12,7 +12,7 @@ export default function padding(state = {}) { output += `.p-none${breakpoint} { padding: 0; }` directionEntries.forEach(dir => { output += '\n' - output += `.p${dir[0]}${breakpoint}-none { padding-${dir[1]}: 0; }` + output += `.p${dir[0]}-none${breakpoint} { padding-${dir[1]}: 0; }` }) // Padding scale diff --git a/v7/index.mjs b/v7/index.mjs index 78c360e..85ae78c 100644 --- a/v7/index.mjs +++ b/v7/index.mjs @@ -82,12 +82,12 @@ export default function write(config) { // Basic classes output += background({ breakpoint }) output += boxAlign({ breakpoint }) - output += color({ breakpoint }) + breakpoint === '' ? output += color() : '' output += cursor({ breakpoint }) - output += debug({ breakpoint }) + breakpoint === '' ? output += debug() : '' output += display({ breakpoint }) output += flexbox({ breakpoint }) - output += fontSmoothing({ breakpoint }) + breakpoint === '' ? output += fontSmoothing() : '' output += fontStyle({ breakpoint }) output += fontWeight({ breakpoint }) output += inset({ breakpoint }) @@ -124,11 +124,12 @@ export default function write(config) { if (config.classes) { writeClasses() - Object.entries(breakpoints).forEach(b => { + Object.entries(breakpoints).forEach(breakpoint => { + const [label, width] = breakpoint output += '\n' - output += `/*** Breakpoint: ${b[0]} ***/\n` - output += `@media (min-width: ${b[1]}) {\n` - writeClasses(`-${b[0]}`) + output += `/*** Breakpoint: ${label} ***/\n` + output += `@media (min-width: ${width}) {\n` + writeClasses(`-${label}`) output += '\n}' }) } diff --git a/v7/package.json b/v7/package.json index 25a01c3..98ec368 100644 --- a/v7/package.json +++ b/v7/package.json @@ -45,6 +45,7 @@ "color-to-hsla": "^0.1.1" }, "devDependencies": { + "css-validator": "^0.11.0", "cssnano": "^5.0.14", "npm-run-all": "^4.1.5", "postcss-cli": "^9.1.0", @@ -52,4 +53,3 @@ "tape": "^5.8.1" } } - diff --git a/v7/test/index.test.js b/v7/test/index.test.js new file mode 100644 index 0000000..566ada3 --- /dev/null +++ b/v7/test/index.test.js @@ -0,0 +1,17 @@ +import test from 'tape' +import validate from 'css-validator' + +import config from './fixtures/styleguide.mjs' +import write from '../index.mjs' + +test('the write function', t => { + t.plan(1) + + validate({ + text: write(config), + profile: 'css3svg', + warning: 0, + }, function(err, data) { + t.ok(data.validity, 'should generate valid CSS') + }) +})