text: const postcss = require('postcss')
  const tailwind = require('../src/index.js')
  const fs = require('fs')
  const path = require('path')
  
  function run(input, config = {}) {
    return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
  }
  
  test('important selector', () => {
    let config = {
      important: '#app',
      darkMode: 'class',
      purge: [path.resolve(__dirname, './important-selector.test.html')],
      corePlugins: { preflight: false },
      theme: {},
      plugins: [
        function ({ addComponents, addUtilities }) {
          addComponents(
            {
              '.btn': {
                button: 'yes',
              },
            },
            { respectImportant: true }
          )
          addComponents(
            {
              '@font-face': {
                'font-family': 'Inter',
              },
              '@page': {
                margin: '1cm',
              },
            },
            { respectImportant: true }
          )
          addUtilities(
            {
              '.custom-util': {
                button: 'no',
              },
            },
            { respectImportant: false }
          )
        },
      ],
    }
  
    let css = `
      @tailwind base;
      @tailwind components;
      @layer components {
        .custom-component {
          @apply font-bold;
        }
        .custom-important-component {
          @apply text-center !important;
        }
      }
      @tailwind utilities;
    `
  
    return run(css, config).then((result) => {
      let expectedPath = path.resolve(__dirname, './important-selector.test.css')
      let expected = fs.readFileSync(expectedPath, 'utf8')
  
      expect(result.css).toMatchCss(expected)
    })
  })
  