tailwindcss 3.0.0-alpha.1 → 3.0.2

package/lib/corePlugins.js

@@ -2,21 +2,22 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.variantPlugins = exports.corePlugins = void 0;
+exports.corePlugins = exports.variantPlugins = void 0;
 var _fs = _interopRequireDefault(require("fs"));
+var path = _interopRequireWildcard(require("path"));
 var _postcss = _interopRequireDefault(require("postcss"));
 var _createUtilityPlugin = _interopRequireDefault(require("./util/createUtilityPlugin"));
 var _buildMediaQuery = _interopRequireDefault(require("./util/buildMediaQuery"));
-var _prefixSelector = _interopRequireDefault(require("./util/prefixSelector"));
 var _parseAnimationValue = _interopRequireDefault(require("./util/parseAnimationValue"));
 var _flattenColorPalette = _interopRequireDefault(require("./util/flattenColorPalette"));
 var _withAlphaVariable = _interopRequireWildcard(require("./util/withAlphaVariable"));
 var _toColorValue = _interopRequireDefault(require("./util/toColorValue"));
 var _isPlainObject = _interopRequireDefault(require("./util/isPlainObject"));
 var _transformThemeValue = _interopRequireDefault(require("./util/transformThemeValue"));
-var _pluginUtils = require("./util/pluginUtils");
 var _packageJson = require("../package.json");
 var _log = _interopRequireDefault(require("./util/log"));
