import { transform, composeVisitors } from 'lightningcss'
import assert from 'node:assert'
const mixins = new Map()

const mixinVisitor = {
  custom: {
    mixin (rule) {
      mixins.set(rule.prelude.value, rule.body.value)
      return []
    },
    apply (rule) {
      return mixins.get(rule.prelude.value)
    }
  }
}

const styleVisitor = {
  style () {

  }
}

const css = Buffer.from(`
  @mixin color {
    color: blue;
  }
  .test { width: 10px; @apply color }
`)

const customAtRules = {
  mixin: {
    prelude: '<custom-ident>',
    body: 'style-block'
  },
  apply: {
    prelude: '<custom-ident>'
  }
}

// Without composeVisitors
const test1 = transform({
  sourceMap: true,
  errorRecovery: true,
  code: css,
  customAtRules,
  visitor: {
    Rule: { ...mixinVisitor, ...styleVisitor }
  }
})

/* This is OK

.test {
  width: 10px;

  & {
    color: #00f;
  }
}
*/

// With composeVisitors
const test2 = transform({
  sourceMap: true,
  errorRecovery: true,
  code: css,
  customAtRules,
  visitor: composeVisitors([
    { Rule: { ...mixinVisitor } },
    { Rule: { ...styleVisitor } }
  ])
})

/* Not work well

@mixin color {
  & {
    color: #00f;
  }
}

.test {
  width: 10px;

  @apply color
}
*/

console.log(test1.code.toString())

console.log('--------------------------')

console.log(test2.code.toString())

assert.strictEqual(test1.code.toString(), test2.code.toString())