tailwindcss 0.0.0-insiders.a1bc203 → 0.0.0-insiders.a41c4ec

package/CHANGELOG.md

@@ -19,6 +19,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for "arbitrary properties" ([#6161](https://github.com/tailwindlabs/tailwindcss/pull/6161))
 - Add `portrait` and `landscape` variants ([#6046](https://github.com/tailwindlabs/tailwindcss/pull/6046))
 - Add `aspect-attrs` utility by default ([#6178](https://github.com/tailwindlabs/tailwindcss/pull/6178))
+- Add `text-decoration-style`, `text-decoration-thickness`, and `text-underline-offset` utilities ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
+- Add `menu` reset to preflight ([#6213](https://github.com/tailwindlabs/tailwindcss/pull/6213))
+
+### Changed
+
+- Deprecate `decoration-slice` and `decoration-break` in favor `box-decoration-slice` and `box-decoration-break` _(non-breaking)_ ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
 
 ## [3.0.0-alpha.2] - 2021-11-08
 

package/lib/corePluginList.js

@@ -126,6 +126,9 @@ var _default = [
     "textOpacity",
     "textDecoration",
     "textDecorationColor",
+    "textDecorationStyle",
+    "textDecorationThickness",
+    "textUnderlineOffset",
     "fontSmoothing",
     "placeholderColor",
     "placeholderOpacity",

package/lib/corePlugins.js

@@ -2315,6 +2315,12 @@ let corePlugins1 = {
             },
             '.decoration-clone': {
                 'box-decoration-break': 'clone'
+            },
+            '.box-decoration-slice': {
+                'box-decoration-break': 'slice'
+            },
+            '.box-decoration-clone': {
+                'box-decoration-break': 'clone'
             }
         });
     },
@@ -2786,6 +2792,9 @@ let corePlugins1 = {
             '.underline': {
                 'text-decoration': 'underline'
             },
+            '.overline': {
+                'text-decoration': 'overline'
+            },
             '.line-through': {
                 'text-decoration': 'line-through'
             },
@@ -2804,11 +2813,55 @@ let corePlugins1 = {
         }, {
             values: (0, _flattenColorPalette).default(theme('textDecorationColor')),
             type: [
-                'color',
-                'any'
+                'color'
             ]
         });
     },
+    textDecorationStyle: ({ addUtilities  })=>{
+        addUtilities({
+            '.decoration-solid': {
+                'text-decoration-style': 'solid'
+            },
+            '.decoration-double': {
+                'text-decoration-style': 'double'
+            },
+            '.decoration-dotted': {
+                'text-decoration-style': 'dotted'
+            },
+            '.decoration-dashed': {
+                'text-decoration-style': 'dashed'
+            },
+            '.decoration-wavy': {
+                'text-decoration-style': 'wavy'
+            }
+        });
+    },
+    textDecorationThickness: (0, _createUtilityPlugin).default('textDecorationThickness', [
+        [
+            'decoration',
+            [
+                'text-decoration-thickness'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'percentage'
+        ]
+    }),
+    textUnderlineOffset: (0, _createUtilityPlugin).default('textUnderlineOffset', [
+        [
+            'underline-offset',
+            [
+                'text-underline-offset'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'percentage'
+        ]
+    }),
     fontSmoothing: ({ addUtilities  })=>{
         addUtilities({
             '.antialiased': {

package/lib/css/preflight.css

@@ -288,7 +288,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;

package/lib/util/formatVariantSelector.js

@@ -40,7 +40,16 @@ function formatVariantSelector(current, ...others) {
 function finalizeSelector(format, { selector: selector1 , candidate , context  }) {
     var ref, ref1;
     var ref2;
-    let base = candidate.split((ref2 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref2 !== void 0 ? ref2 : ':').pop();
+    let separator = (ref2 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref2 !== void 0 ? ref2 : ':';
+    // Split by the separator, but ignore the separator inside square brackets:
+    //
+    // E.g.: dark:lg:hover:[paint-order:markers]
+    //           ┬  ┬     ┬            ┬
+    //           │  │     │            ╰── We will not split here
+    //           ╰──┴─────┴─────────────── We will split here
+    //
+    let splitter = new RegExp(`\\${separator}(?![^[]*\\])`);
+    let base = candidate.split(splitter).pop();
     if (context === null || context === void 0 ? void 0 : (ref1 = context.tailwindConfig) === null || ref1 === void 0 ? void 0 : ref1.prefix) {
         format = (0, _prefixSelector).default(context.tailwindConfig.prefix, format);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.a1bc203",
+  "version": "0.0.0-insiders.a41c4ec",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",

package/src/corePluginList.js

@@ -1 +1 @@
-export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","borderCollapse","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","whitespace","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content"]
+export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","borderCollapse","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","whitespace","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","textDecorationStyle","textDecorationThickness","textUnderlineOffset","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content"]

package/src/corePlugins.js

@@ -1396,8 +1396,10 @@ export let corePlugins = {
 
   boxDecorationBreak: ({ addUtilities }) => {
     addUtilities({
-      '.decoration-slice': { 'box-decoration-break': 'slice' },
-      '.decoration-clone': { 'box-decoration-break': 'clone' },
+      '.decoration-slice': { 'box-decoration-break': 'slice' }, // Deprecated
+      '.decoration-clone': { 'box-decoration-break': 'clone' }, // Deprecated
+      '.box-decoration-slice': { 'box-decoration-break': 'slice' },
+      '.box-decoration-clone': { 'box-decoration-break': 'clone' },
     })
   },
 
@@ -1655,6 +1657,7 @@ export let corePlugins = {
   textDecoration: ({ addUtilities }) => {
     addUtilities({
       '.underline': { 'text-decoration': 'underline' },
+      '.overline': { 'text-decoration': 'overline' },
       '.line-through': { 'text-decoration': 'line-through' },
       '.no-underline': { 'text-decoration': 'none' },
     })
@@ -1667,10 +1670,32 @@ export let corePlugins = {
           return { 'text-decoration-color': toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
+      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color'] }
     )
   },
 
+  textDecorationStyle: ({ addUtilities }) => {
+    addUtilities({
+      '.decoration-solid': { 'text-decoration-style': 'solid' },
+      '.decoration-double': { 'text-decoration-style': 'double' },
+      '.decoration-dotted': { 'text-decoration-style': 'dotted' },
+      '.decoration-dashed': { 'text-decoration-style': 'dashed' },
+      '.decoration-wavy': { 'text-decoration-style': 'wavy' },
+    })
+  },
+
+  textDecorationThickness: createUtilityPlugin(
+    'textDecorationThickness',
+    [['decoration', ['text-decoration-thickness']]],
+    { type: ['length', 'percentage'] }
+  ),
+
+  textUnderlineOffset: createUtilityPlugin(
+    'textUnderlineOffset',
+    [['underline-offset', ['text-underline-offset']]],
+    { type: ['length', 'percentage'] }
+  ),
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {

package/src/css/preflight.css

@@ -288,7 +288,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;

package/src/util/formatVariantSelector.js

@@ -30,7 +30,17 @@ export function formatVariantSelector(current, ...others) {
 }
 
 export function finalizeSelector(format, { selector, candidate, context }) {
-  let base = candidate.split(context?.tailwindConfig?.separator ?? ':').pop()
+  let separator = context?.tailwindConfig?.separator ?? ':'
+
+  // Split by the separator, but ignore the separator inside square brackets:
+  //
+  // E.g.: dark:lg:hover:[paint-order:markers]
+  //           ┬  ┬     ┬            ┬
+  //           │  │     │            ╰── We will not split here
+  //           ╰──┴─────┴─────────────── We will split here
+  //
+  let splitter = new RegExp(`\\${separator}(?![^[]*\\])`)
+  let base = candidate.split(splitter).pop()
 
   if (context?.tailwindConfig?.prefix) {
     format = prefixSelector(context.tailwindConfig.prefix, format)

package/stubs/defaultConfig.stub.js

@@ -798,6 +798,23 @@ module.exports = {
     },
     textColor: ({ theme }) => theme('colors'),
     textDecorationColor: ({ theme }) => theme('colors'),
+    textDecorationThickness: {
+      auto: 'auto',
+      'from-font': 'from-font',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    textUnderlineOffset: {
+      auto: 'auto',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
     textIndent: ({ theme }) => ({
       ...theme('spacing'),
     }),