Custom classes: implement w/ custom props; cleanup

v7/classes/custom/borders.mjs

@@ -0,0 +1,66 @@
+import borderRadius from '../../properties/border-radius.mjs'
+import borderWidths from '../../properties/border-widths.mjs'
+import directions from '../../lib/directions.mjs'
+import getCustomProperties from '../../lib/getCustomProperties.mjs'
+
+export default function borders(state = {}) {
+  const { config = {}, breakpoint = '' } = state
+  const radiusProperties = getCustomProperties(borderRadius({ config }))
+  const widthProperties = getCustomProperties(borderWidths({ config }))
+  const directionEntries = Object.entries(directions)
+
+  let output = '/*** Borders ***/'
+
+  // Border styles
+  const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'none']
+  borderStyles.forEach(style => {
+    output += '\n'
+    output += `.border-${style} { border-style: ${style}; }`
+  })
+  directionEntries.forEach(dir => {
+    borderStyles.forEach(style => {
+      output += '\n'
+      output += `.border-${dir[0]}-${style} { border-${dir[1]}-style: ${style}; }`
+    })
+  })
+
+  // Border widths scale
+  if (widthProperties.length) {
+    widthProperties.forEach((w, i) => {
+      output += '\n'
+      output += `.border${i} { border-width: var(${w}); }`
+
+      directionEntries.forEach(dir => {
+        output += '\n'
+        output += `.border-${dir[0]}${i} { border-${dir[1]}-width: var(${w}); }`
+      })
+    })
+  }
+
+  // Radius builtins
+  output += `
+.radius-100${breakpoint} { border-radius: 100%; }
+.radius-pill${breakpoint} { border-radius: 9999px; }
+.radius-none${breakpoint} { border-radius: 0; }`
+
+  // Directional null radii 
+  directionEntries.forEach(dir => {
+    output += '\n'
+    output += `.radius-${dir[0]}-none${breakpoint} { border-${dir[1]}-radius: 0; }`
+  })
+
+  // Radii scale
+  if (radiusProperties.length) {
+    radiusProperties.forEach((r, i) => {
+      output += '\n'
+      output += `.radius${i} { border-radius: var(${r}); }`
+
+      directionEntries.forEach(dir => {
+        output += '\n'
+        output += `.radius-${dir[0]}${i} { border-${dir[1]}-radius: var(${r}); }`
+      })
+    })
+  }
+
+  return output
+}

v7/classes/custom/font-family.mjs

@@ -1,18 +1,19 @@
-const defaultFonts = `
-.font-sans{font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;}
-.font-serif{font-family: Georgia, Cambria, Times New Roman, Times, serif;}
-.font-mono{font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;}
-`
+import getCustomProperties from '../../lib/getCustomProperties.mjs'
+import fonts from '../../properties/fonts.mjs'
 