+var _normalizeScreens = require("./util/normalizeScreens");
+var _parseBoxShadowValue = require("./util/parseBoxShadowValue");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -46,54 +47,21 @@ function _interopRequireWildcard(obj) {
     }
 }
 let variantPlugins = {
-    pseudoElementVariants: ({ config , addVariant  })=>{
-        addVariant('first-letter', (0, _pluginUtils).transformAllSelectors((selector)=>{
-            return (0, _pluginUtils).updateAllClasses(selector, (className, { withPseudo  })=>{
-                return withPseudo(`first-letter${config('separator')}${className}`, '::first-letter');
-            });
-        }));
-        addVariant('first-line', (0, _pluginUtils).transformAllSelectors((selector)=>{
-            return (0, _pluginUtils).updateAllClasses(selector, (className, { withPseudo  })=>{
-                return withPseudo(`first-line${config('separator')}${className}`, '::first-line');
-            });
-        }));
+    pseudoElementVariants: ({ addVariant  })=>{
+        addVariant('first-letter', '&::first-letter');
+        addVariant('first-line', '&::first-line');
         addVariant('marker', [
-            (0, _pluginUtils).transformAllSelectors((selector)=>{
-                let variantSelector = (0, _pluginUtils).updateAllClasses(selector, (className)=>{
-                    return `marker${config('separator')}${className}`;
-                });
-                return `${variantSelector} *::marker`;
-            }),
-            (0, _pluginUtils).transformAllSelectors((selector)=>{
-                return (0, _pluginUtils).updateAllClasses(selector, (className, { withPseudo  })=>{
-                    return withPseudo(`marker${config('separator')}${className}`, '::marker');
-                });
-            }), 
+            '& *::marker',
+            '&::marker'
         ]);
         addVariant('selection', [
-            (0, _pluginUtils).transformAllSelectors((selector)=>{
-                let variantSelector = (0, _pluginUtils).updateAllClasses(selector, (className)=>{
-                    return `selection${config('separator')}${className}`;
-                });
-                return `${variantSelector} *::selection`;
-            }),
-            (0, _pluginUtils).transformAllSelectors((selector)=>{
-                return (0, _pluginUtils).updateAllClasses(selector, (className, { withPseudo  })=>{
-                    return withPseudo(`selection${config('separator')}${className}`, '::selection');
-                });
-            }), 
+            '& *::selection',
+            '&::selection'
         ]);
-        addVariant('file', (0, _pluginUtils).transformAllSelectors((selector)=>{
-            return (0, _pluginUtils).updateAllClasses(selector, (className, { withPseudo  })=>{
-                return withPseudo(`file${config('separator')}${className}`, '::file-selector-button');
-            });
-        }));
-        addVariant('before', (0, _pluginUtils).transformAllSelectors((selector)=>{
-            return (0, _pluginUtils).updateAllClasses(selector, (className, { withPseudo  })=>{
-                return withPseudo(`before${config('separator')}${className}`, '::before');
-            });
-        }, {
-            withRule: (rule)=>{
+        addVariant('file', '&::file-selector-button');
+        addVariant('placeholder', '&::placeholder');
+        addVariant('before', ({ container  })=>{
+            container.walkRules((rule)=>{
                 let foundContent = false;
                 rule.walkDecls('content', ()=>{
                     foundContent = true;
@@ -101,17 +69,14 @@ let variantPlugins = {
                 if (!foundContent) {
                     rule.prepend(_postcss.default.decl({
                         prop: 'content',
-                        value: '""'
+                        value: 'var(--tw-content)'
                     }));
                 }
-            }
-        }));
-        addVariant('after', (0, _pluginUtils).transformAllSelectors((selector)=>{
-            return (0, _pluginUtils).updateAllClasses(selector, (className, { withPseudo  })=>{
-                return withPseudo(`after${config('separator')}${className}`, '::after');
             });
-        }, {
-            withRule: (rule)=>{
+            return '&::before';
+        });
+        addVariant('after', ({ container  })=>{
+            container.walkRules((rule)=>{
                 let foundContent = false;
                 rule.walkDecls('content', ()=>{
                     foundContent = true;
@@ -119,13 +84,14 @@ let variantPlugins = {
                 if (!foundContent) {
                     rule.prepend(_postcss.default.decl({
                         prop: 'content',
-                        value: '""'
+                        value: 'var(--tw-content)'
                     }));
                 }
-            }
-        }));
+            });
+            return '&::after';
+        });
     },
-    pseudoClassVariants: ({ config , addVariant  })=>{
+    pseudoClassVariants: ({ addVariant  })=>{
         let pseudoVariants = [
             // Positional
             [
@@ -179,94 +145,40 @@ let variantPlugins = {
             'focus-visible',
             'active',
             'disabled', 
-        ];
-        for (let variant of pseudoVariants){
-            let [variantName, state] = Array.isArray(variant) ? variant : [
+        ].map((variant)=>Array.isArray(variant) ? variant : [
                 variant,
                 `:${variant}`
-            ];
-            addVariant(variantName, (0, _pluginUtils).transformAllClasses((className, { withAttr , withPseudo  })=>{
-                if (state.startsWith(':')) {
-                    return withPseudo(`${variantName}${config('separator')}${className}`, state);
-                } else if (state.startsWith('[')) {
-                    return withAttr(`${variantName}${config('separator')}${className}`, state);
-                }
-            }));
+            ]
+        );
+        for (let [variantName, state] of pseudoVariants){
+            addVariant(variantName, `&${state}`);
         }
-        let groupMarker = (0, _prefixSelector).default(config('prefix'), '.group');
-        for (let variant1 of pseudoVariants){
-            let [variantName, state] = Array.isArray(variant1) ? variant1 : [
-                variant1,
-                `:${variant1}`
-            ];
-            let groupVariantName = `group-${variantName}`;
-            addVariant(groupVariantName, (0, _pluginUtils).transformAllSelectors((selector)=>{
-                let variantSelector = (0, _pluginUtils).updateAllClasses(selector, (className)=>{
-                    if (`.${className}` === groupMarker) return className;
-                    return `${groupVariantName}${config('separator')}${className}`;
-                });
-                if (variantSelector === selector) {
-                    return null;
-                }
-                return (0, _pluginUtils).applyStateToMarker(variantSelector, groupMarker, state, (marker, selector)=>`${marker} ${selector}`
-                );
-            }));
+        for (let [variantName1, state1] of pseudoVariants){
+            addVariant(`group-${variantName1}`, `:merge(.group)${state1} &`);
         }
-        let peerMarker = (0, _prefixSelector).default(config('prefix'), '.peer');
-        for (let variant2 of pseudoVariants){
-            let [variantName, state] = Array.isArray(variant2) ? variant2 : [
-                variant2,
-                `:${variant2}`
-            ];
-            let peerVariantName = `peer-${variantName}`;
-            addVariant(peerVariantName, (0, _pluginUtils).transformAllSelectors((selector)=>{
-                let variantSelector = (0, _pluginUtils).updateAllClasses(selector, (className)=>{
-                    if (`.${className}` === peerMarker) return className;
-                    return `${peerVariantName}${config('separator')}${className}`;
-                });
-                if (variantSelector === selector) {
-                    return null;
-                }
-                return (0, _pluginUtils).applyStateToMarker(variantSelector, peerMarker, state, (marker, selector)=>selector.trim().startsWith('~') ? `${marker}${selector}` : `${marker} ~ ${selector}`
-                );
-            }));
+        for (let [variantName2, state2] of pseudoVariants){
+            addVariant(`peer-${variantName2}`, `:merge(.peer)${state2} ~ &`);
         }
     },
-    directionVariants: ({ config , addVariant  })=>{
-        addVariant('ltr', (0, _pluginUtils).transformAllSelectors((selector)=>{
+    directionVariants: ({ addVariant  })=>{
+        addVariant('ltr', ()=>{
             _log.default.warn('rtl-experimental', [
                 'The RTL features in Tailwind CSS are currently in preview.',
                 'Preview features are not covered by semver, and may be improved in breaking ways at any time.', 
             ]);
-            return `[dir="ltr"] ${(0, _pluginUtils).updateAllClasses(selector, (className)=>`ltr${config('separator')}${className}`
-            )}`;
-        }));
-        addVariant('rtl', (0, _pluginUtils).transformAllSelectors((selector)=>{
+            return '[dir="ltr"] &';
+        });
+        addVariant('rtl', ()=>{
             _log.default.warn('rtl-experimental', [
                 'The RTL features in Tailwind CSS are currently in preview.',
                 'Preview features are not covered by semver, and may be improved in breaking ways at any time.', 
             ]);
-            return `[dir="rtl"] ${(0, _pluginUtils).updateAllClasses(selector, (className)=>`rtl${config('separator')}${className}`
-            )}`;
-        }));
+            return '[dir="rtl"] &';
+        });
     },
-    reducedMotionVariants: ({ config , addVariant  })=>{
-        addVariant('motion-safe', (0, _pluginUtils).transformLastClasses((className)=>{
-            return `motion-safe${config('separator')}${className}`;
-        }, {
-            wrap: ()=>_postcss.default.atRule({
-                    name: 'media',
-                    params: '(prefers-reduced-motion: no-preference)'
-                })
-        }));
-        addVariant('motion-reduce', (0, _pluginUtils).transformLastClasses((className)=>{
-            return `motion-reduce${config('separator')}${className}`;
-        }, {
-            wrap: ()=>_postcss.default.atRule({
-                    name: 'media',
-                    params: '(prefers-reduced-motion: reduce)'
-                })
-        }));
+    reducedMotionVariants: ({ addVariant  })=>{
+        addVariant('motion-safe', '@media (prefers-reduced-motion: no-preference)');
+        addVariant('motion-reduce', '@media (prefers-reduced-motion: reduce)');
     },
     darkVariants: ({ config , addVariant  })=>{
         let mode = config('darkMode', 'media');
@@ -278,46 +190,29 @@ let variantPlugins = {
             ]);
         }
         if (mode === 'class') {
-            addVariant('dark', (0, _pluginUtils).transformAllSelectors((selector)=>{
-                let variantSelector = (0, _pluginUtils).updateLastClasses(selector, (className)=>{
-                    return `dark${config('separator')}${className}`;
-                });
-                if (variantSelector === selector) {
-                    return null;
-                }
-                let darkSelector = (0, _prefixSelector).default(config('prefix'), `.dark`);
-                return `${darkSelector} ${variantSelector}`;
-            }));
+            addVariant('dark', '.dark &');
         } else if (mode === 'media') {
-            addVariant('dark', (0, _pluginUtils).transformLastClasses((className)=>{
-                return `dark${config('separator')}${className}`;
-            }, {
-                wrap: ()=>_postcss.default.atRule({
-                        name: 'media',
-                        params: '(prefers-color-scheme: dark)'
-                    })
-            }));
+            addVariant('dark', '@media (prefers-color-scheme: dark)');
         }
     },
-    screenVariants: ({ config , theme , addVariant  })=>{
-        for(let screen in theme('screens')){
-            let size = theme('screens')[screen];
-            let query = (0, _buildMediaQuery).default(size);
-            addVariant(screen, (0, _pluginUtils).transformLastClasses((className)=>{
-                return `${screen}${config('separator')}${className}`;
-            }, {
-                wrap: ()=>_postcss.default.atRule({
-                        name: 'media',
-                        params: query
-                    })
-            }));
+    printVariant: ({ addVariant  })=>{
+        addVariant('print', '@media print');
+    },
+    screenVariants: ({ theme , addVariant  })=>{
+        for (let screen of (0, _normalizeScreens).normalizeScreens(theme('screens'))){
+            let query = (0, _buildMediaQuery).default(screen);
+            addVariant(screen.name, `@media ${query}`);
         }
+    },
+    orientationVariants: ({ addVariant  })=>{
+        addVariant('portrait', '@media (orientation: portrait)');
+        addVariant('landscape', '@media (orientation: landscape)');
     }
 };
 exports.variantPlugins = variantPlugins;
 let corePlugins = {
     preflight: ({ addBase  })=>{
-        let preflightStyles = _postcss.default.parse(_fs.default.readFileSync(`${__dirname}/css/preflight.css`, 'utf8'));
+        let preflightStyles = _postcss.default.parse(_fs.default.readFileSync(path.join(__dirname, './css/preflight.css'), 'utf8'));
         addBase([
             _postcss.default.comment({
                 text: `! tailwindcss v${_packageJson.version} | MIT License | https://tailwindcss.com`
@@ -326,27 +221,11 @@ let corePlugins = {
         ]);
     },
     container: (()=>{
-        function extractMinWidths(breakpoints) {
-            return Object.values(breakpoints !== null && breakpoints !== void 0 ? breakpoints : {
-            }).flatMap((breakpoints)=>{
-                if (typeof breakpoints === 'string') {
-                    breakpoints = {
-                        min: breakpoints
-                    };
-                }
-                if (!Array.isArray(breakpoints)) {
-                    breakpoints = [
-                        breakpoints
-                    ];
-                }
-                return breakpoints.filter((breakpoint)=>{
-                    var ref;
-                    return (breakpoint === null || breakpoint === void 0 ? void 0 : (ref = breakpoint.hasOwnProperty) === null || ref === void 0 ? void 0 : ref.call(breakpoint, 'min')) || (breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.hasOwnProperty('min-width'));
-                }).map((breakpoint)=>{
-                    var ref;
-                    return (ref = breakpoint['min-width']) !== null && ref !== void 0 ? ref : breakpoint.min;
-                });
-            });
+        function extractMinWidths(breakpoints = []) {
+            return breakpoints.flatMap((breakpoint1)=>breakpoint1.values.map((breakpoint)=>breakpoint.min
+                )
+            ).filter((v)=>v !== undefined
+            );
         }
         function mapMinWidthsToPadding(minWidths, screens, paddings) {
             if (typeof paddings === 'undefined') {
@@ -370,25 +249,25 @@ let corePlugins = {
                 });
             }
             for (let minWidth of minWidths){
-                for (let [screen, value] of Object.entries(screens)){
-                    let screenMinWidth = typeof value === 'object' && value !== null ? value.min || value['min-width'] : value;
-                    if (`${screenMinWidth}` === `${minWidth}`) {
-                        mapping.push({
-                            screen,
-                            minWidth,
-                            padding: paddings[screen]
-                        });
+                for (let screen of screens){
+                    for (let { min  } of screen.values){
+                        if (min === minWidth) {
+                            mapping.push({
+                                minWidth,
+                                padding: paddings[screen.name]
+                            });
+                        }
                     }
                 }
             }
             return mapping;
         }
         return function({ addComponents , theme  }) {
-            let screens = theme('container.screens', theme('screens'));
+            let screens = (0, _normalizeScreens).normalizeScreens(theme('container.screens', theme('screens')));
             let minWidths = extractMinWidths(screens);
             let paddings = mapMinWidthsToPadding(minWidths, screens, theme('container.padding'));
             let generatePaddingFor = (minWidth)=>{
-                let paddingConfig = paddings.find((padding)=>`${padding.minWidth}` === `${minWidth}`
+                let paddingConfig = paddings.find((padding)=>padding.minWidth === minWidth
                 );
                 if (!paddingConfig) {
                     return {
@@ -539,7 +418,9 @@ let corePlugins = {
                 ]
             ], 
         ], 
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     isolation: ({ addUtilities  })=>{
         addUtilities({
             '.isolate': {
@@ -557,8 +438,12 @@ let corePlugins = {
                 'zIndex'
             ]
         ]
-    ]),
-    order: (0, _createUtilityPlugin).default('order'),
+    ], {
+        supportsNegativeValues: true
+    }),
+    order: (0, _createUtilityPlugin).default('order', undefined, {
+        supportsNegativeValues: true
+    }),
     gridColumn: (0, _createUtilityPlugin).default('gridColumn', [
         [
             'col',
@@ -685,7 +570,9 @@ let corePlugins = {
                 ]
             ], 
         ], 
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     boxSizing: ({ addUtilities  })=>{
         addUtilities({
             '.box-border': {
@@ -826,7 +713,13 @@ let corePlugins = {
             [
                 'flex-shrink'
             ]
-        ]
+        ],
+        [
+            'shrink',
+            [
+                'flex-shrink'
+            ]
+        ], 
     ]),
     flexGrow: (0, _createUtilityPlugin).default('flexGrow', [
         [
@@ -834,6 +727,20 @@ let corePlugins = {
             [
                 'flex-grow'
             ]
+        ],
+        [
+            'grow',
+            [
+                'flex-grow'
+            ]
+        ], 
+    ]),
+    flexBasis: (0, _createUtilityPlugin).default('flexBasis', [
+        [
+            'basis',
+            [
+                'flex-basis'
+            ]
         ]
     ]),
     tableLayout: ({ addUtilities  })=>{
@@ -897,7 +804,9 @@ let corePlugins = {
                 ], 
             ], 
         ], 
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     rotate: (0, _createUtilityPlugin).default('rotate', [
         [
             'rotate',
@@ -912,9 +821,11 @@ let corePlugins = {
                     'transform',
                     'var(--tw-transform)'
                 ]
-            ]
+            ], 
         ], 
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     skew: (0, _createUtilityPlugin).default('skew', [
         [
             [
@@ -948,7 +859,9 @@ let corePlugins = {
                 ], 
             ], 
         ], 
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     scale: (0, _createUtilityPlugin).default('scale', [
         [
             'scale',
@@ -998,7 +911,9 @@ let corePlugins = {
                 ], 
             ], 
         ], 
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     transform: ({ addBase , addUtilities  })=>{
         addBase({
             '@defaults transform': {
@@ -1066,8 +981,8 @@ let corePlugins = {
             ];
         }));
         matchUtilities({
-            animate: (value)=>{
-                let animations = (0, _parseAnimationValue).default(value);
+            animate: (value1)=>{
+                let animations = (0, _parseAnimationValue).default(value1);
                 return [
                     ...animations.flatMap((animation)=>keyframes[animation.name]
                     ),
@@ -1086,7 +1001,15 @@ let corePlugins = {
         });
     },
     cursor: (0, _createUtilityPlugin).default('cursor'),
-    touchAction: ({ addUtilities  })=>{
+    touchAction: ({ addBase , addUtilities  })=>{
+        addBase({
+            '@defaults touch-action': {
+                '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
+                '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
+                '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
+                '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)'
+            }
+        });
         addUtilities({
             '.touch-auto': {
                 'touch-action': 'auto'
@@ -1095,25 +1018,46 @@ let corePlugins = {
                 'touch-action': 'none'
             },
             '.touch-pan-x': {
-                'touch-action': 'pan-x'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-x': 'pan-x',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-left': {
-                'touch-action': 'pan-left'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-x': 'pan-left',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-right': {
-                'touch-action': 'pan-right'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-x': 'pan-right',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-y': {
-                'touch-action': 'pan-y'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-y': 'pan-y',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-up': {
-                'touch-action': 'pan-up'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-y': 'pan-up',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-down': {
-                'touch-action': 'pan-down'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-y': 'pan-down',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pinch-zoom': {
-                'touch-action': 'pinch-zoom'
+                '@defaults touch-action': {
+                },
+                '--tw-pinch-zoom': 'pinch-zoom',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-manipulation': {
                 'touch-action': 'manipulation'
@@ -1260,7 +1204,9 @@ let corePlugins = {
                 ]
             ], 
         ], 
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     scrollPadding: (0, _createUtilityPlugin).default('scrollPadding', [
         [
             'scroll-p',
@@ -1658,7 +1604,8 @@ let corePlugins = {
                 };
             }
         }, {
-            values: theme('space')
+            values: theme('space'),
+            supportsNegativeValues: true
         });
         addUtilities({
             '.space-y-reverse > :not([hidden]) ~ :not([hidden])': {
@@ -1734,10 +1681,10 @@ let corePlugins = {
             }
         });
     },
-    divideColor: ({ matchUtilities , theme , corePlugins  })=>{
+    divideColor: ({ matchUtilities , theme , corePlugins: corePlugins1  })=>{
         matchUtilities({
             divide: (value)=>{
-                if (!corePlugins('divideOpacity')) {
+                if (!corePlugins1('divideOpacity')) {
                     return {
                         ['& > :not([hidden]) ~ :not([hidden])']: {
                             'border-color': (0, _toColorValue).default(value)
@@ -2148,8 +2095,8 @@ let corePlugins = {
             }
         });
     },
-    borderColor: ({ addBase , matchUtilities , theme , corePlugins  })=>{
-        if (!corePlugins('borderOpacity')) {
+    borderColor: ({ addBase , matchUtilities , theme , corePlugins: corePlugins2  })=>{
+        if (!corePlugins2('borderOpacity')) {
             let value = theme('borderColor.DEFAULT', 'currentColor');
             addBase({
                 '@defaults border-width': {
@@ -2167,7 +2114,7 @@ let corePlugins = {
         }
         matchUtilities({
             border: (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-color': (0, _toColorValue).default(value)
                     };
@@ -2187,7 +2134,7 @@ let corePlugins = {
         });
         matchUtilities({
             'border-x': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-left-color': (0, _toColorValue).default(value),
                         'border-right-color': (0, _toColorValue).default(value)
@@ -2203,7 +2150,7 @@ let corePlugins = {
                 });
             },
             'border-y': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-top-color': (0, _toColorValue).default(value),
                         'border-bottom-color': (0, _toColorValue).default(value)
@@ -2225,7 +2172,7 @@ let corePlugins = {
         });
         matchUtilities({
             'border-t': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-top-color': (0, _toColorValue).default(value)
                     };
@@ -2237,7 +2184,7 @@ let corePlugins = {
                 });
             },
             'border-r': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-right-color': (0, _toColorValue).default(value)
                     };
@@ -2249,7 +2196,7 @@ let corePlugins = {
                 });
             },
             'border-b': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-bottom-color': (0, _toColorValue).default(value)
                     };
@@ -2261,7 +2208,7 @@ let corePlugins = {
                 });
             },
             'border-l': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-left-color': (0, _toColorValue).default(value)
                     };
@@ -2286,10 +2233,10 @@ let corePlugins = {
             ]
         ], 
     ]),
-    backgroundColor: ({ matchUtilities , theme , corePlugins  })=>{
+    backgroundColor: ({ matchUtilities , theme , corePlugins: corePlugins3  })=>{
         matchUtilities({
             bg: (value)=>{
-                if (!corePlugins('backgroundOpacity')) {
+                if (!corePlugins3('backgroundOpacity')) {
                     return {
                         'background-color': (0, _toColorValue).default(value)
                     };
@@ -2370,6 +2317,12 @@ let corePlugins = {
             },
             '.decoration-clone': {
                 'box-decoration-break': 'clone'
+            },
+            '.box-decoration-slice': {
+                'box-decoration-break': 'slice'
+            },
+            '.box-decoration-clone': {
+                'box-decoration-break': 'clone'
             }
         });
     },
@@ -2608,7 +2561,9 @@ let corePlugins = {
                 'text-indent'
             ]
         ]
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     verticalAlign: ({ addUtilities , matchUtilities  })=>{
         addUtilities({
             '.align-baseline': {
@@ -2728,40 +2683,64 @@ let corePlugins = {
     },
     fontVariantNumeric: ({ addUtilities  })=>{
         addUtilities({
-            '.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions': {
+            '@defaults font-variant-numeric': {
                 '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
                 '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
                 '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
                 '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
                 '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
-                'font-variant-numeric': 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)'
+                '--tw-font-variant-numeric': 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)'
             },
             '.normal-nums': {
                 'font-variant-numeric': 'normal'
             },
             '.ordinal': {
-                '--tw-ordinal': 'ordinal'
+                '@defaults font-variant-numeric': {
+                },
+                '--tw-ordinal': 'ordinal',
+                'font-variant-numeric': 'var(--tw-font-variant-numeric)'
             },
             '.slashed-zero': {
-                '--tw-slashed-zero': 'slashed-zero'
+                '@defaults font-variant-numeric': {
+                },
+                '--tw-slashed-zero': 'slashed-zero',
+                'font-variant-numeric': 'var(--tw-font-variant-numeric)'
             },
             '.lining-nums': {
-                '--tw-numeric-figure': 'lining-nums'
+                '@defaults font-variant-numeric': {
+                },
+                '--tw-numeric-figure': 'lining-nums',
+                'font-variant-numeric': 'var(--tw-font-variant-numeric)'
             },
             '.oldstyle-nums': {
-                '--tw-numeric-figure': 'oldstyle-nums'
+                '@defaults font-variant-numeric': {
+                },
+                '--tw-numeric-figure': 'oldstyle-nums',
+                'font-variant-numeric': 'var(--tw-font-variant-numeric)'
             },
             '.proportional-nums': {
-                '--tw-numeric-spacing': 'proportional-nums'
+                '@defaults font-variant-numeric': {
+                },
+                '--tw-numeric-spacing': 'proportional-nums',
+                'font-variant-numeric': 'var(--tw-font-variant-numeric)'
             },
             '.tabular-nums': {
-                '--tw-numeric-spacing': 'tabular-nums'
+                '@defaults font-variant-numeric': {
+                },
+                '--tw-numeric-spacing': 'tabular-nums',
+                'font-variant-numeric': 'var(--tw-font-variant-numeric)'
             },
             '.diagonal-fractions': {
-                '--tw-numeric-fraction': 'diagonal-fractions'
+                '@defaults font-variant-numeric': {
+                },
+                '--tw-numeric-fraction': 'diagonal-fractions',
+                'font-variant-numeric': 'var(--tw-font-variant-numeric)'
             },
             '.stacked-fractions': {
-                '--tw-numeric-fraction': 'stacked-fractions'
+                '@defaults font-variant-numeric': {
+                },
+                '--tw-numeric-fraction': 'stacked-fractions',
+                'font-variant-numeric': 'var(--tw-font-variant-numeric)'
             }
         });
     },
@@ -2780,11 +2759,13 @@ let corePlugins = {
                 'letterSpacing'
             ]
         ]
-    ]),
-    textColor: ({ matchUtilities , theme , corePlugins  })=>{
+    ], {
+        supportsNegativeValues: true
+    }),
+    textColor: ({ matchUtilities , theme , corePlugins: corePlugins4  })=>{
         matchUtilities({
             text: (value)=>{
-                if (!corePlugins('textOpacity')) {
+                if (!corePlugins4('textOpacity')) {
                     return {
                         color: (0, _toColorValue).default(value)
                     };
@@ -2813,6 +2794,9 @@ let corePlugins = {
             '.underline': {
                 'text-decoration': 'underline'
             },
+            '.overline': {
+                'text-decoration': 'overline'
+            },
             '.line-through': {
                 'text-decoration': 'line-through'
             },
@@ -2821,6 +2805,65 @@ let corePlugins = {
             }
         });
     },
+    textDecorationColor: ({ matchUtilities , theme  })=>{
+        matchUtilities({
+            decoration: (value)=>{
+                return {
+                    'text-decoration-color': (0, _toColorValue).default(value)
+                };
+            }
+        }, {
+            values: (0, _flattenColorPalette).default(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: (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': {
@@ -2833,10 +2876,10 @@ let corePlugins = {
             }
         });
     },
-    placeholderColor: ({ matchUtilities , theme , corePlugins  })=>{
+    placeholderColor: ({ matchUtilities , theme , corePlugins: corePlugins5  })=>{
         matchUtilities({
             placeholder: (value)=>{
-                if (!corePlugins('placeholderOpacity')) {
+                if (!corePlugins5('placeholderOpacity')) {
                     return {
                         '&::placeholder': {
                             color: (0, _toColorValue).default(value)
@@ -3026,38 +3069,115 @@ let corePlugins = {
                 '@defaults box-shadow': {
                     '--tw-ring-offset-shadow': '0 0 #0000',
                     '--tw-ring-shadow': '0 0 #0000',
-                    '--tw-shadow': '0 0 #0000'
+                    '--tw-shadow': '0 0 #0000',
+                    '--tw-shadow-colored': '0 0 #0000'
                 }
             });
             matchUtilities({
                 shadow: (value)=>{
                     value = transformValue(value);
+                    let ast = (0, _parseBoxShadowValue).parseBoxShadowValue(value);
+                    for (let shadow of ast){
+                        // Don't override color if the whole shadow is a variable
+                        if (!shadow.valid) {
+                            continue;
+                        }
+                        shadow.color = 'var(--tw-shadow-color)';
+                    }
                     return {
                         '@defaults box-shadow': {
                         },
                         '--tw-shadow': value === 'none' ? '0 0 #0000' : value,
+                        '--tw-shadow-colored': value === 'none' ? '0 0 #0000' : (0, _parseBoxShadowValue).formatBoxShadowValue(ast),
                         'box-shadow': defaultBoxShadow
                     };
                 }
             }, {
-                values: theme('boxShadow')
+                values: theme('boxShadow'),
+                type: [
+                    'shadow'
+                ]
             });
         };
     })(),
-    outline: ({ matchUtilities , theme  })=>{
+    boxShadowColor: ({ matchUtilities , theme  })=>{
+        matchUtilities({
+            shadow: (value)=>{
+                return {
+                    '--tw-shadow-color': (0, _toColorValue).default(value),
+                    '--tw-shadow': 'var(--tw-shadow-colored)'
+                };
+            }
+        }, {
+            values: (0, _flattenColorPalette).default(theme('boxShadowColor')),
+            type: [
+                'color'
+            ]
+        });
+    },
+    outlineStyle: ({ addUtilities  })=>{
+        addUtilities({
+            '.outline-none': {
+                outline: '2px solid transparent',
+                'outline-offset': '2px'
+            },
+            '.outline': {
+                'outline-style': 'solid'
+            },
+            '.outline-dashed': {
+                'outline-style': 'dashed'
+            },
+            '.outline-dotted': {
+                'outline-style': 'dotted'
+            },
+            '.outline-double': {
+                'outline-style': 'double'
+            },
+            '.outline-hidden': {
+                'outline-style': 'hidden'
+            }
+        });
+    },
+    outlineWidth: (0, _createUtilityPlugin).default('outlineWidth', [
+        [
+            'outline',
+            [
+                'outline-width'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'number',
+            'percentage'
+        ]
+    }),
+    outlineOffset: (0, _createUtilityPlugin).default('outlineOffset', [
+        [
+            'outline-offset',
+            [
+                'outline-offset'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'number',
+            'percentage'
+        ]
+    }),
+    outlineColor: ({ matchUtilities , theme  })=>{
         matchUtilities({
             outline: (value)=>{
-                value = Array.isArray(value) ? value : value.split(',');
-                let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [
-                    value
-                ];
                 return {
-                    outline,
-                    'outline-offset': outlineOffset
+                    'outline-color': (0, _toColorValue).default(value)
                 };
             }
         }, {
-            values: theme('outline')
+            values: (0, _flattenColorPalette).default(theme('outlineColor')),
+            type: [
+                'color'
+            ]
         });
     },
     ringWidth: ({ matchUtilities , addBase , addUtilities , theme  })=>{
@@ -3071,7 +3191,8 @@ let corePlugins = {
                 '--tw-ring-color': ringColorDefault,
                 '--tw-ring-offset-shadow': '0 0 #0000',
                 '--tw-ring-shadow': '0 0 #0000',
-                '--tw-shadow': '0 0 #0000'
+                '--tw-shadow': '0 0 #0000',
+                '--tw-shadow-colored': '0 0 #0000'
             }
         });
         matchUtilities({
@@ -3229,7 +3350,8 @@ let corePlugins = {
                 };
             }
         }, {
-            values: theme('hueRotate')
+            values: theme('hueRotate'),
+            supportsNegativeValues: true
         });
     },
     invert: ({ matchUtilities , theme  })=>{
@@ -3377,7 +3499,8 @@ let corePlugins = {
                 };
             }
         }, {
-            values: theme('backdropHueRotate')
+            values: theme('backdropHueRotate'),
+            supportsNegativeValues: true
         });
     },
     backdropInvert: ({ matchUtilities , theme  })=>{
@@ -3526,6 +3649,17 @@ let corePlugins = {
             ]
         ]
     ]),
-    content: (0, _createUtilityPlugin).default('content')
+    content: (0, _createUtilityPlugin).default('content', [
+        [
+            'content',
+            [
+                '--tw-content',
+                [
+                    'content',
+                    'var(--tw-content)'
+                ]
+            ]
+        ], 
+    ])
 };
 exports.corePlugins = corePlugins;