import type { SystemStyleObject } from '@bamboocss/types'
import { describe, expect, test } from 'vitest'
import { createRuleProcessor } from './fixture'

const css = (styles: SystemStyleObject) => {
  return createRuleProcessor().css(styles).toCss()
}
describe('complex-rule', () => {
  test('should process complex rule', () => {
    expect(
      css({
        color: {
          _dark: { base: 'green500', sm: { md: 'red200' } },
        },
      }),
    ).toMatchInlineSnapshot(`
      "@layer utilities {
        [data-theme=dark] .dark\\:c_green500,.dark .dark\\:c_green500,.dark\\:c_green500.dark,.dark\\:c_green500[data-theme=dark] {
          color: green500;
      }

        @media (width >= 40rem) {
          @media (width >= 48rem) {
            [data-theme=dark] .dark\\:sm\\:md\\:c_red200,.dark .dark\\:sm\\:md\\:c_red200,.dark\\:sm\\:md\\:c_red200.dark,.dark\\:sm\\:md\\:c_red200[data-theme=dark] {
              color: red200;
      }
      }
      }
      }"
    `)
  })
})