-export default function family({ fonts = defaultFonts } = {}) {
-  const output = Object.keys(fonts).length
-    ? Object.keys(fonts)
-      .map(key => `.font-${key}{font-family: ${fonts[key]};}`)
-      .join('\n')
-    : defaultFonts
+export default function fontFamily(state = {}) {
+  const { config = {} } = state
+  const families = getCustomProperties(fonts({ config }))
 
-  return /*css*/`
-/*** Font Family ***/
-${output}
-`
+  let output = ''
+
+  if (families.length) {
+    output += '/*** Font Family ***/'
+    families.forEach(family => {
+      output += '\n'
+      output += `.${family.replace('--', '')} { font-family: var(${family}); }`
+    })
+  }
+
+  return output
 }

v7/classes/custom/font-size.mjs

@@ -1,17 +1,19 @@
-import { generateTypeScaleProperties, getScalePropertyNames, defaultConfig } from '../../lib/scales.mjs'
+import getCustomProperties from '../../lib/getCustomProperties.mjs'
+import { generateTypeScaleProperties } from '../../lib/scales.mjs'
 
-export default function fontSize({ breakpoint = '', typeScale = defaultConfig } = {}) {
-  let output = `
-/*** Font Sizes ***/
-`
+export default function fontSize(state = {}) {
+  const { config = {}, breakpoint = '' } = state
+  const sizes = getCustomProperties(generateTypeScaleProperties(config.typeScale))
 
-  const properties = generateTypeScaleProperties(typeScale)
-  const propertyNames = getScalePropertyNames(properties)
+  let output = ''
 
-  propertyNames.forEach(pn => {
-    const step = pn.replace('--text-', '')
-    output += `.text${step}${breakpoint}{font-size:var(${pn});}\n`
-  })
+  if (sizes.length) {
+    output += '/*** Font Size ***/'
+    sizes.forEach(size => {
+      output += '\n'
+      output += `${size.replace('--text-', '.text')}${breakpoint} { font-size: var(${size}); }`
+    })
+  }
 
   return output
 }

v7/classes/custom/gap.mjs

@@ -1,17 +1,19 @@
-import { generateSpaceScaleProperties, getScalePropertyNames, defaultConfig } from '../../lib/scales.mjs'
+import getCustomProperties from '../../lib/getCustomProperties.mjs'
+import { generateSpaceScaleProperties } from '../../lib/scales.mjs'
 
-export default function gap({ breakpoint = '', spaceScale = defaultConfig } = {}) {
-  let output = `
-/*** Gap ***/
-`
-  const properties = generateSpaceScaleProperties(spaceScale)
-  const propertyNames = getScalePropertyNames(properties)
+export default function gap(state = {}) {
+  const { config = {}, breakpoint = '' } = state
+  const sizes = getCustomProperties(generateSpaceScaleProperties(config.spaceScale))
 
-  propertyNames.forEach(pn => {
-    const step = pn.replace('--space-', '')
-    output += `.gap${step}${breakpoint}{gap:var(${pn});}\n`
-  })
+  let output = ''
 
+  if (sizes.length) {
+    output += '/*** Gap ***/'
+    sizes.forEach(size => {
+      output += '\n'
+      output += `.gap${size.replace('--space-', '')}${breakpoint} { gap: var(${size}); }`
+    })
+  }
   return output
 }
 

v7/classes/custom/grid.mjs

@@ -1,28 +1,27 @@
-export default function grid({
-  breakpoint = '',
-  steps = 6,
-}) {
-  let output = /*css*/`
-/*** Grid ***/
-.flow-row${breakpoint}{grid-auto-flow:row;}
-.flow-col${breakpoint}{grid-auto-flow:column;}
-.flow-row-dense${breakpoint}{grid-auto-flow:row dense;}
-.flow-column-dense${breakpoint}{grid-auto-flow:column dense;}
-.row-auto${breakpoint}{grid-row:auto;}
-.col-auto${breakpoint}{grid-column:auto;}
-.col-end-auto${breakpoint}{grid-column-end: auto;}
-.rows-end-auto${breakpoint}{grid-row-end:auto;}
-.rows-none${breakpoint}{grid-template-rows:none;}
-`
+export default function grid(state = {}) {
+  const { config = {}, breakpoint = '' } = state
+  const { grid = {} } = config
+  const { steps = 6 } = grid
+
+  let output = `/*** Grid ***/
+.flow-row${breakpoint} { grid-auto-flow: row; }
+.flow-col${breakpoint} { grid-auto-flow: column; }
+.flow-row-dense${breakpoint} { grid-auto-flow: row dense; }
+.flow-column-dense${breakpoint} { grid-auto-flow: column dense; }
+.row-auto${breakpoint} { grid-row: auto; }
+.col-auto${breakpoint} { grid-column: auto; }
+.col-end-auto${breakpoint} { grid-column-end:  auto; }
+.rows-end-auto${breakpoint} { grid-row-end: auto; }
+.rows-none${breakpoint} { grid-template-rows: none; }`
 
   for (let i = 1; i < steps + 1; i++) {
-    output += `.col-${i}${breakpoint}{grid-template-columns:repeat(${i}, minmax(0, 1fr));}\n`
-    output += `.col-span-${i}${breakpoint}{grid-column: span ${i} / span ${i};}\n`
-    output += `.col-start-${i}${breakpoint}{grid-column-start: ${i};}\n`
-    output += `.row-start-${i}${breakpoint}{grid-row-start: ${i};}\n`
-    output += `.col-end-${i}${breakpoint}{grid-column-end: ${i};}\n`
-    output += `.row-end-${i}${breakpoint}{grid-row-end: ${i};}\n`
-    output += `.row-${i}${breakpoint}{grid-template-rows: repeat(${i}, minmax(0, 1fr));}\n`
+    output += `.col-${i}${breakpoint} { grid-template-columns:repeat(${i}, minmax(0, 1fr)); }\n`
+    output += `.col-span-${i}${breakpoint} { grid-column: span ${i} / span ${i}; }\n`
+    output += `.col-start-${i}${breakpoint} { grid-column-start: ${i}; }\n`
+    output += `.row-start-${i}${breakpoint} { grid-row-start: ${i}; }\n`
+    output += `.col-end-${i}${breakpoint} { grid-column-end: ${i}; }\n`
+    output += `.row-end-${i}${breakpoint} { grid-row-end: ${i}; }\n`
+    output += `.row-${i}${breakpoint} { grid-template-rows: repeat(${i}, minmax(0, 1fr)); }`
   }
 
   return output

v7/classes/custom/margin.mjs

@@ -1,31 +1,31 @@
-import generateDirectionalVariants from '../../lib/generateDirectionalVariants.mjs'
-import { defaultConfig } from '../../lib/scales.mjs'
+import directions from '../../lib/directions.mjs'
+import getCustomProperties from '../../lib/getCustomProperties.mjs'
+import { generateSpaceScaleProperties } from '../../lib/scales.mjs'
 
-export default function margin({ breakpoint = '', spaceScale = defaultConfig }) {
-  let output = /*css*/`
-/*** Margin ***/
-.m-none${breakpoint}{margin:0}
-.mb-none${breakpoint}{margin-block:0}
-.mbs-none${breakpoint}{margin-block-start:0}
-.mbe-none${breakpoint}{margin-block-end:0}
-.mi-none${breakpoint}{margin-inline:0}
-.mis-none${breakpoint}{margin-inline-start:0}
-.mie-none${breakpoint}{margin-inline-end:0}
-.m-auto${breakpoint}{margin:auto}
-.mb-auto${breakpoint}{margin-block:auto}
-.mbs-auto${breakpoint}{margin-block-start:auto}
-.mbe-auto${breakpoint}{margin-block-end:auto}
-.mi-auto${breakpoint}{margin-inline:auto}
-.mis-auto${breakpoint}{margin-inline-start:auto}
-.mie-auto${breakpoint}{margin-inline-end:auto}
-`
+export default function margin(state = {}) {
+  const { config = {}, breakpoint = '' } = state
+  const directionEntries = Object.entries(directions)
+  const sizes = getCustomProperties(generateSpaceScaleProperties(config.spaceScale))
 
-  function template({ label, step, direction, value }) {
-    // Redefine `direction` arg with a formatted version of it, if the arg is truthy
-    if (direction) direction = `-${direction}`
-    return `.m${label}${step}${breakpoint}{margin${direction}:${value};}\n`
+  // Null margins
+  let output = '/*** Margin ***/\n'
+  output += `.m-none${breakpoint} { margin: 0; }`
+  directionEntries.forEach(dir => {
+    output += '\n'
+    output += `.m${dir[0]}${breakpoint}-none { margin-${dir[1]}: 0; }`
+  })
+
+  // Margin scale
+  if (sizes.length) {
+    sizes.forEach(size => {
+      output += '\n'
+      output += `.m${size.replace('--space-', '')}${breakpoint} { margin: var(${size}); }}`
+      directionEntries.forEach(dir => {
+        output += '\n'
+        output += `.m${dir[0]}${size.replace('--space-', '')}${breakpoint} { margin-${dir[1]}: var(${size}); }`
+      })
+    })
   }
 
-  output += generateDirectionalVariants({ spaceScale, template })
   return output
 }

v7/classes/custom/padding.mjs

@@ -1,23 +1,32 @@
-import generateDirectionalVariants from '../../lib/generateDirectionalVariants.mjs'
-import { defaultConfig } from '../../lib/scales.mjs'
+import directions from '../../lib/directions.mjs'
+import getCustomProperties from '../../lib/getCustomProperties.mjs'
+import { generateSpaceScaleProperties } from '../../lib/scales.mjs'
 
-export default function padding({ breakpoint = '', spaceScale = defaultConfig } = {}) {
-  let output = /*css*/`
-/*** Padding ***/
-.p-none${breakpoint}{padding:0}
-.pb-none${breakpoint}{padding-block:0}
-.pbs-none${breakpoint}{padding-block-start:0}
-.pbe-none${breakpoint}{padding-block-end:0}
-.pi-none${breakpoint}{padding-inline:0}
-.pis-none${breakpoint}{padding-inline-start:0}
-.pie-none${breakpoint}{padding-inline-end:0}
-`
-  function template({ label, step, direction, value }) {
-    // Redefine `direction` arg with a formatted version of it, if the arg is truthy
-    if (direction) direction = `-${direction}`
-    return `.p${label}${step}${breakpoint}{padding${direction}:${value};}\n`
+export default function padding(state = {}) {
+  const { config = {}, breakpoint = '' } = state
+  const directionEntries = Object.entries(directions)
+  const sizes = getCustomProperties(generateSpaceScaleProperties(config.spaceScale))
+
+  // Null padding
+  let output = '/*** Padding ***/\n'
+  output += `.p-none${breakpoint} { padding: 0; }`
+  directionEntries.forEach(dir => {
+    output += '\n'
+    output += `.p${dir[0]}${breakpoint}-none { padding-${dir[1]}: 0; }`
+  })
+
+  // Padding scale
+  if (sizes.length) {
+    sizes.forEach(size => {
+      output += '\n'
+      output += `.p${size.replace('--space-', '')}${breakpoint} { padding: var(${size}); }}`
+      directionEntries.forEach(dir => {
+        output += '\n'
+        output += `.p${dir[0]}${size.replace('--space-', '')}${breakpoint} { padding-${dir[1]}: var(${size}); }`
+      })
+    })
   }
 
-  output += generateDirectionalVariants({ spaceScale, template })
   return output
 }
+