CSS Modules Utils

scoped.js

class ClassName extends String {
  and(s) {
    const merged = [this.toString(), s].filter((meaningful) => meaningful).join(' ')
    return new ClassName(merged)
  }
}

const createModule = (map) => (strings, ...args) => {
  const classList = [...strings.flatMap(s => s.split(/\s+/)), ...args]
    .filter((meaningful) => meaningful)
    .map((name) => (map[name] || name))
  return new ClassName(classList.join(' '))
}


// Test

const scoped = createModule({
  button: "button-202005",
  contained: "contained-202005",
  outlined: "outlined-202005",
  text: "text-202005",
  disabled: "disabled-202005",
})

const props = {
  disabled: true,
  className: 'button'
}

console.log(scoped`button outlined ${props.disabled && 'disabled'}`.and(props.className))