test.js

const _ = require('lodash')
const postcss = require('postcss')
const tailwindcss = require('tailwindcss')
const plugin = require('./index.js')

const spacing = {
  missing: ['.max-w-10px', '.min-h-10px', '.min-w-10px'],
  results: [
    '.bottom-10px',
    '.gap-10px',
    '.gap-x-10px',
    '.gap-y-10px',
    '.h-10px',
    '.inset-10px',
    '.inset-x-10px',
    '.inset-y-10px',
    '.left-10px',
    '.m-10px',
    '.max-h-10px',
    '.mb-10px',
    '.ml-10px',
    '.mr-10px',
    '.mt-10px',
    '.mx-10px',
    '.my-10px',
    '.p-10px',
    '.pb-10px',
    '.pl-10px',
    '.pr-10px',
    '.pt-10px',
    '.px-10px',
    '.py-10px',
    '.right-10px',
    '.space-x-10px',
    '.space-y-10px',
    '.top-10px',
    '.translate-x-10px',
    '.translate-y-10px',
    '.w-10px',
  ],
}

const generatePluginCss = (safelist, pluginOptions = {}) => {
  const list = []
  const keys = Object.keys(pluginOptions)
  const count = keys.length

  if (count > 0) {
    list.push(plugin(pluginOptions))
  }
  return postcss(
    tailwindcss({
      safelist,
      plugins: list,
    })
  ).process('@tailwind components; @tailwind utilities', {
    from: undefined,
  })
}

test('900 values (+1) are generated by default... [ width ]', () => {
  return generatePluginCss(['w-0px', 'w-900px'], { width: {} }).then(
    ({ css }) => {
      const list = css.match(/\.w-[0-9][0-9]*px/g)

      expect(list).toEqual(expect.arrayContaining(['.w-0px', '.w-900px']))
    }
  )
})

test('900 values (+1) are generated by default... [ height ]', () => {
  return generatePluginCss(['h-0px', 'h-900px'], { height: {} }).then(
    ({ css }) => {
      const list = css.match(/\.h-[0-9][0-9]*px/g)

      expect(list).toEqual(expect.arrayContaining(['.h-0px', '.h-900px']))
    }
  )
})

// Note: If the results contain a backslash, add another to escape it.
test('A single value (+1) can be added... [ width ]', () => {
  const results = ['.w-0px', '.w-1px']
  const invalid = ['.h-2px']
  const safelist = [...results, ...invalid]

  return generatePluginCss(safelist, {
    width: {
      stop: 1,
    },
  }).then(({ css }) => {
    const list = css.match(/\.w-[01]px/g)

    expect(list).toEqual(expect.arrayContaining(results))
    expect(list).not.toEqual(expect.arrayContaining(invalid))
  })
})

test('A range of values can be added... [ width ]', () => {
  const results = ['.w-30px', '.w-31px', '.w-40px']
  const invalid = ['.w-20px', '.w-44px']
  const safelist = [...results, ...invalid]

  return generatePluginCss(safelist, {
    width: {
      stop: 40,
      start: 30,
    },
  }).then(({ css }) => {
    const list = css.match(/\.w-[34][0-9]px/g)

    expect(list).toEqual(expect.arrayContaining(results))
    expect(list).not.toEqual(expect.arrayContaining(invalid))
  })
})

test('A single value can be added... [ width ]', () => {
  const results = ['.w-40px']
  const invalid = ['.w-39px', '.w-41px']
  const safelist = [...results, ...invalid]

  return generatePluginCss(safelist, {
    width: {
      stop: 40,
      start: 40,
    },
  }).then(({ css }) => {
    const list = css.match(/\.w-[34][0-9]px/g)

    expect(list).toEqual(expect.arrayContaining(results))
    expect(list).not.toEqual(expect.arrayContaining(invalid))
  })
})

test('Supports the old option properties... [ width ]', () => {
  const results = ['.w-30px', '.w-31px', '.w-40px']

  return generatePluginCss(results, {
    width: {
      total: 40,
      startingValue: 30,
    },
  }).then(({ css }) => {
    const list = css.match(/\.w-[34][0-9]px/g)

    expect(list).toEqual(expect.arrayContaining(results))
  })
})

test('Multiple values can be added... [ spacing ]', () => {
  const results = [...spacing.results]

  return generatePluginCss(results, {
    spacing: {
      stop: 10,
    },
  }).then(({ css }) => {
    const list = css.match(/\..*-*.*-*.*-10px/g)

    // NOTE:  it's ODD that only .max-h-10px gets generated
    //        (no other min / max values)
    expect(list).toEqual(expect.arrayContaining(results))
    // expect(list.length).toEqual(results.length)
  })
})

test('Multiple values can be added... [ spacing + max/min ]', () => {
  const results = [...spacing.results, ...spacing.missing]

  return generatePluginCss(results, {
    spacing: {
      stop: 10,
    },
    maxWidth: {
      stop: 10,
    },
    minWidth: {
      stop: 10,
    },
    minHeight: {
      stop: 10,
    },
  }).then(({ css }) => {
    const list = css.match(/\..*-*.*-*.*-10px/g)

    expect(list).toEqual(expect.arrayContaining(results))
  })
})

test('Multiple values can be added... [ maxWidth ]', () => {
  const results = ['.max-w-0px', '.max-w-10px']

  return generatePluginCss(results, {
    maxWidth: {
      stop: 10,
    },
  }).then(({ css }) => {
    const list = css.match(/\.max-w-[0-9][0-9]*px/g)

    expect(list).toEqual(expect.arrayContaining(results))
  })
})

test('Multiple values can be added... [ fontSize ]', () => {
  const results = ['.text-0px', '.text-10px']

  return generatePluginCss(results, {
    fontSize: {
      stop: 10,
    },
  }).then(({ css }) => {
    const list = css.match(/\.text-[0-9][0-9]*px/g)

    expect(list).toEqual(expect.arrayContaining(results))
  })
})

test('Multiple values can be added... [ lineHeight ]', () => {
  const results = ['.leading-0px', '.leading-10px']

  return generatePluginCss(results, {
    lineHeight: {
      stop: 10,
    },
  }).then(({ css }) => {
    const list = css.match(/\.leading-[0-9][0-9]*px/g)

    expect(list).toEqual(expect.arrayContaining(results))
  })
})