tailwindcss 0.0.0-insiders.89c7f7d → 0.0.0-insiders.8a4b2f0

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- Nothing yet!
+
+## [3.0.1] - 2021-12-10
+
+### Fixed
+
+- Ensure complex variants with multiple classes work ([#6311](https://github.com/tailwindlabs/tailwindcss/pull/6311))
+- Re-add `default` interop to public available functions ([#6348](https://github.com/tailwindlabs/tailwindcss/pull/6348))
+- Detect circular dependencies when using `@apply` ([#6365](https://github.com/tailwindlabs/tailwindcss/pull/6365))
+- Fix defaults optimization when vendor prefixes are involved ([#6369](https://github.com/tailwindlabs/tailwindcss/pull/6369))
+
+## [3.0.0] - 2021-12-09
+
 ### Fixed
 
 - Enforce the order of some variants (like `before` and `after`) ([#6018](https://github.com/tailwindlabs/tailwindcss/pull/6018))
@@ -14,12 +27,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `placeholder` variant ([#6106](https://github.com/tailwindlabs/tailwindcss/pull/6106))
-- Add tuple syntax for configuring screens while guaranteeing order ([#5956](https://github.com/tailwindlabs/tailwindcss/pull/5956))
-- Add combinable `touch-action` support ([#6115](https://github.com/tailwindlabs/tailwindcss/pull/6115))
+- Add composable `touch-action` utilities ([#6115](https://github.com/tailwindlabs/tailwindcss/pull/6115))
 - 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 `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))
+- Allow `0` as a valid `length` value ([#6233](https://github.com/tailwindlabs/tailwindcss/pull/6233), [#6259](https://github.com/tailwindlabs/tailwindcss/pull/6259))
+- Add CSS functions to data types ([#6258](https://github.com/tailwindlabs/tailwindcss/pull/6258))
+- Support negative values for `scale-*` utilities ([c48e629](https://github.com/tailwindlabs/tailwindcss/commit/c48e629955585ad18dadba9f470fda59cc448ab7))
+- Improve `length` data type, by validating each value individually ([#6283](https://github.com/tailwindlabs/tailwindcss/pull/6283))
 
 ### Changed
 
@@ -44,6 +60,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `text-decoration-color` utilities ([#5760](https://github.com/tailwindlabs/tailwindcss/pull/5760))
 - Add new declarative `addVariant` API ([#5809](https://github.com/tailwindlabs/tailwindcss/pull/5809))
 - Add first-class `print` variant for targeting printed media ([#5885](https://github.com/tailwindlabs/tailwindcss/pull/5885))
+- Add `outline-style`, `outline-color`, `outline-width` and `outline-offset` utilities ([#5887](https://github.com/tailwindlabs/tailwindcss/pull/5887))
 - Add full color palette for `fill-*` and `stroke-*` utilities (#5933[](https://github.com/tailwindlabs/tailwindcss/pull/5933))
 - Add composable API for colored box shadows ([#5979](https://github.com/tailwindlabs/tailwindcss/pull/5979))
 
@@ -1673,7 +1690,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.2...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.1...HEAD
+[3.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0...v3.0.1
+[3.0.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.2...v3.0.0
 [3.0.0-alpha.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.1...v3.0.0-alpha.2
 [3.0.0-alpha.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.19...v3.0.0-alpha.1
 [2.2.19]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.18...v2.2.19

package/colors.js

@@ -1 +1,2 @@
-module.exports = require('./lib/public/colors').default
+let colors = require('./lib/public/colors')
+module.exports = (colors.__esModule ? colors : { default: colors }).default

package/defaultConfig.js

@@ -1 +1,2 @@
-module.exports = require('./lib/public/default-config').default
+let defaultConfig = require('./lib/public/default-config')
+module.exports = (defaultConfig.__esModule ? defaultConfig : { default: defaultConfig }).default

package/defaultTheme.js

@@ -1 +1,2 @@
-module.exports = require('./lib/public/default-theme').default
+let defaultTheme = require('./lib/public/default-theme')
+module.exports = (defaultTheme.__esModule ? defaultTheme : { default: defaultTheme }).default

package/lib/cli.js

@@ -40,7 +40,7 @@ function formatNodes(root) {
         root.first.raws.before = '';
     }
 }
-function help({ message , usage , commands , options  }) {
+function help({ message , usage , commands: commands1 , options  }) {
     let indent = 2;
     // Render header
     console.log();
@@ -61,11 +61,11 @@ function help({ message , usage , commands , options  }) {
         }
     }
     // Render commands
-    if (commands && commands.length > 0) {
+    if (commands1 && commands1.length > 0) {
         console.log();
         console.log('Commands:');
-        for (let command of commands){
-            console.log(' '.repeat(indent), command);
+        for (let command1 of commands1){
+            console.log(' '.repeat(indent), command1);
         }
     }
     // Render options
@@ -86,12 +86,12 @@ function help({ message , usage , commands , options  }) {
         }
         console.log();
         console.log('Options:');
-        for (let { flags , description , deprecated  } of Object.values(groupedOptions)){
+        for (let { flags: flags1 , description , deprecated  } of Object.values(groupedOptions)){
             if (deprecated) continue;
-            if (flags.length === 1) {
-                console.log(' '.repeat(indent + 4 /* 4 = "-i, ".length */ ), flags.slice().reverse().join(', ').padEnd(20, ' '), description);
+            if (flags1.length === 1) {
+                console.log(' '.repeat(indent + 4 /* 4 = "-i, ".length */ ), flags1.slice().reverse().join(', ').padEnd(20, ' '), description);
             } else {
-                console.log(' '.repeat(indent), flags.slice().reverse().join(', ').padEnd(24, ' '), description);
+                console.log(' '.repeat(indent), flags1.slice().reverse().join(', ').padEnd(24, ' '), description);
             }
         }
     }
@@ -110,7 +110,7 @@ function oneOf(...options) {
         manualParsing: true
     });
 }
-let commands1 = {
+let commands = {
     init: {
         run: init,
         args: {
@@ -187,31 +187,31 @@ if (process.stdout.isTTY /* Detect redirecting output to a file */  && (process.
             'tailwindcss [--input input.css] [--output output.css] [--watch] [options...]',
             'tailwindcss init [--full] [--postcss] [options...]', 
         ],
-        commands: Object.keys(commands1).filter((command)=>command !== 'build'
-        ).map((command)=>`${command} [options]`
+        commands: Object.keys(commands).filter((command2)=>command2 !== 'build'
+        ).map((command3)=>`${command3} [options]`
         ),
         options: {
-            ...commands1.build.args,
+            ...commands.build.args,
             ...sharedFlags
         }
     });
     process.exit(0);
 }
-let command1 = ((arg = '')=>arg.startsWith('-') ? undefined : arg
+let command = ((arg = '')=>arg.startsWith('-') ? undefined : arg
 )(process.argv[2]) || 'build';
-if (commands1[command1] === undefined) {
-    if (_fs.default.existsSync(_path.default.resolve(command1))) {
+if (commands[command] === undefined) {
+    if (_fs.default.existsSync(_path.default.resolve(command))) {
         // TODO: Deprecate this in future versions
         // Check if non-existing command, might be a file.
-        command1 = 'build';
+        command = 'build';
     } else {
         help({
-            message: `Invalid command: ${command1}`,
+            message: `Invalid command: ${command}`,
             usage: [
                 'tailwindcss <command> [options]'
             ],
-            commands: Object.keys(commands1).filter((command)=>command !== 'build'
-            ).map((command)=>`${command} [options]`
+            commands: Object.keys(commands).filter((command4)=>command4 !== 'build'
+            ).map((command5)=>`${command5} [options]`
             ),
             options: sharedFlags
         });
@@ -219,11 +219,11 @@ if (commands1[command1] === undefined) {
     }
 }
 // Execute command
-let { args: flags1 , run  } = commands1[command1];
-let args1 = (()=>{
+let { args: flags , run  } = commands[command];
+let args = (()=>{
     try {
         let result = (0, _arg).default(Object.fromEntries(Object.entries({
-            ...flags1,
+            ...flags,
             ...sharedFlags
         }).filter(([_key, value])=>{
             var ref;
@@ -240,23 +240,23 @@ let args1 = (()=>{
             let flag = result['_'][i];
             if (!flag.startsWith('-')) continue;
             let flagName = flag;
-            let handler = flags1[flag];
+            let handler = flags[flag];
             // Resolve flagName & handler
             while(typeof handler === 'string'){
                 flagName = handler;
-                handler = flags1[handler];
+                handler = flags[handler];
             }
             if (!handler) continue;
-            let args = [];
+            let args1 = [];
             let offset = i + 1;
             // Parse args for current flag
             while(result['_'][offset] && !result['_'][offset].startsWith('-')){
-                args.push(result['_'][offset++]);
+                args1.push(result['_'][offset++]);
             }
             // Cleanup manually parsed flags + args
-            result['_'].splice(i, 1 + args.length);
+            result['_'].splice(i, 1 + args1.length);
             // Set the resolved value in the `result` object
-            result[flagName] = handler.type(args.length === 0 ? undefined : args.length === 1 ? args[0] : args, flagName);
+            result[flagName] = handler.type(args1.length === 0 ? undefined : args1.length === 1 ? args1[0] : args1, flagName);
         }
         // Ensure that the `command` is always the first argument in the `args`.
         // This is important so that we don't have to check if a default command
@@ -264,8 +264,8 @@ let args1 = (()=>{
         //
         // E.g.: tailwindcss input.css -> _: ['build', 'input.css']
         // E.g.: tailwindcss build input.css -> _: ['build', 'input.css']
-        if (result['_'][0] !== command1) {
-            result['_'].unshift(command1);
+        if (result['_'][0] !== command) {
+            result['_'].unshift(command);
         }
         return result;
     } catch (err) {
@@ -282,14 +282,14 @@ let args1 = (()=>{
         throw err;
     }
 })();
-if (args1['--help']) {
+if (args['--help']) {
     help({
         options: {
-            ...flags1,
+            ...flags,
             ...sharedFlags
         },
         usage: [
-            `tailwindcss ${command1} [options]`
+            `tailwindcss ${command} [options]`
         ]
     });
     process.exit(0);
@@ -299,17 +299,17 @@ run();
 function init() {
     let messages = [];
     var ref;
-    let tailwindConfigLocation = _path.default.resolve((ref = args1['_'][1]) !== null && ref !== void 0 ? ref : './tailwind.config.js');
+    let tailwindConfigLocation = _path.default.resolve((ref = args['_'][1]) !== null && ref !== void 0 ? ref : './tailwind.config.js');
     if (_fs.default.existsSync(tailwindConfigLocation)) {
         messages.push(`${_path.default.basename(tailwindConfigLocation)} already exists.`);
     } else {
-        let stubFile = _fs.default.readFileSync(args1['--full'] ? _path.default.resolve(__dirname, '../stubs/defaultConfig.stub.js') : _path.default.resolve(__dirname, '../stubs/simpleConfig.stub.js'), 'utf8');
+        let stubFile = _fs.default.readFileSync(args['--full'] ? _path.default.resolve(__dirname, '../stubs/defaultConfig.stub.js') : _path.default.resolve(__dirname, '../stubs/simpleConfig.stub.js'), 'utf8');
         // Change colors import
         stubFile = stubFile.replace('../colors', 'tailwindcss/colors');
         _fs.default.writeFileSync(tailwindConfigLocation, stubFile, 'utf8');
         messages.push(`Created Tailwind CSS config file: ${_path.default.basename(tailwindConfigLocation)}`);
     }
-    if (args1['--postcss']) {
+    if (args['--postcss']) {
         let postcssConfigLocation = _path.default.resolve('./postcss.config.js');
         if (_fs.default.existsSync(postcssConfigLocation)) {
             messages.push(`${_path.default.basename(postcssConfigLocation)} already exists.`);
@@ -327,27 +327,27 @@ function init() {
     }
 }
 async function build() {
-    let input = args1['--input'];
-    let output = args1['--output'];
-    let shouldWatch = args1['--watch'];
-    let includePostCss = args1['--postcss'];
+    let input = args['--input'];
+    let output = args['--output'];
+    let shouldWatch = args['--watch'];
+    let includePostCss = args['--postcss'];
     // TODO: Deprecate this in future versions
-    if (!input && args1['_'][1]) {
+    if (!input && args['_'][1]) {
         console.error('[deprecation] Running tailwindcss without -i, please provide an input file.');
-        input = args1['--input'] = args1['_'][1];
+        input = args['--input'] = args['_'][1];
     }
     if (input && !_fs.default.existsSync(input = _path.default.resolve(input))) {
-        console.error(`Specified input file ${args1['--input']} does not exist.`);
+        console.error(`Specified input file ${args['--input']} does not exist.`);
         process.exit(9);
     }
-    if (args1['--config'] && !_fs.default.existsSync(args1['--config'] = _path.default.resolve(args1['--config']))) {
-        console.error(`Specified config file ${args1['--config']} does not exist.`);
+    if (args['--config'] && !_fs.default.existsSync(args['--config'] = _path.default.resolve(args['--config']))) {
+        console.error(`Specified config file ${args['--config']} does not exist.`);
         process.exit(9);
     }
-    let configPath = args1['--config'] ? args1['--config'] : ((defaultPath)=>_fs.default.existsSync(defaultPath) ? defaultPath : null
+    let configPath = args['--config'] ? args['--config'] : ((defaultPath)=>_fs.default.existsSync(defaultPath) ? defaultPath : null
     )(_path.default.resolve('./tailwind.config.js'));
     async function loadPostCssPlugins() {
-        let customPostCssPath = typeof args1['--postcss'] === 'string' ? args1['--postcss'] : undefined;
+        let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined;
         let { plugins: configPlugins  } = customPostCssPath ? await (async ()=>{
             let file = _path.default.resolve(customPostCssPath);
             // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.0.1/src/index.js
@@ -386,17 +386,17 @@ async function build() {
         let config = configPath ? require(configPath) : {
         };
         let resolvedConfig = (0, _resolveConfig).default(config);
-        if (args1['--purge']) {
+        if (args['--purge']) {
             _log.default.warn('purge-flag-deprecated', [
                 'The `--purge` flag has been deprecated.',
                 'Please use `--content` instead.', 
             ]);
-            if (!args1['--content']) {
-                args1['--content'] = args1['--purge'];
+            if (!args['--content']) {
+                args['--content'] = args['--purge'];
             }
         }
-        if (args1['--content']) {
-            resolvedConfig.content.files = args1['--content'].split(/(?<!{[^}]+),/);
+        if (args['--content']) {
+            resolvedConfig.content.files = args['--content'].split(/(?<!{[^}]+),/);
         }
         return resolvedConfig;
     }
@@ -457,9 +457,9 @@ async function build() {
         let plugins = [
             ...beforePlugins,
             tailwindPlugin,
-            !args1['--minify'] && formatNodes,
+            !args['--minify'] && formatNodes,
             ...afterPlugins,
-            !args1['--no-autoprefixer'] && (()=>{
+            !args['--no-autoprefixer'] && (()=>{
                 // Try to load a local `autoprefixer` version first
                 try {
                     return require('autoprefixer');
@@ -467,7 +467,7 @@ async function build() {
                 }
                 return (0, _indexJs).lazyAutoprefixer();
             })(),
-            args1['--minify'] && (()=>{
+            args['--minify'] && (()=>{
                 let options = {
                     preset: [
                         'default',
@@ -541,9 +541,9 @@ async function build() {
         let plugins = [
             ...beforePlugins,
             '__TAILWIND_PLUGIN_POSITION__',
-            !args1['--minify'] && formatNodes,
+            !args['--minify'] && formatNodes,
             ...afterPlugins,
-            !args1['--no-autoprefixer'] && (()=>{
+            !args['--no-autoprefixer'] && (()=>{
                 // Try to load a local `autoprefixer` version first
                 try {
                     return require('autoprefixer');
@@ -551,7 +551,7 @@ async function build() {
                 }
                 return (0, _indexJs).lazyAutoprefixer();
             })(),
-            args1['--minify'] && (()=>{
+            args['--minify'] && (()=>{
                 let options = {
                     preset: [
                         'default',

package/lib/corePlugins.js

@@ -210,7 +210,7 @@ let variantPlugins = {
     }
 };
 exports.variantPlugins = variantPlugins;
-let corePlugins1 = {
+let corePlugins = {
     preflight: ({ addBase  })=>{
         let preflightStyles = _postcss.default.parse(_fs.default.readFileSync(path.join(__dirname, './css/preflight.css'), 'utf8'));
         addBase([
@@ -911,7 +911,9 @@ let corePlugins1 = {
                 ], 
             ], 
         ], 
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     transform: ({ addBase , addUtilities  })=>{
         addBase({
             '@defaults transform': {
@@ -1679,10 +1681,10 @@ let corePlugins1 = {
             }
         });
     },
-    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)
@@ -2093,8 +2095,8 @@ let corePlugins1 = {
             }
         });
     },
-    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': {
@@ -2112,7 +2114,7 @@ let corePlugins1 = {
         }
         matchUtilities({
             border: (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-color': (0, _toColorValue).default(value)
                     };
@@ -2132,7 +2134,7 @@ let corePlugins1 = {
         });
         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)
@@ -2148,7 +2150,7 @@ let corePlugins1 = {
                 });
             },
             'border-y': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-top-color': (0, _toColorValue).default(value),
                         'border-bottom-color': (0, _toColorValue).default(value)
@@ -2170,7 +2172,7 @@ let corePlugins1 = {
         });
         matchUtilities({
             'border-t': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-top-color': (0, _toColorValue).default(value)
                     };
@@ -2182,7 +2184,7 @@ let corePlugins1 = {
                 });
             },
             'border-r': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-right-color': (0, _toColorValue).default(value)
                     };
@@ -2194,7 +2196,7 @@ let corePlugins1 = {
                 });
             },
             'border-b': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-bottom-color': (0, _toColorValue).default(value)
                     };
@@ -2206,7 +2208,7 @@ let corePlugins1 = {
                 });
             },
             'border-l': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-left-color': (0, _toColorValue).default(value)
                     };
@@ -2231,10 +2233,10 @@ let corePlugins1 = {
             ]
         ], 
     ]),
-    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)
                     };
@@ -2760,10 +2762,10 @@ let corePlugins1 = {
     ], {
         supportsNegativeValues: true
     }),
-    textColor: ({ matchUtilities , theme , corePlugins  })=>{
+    textColor: ({ matchUtilities , theme , corePlugins: corePlugins4  })=>{
         matchUtilities({
             text: (value)=>{
-                if (!corePlugins('textOpacity')) {
+                if (!corePlugins4('textOpacity')) {
                     return {
                         color: (0, _toColorValue).default(value)
                     };
@@ -2874,10 +2876,10 @@ let corePlugins1 = {
             }
         });
     },
-    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)
@@ -3660,4 +3662,4 @@ let corePlugins1 = {
         ], 
     ])
 };
-exports.corePlugins = corePlugins1;
+exports.corePlugins = corePlugins;

package/lib/lib/expandApplyAtRules.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = expandApplyAtRules;
 var _postcss = _interopRequireDefault(require("postcss"));
+var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
 var _generateRules = require("./generateRules");
 var _bigSign = _interopRequireDefault(require("../util/bigSign"));
 var _escapeClassName = _interopRequireDefault(require("../util/escapeClassName"));
@@ -12,9 +13,21 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function prefix1(context, selector) {
-    let prefix = context.tailwindConfig.prefix;
-    return typeof prefix === 'function' ? prefix(selector) : prefix + selector;
+function containsBase(selector, classCandidateBase, separator) {
+    return (0, _postcssSelectorParser).default((selectors)=>{
+        let contains = false;
+        selectors.walkClasses((classSelector)=>{
+            if (classSelector.value.split(separator).pop() === classCandidateBase) {
+                contains = true;
+                return false;
+            }
+        });
+        return contains;
+    }).transformSync(selector);
+}
+function prefix(context, selector) {
+    let prefix1 = context.tailwindConfig.prefix;
+    return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
 }
 function buildApplyCache(applyCandidates, context) {
     for (let candidate of applyCandidates){
@@ -127,8 +140,8 @@ function processApply(root, context) {
      */ // TODO: Should we use postcss-selector-parser for this instead?
         function replaceSelector(selector, utilitySelectors, candidate) {
             let needle = `.${(0, _escapeClassName).default(candidate)}`;
-            let utilitySelectorsList = utilitySelectors.split(/\s*,\s*/g);
-            return selector.split(/\s*,\s*/g).map((s)=>{
+            let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g);
+            return selector.split(/\s*\,(?![^(]*\))\s*/g).map((s)=>{
                 let replaced = [];
                 for (let utilitySelector of utilitySelectorsList){
                     let replacedSelector = utilitySelector.replace(needle, s);
@@ -156,7 +169,7 @@ function processApply(root, context) {
             }
             for (let applyCandidate of applyCandidates){
                 if (!applyClassCache.has(applyCandidate)) {
-                    if (applyCandidate === prefix1(context, 'group')) {
+                    if (applyCandidate === prefix(context, 'group')) {
                         // TODO: Link to specific documentation page with error code.
                         throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
                     }
@@ -173,7 +186,11 @@ function processApply(root, context) {
         for (const [parent, candidates] of perParentApplies){
             let siblings = [];
             for (let [applyCandidate, important, rules] of candidates){
+                let base = applyCandidate.split(context.tailwindConfig.separator).pop();
                 for (let [meta, node] of rules){
+                    if (containsBase(parent.selector, base, context.tailwindConfig.separator) && containsBase(node.selector, base, context.tailwindConfig.separator)) {
+                        throw node.error(`Circular dependency detected when using: \`@apply ${applyCandidate}\``);
+                    }
                     let root = _postcss.default.root({
                         nodes: [
                             node.clone()

package/lib/lib/resolveDefaultsAtRules.js

@@ -79,7 +79,7 @@ function extractElementSelector(selector) {
 function resolveDefaultsAtRules({ tailwindConfig  }) {
     return (root)=>{
         let variableNodeMap = new Map();
-        let universals = new Set();
+        /** @type {Set<import('postcss').AtRule>} */ let universals = new Set();
         root.walkAtRules('defaults', (rule)=>{
             if (rule.nodes && rule.nodes.length > 0) {
                 universals.add(rule);
@@ -93,32 +93,46 @@ function resolveDefaultsAtRules({ tailwindConfig  }) {
             rule.remove();
         });
         for (let universal of universals){
-            let selectors = new Set();
+            /** @type {Map<string, Set<string>>} */ let selectorGroups = new Map();
             var ref;
             let rules = (ref = variableNodeMap.get(universal.params)) !== null && ref !== void 0 ? ref : [];
             for (let rule of rules){
                 for (let selector of extractElementSelector(rule.selector)){
+                    // If selector contains a vendor prefix after a pseudo element or class,
+                    // we consider them separately because merging the declarations into
+                    // a single rule will cause browsers that do not understand the
+                    // vendor prefix to throw out the whole rule
+                    let selectorGroupName = selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__';
+                    var ref1;
+                    let selectors = (ref1 = selectorGroups.get(selectorGroupName)) !== null && ref1 !== void 0 ? ref1 : new Set();
+                    selectorGroups.set(selectorGroupName, selectors);
                     selectors.add(selector);
                 }
             }
-            if (selectors.size === 0) {
+            if (selectorGroups.size === 0) {
                 universal.remove();
                 continue;
             }
-            let universalRule = _postcss.default.rule();
             if ((0, _featureFlags).flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-                universalRule.selectors = [
-                    ...selectors
-                ];
+                for (let [, selectors] of selectorGroups){
+                    let universalRule = _postcss.default.rule();
+                    universalRule.selectors = [
+                        ...selectors
+                    ];
+                    universalRule.append(universal.nodes.map((node)=>node.clone()
+                    ));
+                    universal.before(universalRule);
+                }
             } else {
+                let universalRule = _postcss.default.rule();
                 universalRule.selectors = [
                     '*',
                     '::before',
                     '::after'
                 ];
+                universalRule.append(universal.nodes);
+                universal.before(universalRule);
             }
-            universalRule.append(universal.nodes);
-            universal.before(universalRule);
             universal.remove();
         }
     };