123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389 |
- import fs from 'fs'
- import path from 'path'
- import inTempDirectory from '../jest/runInTempDirectory'
- import { run, html, css, javascript } from './util/run'
- const defaultConfigFile = 'tailwind.config.js'
- const cjsConfigFile = 'tailwind.config.cjs'
- test('it uses the values from the custom config file', () => {
- let config = require(path.resolve(`${__dirname}/fixtures/custom-config.js`))
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 400px) {
- .mobile\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- test('custom config can be passed as an object', () => {
- let config = {
- content: [{ raw: html`<div class="mobile:font-bold"></div>` }],
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 400px) {
- .mobile\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- test('custom config path can be passed using `config` property in an object', () => {
- let config = {
- config: path.resolve(`${__dirname}/fixtures/custom-config.js`),
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 400px) {
- .mobile\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- test('custom config can be passed under the `config` property', () => {
- let config = {
- config: {
- content: [{ raw: html`<div class="mobile:font-bold"></div>` }],
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 400px) {
- .mobile\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- test('tailwind.config.cjs is picked up by default', () => {
- return inTempDirectory(() => {
- fs.writeFileSync(
- path.resolve(cjsConfigFile),
- javascript`module.exports = {
- content: [{ raw: '<div class="mobile:font-bold"></div>' }],
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- }`
- )
- return run('@tailwind utilities').then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 400px) {
- .mobile\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- })
- test('tailwind.config.js is picked up by default', () => {
- return inTempDirectory(() => {
- fs.writeFileSync(
- path.resolve(defaultConfigFile),
- javascript`module.exports = {
- content: [{ raw: '<div class="mobile:font-bold"></div>' }],
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- }`
- )
- return run('@tailwind utilities').then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 400px) {
- .mobile\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- })
- test('tailwind.config.cjs is picked up by default when passing an empty object', () => {
- return inTempDirectory(() => {
- fs.writeFileSync(
- path.resolve(cjsConfigFile),
- javascript`module.exports = {
- content: [{ raw: '<div class="mobile:font-bold"></div>' }],
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- }`
- )
- return run('@tailwind utilities', {}).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 400px) {
- .mobile\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- })
- test('tailwind.config.js is picked up by default when passing an empty object', () => {
- return inTempDirectory(() => {
- fs.writeFileSync(
- path.resolve(defaultConfigFile),
- javascript`module.exports = {
- content: [{ raw: '<div class="mobile:font-bold"></div>' }],
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- }`
- )
- return run('@tailwind utilities', {}).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 400px) {
- .mobile\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- })
- test('the default config can be overridden using the presets key', () => {
- let config = {
- content: [{ raw: html`<div class="min-h-primary min-h-secondary min-h-0"></div>` }],
- presets: [
- {
- theme: {
- extend: { minHeight: { secondary: '24px' } },
- },
- },
- ],
- theme: {
- extend: { minHeight: { primary: '48px' } },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .min-h-0 {
- min-height: 0;
- }
- .min-h-primary {
- min-height: 48px;
- }
- .min-h-secondary {
- min-height: 24px;
- }
- `)
- })
- })
- test('presets can be functions', () => {
- let config = {
- content: [{ raw: html`<div class="min-h-primary min-h-secondary min-h-0"></div>` }],
- presets: [
- () => ({
- theme: {
- extend: { minHeight: { secondary: '24px' } },
- },
- }),
- ],
- theme: {
- extend: { minHeight: { primary: '48px' } },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .min-h-0 {
- min-height: 0;
- }
- .min-h-primary {
- min-height: 48px;
- }
- .min-h-secondary {
- min-height: 24px;
- }
- `)
- })
- })
- test('the default config can be removed by using an empty presets key in a preset', () => {
- let config = {
- content: [{ raw: html`<div class="min-h-primary min-h-secondary min-h-0"></div>` }],
- presets: [
- {
- presets: [],
- theme: {
- extend: { minHeight: { secondary: '24px' } },
- },
- },
- ],
- theme: {
- extend: { minHeight: { primary: '48px' } },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .min-h-primary {
- min-height: 48px;
- }
- .min-h-secondary {
- min-height: 24px;
- }
- `)
- })
- })
- test('presets can have their own presets', () => {
- let config = {
- content: [{ raw: html`<div class="bg-red bg-transparent bg-black bg-white"></div>` }],
- presets: [
- {
- presets: [],
- theme: {
- colors: { red: '#dd0000' },
- },
- },
- {
- presets: [
- {
- presets: [],
- theme: {
- colors: {
- transparent: 'transparent',
- red: '#ff0000',
- },
- },
- },
- ],
- theme: {
- extend: {
- colors: {
- black: 'black',
- red: '#ee0000',
- },
- backgroundColor: (theme) => theme('colors'),
- },
- },
- corePlugins: ['backgroundColor'],
- },
- ],
- theme: {
- extend: { colors: { white: 'white' } },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-black {
- background-color: #000;
- }
- .bg-red {
- background-color: #e00;
- }
- .bg-transparent {
- background-color: #0000;
- }
- .bg-white {
- background-color: #fff;
- }
- `)
- })
- })
- test('function presets can be mixed with object presets', () => {
- let config = {
- content: [{ raw: html`<div class="bg-red bg-transparent bg-black bg-white"></div>` }],
- presets: [
- () => ({
- presets: [],
- theme: {
- colors: { red: '#dd0000' },
- },
- }),
- {
- presets: [
- () => ({
- presets: [],
- theme: {
- colors: {
- transparent: 'transparent',
- red: '#ff0000',
- },
- },
- }),
- ],
- theme: {
- extend: {
- colors: {
- black: 'black',
- red: '#ee0000',
- },
- backgroundColor: (theme) => theme('colors'),
- },
- },
- corePlugins: ['backgroundColor'],
- },
- ],
- theme: {
- extend: { colors: { white: 'white' } },
- },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-black {
- background-color: #000;
- }
- .bg-red {
- background-color: #e00;
- }
- .bg-transparent {
- background-color: #0000;
- }
- .bg-white {
- background-color: #fff;
- }
- `)
- })
- })
|