Prepare for the v3.2.6

tailwindlabs · Feb 8, 2023 · 352677f · 352677f
1 parent add1636
commit 352677f
Show file tree

Hide file tree

Showing 26 changed files with 325 additions and 825 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,16 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-### 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 `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))
+- Nothing yet!
 
 ## [3.2.5] - 2023-02-08
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;