Fix breakpoint issues, test total output

v7/classes/custom/borders.mjs

@@ -15,24 +15,24 @@ 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}; }`
     })
   })
 
   // Border widths scale
   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}); }`
     })
   }
 

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}); }`
     })
   }
 

v7/classes/custom/margin.mjs

@@ -12,15 +12,15 @@ 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
   output += '\n'
   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

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

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}'
       })
     }

v7/package.json

@@ -45,11 +45,11 @@
     "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",
     "tap-arc": "^0.3.5",
     "tape": "^5.8.1"
   }
 }
-

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')
+  })
+})