diff --git a/src/corePlugins.js b/src/corePlugins.js index f92767e24cbe..4efc8cfae0e6 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1814,13 +1814,16 @@ export let corePlugins = { font: (value) => { let [families, options = {}] = Array.isArray(value) && isPlainObject(value[1]) ? value : [value] - let { fontFeatureSettings } = options + let { fontFeatureSettings, fontVariationSettings } = options return { 'font-family': Array.isArray(families) ? families.join(', ') : families, ...(fontFeatureSettings === undefined ? {} : { 'font-feature-settings': fontFeatureSettings }), + ...(fontVariationSettings === undefined + ? {} + : { 'font-variation-settings': fontVariationSettings }), } }, }, diff --git a/src/css/preflight.css b/src/css/preflight.css index 3029044290d5..fab875d95904 100644 --- a/src/css/preflight.css +++ b/src/css/preflight.css @@ -23,6 +23,7 @@ 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. */ html { @@ -32,6 +33,7 @@ html { tab-size: 4; /* 3 */ font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */ + font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */ } /* diff --git a/tests/__snapshots__/source-maps.test.js.snap b/tests/__snapshots__/source-maps.test.js.snap index b1016e638e7c..32da0ae772dd 100644 --- a/tests/__snapshots__/source-maps.test.js.snap +++ b/tests/__snapshots__/source-maps.test.js.snap @@ -73,293 +73,294 @@ Array [ "2:4-18 -> 19:2-18", "2:18 -> 20:0", "2:4 -> 22:0", - "2:18 -> 28:1", - "2:4 -> 30:0", - "2:4-18 -> 31:2-26", - "2:4-18 -> 32:2-40", - "2:4-18 -> 33:2-26", - "2:4-18 -> 34:2-21", - "2:4-18 -> 35:2-230", - "2:4-18 -> 36:2-39", - "2:18 -> 37:0", - "2:4 -> 39:0", - "2:18 -> 42:1", - "2:4 -> 44:0", - "2:4-18 -> 45:2-19", - "2:4-18 -> 46:2-30", - "2:18 -> 47:0", - "2:4 -> 49:0", - "2:18 -> 53:1", - "2:4 -> 55:0", - "2:4-18 -> 56:2-19", - "2:4-18 -> 57:2-24", - "2:4-18 -> 58:2-31", - "2:18 -> 59:0", - "2:4 -> 61:0", - "2:18 -> 63:1", - "2:4 -> 65:0", - "2:4-18 -> 66:2-35", - "2:18 -> 67:0", - "2:4 -> 69:0", - "2:18 -> 71:1", - "2:4 -> 73:0", - "2:4-18 -> 79:2-20", - "2:4-18 -> 80:2-22", - "2:18 -> 81:0", - "2:4 -> 83:0", - "2:18 -> 85:1", - "2:4 -> 87:0", - "2:4-18 -> 88:2-16", - "2:4-18 -> 89:2-26", - "2:18 -> 90:0", - "2:4 -> 92:0", - "2:18 -> 94:1", - "2:4 -> 96:0", - "2:4-18 -> 98:2-21", - "2:18 -> 99:0", - "2:4 -> 101:0", - "2:18 -> 104:1", - "2:4 -> 106:0", - "2:4-18 -> 110:2-121", - "2:4-18 -> 111:2-24", - "2:18 -> 112:0", - "2:4 -> 114:0", - "2:18 -> 116:1", - "2:4 -> 118:0", - "2:4-18 -> 119:2-16", - "2:18 -> 120:0", - "2:4 -> 122:0", - "2:18 -> 124:1", - "2:4 -> 126:0", - "2:4-18 -> 128:2-16", - "2:4-18 -> 129:2-16", - "2:4-18 -> 130:2-20", - "2:4-18 -> 131:2-26", - "2:18 -> 132:0", - "2:4 -> 134:0", - "2:4-18 -> 135:2-17", - "2:18 -> 136:0", - "2:4 -> 138:0", - "2:4-18 -> 139:2-13", - "2:18 -> 140:0", - "2:4 -> 142:0", - "2:18 -> 146:1", - "2:4 -> 148:0", - "2:4-18 -> 149:2-24", - "2:4-18 -> 150:2-31", - "2:4-18 -> 151:2-35", - "2:18 -> 152:0", - "2:4 -> 154:0", - "2:18 -> 158:1", - "2:4 -> 160:0", - "2:4-18 -> 165:2-30", - "2:4-18 -> 166:2-25", + "2:18 -> 29:1", + "2:4 -> 31:0", + "2:4-18 -> 32:2-26", + "2:4-18 -> 33:2-40", + "2:4-18 -> 34:2-26", + "2:4-18 -> 35:2-21", + "2:4-18 -> 36:2-230", + "2:4-18 -> 37:2-39", + "2:4-18 -> 38:2-41", + "2:18 -> 39:0", + "2:4 -> 41:0", + "2:18 -> 44:1", + "2:4 -> 46:0", + "2:4-18 -> 47:2-19", + "2:4-18 -> 48:2-30", + "2:18 -> 49:0", + "2:4 -> 51:0", + "2:18 -> 55:1", + "2:4 -> 57:0", + "2:4-18 -> 58:2-19", + "2:4-18 -> 59:2-24", + "2:4-18 -> 60:2-31", + "2:18 -> 61:0", + "2:4 -> 63:0", + "2:18 -> 65:1", + "2:4 -> 67:0", + "2:4-18 -> 68:2-35", + "2:18 -> 69:0", + "2:4 -> 71:0", + "2:18 -> 73:1", + "2:4 -> 75:0", + "2:4-18 -> 81:2-20", + "2:4-18 -> 82:2-22", + "2:18 -> 83:0", + "2:4 -> 85:0", + "2:18 -> 87:1", + "2:4 -> 89:0", + "2:4-18 -> 90:2-16", + "2:4-18 -> 91:2-26", + "2:18 -> 92:0", + "2:4 -> 94:0", + "2:18 -> 96:1", + "2:4 -> 98:0", + "2:4-18 -> 100:2-21", + "2:18 -> 101:0", + "2:4 -> 103:0", + "2:18 -> 106:1", + "2:4 -> 108:0", + "2:4-18 -> 112:2-121", + "2:4-18 -> 113:2-24", + "2:18 -> 114:0", + "2:4 -> 116:0", + "2:18 -> 118:1", + "2:4 -> 120:0", + "2:4-18 -> 121:2-16", + "2:18 -> 122:0", + "2:4 -> 124:0", + "2:18 -> 126:1", + "2:4 -> 128:0", + "2:4-18 -> 130:2-16", + "2:4-18 -> 131:2-16", + "2:4-18 -> 132:2-20", + "2:4-18 -> 133:2-26", + "2:18 -> 134:0", + "2:4 -> 136:0", + "2:4-18 -> 137:2-17", + "2:18 -> 138:0", + "2:4 -> 140:0", + "2:4-18 -> 141:2-13", + "2:18 -> 142:0", + "2:4 -> 144:0", + "2:18 -> 148:1", + "2:4 -> 150:0", + "2:4-18 -> 151:2-24", + "2:4-18 -> 152:2-31", + "2:4-18 -> 153:2-35", + "2:18 -> 154:0", + "2:4 -> 156:0", + "2:18 -> 160:1", + "2:4 -> 162:0", "2:4-18 -> 167:2-30", - "2:4-18 -> 168:2-30", - "2:4-18 -> 169:2-24", - "2:4-18 -> 170:2-19", - "2:4-18 -> 171:2-20", - "2:18 -> 172:0", - "2:4 -> 174:0", - "2:18 -> 176:1", - "2:4 -> 178:0", - "2:4-18 -> 180:2-22", - "2:18 -> 181:0", - "2:4 -> 183:0", - "2:18 -> 186:1", - "2:4 -> 188:0", - "2:4-18 -> 192:2-36", - "2:4-18 -> 193:2-39", - "2:4-18 -> 194:2-32", - "2:18 -> 195:0", - "2:4 -> 197:0", - "2:18 -> 199:1", - "2:4 -> 201:0", - "2:4-18 -> 202:2-15", - "2:18 -> 203:0", - "2:4 -> 205:0", - "2:18 -> 207:1", - "2:4 -> 209:0", - "2:4-18 -> 210:2-18", - "2:18 -> 211:0", - "2:4 -> 213:0", - "2:18 -> 215:1", - "2:4 -> 217:0", - "2:4-18 -> 218:2-26", - "2:18 -> 219:0", - "2:4 -> 221:0", - "2:18 -> 223:1", - "2:4 -> 225:0", - "2:4-18 -> 227:2-14", - "2:18 -> 228:0", - "2:4 -> 230:0", - "2:18 -> 233:1", - "2:4 -> 235:0", - "2:4-18 -> 236:2-39", - "2:4-18 -> 237:2-30", - "2:18 -> 238:0", - "2:4 -> 240:0", - "2:18 -> 242:1", - "2:4 -> 244:0", - "2:4-18 -> 245:2-26", - "2:18 -> 246:0", - "2:4 -> 248:0", - "2:18 -> 251:1", - "2:4 -> 253:0", - "2:4-18 -> 254:2-36", - "2:4-18 -> 255:2-23", - "2:18 -> 256:0", - "2:4 -> 258:0", - "2:18 -> 260:1", - "2:4 -> 262:0", - "2:4-18 -> 263:2-20", - "2:18 -> 264:0", - "2:4 -> 266:0", - "2:18 -> 268:1", - "2:4 -> 270:0", - "2:4-18 -> 283:2-11", - "2:18 -> 284:0", - "2:4 -> 286:0", - "2:4-18 -> 287:2-11", - "2:4-18 -> 288:2-12", - "2:18 -> 289:0", - "2:4 -> 291:0", - "2:4-18 -> 292:2-12", - "2:18 -> 293:0", - "2:4 -> 295:0", - "2:4-18 -> 298:2-18", - "2:4-18 -> 299:2-11", - "2:4-18 -> 300:2-12", - "2:18 -> 301:0", - "2:4 -> 303:0", - "2:18 -> 305:1", - "2:4 -> 307:0", - "2:4-18 -> 308:2-18", - "2:18 -> 309:0", - "2:4 -> 311:0", - "2:18 -> 314:1", - "2:4 -> 316:0", - "2:4-18 -> 318:2-20", - "2:4-18 -> 319:2-24", - "2:18 -> 320:0", - "2:4 -> 322:0", - "2:18 -> 324:1", - "2:4 -> 326:0", - "2:4-18 -> 328:2-17", - "2:18 -> 329:0", - "2:4 -> 331:0", - "2:18 -> 333:1", - "2:4 -> 334:0", - "2:4-18 -> 335:2-17", - "2:18 -> 336:0", - "2:4 -> 338:0", - "2:18 -> 342:1", - "2:4 -> 344:0", - "2:4-18 -> 352:2-24", - "2:4-18 -> 353:2-32", - "2:18 -> 354:0", - "2:4 -> 356:0", - "2:18 -> 358:1", - "2:4 -> 360:0", - "2:4-18 -> 362:2-17", - "2:4-18 -> 363:2-14", - "2:18 -> 364:0", - "2:4-18 -> 366:0-72", - "2:4 -> 367:0", - "2:4-18 -> 368:2-15", - "2:18 -> 369:0", - "2:4 -> 371:0", - "2:4-18 -> 372:2-26", - "2:4-18 -> 373:2-26", - "2:4-18 -> 374:2-21", - "2:4-18 -> 375:2-21", - "2:4-18 -> 376:2-16", - "2:4-18 -> 377:2-16", + "2:4-18 -> 168:2-25", + "2:4-18 -> 169:2-30", + "2:4-18 -> 170:2-30", + "2:4-18 -> 171:2-24", + "2:4-18 -> 172:2-19", + "2:4-18 -> 173:2-20", + "2:18 -> 174:0", + "2:4 -> 176:0", + "2:18 -> 178:1", + "2:4 -> 180:0", + "2:4-18 -> 182:2-22", + "2:18 -> 183:0", + "2:4 -> 185:0", + "2:18 -> 188:1", + "2:4 -> 190:0", + "2:4-18 -> 194:2-36", + "2:4-18 -> 195:2-39", + "2:4-18 -> 196:2-32", + "2:18 -> 197:0", + "2:4 -> 199:0", + "2:18 -> 201:1", + "2:4 -> 203:0", + "2:4-18 -> 204:2-15", + "2:18 -> 205:0", + "2:4 -> 207:0", + "2:18 -> 209:1", + "2:4 -> 211:0", + "2:4-18 -> 212:2-18", + "2:18 -> 213:0", + "2:4 -> 215:0", + "2:18 -> 217:1", + "2:4 -> 219:0", + "2:4-18 -> 220:2-26", + "2:18 -> 221:0", + "2:4 -> 223:0", + "2:18 -> 225:1", + "2:4 -> 227:0", + "2:4-18 -> 229:2-14", + "2:18 -> 230:0", + "2:4 -> 232:0", + "2:18 -> 235:1", + "2:4 -> 237:0", + "2:4-18 -> 238:2-39", + "2:4-18 -> 239:2-30", + "2:18 -> 240:0", + "2:4 -> 242:0", + "2:18 -> 244:1", + "2:4 -> 246:0", + "2:4-18 -> 247:2-26", + "2:18 -> 248:0", + "2:4 -> 250:0", + "2:18 -> 253:1", + "2:4 -> 255:0", + "2:4-18 -> 256:2-36", + "2:4-18 -> 257:2-23", + "2:18 -> 258:0", + "2:4 -> 260:0", + "2:18 -> 262:1", + "2:4 -> 264:0", + "2:4-18 -> 265:2-20", + "2:18 -> 266:0", + "2:4 -> 268:0", + "2:18 -> 270:1", + "2:4 -> 272:0", + "2:4-18 -> 285:2-11", + "2:18 -> 286:0", + "2:4 -> 288:0", + "2:4-18 -> 289:2-11", + "2:4-18 -> 290:2-12", + "2:18 -> 291:0", + "2:4 -> 293:0", + "2:4-18 -> 294:2-12", + "2:18 -> 295:0", + "2:4 -> 297:0", + "2:4-18 -> 300:2-18", + "2:4-18 -> 301:2-11", + "2:4-18 -> 302:2-12", + "2:18 -> 303:0", + "2:4 -> 305:0", + "2:18 -> 307:1", + "2:4 -> 309:0", + "2:4-18 -> 310:2-18", + "2:18 -> 311:0", + "2:4 -> 313:0", + "2:18 -> 316:1", + "2:4 -> 318:0", + "2:4-18 -> 320:2-20", + "2:4-18 -> 321:2-24", + "2:18 -> 322:0", + "2:4 -> 324:0", + "2:18 -> 326:1", + "2:4 -> 328:0", + "2:4-18 -> 330:2-17", + "2:18 -> 331:0", + "2:4 -> 333:0", + "2:18 -> 335:1", + "2:4 -> 336:0", + "2:4-18 -> 337:2-17", + "2:18 -> 338:0", + "2:4 -> 340:0", + "2:18 -> 344:1", + "2:4 -> 346:0", + "2:4-18 -> 354:2-24", + "2:4-18 -> 355:2-32", + "2:18 -> 356:0", + "2:4 -> 358:0", + "2:18 -> 360:1", + "2:4 -> 362:0", + "2:4-18 -> 364:2-17", + "2:4-18 -> 365:2-14", + "2:18 -> 366:0", + "2:4-18 -> 368:0-72", + "2:4 -> 369:0", + "2:4-18 -> 370:2-15", + "2:18 -> 371:0", + "2:4 -> 373:0", + "2:4-18 -> 374:2-26", + "2:4-18 -> 375:2-26", + "2:4-18 -> 376:2-21", + "2:4-18 -> 377:2-21", "2:4-18 -> 378:2-16", - "2:4-18 -> 379:2-17", - "2:4-18 -> 380:2-17", - "2:4-18 -> 381:2-15", - "2:4-18 -> 382:2-15", - "2:4-18 -> 383:2-20", - "2:4-18 -> 384:2-40", - "2:4-18 -> 385:2-17", - "2:4-18 -> 386:2-22", - "2:4-18 -> 387:2-24", - "2:4-18 -> 388:2-25", - "2:4-18 -> 389:2-26", - "2:4-18 -> 390:2-20", - "2:4-18 -> 391:2-29", - "2:4-18 -> 392:2-30", - "2:4-18 -> 393:2-40", - "2:4-18 -> 394:2-36", - "2:4-18 -> 395:2-29", - "2:4-18 -> 396:2-24", - "2:4-18 -> 397:2-32", - "2:4-18 -> 398:2-14", - "2:4-18 -> 399:2-20", - "2:4-18 -> 400:2-18", - "2:4-18 -> 401:2-19", - "2:4-18 -> 402:2-20", - "2:4-18 -> 403:2-16", - "2:4-18 -> 404:2-18", - "2:4-18 -> 405:2-15", - "2:4-18 -> 406:2-21", - "2:4-18 -> 407:2-23", - "2:4-18 -> 408:2-29", - "2:4-18 -> 409:2-27", - "2:4-18 -> 410:2-28", - "2:4-18 -> 411:2-29", - "2:4-18 -> 412:2-25", - "2:4-18 -> 413:2-26", - "2:4-18 -> 414:2-27", - "2:4 -> 415:2", - "2:18 -> 416:0", - "2:4 -> 418:0", - "2:4-18 -> 419:2-26", - "2:4-18 -> 420:2-26", - "2:4-18 -> 421:2-21", - "2:4-18 -> 422:2-21", - "2:4-18 -> 423:2-16", - "2:4-18 -> 424:2-16", + "2:4-18 -> 379:2-16", + "2:4-18 -> 380:2-16", + "2:4-18 -> 381:2-17", + "2:4-18 -> 382:2-17", + "2:4-18 -> 383:2-15", + "2:4-18 -> 384:2-15", + "2:4-18 -> 385:2-20", + "2:4-18 -> 386:2-40", + "2:4-18 -> 387:2-17", + "2:4-18 -> 388:2-22", + "2:4-18 -> 389:2-24", + "2:4-18 -> 390:2-25", + "2:4-18 -> 391:2-26", + "2:4-18 -> 392:2-20", + "2:4-18 -> 393:2-29", + "2:4-18 -> 394:2-30", + "2:4-18 -> 395:2-40", + "2:4-18 -> 396:2-36", + "2:4-18 -> 397:2-29", + "2:4-18 -> 398:2-24", + "2:4-18 -> 399:2-32", + "2:4-18 -> 400:2-14", + "2:4-18 -> 401:2-20", + "2:4-18 -> 402:2-18", + "2:4-18 -> 403:2-19", + "2:4-18 -> 404:2-20", + "2:4-18 -> 405:2-16", + "2:4-18 -> 406:2-18", + "2:4-18 -> 407:2-15", + "2:4-18 -> 408:2-21", + "2:4-18 -> 409:2-23", + "2:4-18 -> 410:2-29", + "2:4-18 -> 411:2-27", + "2:4-18 -> 412:2-28", + "2:4-18 -> 413:2-29", + "2:4-18 -> 414:2-25", + "2:4-18 -> 415:2-26", + "2:4-18 -> 416:2-27", + "2:4 -> 417:2", + "2:18 -> 418:0", + "2:4 -> 420:0", + "2:4-18 -> 421:2-26", + "2:4-18 -> 422:2-26", + "2:4-18 -> 423:2-21", + "2:4-18 -> 424:2-21", "2:4-18 -> 425:2-16", - "2:4-18 -> 426:2-17", - "2:4-18 -> 427:2-17", - "2:4-18 -> 428:2-15", - "2:4-18 -> 429:2-15", - "2:4-18 -> 430:2-20", - "2:4-18 -> 431:2-40", - "2:4-18 -> 432:2-17", - "2:4-18 -> 433:2-22", - "2:4-18 -> 434:2-24", - "2:4-18 -> 435:2-25", - "2:4-18 -> 436:2-26", - "2:4-18 -> 437:2-20", - "2:4-18 -> 438:2-29", - "2:4-18 -> 439:2-30", - "2:4-18 -> 440:2-40", - "2:4-18 -> 441:2-36", - "2:4-18 -> 442:2-29", - "2:4-18 -> 443:2-24", - "2:4-18 -> 444:2-32", - "2:4-18 -> 445:2-14", - "2:4-18 -> 446:2-20", - "2:4-18 -> 447:2-18", - "2:4-18 -> 448:2-19", - "2:4-18 -> 449:2-20", - "2:4-18 -> 450:2-16", - "2:4-18 -> 451:2-18", - "2:4-18 -> 452:2-15", - "2:4-18 -> 453:2-21", - "2:4-18 -> 454:2-23", - "2:4-18 -> 455:2-29", - "2:4-18 -> 456:2-27", - "2:4-18 -> 457:2-28", - "2:4-18 -> 458:2-29", - "2:4-18 -> 459:2-25", - "2:4-18 -> 460:2-26", - "2:4-18 -> 461:2-27", - "2:4 -> 462:2", - "2:18 -> 463:0", + "2:4-18 -> 426:2-16", + "2:4-18 -> 427:2-16", + "2:4-18 -> 428:2-17", + "2:4-18 -> 429:2-17", + "2:4-18 -> 430:2-15", + "2:4-18 -> 431:2-15", + "2:4-18 -> 432:2-20", + "2:4-18 -> 433:2-40", + "2:4-18 -> 434:2-17", + "2:4-18 -> 435:2-22", + "2:4-18 -> 436:2-24", + "2:4-18 -> 437:2-25", + "2:4-18 -> 438:2-26", + "2:4-18 -> 439:2-20", + "2:4-18 -> 440:2-29", + "2:4-18 -> 441:2-30", + "2:4-18 -> 442:2-40", + "2:4-18 -> 443:2-36", + "2:4-18 -> 444:2-29", + "2:4-18 -> 445:2-24", + "2:4-18 -> 446:2-32", + "2:4-18 -> 447:2-14", + "2:4-18 -> 448:2-20", + "2:4-18 -> 449:2-18", + "2:4-18 -> 450:2-19", + "2:4-18 -> 451:2-20", + "2:4-18 -> 452:2-16", + "2:4-18 -> 453:2-18", + "2:4-18 -> 454:2-15", + "2:4-18 -> 455:2-21", + "2:4-18 -> 456:2-23", + "2:4-18 -> 457:2-29", + "2:4-18 -> 458:2-27", + "2:4-18 -> 459:2-28", + "2:4-18 -> 460:2-29", + "2:4-18 -> 461:2-25", + "2:4-18 -> 462:2-26", + "2:4-18 -> 463:2-27", + "2:4 -> 464:2", + "2:18 -> 465:0", ] `; diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js index f5d0822041d3..b584078de0ee 100644 --- a/tests/evaluateTailwindFunctions.test.js +++ b/tests/evaluateTailwindFunctions.test.js @@ -680,6 +680,72 @@ test('font-feature-settings values can be retrieved', () => { }) }) +test('font-family values are retrieved without font-variation-settings', () => { + let input = css` + .heading-1 { + font-family: theme('fontFamily.sans'); + } + .heading-2 { + font-family: theme('fontFamily.serif'); + } + .heading-3 { + font-family: theme('fontFamily.mono'); + } + ` + + let output = css` + .heading-1 { + font-family: Inter; + } + .heading-2 { + font-family: Times, serif; + } + .heading-3 { + font-family: Menlo, monospace; + } + ` + + return run(input, { + theme: { + fontFamily: { + sans: ['Inter', { fontVariationSettings: '"opsz" 32' }], + serif: [['Times', 'serif'], { fontVariationSettings: '"opsz" 32' }], + mono: ['Menlo, monospace', { fontVariationSettings: '"opsz" 32' }], + }, + }, + }).then((result) => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) + +test('font-variation-settings values can be retrieved', () => { + let input = css` + .heading { + font-family: theme('fontFamily.sans'); + font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings'); + } + ` + + let output = css` + .heading { + font-family: Inter; + font-variation-settings: 'opsz' 32; + } + ` + + return run(input, { + theme: { + fontFamily: { + sans: ['Inter', { fontVariationSettings: "'opsz' 32" }], + }, + }, + }).then((result) => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) + test('box-shadow values are joined when an array', () => { let input = css` .element { diff --git a/tests/plugins/fontFamily.test.js b/tests/plugins/fontFamily.test.js index 961689cf111a..faa05f4525ea 100644 --- a/tests/plugins/fontFamily.test.js +++ b/tests/plugins/fontFamily.test.js @@ -96,3 +96,43 @@ test('font-feature-settings can be provided when families are defined as an arra `) }) }) + +test('font-variation-settings can be provided when families are defined as a string', () => { + let config = { + content: [{ raw: html`
` }], + theme: { + fontFamily: { + sans: ['Inter, sans-serif', { fontVariationSettings: '"opsz" 32' }], + }, + }, + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchCss(` + .font-sans { + font-family: Inter, sans-serif; + font-variation-settings: "opsz" 32; + } + `) + }) +}) + +test('font-variation-settings can be provided when families are defined as an array', () => { + let config = { + content: [{ raw: html`
` }], + theme: { + fontFamily: { + sans: [['Inter', 'sans-serif'], { fontVariationSettings: '"opsz" 32' }], + }, + }, + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchCss(` + .font-sans { + font-family: Inter, sans-serif; + font-variation-settings: "opsz" 32; + } + `) + }) +}) diff --git a/types/config.d.ts b/types/config.d.ts index 9a5e0422f2cb..24607f11f495 100644 --- a/types/config.d.ts +++ b/types/config.d.ts @@ -165,7 +165,13 @@ interface ThemeConfig { string, | string | string[] - | [fontFamily: string | string[], configuration: Partial<{ fontFeatureSettings: string }>] + | [ + fontFamily: string | string[], + configuration: Partial<{ + fontFeatureSettings: string + fontVariationSettings: string + }> + ] > > fontSize: ResolvableTo<