diff --git a/CHANGELOG.md b/CHANGELOG.md index abc539c7e53e..fb26dbe8f969 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,15 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Add `line-height` modifier support to `font-size` utilities ([#9875](https://github.com/tailwindlabs/tailwindcss/pull/9875)) -- Support using variables as arbitrary values without `var(...)` ([#9880](https://github.com/tailwindlabs/tailwindcss/pull/9880), [#9962](https://github.com/tailwindlabs/tailwindcss/pull/9962)) - Add standalone CLI build for 64-bit Windows on ARM (`node16-win-arm64`) ([#10001](https://github.com/tailwindlabs/tailwindcss/pull/10001)) -- Add `delay-0` and `duration-0` by default ([#10294](https://github.com/tailwindlabs/tailwindcss/pull/10294)) -- Add logical properties support for inline direction ([#10166](https://github.com/tailwindlabs/tailwindcss/pull/10166)) -- Add `hyphens` utilities ([#10071](https://github.com/tailwindlabs/tailwindcss/pull/10071)) - [Oxide] Use `lightningcss` for nesting and vendor prefixes in PostCSS plugin ([#10399](https://github.com/tailwindlabs/tailwindcss/pull/10399)) -- Add support for configuring default `font-variation-settings` for a `font-family` ([#10034](https://github.com/tailwindlabs/tailwindcss/pull/10034), [#10515](https://github.com/tailwindlabs/tailwindcss/pull/10515)) -- Add `caption-side` utilities ([#10470](https://github.com/tailwindlabs/tailwindcss/pull/10470)) ### Fixed diff --git a/src/corePlugins.js b/src/corePlugins.js index e440eff8eafe..18c06eb08897 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,7 +1,6 @@ import fs from 'fs' import * as path from 'path' import postcss from 'postcss' -import { env } from './lib/sharedState' import createUtilityPlugin from './util/createUtilityPlugin' import buildMediaQuery from './util/buildMediaQuery' import escapeClassName from './util/escapeClassName' @@ -647,8 +646,6 @@ export let corePlugins = { ['inset-y', ['top', 'bottom']], ], [ - ['start', ['inset-inline-start']], - ['end', ['inset-inline-end']], ['top', ['top']], ['right', ['right']], ['bottom', ['bottom']], @@ -700,8 +697,6 @@ export let corePlugins = { ['my', ['margin-top', 'margin-bottom']], ], [ - ['ms', ['margin-inline-start']], - ['me', ['margin-inline-end']], ['mt', ['margin-top']], ['mr', ['margin-right']], ['mb', ['margin-bottom']], @@ -772,13 +767,6 @@ export let corePlugins = { }) }, - captionSide: ({ addUtilities }) => { - addUtilities({ - '.caption-top': { 'caption-side': 'top' }, - '.caption-bottom': { 'caption-side': 'bottom' }, - }) - }, - borderCollapse: ({ addUtilities }) => { addUtilities({ '.border-collapse': { 'border-collapse': 'collapse' }, @@ -1057,8 +1045,6 @@ export let corePlugins = { ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']], ], [ - ['scroll-ms', ['scroll-margin-inline-start']], - ['scroll-me', ['scroll-margin-inline-end']], ['scroll-mt', ['scroll-margin-top']], ['scroll-mr', ['scroll-margin-right']], ['scroll-mb', ['scroll-margin-bottom']], @@ -1075,8 +1061,6 @@ export let corePlugins = { ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']], ], [ - ['scroll-ps', ['scroll-padding-inline-start']], - ['scroll-pe', ['scroll-padding-inline-end']], ['scroll-pt', ['scroll-padding-top']], ['scroll-pr', ['scroll-padding-right']], ['scroll-pb', ['scroll-padding-bottom']], @@ -1250,16 +1234,6 @@ export let corePlugins = { 'space-x': (value) => { value = value === '0' ? '0px' : value - if (env.OXIDE) { - return { - '& > :not([hidden]) ~ :not([hidden])': { - '--tw-space-x-reverse': '0', - 'margin-inline-end': `calc(${value} * var(--tw-space-x-reverse))`, - 'margin-inline-start': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`, - }, - } - } - return { '& > :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', @@ -1295,17 +1269,6 @@ export let corePlugins = { 'divide-x': (value) => { value = value === '0' ? '0px' : value - if (env.OXIDE) { - return { - '& > :not([hidden]) ~ :not([hidden])': { - '@defaults border-width': {}, - '--tw-divide-x-reverse': '0', - 'border-inline-end-width': `calc(${value} * var(--tw-divide-x-reverse))`, - 'border-inline-start-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`, - }, - } - } - return { '& > :not([hidden]) ~ :not([hidden])': { '@defaults border-width': {}, @@ -1473,14 +1436,6 @@ export let corePlugins = { }) }, - hyphens: ({ addUtilities }) => { - addUtilities({ - '.hyphens-none': { hyphens: 'none' }, - '.hyphens-manual': { hyphens: 'manual' }, - '.hyphens-auto': { hyphens: 'auto' }, - }) - }, - whitespace: ({ addUtilities }) => { addUtilities({ '.whitespace-normal': { 'white-space': 'normal' }, @@ -1503,18 +1458,12 @@ export let corePlugins = { borderRadius: createUtilityPlugin('borderRadius', [ ['rounded', ['border-radius']], [ - ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']], - ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']], ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']], ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']], ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']], ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']], ], [ - ['rounded-ss', ['border-start-start-radius']], - ['rounded-se', ['border-start-end-radius']], - ['rounded-ee', ['border-end-end-radius']], - ['rounded-es', ['border-end-start-radius']], ['rounded-tl', ['border-top-left-radius']], ['rounded-tr', ['border-top-right-radius']], ['rounded-br', ['border-bottom-right-radius']], @@ -1531,8 +1480,6 @@ export let corePlugins = { ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']], ], [ - ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']], - ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']], ['border-t', [['@defaults border-width', {}], 'border-top-width']], ['border-r', [['@defaults border-width', {}], 'border-right-width']], ['border-b', [['@defaults border-width', {}], 'border-bottom-width']], @@ -1615,32 +1562,6 @@ export let corePlugins = { matchUtilities( { - 'border-s': (value) => { - if (!corePlugins('borderOpacity')) { - return { - 'border-inline-start-color': toColorValue(value), - } - } - - return withAlphaVariable({ - color: value, - property: 'border-inline-start-color', - variable: '--tw-border-opacity', - }) - }, - 'border-e': (value) => { - if (!corePlugins('borderOpacity')) { - return { - 'border-inline-end-color': toColorValue(value), - } - } - - return withAlphaVariable({ - color: value, - property: 'border-inline-end-color', - variable: '--tw-border-opacity', - }) - }, 'border-t': (value) => { if (!corePlugins('borderOpacity')) { return { @@ -1877,8 +1798,6 @@ export let corePlugins = { ['py', ['padding-top', 'padding-bottom']], ], [ - ['ps', ['padding-inline-start']], - ['pe', ['padding-inline-end']], ['pt', ['padding-top']], ['pr', ['padding-right']], ['pb', ['padding-bottom']], @@ -1922,16 +1841,13 @@ export let corePlugins = { font: (value) => { let [families, options = {}] = Array.isArray(value) && isPlainObject(value[1]) ? value : [value] - let { fontFeatureSettings, fontVariationSettings } = options + let { fontFeatureSettings } = options return { 'font-family': Array.isArray(families) ? families.join(', ') : families, ...(fontFeatureSettings === undefined ? {} : { 'font-feature-settings': fontFeatureSettings }), - ...(fontVariationSettings === undefined - ? {} - : { 'font-variation-settings': fontVariationSettings }), } }, }, @@ -1945,16 +1861,9 @@ export let corePlugins = { fontSize: ({ matchUtilities, theme }) => { matchUtilities( { - text: (value, { modifier }) => { + text: (value) => { let [fontSize, options] = Array.isArray(value) ? value : [value] - if (modifier) { - return { - 'font-size': fontSize, - 'line-height': modifier, - } - } - let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options) ? options : { lineHeight: options } @@ -1969,7 +1878,6 @@ export let corePlugins = { }, { values: theme('fontSize'), - modifiers: theme('lineHeight'), type: ['absolute-size', 'relative-size', 'length', 'percentage'], } ) diff --git a/src/css/preflight.css b/src/css/preflight.css index fab875d95904..3029044290d5 100644 --- a/src/css/preflight.css +++ b/src/css/preflight.css @@ -23,7 +23,6 @@ 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 { @@ -33,7 +32,6 @@ 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/src/util/dataTypes.js b/src/util/dataTypes.js index 55cc005799f6..5005f5fe0083 100644 --- a/src/util/dataTypes.js +++ b/src/util/dataTypes.js @@ -16,10 +16,6 @@ const placeholderRe = new RegExp(placeholder, 'g') // This is not a data type, but rather a function that can normalize the // correct values. export function normalize(value, isRoot = true) { - if (value.startsWith('--')) { - return `var(${value})` - } - // Keep raw strings if it starts with `url(` if (value.includes('url(')) { return value diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js index e347f404ba8a..5c4821d3cbca 100644 --- a/src/util/pluginUtils.js +++ b/src/util/pluginUtils.js @@ -133,14 +133,6 @@ export function parseColorFormat(value) { return value } -function unwrapArbitraryModifier(modifier) { - modifier = modifier.slice(1, -1) - if (modifier.startsWith('--')) { - modifier = `var(${modifier})` - } - return modifier -} - export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) { if (options.values?.[modifier] !== undefined) { return parseColorFormat(options.values?.[modifier]) @@ -161,7 +153,7 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) { normalizedColor = parseColorFormat(normalizedColor) if (isArbitraryValue(alpha)) { - return withAlphaValue(normalizedColor, unwrapArbitraryModifier(alpha)) + return withAlphaValue(normalizedColor, alpha.slice(1, -1)) } if (tailwindConfig.theme?.opacity?.[alpha] === undefined) { @@ -295,7 +287,7 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) { if (configValue !== null) { utilityModifier = configValue } else if (isArbitraryValue(utilityModifier)) { - utilityModifier = unwrapArbitraryModifier(utilityModifier) + utilityModifier = utilityModifier.slice(1, -1) } } } diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 8a3fac7a3fcc..21a82cd4869b 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -853,7 +853,6 @@ module.exports = { 'top-left': 'top left', }, transitionDelay: { - 0: '0s', 75: '75ms', 100: '100ms', 150: '150ms', @@ -865,7 +864,6 @@ module.exports = { }, transitionDuration: { DEFAULT: '150ms', - 0: '0s', 75: '75ms', 100: '100ms', 150: '150ms', diff --git a/tests/any-type.test.js b/tests/any-type.test.js index add8a1795551..8593362aada6 100644 --- a/tests/any-type.test.js +++ b/tests/any-type.test.js @@ -428,8 +428,8 @@ crosscheck(({ stable, oxide }) => { } .space-x-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; - margin-inline-start: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(var(--any-value) * var(--tw-space-x-reverse)); + margin-right: calc(var(--any-value) * var(--tw-space-x-reverse)); + margin-left: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse))); } .space-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css index acd68ee3386a..e19212d7411c 100644 --- a/tests/arbitrary-values.oxide.test.css +++ b/tests/arbitrary-values.oxide.test.css @@ -455,13 +455,13 @@ } .space-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; - margin-inline-start: calc(20cm * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(20cm * var(--tw-space-x-reverse)); + margin-right: calc(20cm * var(--tw-space-x-reverse)); + margin-left: calc(20cm * calc(1 - var(--tw-space-x-reverse))); } .space-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(calc(20% - 1cm) * var(--tw-space-x-reverse)); + margin-right: calc(calc(20% - 1cm) * var(--tw-space-x-reverse)); + margin-left: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse))); } .space-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; @@ -475,13 +475,13 @@ } .divide-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; - border-inline-end-width: calc(20cm * var(--tw-divide-x-reverse)); - border-inline-start-width: calc(20cm * calc(1 - var(--tw-divide-x-reverse))); + border-right-width: calc(20cm * var(--tw-divide-x-reverse)); + border-left-width: calc(20cm * calc(1 - var(--tw-divide-x-reverse))); } .divide-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; - border-inline-end-width: calc(calc(20% - 1cm) * var(--tw-divide-x-reverse)); - border-inline-start-width: calc(calc(20% - 1cm) * calc(1 - var(--tw-divide-x-reverse))); + border-right-width: calc(calc(20% - 1cm) * var(--tw-divide-x-reverse)); + border-left-width: calc(calc(20% - 1cm) * calc(1 - var(--tw-divide-x-reverse))); } .divide-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index 183fcf57c3c9..57686114d6eb 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -545,70 +545,4 @@ crosscheck(({ stable, oxide }) => { `) }) }) - - it('can use CSS variables as arbitrary values without `var()`', () => { - let config = { - content: [ - { - raw: html`
`, - }, - ], - corePlugins: { preflight: false }, - plugins: [], - } - - let input = css` - @tailwind utilities; - ` - - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - .w-\[--width-var\] { - width: var(--width-var); - } - .bg-\[--color-var\,\#000\] { - background-color: var(--color-var, #000); - } - .bg-\[--color-var\] { - background-color: var(--color-var); - } - .bg-\[length\:--size-var\] { - background-size: var(--size-var); - } - .text-\[length\:--size-var\,12px\] { - font-size: var(--size-var, 12px); - } - `) - }) - }) - - it('can use CSS variables as arbitrary modifiers without `var()`', () => { - let config = { - content: [ - { - raw: html``, - }, - ], - corePlugins: { preflight: false }, - plugins: [], - } - - let input = css` - @tailwind utilities; - ` - - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - .bg-red-500\/\[--opacity\] { - background-color: rgb(239 68 68 / var(--opacity)); - } - .text-sm\/\[--line-height\] { - font-size: 0.875rem; - line-height: var(--line-height); - } - `) - }) - }) }) diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css index 5623fe79ee30..9484dfdd698b 100644 --- a/tests/basic-usage.oxide.test.css +++ b/tests/basic-usage.oxide.test.css @@ -252,12 +252,6 @@ .table-fixed { table-layout: fixed; } -.caption-top { - caption-side: top; -} -.caption-bottom { - caption-side: bottom; -} .border-collapse { border-collapse: collapse; } @@ -476,8 +470,8 @@ } .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; - margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } .space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; @@ -492,13 +486,13 @@ } .divide-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; - border-inline-end-width: calc(0px * var(--tw-divide-x-reverse)); - border-inline-start-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); + border-right-width: calc(0px * var(--tw-divide-x-reverse)); + border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); } .divide-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; - border-inline-end-width: calc(2px * var(--tw-divide-x-reverse)); - border-inline-start-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); + border-right-width: calc(2px * var(--tw-divide-x-reverse)); + border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } .divide-y-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 184ada947ccf..9484dfdd698b 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -252,12 +252,6 @@ .table-fixed { table-layout: fixed; } -.caption-top { - caption-side: top; -} -.caption-bottom { - caption-side: bottom; -} .border-collapse { border-collapse: collapse; } diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 4b39eb68177d..9ec0e591714c 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -161,8 +161,6 @@ crosscheck(({ stable, oxide }) => { - - diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js index 5b41a70307c7..82aa9b7da21f 100644 --- a/tests/evaluateTailwindFunctions.test.js +++ b/tests/evaluateTailwindFunctions.test.js @@ -591,72 +591,6 @@ crosscheck(({ stable, oxide }) => { }) }) - 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('font-family values are joined when an array', () => { let input = css` .element { diff --git a/tests/getClassList.test.js b/tests/getClassList.test.js index 671a767ecfe5..5fd9b00b0f87 100644 --- a/tests/getClassList.test.js +++ b/tests/getClassList.test.js @@ -88,7 +88,6 @@ crosscheck(() => { let classes = context.getClassList({ includeMetadata: true }) expect(classes).not.toContain('bg-red-500') - expect(classes).not.toContain('text-2xl') expect(classes).toContainEqual([ 'bg-red-500', @@ -112,27 +111,6 @@ crosscheck(() => { ], }, ]) - expect(classes).toContainEqual([ - 'text-2xl', - { - modifiers: [ - '3', - '4', - '5', - '6', - '7', - '8', - '9', - '10', - 'none', - 'tight', - 'snug', - 'normal', - 'relaxed', - 'loose', - ], - }, - ]) }) it('should generate plugin-defined utilities with modifier data when requested', () => { diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 976018cb05dc..fbe4fc9dfda9 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -13,12 +13,7 @@ crosscheck(() => { > - - - - - - + @@ -209,7 +204,7 @@ crosscheck(() => { @apply font-bold group-hover:font-normal; } .list { - @apply space-y-4; + @apply space-x-4; } .nested { .example { @@ -324,9 +319,9 @@ crosscheck(() => { font-weight: 400; } .list > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } .nested .example { font-weight: 700; @@ -406,29 +401,6 @@ crosscheck(() => { .foo .bg-black { appearance: none; } - .inset-6 { - inset: 1.5rem; - } - .inset-x-1 { - left: 0.25rem; - right: 0.25rem; - } - .end-8 { - inset-inline-end: 2rem; - } - .start-4 { - inset-inline-start: 1rem; - } - .mx-1 { - margin-left: 0.25rem; - margin-right: 0.25rem; - } - .me-8 { - margin-inline-end: 2rem; - } - .ms-4 { - margin-inline-start: 1rem; - } .mt-6 { margin-top: 1.5rem; } @@ -447,41 +419,6 @@ crosscheck(() => { .grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] { grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; } - .rounded-e { - border-start-end-radius: 0.25rem; - border-end-end-radius: 0.25rem; - } - .rounded-s { - border-start-start-radius: 0.25rem; - border-end-start-radius: 0.25rem; - } - .rounded-es { - border-end-start-radius: 0.25rem; - } - .rounded-ss { - border-start-start-radius: 0.25rem; - } - .border-2 { - border-width: 2px; - } - .border-e-4 { - border-inline-end-width: 4px; - } - .border-s-0 { - border-inline-start-width: 0; - } - .border-black { - --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); - } - .border-e-red-400 { - --tw-border-opacity: 1; - border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity)); - } - .border-s-green-500 { - --tw-border-opacity: 1; - border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity)); - } .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); @@ -504,19 +441,6 @@ crosscheck(() => { --tw-gradient-to: #bada5500; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } - .px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; - } - .pe-8 { - padding-inline-end: 2rem; - } - .ps-4 { - padding-inline-start: 1rem; - } - .pt-6 { - padding-top: 1.5rem; - } .text-center { text-align: center; } diff --git a/tests/match-utilities.test.js b/tests/match-utilities.test.js index 9b3cd4c56ec4..9f4d1df09fb3 100644 --- a/tests/match-utilities.test.js +++ b/tests/match-utilities.test.js @@ -6,8 +6,8 @@ crosscheck(() => { content: [ { raw: html` `, + class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo]" + >`, }, ], corePlugins: { preflight: false }, @@ -27,7 +27,6 @@ crosscheck(() => { '1': 'one', '2': 'two', '1/foo': 'onefoo', - '[8]/[9]': 'eightnine', }, modifiers: 'any', } @@ -55,9 +54,6 @@ crosscheck(() => { .test-2\/foo { color: two_foo; } - .test-\[8\]\/\[9\] { - color: eightnine_null; - } .test\/\[foo\] { color: default_[foo]; } diff --git a/tests/oxide.test.js b/tests/oxide.test.js index d2a697626021..ee7d68697614 100644 --- a/tests/oxide.test.js +++ b/tests/oxide.test.js @@ -13,8 +13,8 @@ crosscheck(({ stable, oxide }) => { ${defaults} .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; - margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); - margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } `) }) diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index 314233bea074..fe63645dbf98 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -40,8 +40,8 @@ crosscheck(({ stable, oxide }) => { ${defaults} .divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; - border-inline-end-width: calc(1px * var(--tw-divide-x-reverse)); - border-inline-start-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } `) }) diff --git a/tests/plugins/fontFamily.test.js b/tests/plugins/fontFamily.test.js index 1170dac8e9e6..fb025720a02b 100644 --- a/tests/plugins/fontFamily.test.js +++ b/tests/plugins/fontFamily.test.js @@ -98,43 +98,3 @@ crosscheck(() => { }) }) }) - -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/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js index 08e88bb76846..c3a1159eb069 100644 --- a/tests/plugins/fontSize.test.js +++ b/tests/plugins/fontSize.test.js @@ -120,78 +120,4 @@ crosscheck(() => { `) }) }) - - test('font-size utilities can include a line-height modifier', () => { - let config = { - content: [ - { - raw: html`