123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917 |
- import createPlugin from '../src/public/create-plugin'
- import { run, html, css, defaults } from './util/run'
- test('plugins can create utilities with object syntax', () => {
- let config = {
- content: [
- {
- raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
- },
- ],
- plugins: [
- function ({ addUtilities }) {
- addUtilities({
- '.custom-object-fill': {
- 'object-fit': 'fill',
- },
- '.custom-object-contain': {
- 'object-fit': 'contain',
- },
- '.custom-object-cover': {
- 'object-fit': 'cover',
- },
- })
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-object-fill {
- object-fit: fill;
- }
- .custom-object-contain {
- object-fit: contain;
- }
- .custom-object-cover {
- object-fit: cover;
- }
- `)
- })
- })
- test('plugins can create utilities with arrays of objects', () => {
- let config = {
- content: [
- {
- raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
- },
- ],
- plugins: [
- function ({ addUtilities }) {
- addUtilities([
- {
- '.custom-object-fill': {
- 'object-fit': 'fill',
- },
- '.custom-object-contain': {
- 'object-fit': 'contain',
- },
- '.custom-object-cover': {
- 'object-fit': 'cover',
- },
- },
- ])
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-object-fill {
- object-fit: fill;
- }
- .custom-object-contain {
- object-fit: contain;
- }
- .custom-object-cover {
- object-fit: cover;
- }
- `)
- })
- })
- test('plugins can create utilities with raw PostCSS nodes', () => {
- let config = {
- content: [
- {
- raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
- },
- ],
- plugins: [
- function ({ addUtilities, postcss }) {
- addUtilities([
- postcss.rule({ selector: '.custom-object-fill' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'fill',
- }),
- ]),
- postcss.rule({ selector: '.custom-object-contain' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'contain',
- }),
- ]),
- postcss.rule({ selector: '.custom-object-cover' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'cover',
- }),
- ]),
- ])
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-object-fill {
- object-fit: fill;
- }
- .custom-object-contain {
- object-fit: contain;
- }
- .custom-object-cover {
- object-fit: cover;
- }
- `)
- })
- })
- test('plugins can create utilities with mixed object styles and PostCSS nodes', () => {
- let config = {
- content: [
- {
- raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
- },
- ],
- plugins: [
- function ({ addUtilities, postcss }) {
- addUtilities([
- {
- '.custom-object-fill': {
- objectFit: 'fill',
- },
- },
- postcss.rule({ selector: '.custom-object-contain' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'contain',
- }),
- ]),
- postcss.rule({ selector: '.custom-object-cover' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'cover',
- }),
- ]),
- ])
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-object-fill {
- object-fit: fill;
- }
- .custom-object-contain {
- object-fit: contain;
- }
- .custom-object-cover {
- object-fit: cover;
- }
- `)
- })
- })
- test('plugins can create components with object syntax', () => {
- let config = {
- content: [
- {
- raw: html`<button class="btn-blue"></button>`,
- },
- ],
- plugins: [
- function ({ addComponents }) {
- addComponents({
- '.btn-blue': {
- backgroundColor: 'blue',
- color: 'white',
- padding: '.5rem 1rem',
- borderRadius: '.25rem',
- },
- '.btn-blue:hover': {
- backgroundColor: 'darkblue',
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .btn-blue {
- background-color: blue;
- color: white;
- padding: 0.5rem 1rem;
- border-radius: 0.25rem;
- }
- .btn-blue:hover {
- background-color: darkblue;
- }
- `)
- })
- })
- test('plugins can add base styles with object syntax', () => {
- let config = {
- content: [
- {
- raw: html`<img /><button></button>`,
- },
- ],
- plugins: [
- function ({ addBase }) {
- addBase({
- img: {
- maxWidth: '100%',
- },
- button: {
- fontFamily: 'inherit',
- },
- })
- },
- ],
- corePlugins: { preflight: false },
- }
- return run('@tailwind base', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- img {
- max-width: 100%;
- }
- button {
- font-family: inherit;
- }
- ${defaults}
- `)
- })
- })
- test('plugins can add base styles with raw PostCSS nodes', () => {
- let config = {
- content: [
- {
- raw: html`<img /><button></button>`,
- },
- ],
- plugins: [
- function ({ addBase, postcss }) {
- addBase([
- postcss.rule({ selector: 'img' }).append([
- postcss.decl({
- prop: 'max-width',
- value: '100%',
- }),
- ]),
- postcss.rule({ selector: 'button' }).append([
- postcss.decl({
- prop: 'font-family',
- value: 'inherit',
- }),
- ]),
- ])
- },
- ],
- corePlugins: { preflight: false },
- }
- return run('@tailwind base', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- img {
- max-width: 100%;
- }
- button {
- font-family: inherit;
- }
- ${defaults}
- `)
- })
- })
- test('plugins can create components with raw PostCSS nodes', () => {
- let config = {
- content: [
- {
- raw: html`<button class="btn-blue"></button>`,
- },
- ],
- plugins: [
- function ({ addComponents, postcss }) {
- addComponents([
- postcss.rule({ selector: '.btn-blue' }).append([
- postcss.decl({
- prop: 'background-color',
- value: 'blue',
- }),
- postcss.decl({
- prop: 'color',
- value: 'white',
- }),
- postcss.decl({
- prop: 'padding',
- value: '.5rem 1rem',
- }),
- postcss.decl({
- prop: 'border-radius',
- value: '.25rem',
- }),
- ]),
- postcss.rule({ selector: '.btn-blue:hover' }).append([
- postcss.decl({
- prop: 'background-color',
- value: 'darkblue',
- }),
- ]),
- ])
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .btn-blue {
- background-color: blue;
- color: white;
- padding: 0.5rem 1rem;
- border-radius: 0.25rem;
- }
- .btn-blue:hover {
- background-color: darkblue;
- }
- `)
- })
- })
- test('plugins can create components with mixed object styles and raw PostCSS nodes', () => {
- let config = {
- content: [
- {
- raw: html`<button class="btn-blue"></button>`,
- },
- ],
- plugins: [
- function ({ addComponents, postcss }) {
- addComponents([
- postcss.rule({ selector: '.btn-blue' }).append([
- postcss.decl({
- prop: 'background-color',
- value: 'blue',
- }),
- postcss.decl({
- prop: 'color',
- value: 'white',
- }),
- postcss.decl({
- prop: 'padding',
- value: '.5rem 1rem',
- }),
- postcss.decl({
- prop: 'border-radius',
- value: '.25rem',
- }),
- ]),
- {
- '.btn-blue:hover': {
- backgroundColor: 'darkblue',
- },
- },
- ])
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .btn-blue {
- background-color: blue;
- color: white;
- padding: 0.5rem 1rem;
- border-radius: 0.25rem;
- }
- .btn-blue:hover {
- background-color: darkblue;
- }
- `)
- })
- })
- test('plugins can create components with media queries with object syntax', () => {
- let config = {
- content: [
- {
- raw: html`<div class="custom-container"></div>`,
- },
- ],
- plugins: [
- function ({ addComponents }) {
- addComponents({
- '.custom-container': {
- width: '100%',
- },
- '@media (min-width: 100px)': {
- '.custom-container': {
- maxWidth: '100px',
- },
- },
- '@media (min-width: 200px)': {
- '.custom-container': {
- maxWidth: '200px',
- },
- },
- '@media (min-width: 300px)': {
- '.custom-container': {
- maxWidth: '300px',
- },
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-container {
- width: 100%;
- }
- @media (min-width: 100px) {
- .custom-container {
- max-width: 100px;
- }
- }
- @media (min-width: 200px) {
- .custom-container {
- max-width: 200px;
- }
- }
- @media (min-width: 300px) {
- .custom-container {
- max-width: 300px;
- }
- }
- `)
- })
- })
- test('media queries can be defined multiple times using objects-in-array syntax', () => {
- let config = {
- content: [
- {
- raw: html`<div class="custom-container"></div>
- <button class="btn"></button>`,
- },
- ],
- plugins: [
- function ({ addComponents }) {
- addComponents([
- {
- '.custom-container': {
- width: '100%',
- },
- '@media (min-width: 100px)': {
- '.custom-container': {
- maxWidth: '100px',
- },
- },
- },
- {
- '.btn': {
- padding: '1rem .5rem',
- display: 'block',
- },
- '@media (min-width: 100px)': {
- '.btn': {
- display: 'inline-block',
- },
- },
- },
- ])
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-container {
- width: 100%;
- }
- @media (min-width: 100px) {
- .custom-container {
- max-width: 100px;
- }
- }
- .btn {
- padding: 1rem 0.5rem;
- display: block;
- }
- @media (min-width: 100px) {
- .btn {
- display: inline-block;
- }
- }
- `)
- })
- })
- test('plugins can create nested rules', () => {
- let config = {
- content: [{ raw: html`<button class="btn-blue"></button>` }],
- plugins: [
- function ({ addComponents }) {
- addComponents({
- '.btn-blue': {
- backgroundColor: 'blue',
- color: 'white',
- padding: '.5rem 1rem',
- borderRadius: '.25rem',
- '&:hover': {
- backgroundColor: 'darkblue',
- },
- '@media (min-width: 500px)': {
- '&:hover': {
- backgroundColor: 'orange',
- },
- },
- '> a': {
- color: 'red',
- },
- 'h1 &': {
- color: 'purple',
- },
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .btn-blue {
- background-color: blue;
- color: white;
- padding: 0.5rem 1rem;
- border-radius: 0.25rem;
- }
- .btn-blue:hover {
- background-color: darkblue;
- }
- @media (min-width: 500px) {
- .btn-blue:hover {
- background-color: orange;
- }
- }
- .btn-blue > a {
- color: red;
- }
- h1 .btn-blue {
- color: purple;
- }
- `)
- })
- })
- test('plugins can create rules with escaped selectors', () => {
- let config = {
- content: [{ raw: html`<div class="custom-top-1/4"></div>` }],
- plugins: [
- function ({ e, addUtilities }) {
- addUtilities({
- [`.${e('custom-top-1/4')}`]: {
- top: '25%',
- },
- })
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-top-1\/4 {
- top: 25%;
- }
- `)
- })
- })
- test('plugins can access the current config', () => {
- let config = {
- content: [{ raw: html`<div class="custom-container"></div>` }],
- plugins: [
- function ({ addComponents, config }) {
- let containerClasses = [
- {
- '.custom-container': {
- width: '100%',
- },
- },
- ]
- for (let maxWidth of Object.values(config('theme.customScreens'))) {
- containerClasses.push({
- [`@media (min-width: ${maxWidth})`]: {
- '.custom-container': { maxWidth },
- },
- })
- }
- addComponents(containerClasses)
- },
- ],
- theme: {
- customScreens: {
- sm: '576px',
- md: '768px',
- lg: '992px',
- xl: '1200px',
- },
- },
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-container {
- width: 100%;
- }
- @media (min-width: 576px) {
- .custom-container {
- max-width: 576px;
- }
- }
- @media (min-width: 768px) {
- .custom-container {
- max-width: 768px;
- }
- }
- @media (min-width: 992px) {
- .custom-container {
- max-width: 992px;
- }
- }
- @media (min-width: 1200px) {
- .custom-container {
- max-width: 1200px;
- }
- }
- `)
- })
- })
- test('plugins can check if corePlugins are enabled', () => {
- let config = {
- content: [{ raw: html`<div class="test"></div>` }],
- plugins: [
- function ({ addUtilities, corePlugins }) {
- addUtilities({
- '.test': {
- 'text-color': corePlugins('textColor') ? 'true' : 'false',
- opacity: corePlugins('opacity') ? 'true' : 'false',
- },
- })
- },
- ],
- corePlugins: { textColor: false },
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test {
- text-color: false;
- opacity: true;
- }
- `)
- })
- })
- test('plugins can check if corePlugins are enabled when using array white-listing', () => {
- let config = {
- content: [{ raw: html`<div class="test"></div>` }],
- plugins: [
- function ({ addUtilities, corePlugins }) {
- addUtilities({
- '.test': {
- 'text-color': corePlugins('textColor') ? 'true' : 'false',
- opacity: corePlugins('opacity') ? 'true' : 'false',
- },
- })
- },
- ],
- corePlugins: ['textColor'],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test {
- text-color: true;
- opacity: false;
- }
- `)
- })
- })
- test('plugins can provide fallbacks to keys missing from the config', () => {
- let config = {
- content: [{ raw: html`<button class="btn"></button>` }],
- plugins: [
- function ({ addComponents, config }) {
- addComponents({
- '.btn': {
- borderRadius: config('borderRadius.default', '.25rem'),
- },
- })
- },
- ],
- theme: {
- borderRadius: {
- 1: '1px',
- 2: '2px',
- 4: '4px',
- 8: '8px',
- },
- },
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .btn {
- border-radius: 0.25rem;
- }
- `)
- })
- })
- test('plugins can add multiple sets of utilities and components', () => {
- let config = {
- content: [
- {
- raw: html`<button class="btn"></button>
- <div class="card custom-skew-12deg custom-border-collapse"></div>`,
- },
- ],
- plugins: [
- function ({ addUtilities, addComponents }) {
- addComponents({
- '.card': {
- padding: '1rem',
- borderRadius: '.25rem',
- },
- })
- addUtilities({
- '.custom-skew-12deg': {
- transform: 'skewY(-12deg)',
- },
- })
- addComponents({
- '.btn': {
- padding: '1rem .5rem',
- display: 'inline-block',
- },
- })
- addUtilities({
- '.custom-border-collapse': {
- borderCollapse: 'collapse',
- },
- })
- },
- ],
- }
- return run('@tailwind components; @tailwind utilities;', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .card {
- padding: 1rem;
- border-radius: 0.25rem;
- }
- .btn {
- padding: 1rem 0.5rem;
- display: inline-block;
- }
- .custom-skew-12deg {
- transform: skewY(-12deg);
- }
- .custom-border-collapse {
- border-collapse: collapse;
- }
- `)
- })
- })
- test('plugins respect prefix and important options by default when adding utilities', () => {
- let config = {
- prefix: 'tw-',
- important: true,
- content: [{ raw: html`<div class="tw-custom-rotate-90"></div>` }],
- plugins: [
- function ({ addUtilities }) {
- addUtilities({
- '.custom-rotate-90': {
- transform: 'rotate(90deg)',
- },
- })
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .tw-custom-rotate-90 {
- transform: rotate(90deg) !important;
- }
- `)
- })
- })
- test('when important is a selector it is used to scope utilities instead of adding !important', () => {
- let config = {
- prefix: 'tw-',
- important: '#app',
- content: [{ raw: html`<div class="tw-custom-rotate-90"></div>` }],
- plugins: [
- function ({ addUtilities }) {
- addUtilities({
- '.custom-rotate-90': {
- transform: 'rotate(90deg)',
- },
- })
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- #app .tw-custom-rotate-90 {
- transform: rotate(90deg);
- }
- `)
- })
- })
- test('when important is a selector it scopes all selectors in a rule, even though defining utilities like this is stupid', () => {
- let config = {
- important: '#app',
- content: [{ raw: html`<div class="custom-rotate-90 custom-rotate-1/4"></div>` }],
- plugins: [
- function ({ addUtilities }) {
- addUtilities({
- '.custom-rotate-90, .custom-rotate-1\\/4': {
- transform: 'rotate(90deg)',
- },
- })
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- #app .custom-rotate-90,
- #app .custom-rotate-1\/4 {
- transform: rotate(90deg);
- }
- `)
- })
- })
- test('important utilities are not made double important when important option is used', () => {
- let config = {
- important: true,
- content: [{ raw: html`<div class="custom-rotate-90"></div>` }],
- plugins: [
- function ({ addUtilities }) {
- addUtilities({
- '.custom-rotate-90': {
- transform: 'rotate(90deg) !important',
- },
- })
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-rotate-90 {
- transform: rotate(90deg) !important;
- }
- `)
- })
- })
- test("component declarations respect the 'prefix' option by default", () => {
- let config = {
- prefix: 'tw-',
- content: [{ raw: html`<button class="tw-btn-blue"></button>` }],
- plugins: [
- function ({ addComponents }) {
- addComponents({
- '.btn-blue': {
- backgroundColor: 'blue',
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .tw-btn-blue {
- background-color: blue;
- }
- `)
- })
- })
- test('all selectors in a rule are prefixed', () => {
- let config = {
- prefix: 'tw-',
- content: [
- {
- raw: html`<button class="tw-btn-blue tw-btn-red"></button>
- <div class="tw-custom-rotate-90 tw-custom-rotate-1/4"></div>`,
- },
- ],
- plugins: [
- function ({ addUtilities, addComponents }) {
- addUtilities({
- '.custom-rotate-90, .custom-rotate-1\\/4': {
- transform: 'rotate(90deg)',
- },
- })
- addComponents({
- '.btn-blue, .btn-red': {
- padding: '10px',
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .tw-btn-blue,
- .tw-btn-red {
- padding: 10px;
- }
- `)
- })
- })
- test("component declarations can optionally ignore 'prefix' option", () => {
- let config = {
- prefix: 'tw-',
- content: [{ raw: html`<button class="btn-blue"></button>` }],
- plugins: [
- function ({ addComponents }) {
- addComponents(
- {
- '.btn-blue': {
- backgroundColor: 'blue',
- },
- },
- { respectPrefix: false }
- )
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .btn-blue {
- background-color: blue;
- }
- `)
- })
- })
- test("component declarations are not affected by the 'important' option", () => {
- let config = {
- important: true,
- content: [{ raw: html`<button class="btn-blue"></button>` }],
- plugins: [
- function ({ addComponents }) {
- addComponents({
- '.btn-blue': {
- backgroundColor: 'blue',
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .btn-blue {
- background-color: blue;
- }
- `)
- })
- })
- test("plugins can apply the user's chosen prefix to components manually", () => {
- let config = {
- prefix: 'tw-',
- content: [{ raw: html`<button class="tw-btn-blue"></button>` }],
- plugins: [
- function ({ addComponents, prefix }) {
- addComponents(
- {
- [prefix('.btn-blue')]: {
- backgroundColor: 'blue',
- },
- },
- { respectPrefix: false }
- )
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .tw-btn-blue {
- background-color: blue;
- }
- `)
- })
- })
- test('prefix can optionally be ignored for utilities', () => {
- let config = {
- prefix: 'tw-',
- content: [{ raw: html`<div class="custom-rotate-90"></div>` }],
- plugins: [
- function ({ addUtilities }) {
- addUtilities(
- {
- '.custom-rotate-90': {
- transform: 'rotate(90deg)',
- },
- },
- { respectPrefix: false }
- )
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-rotate-90 {
- transform: rotate(90deg);
- }
- `)
- })
- })
- test('important can optionally be ignored for utilities', () => {
- let config = {
- important: true,
- content: [{ raw: html`<div class="custom-rotate-90"></div>` }],
- plugins: [
- function ({ addUtilities }) {
- addUtilities(
- {
- '.custom-rotate-90': {
- transform: 'rotate(90deg)',
- },
- },
- { respectImportant: false }
- )
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-rotate-90 {
- transform: rotate(90deg);
- }
- `)
- })
- })
- test('prefix will prefix all classes in a selector', () => {
- let config = {
- prefix: 'tw-',
- content: [{ raw: html`<div class="tw-btn-blue tw-w-1/4"></div>` }],
- plugins: [
- function ({ addComponents, prefix }) {
- addComponents(
- {
- [prefix('.btn-blue .w-1\\/4 > h1.text-xl + a .bar')]: {
- backgroundColor: 'blue',
- },
- },
- { respectPrefix: false }
- )
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .tw-btn-blue .tw-w-1\/4 > h1.tw-text-xl + a .tw-bar {
- background-color: blue;
- }
- `)
- })
- })
- test('plugins can be provided as an object with a handler function', () => {
- let config = {
- content: [
- {
- raw: html`<div class="custom-object-fill custom-object-contain custom-object-cover"></div>`,
- },
- ],
- plugins: [
- {
- handler({ addUtilities }) {
- addUtilities({
- '.custom-object-fill': {
- 'object-fit': 'fill',
- },
- '.custom-object-contain': {
- 'object-fit': 'contain',
- },
- '.custom-object-cover': {
- 'object-fit': 'cover',
- },
- })
- },
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-object-fill {
- object-fit: fill;
- }
- .custom-object-contain {
- object-fit: contain;
- }
- .custom-object-cover {
- object-fit: cover;
- }
- `)
- })
- })
- test('plugins can provide a config but no handler', () => {
- let config = {
- content: [
- {
- raw: html`<div
- class="tw-custom-object-fill tw-custom-object-contain tw-custom-object-cover"
- ></div>`,
- },
- ],
- plugins: [
- {
- config: {
- prefix: 'tw-',
- },
- },
- {
- handler({ addUtilities }) {
- addUtilities({
- '.custom-object-fill': {
- 'object-fit': 'fill',
- },
- '.custom-object-contain': {
- 'object-fit': 'contain',
- },
- '.custom-object-cover': {
- 'object-fit': 'cover',
- },
- })
- },
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .tw-custom-object-fill {
- object-fit: fill;
- }
- .tw-custom-object-contain {
- object-fit: contain;
- }
- .tw-custom-object-cover {
- object-fit: cover;
- }
- `)
- })
- })
- test('plugins can be created using the `createPlugin` function', () => {
- let config = {
- content: [{ raw: html`<div class="test-sm test-md test-lg hover:test-sm sm:test-sm"></div>` }],
- corePlugins: [],
- theme: {
- screens: {
- sm: '400px',
- },
- },
- plugins: [
- createPlugin(
- function ({ addUtilities, theme }) {
- addUtilities(
- Object.fromEntries(
- Object.entries(theme('testPlugin')).map(([k, v]) => [
- `.test-${k}`,
- { testProperty: v },
- ])
- )
- )
- },
- {
- theme: {
- testPlugin: {
- sm: '1rem',
- md: '2rem',
- lg: '3rem',
- },
- },
- }
- ),
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-sm {
- test-property: 1rem;
- }
- .test-md {
- test-property: 2rem;
- }
- .test-lg {
- test-property: 3rem;
- }
- .hover\:test-sm:hover {
- test-property: 1rem;
- }
- @media (min-width: 400px) {
- .sm\:test-sm {
- test-property: 1rem;
- }
- }
- `)
- })
- })
- test('plugins with extra options can be created using the `createPlugin.withOptions` function', () => {
- let plugin = createPlugin.withOptions(
- function ({ className }) {
- return function ({ addUtilities, theme }) {
- addUtilities(
- Object.fromEntries(
- Object.entries(theme('testPlugin')).map(([k, v]) => [
- `.${className}-${k}`,
- { testProperty: v },
- ])
- )
- )
- }
- },
- function () {
- return {
- theme: {
- testPlugin: {
- sm: '1rem',
- md: '2rem',
- lg: '3rem',
- },
- },
- }
- }
- )
- let config = {
- content: [
- { raw: html`<div class="banana-sm banana-md banana-lg hover:banana-sm sm:banana-sm"></div>` },
- ],
- corePlugins: [],
- theme: {
- screens: {
- sm: '400px',
- },
- },
- plugins: [plugin({ className: 'banana' })],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .banana-sm {
- test-property: 1rem;
- }
- .banana-md {
- test-property: 2rem;
- }
- .banana-lg {
- test-property: 3rem;
- }
- .hover\:banana-sm:hover {
- test-property: 1rem;
- }
- @media (min-width: 400px) {
- .sm\:banana-sm {
- test-property: 1rem;
- }
- }
- `)
- })
- })
- test('plugins should cache correctly', () => {
- let plugin = createPlugin.withOptions(({ className = 'banana' } = {}) => ({ addComponents }) => {
- addComponents({ [`.${className}`]: { position: 'absolute' } })
- })
- let config = {
- content: [{ raw: html`<div class="banana sm:banana apple sm:apple"></div>` }],
- corePlugins: [],
- theme: {
- screens: {
- sm: '400px',
- },
- },
- }
- function internalRun(options = {}) {
- return run('@tailwind components', {
- ...config,
- plugins: [plugin(options)],
- })
- }
- return Promise.all([internalRun(), internalRun({ className: 'apple' })]).then(
- ([result1, result2]) => {
- let expected1 = css`
- .banana {
- position: absolute;
- }
- @media (min-width: 400px) {
- .sm\:banana {
- position: absolute;
- }
- }
- `
- let expected2 = css`
- .apple {
- position: absolute;
- }
- @media (min-width: 400px) {
- .sm\:apple {
- position: absolute;
- }
- }
- `
- expect(result1.css).toMatchCss(expected1)
- expect(result2.css).toMatchCss(expected2)
- }
- )
- })
- test('plugins created using `createPlugin.withOptions` do not need to be invoked if the user wants to use the default options', () => {
- let plugin = createPlugin.withOptions(
- function ({ className } = { className: 'banana' }) {
- return function ({ addUtilities, theme }) {
- addUtilities(
- Object.fromEntries(
- Object.entries(theme('testPlugin')).map(([k, v]) => [
- `.${className}-${k}`,
- { testProperty: v },
- ])
- )
- )
- }
- },
- function () {
- return {
- theme: {
- testPlugin: {
- sm: '1rem',
- md: '2rem',
- lg: '3rem',
- },
- },
- }
- }
- )
- let config = {
- content: [
- { raw: html`<div class="banana-sm banana-md banana-lg hover:banana-sm sm:banana-sm"></div>` },
- ],
- corePlugins: [],
- theme: {
- screens: {
- sm: '400px',
- },
- },
- plugins: [plugin],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .banana-sm {
- test-property: 1rem;
- }
- .banana-md {
- test-property: 2rem;
- }
- .banana-lg {
- test-property: 3rem;
- }
- .hover\:banana-sm:hover {
- test-property: 1rem;
- }
- @media (min-width: 400px) {
- .sm\:banana-sm {
- test-property: 1rem;
- }
- }
- `)
- })
- })
- test('the configFunction parameter is optional when using the `createPlugin.withOptions` function', () => {
- let plugin = createPlugin.withOptions(function ({ className }) {
- return function ({ addUtilities, theme }) {
- addUtilities(
- Object.fromEntries(
- Object.entries(theme('testPlugin')).map(([k, v]) => [
- `.${className}-${k}`,
- { testProperty: v },
- ])
- )
- )
- }
- })
- let config = {
- content: [
- { raw: html`<div class="banana-sm banana-md banana-lg hover:banana-sm sm:banana-sm"></div>` },
- ],
- corePlugins: [],
- theme: {
- screens: {
- sm: '400px',
- },
- testPlugin: {
- sm: '1px',
- md: '2px',
- lg: '3px',
- },
- },
- plugins: [plugin({ className: 'banana' })],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .banana-sm {
- test-property: 1px;
- }
- .banana-md {
- test-property: 2px;
- }
- .banana-lg {
- test-property: 3px;
- }
- .hover\:banana-sm:hover {
- test-property: 1px;
- }
- @media (min-width: 400px) {
- .sm\:banana-sm {
- test-property: 1px;
- }
- }
- `)
- })
- })
- test('keyframes are not escaped', () => {
- let config = {
- content: [{ raw: html`<div class="foo-[abc] md:foo-[def]"></div>` }],
- corePlugins: { preflight: false },
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities({
- foo: (value) => {
- return {
- [`@keyframes ${value}`]: {
- '25.001%': {
- color: 'black',
- },
- },
- animation: `${value} 1s infinite`,
- }
- },
- })
- },
- ],
- }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @keyframes abc {
- 25.001% {
- color: black;
- }
- }
- .foo-\[abc\] {
- animation: abc 1s infinite;
- }
- @media (min-width: 768px) {
- @keyframes def {
- 25.001% {
- color: black;
- }
- }
- .md\:foo-\[def\] {
- animation: def 1s infinite;
- }
- }
- `)
- })
- })
- test('font sizes are retrieved without default line-heights or letter-spacing using theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- fontSize: {
- sm: ['14px', '20px'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- fontSize: theme('fontSize.sm'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- font-size: 14px;
- }
- `)
- })
- })
- test('outlines are retrieved without outline-offset using theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- outline: {
- black: ['2px dotted black', '4px'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- outline: theme('outline.black'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- outline: 2px dotted black;
- }
- `)
- })
- })
- test('box-shadow values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- boxShadow: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- boxShadow: theme('boxShadow.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- box-shadow: width, height;
- }
- `)
- })
- })
- test('transition-property values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- transitionProperty: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- transitionProperty: theme('transitionProperty.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- transition-property: width, height;
- }
- `)
- })
- })
- test('transition-duration values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- transitionDuration: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- transitionDuration: theme('transitionDuration.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- transition-duration: width, height;
- }
- `)
- })
- })
- test('transition-delay values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- transitionDuration: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- transitionDuration: theme('transitionDuration.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- transition-duration: width, height;
- }
- `)
- })
- })
- test('transition-timing-function values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- transitionTimingFunction: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- transitionTimingFunction: theme('transitionTimingFunction.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- transition-timing-function: width, height;
- }
- `)
- })
- })
- test('background-image values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- backgroundImage: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- backgroundImage: theme('backgroundImage.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- background-image: width, height;
- }
- `)
- })
- })
- test('background-size values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- backgroundSize: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- backgroundSize: theme('backgroundSize.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- background-size: width, height;
- }
- `)
- })
- })
- test('background-color values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- backgroundColor: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- backgroundColor: theme('backgroundColor.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- background-color: width, height;
- }
- `)
- })
- })
- test('cursor values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- cursor: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- cursor: theme('cursor.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- cursor: width, height;
- }
- `)
- })
- })
- test('animation values are joined when retrieved using the theme function', () => {
- let config = {
- content: [{ raw: html`<div class="foo"></div>` }],
- corePlugins: [],
- theme: {
- animation: {
- lol: ['width', 'height'],
- },
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- '.foo': {
- animation: theme('animation.lol'),
- },
- })
- },
- ],
- }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo {
- animation: width, height;
- }
- `)
- })
- })
- test('custom properties are not converted to kebab-case when added to base layer', () => {
- let config = {
- content: [],
- plugins: [
- function ({ addBase }) {
- addBase({
- ':root': {
- '--colors-primaryThing-500': '0, 0, 255',
- },
- })
- },
- ],
- }
- return run('@tailwind base', config).then((result) => {
- expect(result.css).toContain(`--colors-primaryThing-500: 0, 0, 255;`)
- })
- })
|