windicss - npm Package Compare versions

Comparing version 3.0.0-beta.10 to 3.0.0-beta.11

cli/index.js

@@ -267,3 +267,3 @@ #!/usr/bin/env node
     // eslint-disable-next-line quotes
-    return "windicss 3.0.0-beta.10"; // replace by rollup
+    return "windicss 3.0.0-beta.11"; // replace by rollup
 }
@@ -412,4 +412,4 @@ function generateTemplate(folder, outputPath) {
     }, new index_ts$2.StyleSheet())
-        .combine()
-        .sort();
+        .sort()
+        .combine();
     if (args['--preflight'])
@@ -420,4 +420,4 @@ outputStyle = preflights
         }, new index_ts$2.StyleSheet())
+            .sort()
             .combine()
-            .sort()
             .extend(outputStyle);
@@ -424,0 +424,0 @@ var filePath = (_b = args['--output']) !== null && _b !== void 0 ? _b : 'windi.output.css';

config/index.js

@@ -324,2 +324,240 @@ 'use strict';
 
+var variantOrder = [
+    'hover',
+    'focus',
+    'active',
+    'visited',
+    'link',
+    'target',
+    'focus-visible',
+    'focus-within',
+    'checked',
+    'not-checked',
+    'default',
+    'disabled',
+    'enabled',
+    'indeterminate',
+    'invalid',
+    'valid',
+    'optional',
+    'required',
+    'placeholder-shown',
+    'read-only',
+    'read-write',
+    'not-disabled',
+    'first-of-type',
+    'not-first-of-type',
+    'last-of-type',
+    'not-last-of-type',
+    'first',
+    'last',
+    'not-first',
+    'not-last',
+    'only-child',
+    'not-only-child',
+    'only-of-type',
+    'not-only-of-type',
+    'even',
+    'odd',
+    'even-of-type',
+    'odd-of-type',
+    'root',
+    'empty',
+    'before',
+    'after',
+    'first-letter',
+    'first-line',
+    'selection',
+    'svg',
+    'all',
+    'children',
+    'siblings',
+    'sibling',
+    'ltr',
+    'rtl',
+    'group-hover',
+    'group-focus',
+    'group-active',
+    'group-visited',
+    'motion-safe',
+    'motion-reduce',
+];
+var layerOrder;
+(function (layerOrder) {
+    layerOrder[layerOrder["base"] = 10] = "base";
+    layerOrder[layerOrder["components"] = 150] = "components";
+    layerOrder[layerOrder["shortcuts"] = 160] = "shortcuts";
+    layerOrder[layerOrder["utilities"] = 20000] = "utilities";
+})(layerOrder || (layerOrder = {}));
+var pluginOrder;
+(function (pluginOrder) {
+    pluginOrder[pluginOrder["container"] = 100] = "container";
+    pluginOrder[pluginOrder["space"] = 200] = "space";
+    pluginOrder[pluginOrder["divideWidth"] = 300] = "divideWidth";
+    pluginOrder[pluginOrder["divideColor"] = 400] = "divideColor";
+    pluginOrder[pluginOrder["divideStyle"] = 500] = "divideStyle";
+    pluginOrder[pluginOrder["divideOpacity"] = 600] = "divideOpacity";
+    pluginOrder[pluginOrder["accessibility"] = 700] = "accessibility";
+    pluginOrder[pluginOrder["appearance"] = 800] = "appearance";
+    pluginOrder[pluginOrder["backgroundAttachment"] = 900] = "backgroundAttachment";
+    pluginOrder[pluginOrder["backgroundClip"] = 1000] = "backgroundClip";
+    pluginOrder[pluginOrder["backgroundColor"] = 1100] = "backgroundColor";
+    pluginOrder[pluginOrder["backgroundImage"] = 1200] = "backgroundImage";
+    pluginOrder[pluginOrder["gradientColorStops"] = 1300] = "gradientColorStops";
+    pluginOrder[pluginOrder["backgroundOpacity"] = 1400] = "backgroundOpacity";
+    pluginOrder[pluginOrder["backgroundPosition"] = 1500] = "backgroundPosition";
+    pluginOrder[pluginOrder["backgroundRepeat"] = 1600] = "backgroundRepeat";
+    pluginOrder[pluginOrder["backgroundSize"] = 1700] = "backgroundSize";
+    pluginOrder[pluginOrder["backgroundOrigin"] = 1750] = "backgroundOrigin";
+    pluginOrder[pluginOrder["borderCollapse"] = 1800] = "borderCollapse";
+    pluginOrder[pluginOrder["borderColor"] = 1900] = "borderColor";
+    pluginOrder[pluginOrder["borderOpacity"] = 2000] = "borderOpacity";
+    pluginOrder[pluginOrder["borderRadius"] = 2100] = "borderRadius";
+    pluginOrder[pluginOrder["borderStyle"] = 2200] = "borderStyle";
+    pluginOrder[pluginOrder["borderWidth"] = 2300] = "borderWidth";
+    pluginOrder[pluginOrder["boxDecorationBreak"] = 2350] = "boxDecorationBreak";
+    pluginOrder[pluginOrder["boxSizing"] = 2400] = "boxSizing";
+    pluginOrder[pluginOrder["cursor"] = 2500] = "cursor";
+    pluginOrder[pluginOrder["captionSide"] = 2550] = "captionSide";
+    pluginOrder[pluginOrder["emptyCells"] = 2560] = "emptyCells";
+    pluginOrder[pluginOrder["display"] = 2600] = "display";
+    pluginOrder[pluginOrder["flexDirection"] = 2700] = "flexDirection";
+    pluginOrder[pluginOrder["flexWrap"] = 2800] = "flexWrap";
+    pluginOrder[pluginOrder["placeItems"] = 2900] = "placeItems";
+    pluginOrder[pluginOrder["placeContent"] = 3000] = "placeContent";
+    pluginOrder[pluginOrder["placeSelf"] = 3100] = "placeSelf";
+    pluginOrder[pluginOrder["alignItems"] = 3200] = "alignItems";
+    pluginOrder[pluginOrder["alignContent"] = 3300] = "alignContent";
+    pluginOrder[pluginOrder["alignSelf"] = 3400] = "alignSelf";
+    pluginOrder[pluginOrder["justifyItems"] = 3500] = "justifyItems";
+    pluginOrder[pluginOrder["justifyContent"] = 3600] = "justifyContent";
+    pluginOrder[pluginOrder["justifySelf"] = 3700] = "justifySelf";
+    pluginOrder[pluginOrder["flex"] = 3800] = "flex";
+    pluginOrder[pluginOrder["flexGrow"] = 3900] = "flexGrow";
+    pluginOrder[pluginOrder["flexShrink"] = 4000] = "flexShrink";
+    pluginOrder[pluginOrder["order"] = 4100] = "order";
+    pluginOrder[pluginOrder["float"] = 4200] = "float";
+    pluginOrder[pluginOrder["clear"] = 4300] = "clear";
+    pluginOrder[pluginOrder["fontFamily"] = 4400] = "fontFamily";
+    pluginOrder[pluginOrder["fontWeight"] = 4500] = "fontWeight";
+    pluginOrder[pluginOrder["height"] = 4600] = "height";
+    pluginOrder[pluginOrder["fontSize"] = 4700] = "fontSize";
+    pluginOrder[pluginOrder["lineHeight"] = 4800] = "lineHeight";
+    pluginOrder[pluginOrder["listStylePosition"] = 4900] = "listStylePosition";
+    pluginOrder[pluginOrder["listStyleType"] = 5000] = "listStyleType";
+    pluginOrder[pluginOrder["margin"] = 5100] = "margin";
+    pluginOrder[pluginOrder["maxHeight"] = 5200] = "maxHeight";
+    pluginOrder[pluginOrder["maxWidth"] = 5300] = "maxWidth";
+    pluginOrder[pluginOrder["minHeight"] = 5400] = "minHeight";
+    pluginOrder[pluginOrder["minWidth"] = 5500] = "minWidth";
+    pluginOrder[pluginOrder["objectFit"] = 5600] = "objectFit";
+    pluginOrder[pluginOrder["objectPosition"] = 5700] = "objectPosition";
+    pluginOrder[pluginOrder["opacity"] = 5800] = "opacity";
+    pluginOrder[pluginOrder["outline"] = 5900] = "outline";
+    pluginOrder[pluginOrder["overflow"] = 6000] = "overflow";
+    pluginOrder[pluginOrder["overscrollBehavior"] = 6100] = "overscrollBehavior";
+    pluginOrder[pluginOrder["padding"] = 6200] = "padding";
+    pluginOrder[pluginOrder["placeholderColor"] = 6300] = "placeholderColor";
+    pluginOrder[pluginOrder["placeholderOpacity"] = 6400] = "placeholderOpacity";
+    pluginOrder[pluginOrder["caretColor"] = 6450] = "caretColor";
+    pluginOrder[pluginOrder["caretOpacity"] = 6460] = "caretOpacity";
+    pluginOrder[pluginOrder["tabSize"] = 6470] = "tabSize";
+    pluginOrder[pluginOrder["pointerEvents"] = 6500] = "pointerEvents";
+    pluginOrder[pluginOrder["position"] = 6600] = "position";
+    pluginOrder[pluginOrder["inset"] = 6700] = "inset";
+    pluginOrder[pluginOrder["resize"] = 6800] = "resize";
+    pluginOrder[pluginOrder["boxShadow"] = 6900] = "boxShadow";
+    pluginOrder[pluginOrder["boxShadowColor"] = 6950] = "boxShadowColor";
+    pluginOrder[pluginOrder["ringWidth"] = 7000] = "ringWidth";
+    pluginOrder[pluginOrder["ringOffsetColor"] = 7100] = "ringOffsetColor";
+    pluginOrder[pluginOrder["ringOffsetWidth"] = 7200] = "ringOffsetWidth";
+    pluginOrder[pluginOrder["ringColor"] = 7300] = "ringColor";
+    pluginOrder[pluginOrder["ringOpacity"] = 7400] = "ringOpacity";
+    pluginOrder[pluginOrder["fill"] = 7500] = "fill";
+    pluginOrder[pluginOrder["stroke"] = 7600] = "stroke";
+    pluginOrder[pluginOrder["strokeWidth"] = 7700] = "strokeWidth";
+    pluginOrder[pluginOrder["strokeDashArray"] = 7750] = "strokeDashArray";
+    pluginOrder[pluginOrder["strokeDashOffset"] = 7760] = "strokeDashOffset";
+    pluginOrder[pluginOrder["tableLayout"] = 7800] = "tableLayout";
+    pluginOrder[pluginOrder["textAlign"] = 7900] = "textAlign";
+    pluginOrder[pluginOrder["textColor"] = 8000] = "textColor";
+    pluginOrder[pluginOrder["textOpacity"] = 8100] = "textOpacity";
+    pluginOrder[pluginOrder["textOverflow"] = 8200] = "textOverflow";
+    pluginOrder[pluginOrder["textShadow"] = 8250] = "textShadow";
+    pluginOrder[pluginOrder["fontStyle"] = 8300] = "fontStyle";
+    pluginOrder[pluginOrder["textTransform"] = 8400] = "textTransform";
+    pluginOrder[pluginOrder["textDecorationStyle"] = 8450] = "textDecorationStyle";
+    pluginOrder[pluginOrder["textDecorationLength"] = 8455] = "textDecorationLength";
+    pluginOrder[pluginOrder["textDecorationColor"] = 8460] = "textDecorationColor";
+    pluginOrder[pluginOrder["textDecorationOpacity"] = 8470] = "textDecorationOpacity";
+    pluginOrder[pluginOrder["textDecorationOffset"] = 8480] = "textDecorationOffset";
+    pluginOrder[pluginOrder["textDecoration"] = 8500] = "textDecoration";
+    pluginOrder[pluginOrder["textIndent"] = 8550] = "textIndent";
+    pluginOrder[pluginOrder["textStrokeColor"] = 8560] = "textStrokeColor";
+    pluginOrder[pluginOrder["textStrokeWidth"] = 8570] = "textStrokeWidth";
+    pluginOrder[pluginOrder["fontSmoothing"] = 8600] = "fontSmoothing";
+    pluginOrder[pluginOrder["fontVariantNumeric"] = 8700] = "fontVariantNumeric";
+    pluginOrder[pluginOrder["letterSpacing"] = 8800] = "letterSpacing";
+    pluginOrder[pluginOrder["userSelect"] = 8900] = "userSelect";
+    pluginOrder[pluginOrder["verticalAlign"] = 9000] = "verticalAlign";
+    pluginOrder[pluginOrder["visibility"] = 9100] = "visibility";
+    pluginOrder[pluginOrder["backfaceVisibility"] = 9150] = "backfaceVisibility";
+    pluginOrder[pluginOrder["whitespace"] = 9200] = "whitespace";
+    pluginOrder[pluginOrder["wordBreak"] = 9300] = "wordBreak";
+    pluginOrder[pluginOrder["writingMode"] = 9340] = "writingMode";
+    pluginOrder[pluginOrder["hyphens"] = 9350] = "hyphens";
+    pluginOrder[pluginOrder["width"] = 9400] = "width";
+    pluginOrder[pluginOrder["zIndex"] = 9500] = "zIndex";
+    pluginOrder[pluginOrder["isolation"] = 9550] = "isolation";
+    pluginOrder[pluginOrder["gap"] = 9600] = "gap";
+    pluginOrder[pluginOrder["gridAutoFlow"] = 9700] = "gridAutoFlow";
+    pluginOrder[pluginOrder["gridTemplateColumns"] = 9800] = "gridTemplateColumns";
+    pluginOrder[pluginOrder["gridAutoColumns"] = 9900] = "gridAutoColumns";
+    pluginOrder[pluginOrder["gridColumn"] = 10000] = "gridColumn";
+    pluginOrder[pluginOrder["gridColumnStart"] = 10100] = "gridColumnStart";
+    pluginOrder[pluginOrder["gridColumnEnd"] = 10200] = "gridColumnEnd";
+    pluginOrder[pluginOrder["gridTemplateRows"] = 10300] = "gridTemplateRows";
+    pluginOrder[pluginOrder["gridAutoRows"] = 10400] = "gridAutoRows";
+    pluginOrder[pluginOrder["gridRow"] = 10500] = "gridRow";
+    pluginOrder[pluginOrder["gridRowStart"] = 10600] = "gridRowStart";
+    pluginOrder[pluginOrder["gridRowEnd"] = 10700] = "gridRowEnd";
+    pluginOrder[pluginOrder["transform"] = 10800] = "transform";
+    pluginOrder[pluginOrder["transformOrigin"] = 10900] = "transformOrigin";
+    pluginOrder[pluginOrder["scale"] = 11000] = "scale";
+    pluginOrder[pluginOrder["rotate"] = 11100] = "rotate";
+    pluginOrder[pluginOrder["translate"] = 11200] = "translate";
+    pluginOrder[pluginOrder["skew"] = 11300] = "skew";
+    pluginOrder[pluginOrder["perspective"] = 11350] = "perspective";
+    pluginOrder[pluginOrder["perspectiveOrigin"] = 11360] = "perspectiveOrigin";
+    pluginOrder[pluginOrder["transitionProperty"] = 11400] = "transitionProperty";
+    pluginOrder[pluginOrder["transitionTimingFunction"] = 11500] = "transitionTimingFunction";
+    pluginOrder[pluginOrder["transitionDuration"] = 11600] = "transitionDuration";
+    pluginOrder[pluginOrder["transitionDelay"] = 11700] = "transitionDelay";
+    pluginOrder[pluginOrder["keyframes"] = 11800] = "keyframes";
+    pluginOrder[pluginOrder["animation"] = 11900] = "animation";
+    pluginOrder[pluginOrder["imageRendering"] = 11950] = "imageRendering";
+    pluginOrder[pluginOrder["mixBlendMode"] = 12000] = "mixBlendMode";
+    pluginOrder[pluginOrder["backgroundBlendMode"] = 12100] = "backgroundBlendMode";
+    pluginOrder[pluginOrder["filter"] = 12200] = "filter";
+    pluginOrder[pluginOrder["blur"] = 12300] = "blur";
+    pluginOrder[pluginOrder["brightness"] = 12400] = "brightness";
+    pluginOrder[pluginOrder["contrast"] = 12500] = "contrast";
+    pluginOrder[pluginOrder["dropShadow"] = 12600] = "dropShadow";
+    pluginOrder[pluginOrder["grayscale"] = 12700] = "grayscale";
+    pluginOrder[pluginOrder["hueRotate"] = 12800] = "hueRotate";
+    pluginOrder[pluginOrder["invert"] = 12900] = "invert";
+    pluginOrder[pluginOrder["saturate"] = 13000] = "saturate";
+    pluginOrder[pluginOrder["sepia"] = 13100] = "sepia";
+    pluginOrder[pluginOrder["backdropFilter"] = 13200] = "backdropFilter";
+    pluginOrder[pluginOrder["backdropBlur"] = 13300] = "backdropBlur";
+    pluginOrder[pluginOrder["backdropBrightness"] = 13400] = "backdropBrightness";
+    pluginOrder[pluginOrder["backdropContrast"] = 13500] = "backdropContrast";
+    pluginOrder[pluginOrder["backdropGrayscale"] = 13600] = "backdropGrayscale";
+    pluginOrder[pluginOrder["backdropHueRotate"] = 13700] = "backdropHueRotate";
+    pluginOrder[pluginOrder["backdropInvert"] = 13800] = "backdropInvert";
+    pluginOrder[pluginOrder["backdropOpacity"] = 13900] = "backdropOpacity";
+    pluginOrder[pluginOrder["backdropSaturate"] = 14000] = "backdropSaturate";
+    pluginOrder[pluginOrder["backdropSepia"] = 14100] = "backdropSepia";
+})(pluginOrder || (pluginOrder = {}));
+
 var defaultColors = {
@@ -1201,182 +1439,3 @@ transparent: 'transparent',
     },
-    variantOrder: [
-        'hover',
-        'focus',
-        'active',
-        'visited',
-        'link',
-        'target',
-        'focus-visible',
-        'focus-within',
-        'checked',
-        'not-checked',
-        'default',
-        'disabled',
-        'enabled',
-        'indeterminate',
-        'invalid',
-        'valid',
-        'optional',
-        'required',
-        'placeholder-shown',
-        'read-only',
-        'read-write',
-        'not-disabled',
-        'first-of-type',
-        'not-first-of-type',
-        'last-of-type',
-        'not-last-of-type',
-        'first',
-        'last',
-        'not-first',
-        'not-last',
-        'only-child',
-        'not-only-child',
-        'only-of-type',
-        'not-only-of-type',
-        'even',
-        'odd',
-        'even-of-type',
-        'odd-of-type',
-        'root',
-        'empty',
-        'before',
-        'after',
-        'first-letter',
-        'first-line',
-        'selection',
-        'svg',
-        'all',
-        'children',
-        'siblings',
-        'sibling',
-        'ltr',
-        'rtl',
-        'group-hover',
-        'group-focus',
-        'group-active',
-        'group-visited',
-        'motion-safe',
-        'motion-reduce',
-    ],
-    // variants: {
-    //   accessibility: ['responsive', 'focus-within', 'focus'],
-    //   alignContent: ['responsive'],
-    //   alignItems: ['responsive'],
-    //   alignSelf: ['responsive'],
-    //   animation: ['responsive'],
-    //   appearance: ['responsive'],
-    //   backgroundAttachment: ['responsive'],
-    //   backgroundClip: ['responsive'],
-    //   backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   backgroundImage: ['responsive'],
-    //   backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   backgroundPosition: ['responsive'],
-    //   backgroundRepeat: ['responsive'],
-    //   backgroundSize: ['responsive'],
-    //   borderCollapse: ['responsive'],
-    //   borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   borderRadius: ['responsive'],
-    //   borderStyle: ['responsive'],
-    //   borderWidth: ['responsive'],
-    //   boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   boxSizing: ['responsive'],
-    //   clear: ['responsive'],
-    //   container: ['responsive'],
-    //   cursor: ['responsive'],
-    //   display: ['responsive'],
-    //   divideColor: ['responsive', 'dark'],
-    //   divideOpacity: ['responsive'],
-    //   divideStyle: ['responsive'],
-    //   divideWidth: ['responsive'],
-    //   fill: ['responsive'],
-    //   flex: ['responsive'],
-    //   flexDirection: ['responsive'],
-    //   flexGrow: ['responsive'],
-    //   flexShrink: ['responsive'],
-    //   flexWrap: ['responsive'],
-    //   float: ['responsive'],
-    //   fontFamily: ['responsive'],
-    //   fontSize: ['responsive'],
-    //   fontSmoothing: ['responsive'],
-    //   fontStyle: ['responsive'],
-    //   fontVariantNumeric: ['responsive'],
-    //   fontWeight: ['responsive'],
-    //   gap: ['responsive'],
-    //   gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
-    //   gridAutoColumns: ['responsive'],
-    //   gridAutoFlow: ['responsive'],
-    //   gridAutoRows: ['responsive'],
-    //   gridColumn: ['responsive'],
-    //   gridColumnEnd: ['responsive'],
-    //   gridColumnStart: ['responsive'],
-    //   gridRow: ['responsive'],
-    //   gridRowEnd: ['responsive'],
-    //   gridRowStart: ['responsive'],
-    //   gridTemplateColumns: ['responsive'],
-    //   gridTemplateRows: ['responsive'],
-    //   height: ['responsive'],
-    //   inset: ['responsive'],
-    //   justifyContent: ['responsive'],
-    //   justifyItems: ['responsive'],
-    //   justifySelf: ['responsive'],
-    //   letterSpacing: ['responsive'],
-    //   lineHeight: ['responsive'],
-    //   listStylePosition: ['responsive'],
-    //   listStyleType: ['responsive'],
-    //   margin: ['responsive'],
-    //   maxHeight: ['responsive'],
-    //   maxWidth: ['responsive'],
-    //   minHeight: ['responsive'],
-    //   minWidth: ['responsive'],
-    //   objectFit: ['responsive'],
-    //   objectPosition: ['responsive'],
-    //   opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   order: ['responsive'],
-    //   outline: ['responsive', 'focus-within', 'focus'],
-    //   overflow: ['responsive'],
-    //   overscrollBehavior: ['responsive'],
-    //   padding: ['responsive'],
-    //   placeContent: ['responsive'],
-    //   placeItems: ['responsive'],
-    //   placeSelf: ['responsive'],
-    //   placeholderColor: ['responsive', 'dark', 'focus'],
-    //   placeholderOpacity: ['responsive', 'focus'],
-    //   pointerEvents: ['responsive'],
-    //   position: ['responsive'],
-    //   resize: ['responsive'],
-    //   ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
-    //   ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
-    //   ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
-    //   ringOpacity: ['responsive', 'focus-within', 'focus'],
-    //   ringWidth: ['responsive', 'focus-within', 'focus'],
-    //   rotate: ['responsive', 'hover', 'focus'],
-    //   scale: ['responsive', 'hover', 'focus'],
-    //   skew: ['responsive', 'hover', 'focus'],
-    //   space: ['responsive'],
-    //   stroke: ['responsive'],
-    //   strokeWidth: ['responsive'],
-    //   tableLayout: ['responsive'],
-    //   textAlign: ['responsive'],
-    //   textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   textOverflow: ['responsive'],
-    //   textTransform: ['responsive'],
-    //   transform: ['responsive'],
-    //   transformOrigin: ['responsive'],
-    //   transitionDelay: ['responsive'],
-    //   transitionDuration: ['responsive'],
-    //   transitionProperty: ['responsive'],
-    //   transitionTimingFunction: ['responsive'],
-    //   translate: ['responsive', 'hover', 'focus'],
-    //   userSelect: ['responsive'],
-    //   verticalAlign: ['responsive'],
-    //   visibility: ['responsive'],
-    //   whitespace: ['responsive'],
-    //   width: ['responsive'],
-    //   wordBreak: ['responsive'],
-    //   zIndex: ['responsive', 'focus-within', 'focus'],
-    // },
+    variantOrder: variantOrder,
     plugins: [],
@@ -1383,0 +1442,0 @@ };

package.json

 {
   "name": "windicss",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.11",
   "description": "Next generation tailwindcss compiler.",
@@ -5,0 +5,0 @@ "main": "index.js",

plugin/forms/index.js

@@ -346,2 +346,240 @@ 'use strict';
 
+var variantOrder = [
+    'hover',
+    'focus',
+    'active',
+    'visited',
+    'link',
+    'target',
+    'focus-visible',
+    'focus-within',
+    'checked',
+    'not-checked',
+    'default',
+    'disabled',
+    'enabled',
+    'indeterminate',
+    'invalid',
+    'valid',
+    'optional',
+    'required',
+    'placeholder-shown',
+    'read-only',
+    'read-write',
+    'not-disabled',
+    'first-of-type',
+    'not-first-of-type',
+    'last-of-type',
+    'not-last-of-type',
+    'first',
+    'last',
+    'not-first',
+    'not-last',
+    'only-child',
+    'not-only-child',
+    'only-of-type',
+    'not-only-of-type',
+    'even',
+    'odd',
+    'even-of-type',
+    'odd-of-type',
+    'root',
+    'empty',
+    'before',
+    'after',
+    'first-letter',
+    'first-line',
+    'selection',
+    'svg',
+    'all',
+    'children',
+    'siblings',
+    'sibling',
+    'ltr',
+    'rtl',
+    'group-hover',
+    'group-focus',
+    'group-active',
+    'group-visited',
+    'motion-safe',
+    'motion-reduce',
+];
+var layerOrder;
+(function (layerOrder) {
+    layerOrder[layerOrder["base"] = 10] = "base";
+    layerOrder[layerOrder["components"] = 150] = "components";
+    layerOrder[layerOrder["shortcuts"] = 160] = "shortcuts";
+    layerOrder[layerOrder["utilities"] = 20000] = "utilities";
+})(layerOrder || (layerOrder = {}));
+var pluginOrder;
+(function (pluginOrder) {
+    pluginOrder[pluginOrder["container"] = 100] = "container";
+    pluginOrder[pluginOrder["space"] = 200] = "space";
+    pluginOrder[pluginOrder["divideWidth"] = 300] = "divideWidth";
+    pluginOrder[pluginOrder["divideColor"] = 400] = "divideColor";
+    pluginOrder[pluginOrder["divideStyle"] = 500] = "divideStyle";
+    pluginOrder[pluginOrder["divideOpacity"] = 600] = "divideOpacity";
+    pluginOrder[pluginOrder["accessibility"] = 700] = "accessibility";
+    pluginOrder[pluginOrder["appearance"] = 800] = "appearance";
+    pluginOrder[pluginOrder["backgroundAttachment"] = 900] = "backgroundAttachment";
+    pluginOrder[pluginOrder["backgroundClip"] = 1000] = "backgroundClip";
+    pluginOrder[pluginOrder["backgroundColor"] = 1100] = "backgroundColor";
+    pluginOrder[pluginOrder["backgroundImage"] = 1200] = "backgroundImage";
+    pluginOrder[pluginOrder["gradientColorStops"] = 1300] = "gradientColorStops";
+    pluginOrder[pluginOrder["backgroundOpacity"] = 1400] = "backgroundOpacity";
+    pluginOrder[pluginOrder["backgroundPosition"] = 1500] = "backgroundPosition";
+    pluginOrder[pluginOrder["backgroundRepeat"] = 1600] = "backgroundRepeat";
+    pluginOrder[pluginOrder["backgroundSize"] = 1700] = "backgroundSize";
+    pluginOrder[pluginOrder["backgroundOrigin"] = 1750] = "backgroundOrigin";
+    pluginOrder[pluginOrder["borderCollapse"] = 1800] = "borderCollapse";
+    pluginOrder[pluginOrder["borderColor"] = 1900] = "borderColor";
+    pluginOrder[pluginOrder["borderOpacity"] = 2000] = "borderOpacity";
+    pluginOrder[pluginOrder["borderRadius"] = 2100] = "borderRadius";
+    pluginOrder[pluginOrder["borderStyle"] = 2200] = "borderStyle";
+    pluginOrder[pluginOrder["borderWidth"] = 2300] = "borderWidth";
+    pluginOrder[pluginOrder["boxDecorationBreak"] = 2350] = "boxDecorationBreak";
+    pluginOrder[pluginOrder["boxSizing"] = 2400] = "boxSizing";
+    pluginOrder[pluginOrder["cursor"] = 2500] = "cursor";
+    pluginOrder[pluginOrder["captionSide"] = 2550] = "captionSide";
+    pluginOrder[pluginOrder["emptyCells"] = 2560] = "emptyCells";
+    pluginOrder[pluginOrder["display"] = 2600] = "display";
+    pluginOrder[pluginOrder["flexDirection"] = 2700] = "flexDirection";
+    pluginOrder[pluginOrder["flexWrap"] = 2800] = "flexWrap";
+    pluginOrder[pluginOrder["placeItems"] = 2900] = "placeItems";
+    pluginOrder[pluginOrder["placeContent"] = 3000] = "placeContent";
+    pluginOrder[pluginOrder["placeSelf"] = 3100] = "placeSelf";
+    pluginOrder[pluginOrder["alignItems"] = 3200] = "alignItems";
+    pluginOrder[pluginOrder["alignContent"] = 3300] = "alignContent";
+    pluginOrder[pluginOrder["alignSelf"] = 3400] = "alignSelf";
+    pluginOrder[pluginOrder["justifyItems"] = 3500] = "justifyItems";
+    pluginOrder[pluginOrder["justifyContent"] = 3600] = "justifyContent";
+    pluginOrder[pluginOrder["justifySelf"] = 3700] = "justifySelf";
+    pluginOrder[pluginOrder["flex"] = 3800] = "flex";
+    pluginOrder[pluginOrder["flexGrow"] = 3900] = "flexGrow";
+    pluginOrder[pluginOrder["flexShrink"] = 4000] = "flexShrink";
+    pluginOrder[pluginOrder["order"] = 4100] = "order";
+    pluginOrder[pluginOrder["float"] = 4200] = "float";
+    pluginOrder[pluginOrder["clear"] = 4300] = "clear";
+    pluginOrder[pluginOrder["fontFamily"] = 4400] = "fontFamily";
+    pluginOrder[pluginOrder["fontWeight"] = 4500] = "fontWeight";
+    pluginOrder[pluginOrder["height"] = 4600] = "height";
+    pluginOrder[pluginOrder["fontSize"] = 4700] = "fontSize";
+    pluginOrder[pluginOrder["lineHeight"] = 4800] = "lineHeight";
+    pluginOrder[pluginOrder["listStylePosition"] = 4900] = "listStylePosition";
+    pluginOrder[pluginOrder["listStyleType"] = 5000] = "listStyleType";
+    pluginOrder[pluginOrder["margin"] = 5100] = "margin";
+    pluginOrder[pluginOrder["maxHeight"] = 5200] = "maxHeight";
+    pluginOrder[pluginOrder["maxWidth"] = 5300] = "maxWidth";
+    pluginOrder[pluginOrder["minHeight"] = 5400] = "minHeight";
+    pluginOrder[pluginOrder["minWidth"] = 5500] = "minWidth";
+    pluginOrder[pluginOrder["objectFit"] = 5600] = "objectFit";
+    pluginOrder[pluginOrder["objectPosition"] = 5700] = "objectPosition";
+    pluginOrder[pluginOrder["opacity"] = 5800] = "opacity";
+    pluginOrder[pluginOrder["outline"] = 5900] = "outline";
+    pluginOrder[pluginOrder["overflow"] = 6000] = "overflow";
+    pluginOrder[pluginOrder["overscrollBehavior"] = 6100] = "overscrollBehavior";
+    pluginOrder[pluginOrder["padding"] = 6200] = "padding";
+    pluginOrder[pluginOrder["placeholderColor"] = 6300] = "placeholderColor";
+    pluginOrder[pluginOrder["placeholderOpacity"] = 6400] = "placeholderOpacity";
+    pluginOrder[pluginOrder["caretColor"] = 6450] = "caretColor";
+    pluginOrder[pluginOrder["caretOpacity"] = 6460] = "caretOpacity";
+    pluginOrder[pluginOrder["tabSize"] = 6470] = "tabSize";
+    pluginOrder[pluginOrder["pointerEvents"] = 6500] = "pointerEvents";
+    pluginOrder[pluginOrder["position"] = 6600] = "position";
+    pluginOrder[pluginOrder["inset"] = 6700] = "inset";
+    pluginOrder[pluginOrder["resize"] = 6800] = "resize";
+    pluginOrder[pluginOrder["boxShadow"] = 6900] = "boxShadow";
+    pluginOrder[pluginOrder["boxShadowColor"] = 6950] = "boxShadowColor";
+    pluginOrder[pluginOrder["ringWidth"] = 7000] = "ringWidth";
+    pluginOrder[pluginOrder["ringOffsetColor"] = 7100] = "ringOffsetColor";
+    pluginOrder[pluginOrder["ringOffsetWidth"] = 7200] = "ringOffsetWidth";
+    pluginOrder[pluginOrder["ringColor"] = 7300] = "ringColor";
+    pluginOrder[pluginOrder["ringOpacity"] = 7400] = "ringOpacity";
+    pluginOrder[pluginOrder["fill"] = 7500] = "fill";
+    pluginOrder[pluginOrder["stroke"] = 7600] = "stroke";
+    pluginOrder[pluginOrder["strokeWidth"] = 7700] = "strokeWidth";
+    pluginOrder[pluginOrder["strokeDashArray"] = 7750] = "strokeDashArray";
+    pluginOrder[pluginOrder["strokeDashOffset"] = 7760] = "strokeDashOffset";
+    pluginOrder[pluginOrder["tableLayout"] = 7800] = "tableLayout";
+    pluginOrder[pluginOrder["textAlign"] = 7900] = "textAlign";
+    pluginOrder[pluginOrder["textColor"] = 8000] = "textColor";
+    pluginOrder[pluginOrder["textOpacity"] = 8100] = "textOpacity";
+    pluginOrder[pluginOrder["textOverflow"] = 8200] = "textOverflow";
+    pluginOrder[pluginOrder["textShadow"] = 8250] = "textShadow";
+    pluginOrder[pluginOrder["fontStyle"] = 8300] = "fontStyle";
+    pluginOrder[pluginOrder["textTransform"] = 8400] = "textTransform";
+    pluginOrder[pluginOrder["textDecorationStyle"] = 8450] = "textDecorationStyle";
+    pluginOrder[pluginOrder["textDecorationLength"] = 8455] = "textDecorationLength";
+    pluginOrder[pluginOrder["textDecorationColor"] = 8460] = "textDecorationColor";
+    pluginOrder[pluginOrder["textDecorationOpacity"] = 8470] = "textDecorationOpacity";
+    pluginOrder[pluginOrder["textDecorationOffset"] = 8480] = "textDecorationOffset";
+    pluginOrder[pluginOrder["textDecoration"] = 8500] = "textDecoration";
+    pluginOrder[pluginOrder["textIndent"] = 8550] = "textIndent";
+    pluginOrder[pluginOrder["textStrokeColor"] = 8560] = "textStrokeColor";
+    pluginOrder[pluginOrder["textStrokeWidth"] = 8570] = "textStrokeWidth";
+    pluginOrder[pluginOrder["fontSmoothing"] = 8600] = "fontSmoothing";
+    pluginOrder[pluginOrder["fontVariantNumeric"] = 8700] = "fontVariantNumeric";
+    pluginOrder[pluginOrder["letterSpacing"] = 8800] = "letterSpacing";
+    pluginOrder[pluginOrder["userSelect"] = 8900] = "userSelect";
+    pluginOrder[pluginOrder["verticalAlign"] = 9000] = "verticalAlign";
+    pluginOrder[pluginOrder["visibility"] = 9100] = "visibility";
+    pluginOrder[pluginOrder["backfaceVisibility"] = 9150] = "backfaceVisibility";
+    pluginOrder[pluginOrder["whitespace"] = 9200] = "whitespace";
+    pluginOrder[pluginOrder["wordBreak"] = 9300] = "wordBreak";
+    pluginOrder[pluginOrder["writingMode"] = 9340] = "writingMode";
+    pluginOrder[pluginOrder["hyphens"] = 9350] = "hyphens";
+    pluginOrder[pluginOrder["width"] = 9400] = "width";
+    pluginOrder[pluginOrder["zIndex"] = 9500] = "zIndex";
+    pluginOrder[pluginOrder["isolation"] = 9550] = "isolation";
+    pluginOrder[pluginOrder["gap"] = 9600] = "gap";
+    pluginOrder[pluginOrder["gridAutoFlow"] = 9700] = "gridAutoFlow";
+    pluginOrder[pluginOrder["gridTemplateColumns"] = 9800] = "gridTemplateColumns";
+    pluginOrder[pluginOrder["gridAutoColumns"] = 9900] = "gridAutoColumns";
+    pluginOrder[pluginOrder["gridColumn"] = 10000] = "gridColumn";
+    pluginOrder[pluginOrder["gridColumnStart"] = 10100] = "gridColumnStart";
+    pluginOrder[pluginOrder["gridColumnEnd"] = 10200] = "gridColumnEnd";
+    pluginOrder[pluginOrder["gridTemplateRows"] = 10300] = "gridTemplateRows";
+    pluginOrder[pluginOrder["gridAutoRows"] = 10400] = "gridAutoRows";
+    pluginOrder[pluginOrder["gridRow"] = 10500] = "gridRow";
+    pluginOrder[pluginOrder["gridRowStart"] = 10600] = "gridRowStart";
+    pluginOrder[pluginOrder["gridRowEnd"] = 10700] = "gridRowEnd";
+    pluginOrder[pluginOrder["transform"] = 10800] = "transform";
+    pluginOrder[pluginOrder["transformOrigin"] = 10900] = "transformOrigin";
+    pluginOrder[pluginOrder["scale"] = 11000] = "scale";
+    pluginOrder[pluginOrder["rotate"] = 11100] = "rotate";
+    pluginOrder[pluginOrder["translate"] = 11200] = "translate";
+    pluginOrder[pluginOrder["skew"] = 11300] = "skew";
+    pluginOrder[pluginOrder["perspective"] = 11350] = "perspective";
+    pluginOrder[pluginOrder["perspectiveOrigin"] = 11360] = "perspectiveOrigin";
+    pluginOrder[pluginOrder["transitionProperty"] = 11400] = "transitionProperty";
+    pluginOrder[pluginOrder["transitionTimingFunction"] = 11500] = "transitionTimingFunction";
+    pluginOrder[pluginOrder["transitionDuration"] = 11600] = "transitionDuration";
+    pluginOrder[pluginOrder["transitionDelay"] = 11700] = "transitionDelay";
+    pluginOrder[pluginOrder["keyframes"] = 11800] = "keyframes";
+    pluginOrder[pluginOrder["animation"] = 11900] = "animation";
+    pluginOrder[pluginOrder["imageRendering"] = 11950] = "imageRendering";
+    pluginOrder[pluginOrder["mixBlendMode"] = 12000] = "mixBlendMode";
+    pluginOrder[pluginOrder["backgroundBlendMode"] = 12100] = "backgroundBlendMode";
+    pluginOrder[pluginOrder["filter"] = 12200] = "filter";
+    pluginOrder[pluginOrder["blur"] = 12300] = "blur";
+    pluginOrder[pluginOrder["brightness"] = 12400] = "brightness";
+    pluginOrder[pluginOrder["contrast"] = 12500] = "contrast";
+    pluginOrder[pluginOrder["dropShadow"] = 12600] = "dropShadow";
+    pluginOrder[pluginOrder["grayscale"] = 12700] = "grayscale";
+    pluginOrder[pluginOrder["hueRotate"] = 12800] = "hueRotate";
+    pluginOrder[pluginOrder["invert"] = 12900] = "invert";
+    pluginOrder[pluginOrder["saturate"] = 13000] = "saturate";
+    pluginOrder[pluginOrder["sepia"] = 13100] = "sepia";
+    pluginOrder[pluginOrder["backdropFilter"] = 13200] = "backdropFilter";
+    pluginOrder[pluginOrder["backdropBlur"] = 13300] = "backdropBlur";
+    pluginOrder[pluginOrder["backdropBrightness"] = 13400] = "backdropBrightness";
+    pluginOrder[pluginOrder["backdropContrast"] = 13500] = "backdropContrast";
+    pluginOrder[pluginOrder["backdropGrayscale"] = 13600] = "backdropGrayscale";
+    pluginOrder[pluginOrder["backdropHueRotate"] = 13700] = "backdropHueRotate";
+    pluginOrder[pluginOrder["backdropInvert"] = 13800] = "backdropInvert";
+    pluginOrder[pluginOrder["backdropOpacity"] = 13900] = "backdropOpacity";
+    pluginOrder[pluginOrder["backdropSaturate"] = 14000] = "backdropSaturate";
+    pluginOrder[pluginOrder["backdropSepia"] = 14100] = "backdropSepia";
+})(pluginOrder || (pluginOrder = {}));
+
 var defaultColors = {
@@ -1223,182 +1461,3 @@ transparent: 'transparent',
     },
-    variantOrder: [
-        'hover',
-        'focus',
-        'active',
-        'visited',
-        'link',
-        'target',
-        'focus-visible',
-        'focus-within',
-        'checked',
-        'not-checked',
-        'default',
-        'disabled',
-        'enabled',
-        'indeterminate',
-        'invalid',
-        'valid',
-        'optional',
-        'required',
-        'placeholder-shown',
-        'read-only',
-        'read-write',
-        'not-disabled',
-        'first-of-type',
-        'not-first-of-type',
-        'last-of-type',
-        'not-last-of-type',
-        'first',
-        'last',
-        'not-first',
-        'not-last',
-        'only-child',
-        'not-only-child',
-        'only-of-type',
-        'not-only-of-type',
-        'even',
-        'odd',
-        'even-of-type',
-        'odd-of-type',
-        'root',
-        'empty',
-        'before',
-        'after',
-        'first-letter',
-        'first-line',
-        'selection',
-        'svg',
-        'all',
-        'children',
-        'siblings',
-        'sibling',
-        'ltr',
-        'rtl',
-        'group-hover',
-        'group-focus',
-        'group-active',
-        'group-visited',
-        'motion-safe',
-        'motion-reduce',
-    ],
-    // variants: {
-    //   accessibility: ['responsive', 'focus-within', 'focus'],
-    //   alignContent: ['responsive'],
-    //   alignItems: ['responsive'],
-    //   alignSelf: ['responsive'],
-    //   animation: ['responsive'],
-    //   appearance: ['responsive'],
-    //   backgroundAttachment: ['responsive'],
-    //   backgroundClip: ['responsive'],
-    //   backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   backgroundImage: ['responsive'],
-    //   backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   backgroundPosition: ['responsive'],
-    //   backgroundRepeat: ['responsive'],
-    //   backgroundSize: ['responsive'],
-    //   borderCollapse: ['responsive'],
-    //   borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   borderRadius: ['responsive'],
-    //   borderStyle: ['responsive'],
-    //   borderWidth: ['responsive'],
-    //   boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   boxSizing: ['responsive'],
-    //   clear: ['responsive'],
-    //   container: ['responsive'],
-    //   cursor: ['responsive'],
-    //   display: ['responsive'],
-    //   divideColor: ['responsive', 'dark'],
-    //   divideOpacity: ['responsive'],
-    //   divideStyle: ['responsive'],
-    //   divideWidth: ['responsive'],
-    //   fill: ['responsive'],
-    //   flex: ['responsive'],
-    //   flexDirection: ['responsive'],
-    //   flexGrow: ['responsive'],
-    //   flexShrink: ['responsive'],
-    //   flexWrap: ['responsive'],
-    //   float: ['responsive'],
-    //   fontFamily: ['responsive'],
-    //   fontSize: ['responsive'],
-    //   fontSmoothing: ['responsive'],
-    //   fontStyle: ['responsive'],
-    //   fontVariantNumeric: ['responsive'],
-    //   fontWeight: ['responsive'],
-    //   gap: ['responsive'],
-    //   gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
-    //   gridAutoColumns: ['responsive'],
-    //   gridAutoFlow: ['responsive'],
-    //   gridAutoRows: ['responsive'],
-    //   gridColumn: ['responsive'],
-    //   gridColumnEnd: ['responsive'],
-    //   gridColumnStart: ['responsive'],
-    //   gridRow: ['responsive'],
-    //   gridRowEnd: ['responsive'],
-    //   gridRowStart: ['responsive'],
-    //   gridTemplateColumns: ['responsive'],
-    //   gridTemplateRows: ['responsive'],
-    //   height: ['responsive'],
-    //   inset: ['responsive'],
-    //   justifyContent: ['responsive'],
-    //   justifyItems: ['responsive'],
-    //   justifySelf: ['responsive'],
-    //   letterSpacing: ['responsive'],
-    //   lineHeight: ['responsive'],
-    //   listStylePosition: ['responsive'],
-    //   listStyleType: ['responsive'],
-    //   margin: ['responsive'],
-    //   maxHeight: ['responsive'],
-    //   maxWidth: ['responsive'],
-    //   minHeight: ['responsive'],
-    //   minWidth: ['responsive'],
-    //   objectFit: ['responsive'],
-    //   objectPosition: ['responsive'],
-    //   opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   order: ['responsive'],
-    //   outline: ['responsive', 'focus-within', 'focus'],
-    //   overflow: ['responsive'],
-    //   overscrollBehavior: ['responsive'],
-    //   padding: ['responsive'],
-    //   placeContent: ['responsive'],
-    //   placeItems: ['responsive'],
-    //   placeSelf: ['responsive'],
-    //   placeholderColor: ['responsive', 'dark', 'focus'],
-    //   placeholderOpacity: ['responsive', 'focus'],
-    //   pointerEvents: ['responsive'],
-    //   position: ['responsive'],
-    //   resize: ['responsive'],
-    //   ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
-    //   ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
-    //   ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
-    //   ringOpacity: ['responsive', 'focus-within', 'focus'],
-    //   ringWidth: ['responsive', 'focus-within', 'focus'],
-    //   rotate: ['responsive', 'hover', 'focus'],
-    //   scale: ['responsive', 'hover', 'focus'],
-    //   skew: ['responsive', 'hover', 'focus'],
-    //   space: ['responsive'],
-    //   stroke: ['responsive'],
-    //   strokeWidth: ['responsive'],
-    //   tableLayout: ['responsive'],
-    //   textAlign: ['responsive'],
-    //   textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    //   textOverflow: ['responsive'],
-    //   textTransform: ['responsive'],
-    //   transform: ['responsive'],
-    //   transformOrigin: ['responsive'],
-    //   transitionDelay: ['responsive'],
-    //   transitionDuration: ['responsive'],
-    //   transitionProperty: ['responsive'],
-    //   transitionTimingFunction: ['responsive'],
-    //   translate: ['responsive', 'hover', 'focus'],
-    //   userSelect: ['responsive'],
-    //   verticalAlign: ['responsive'],
-    //   visibility: ['responsive'],
-    //   whitespace: ['responsive'],
-    //   width: ['responsive'],
-    //   wordBreak: ['responsive'],
-    //   zIndex: ['responsive', 'focus-within', 'focus'],
-    // },
+    variantOrder: variantOrder,
     plugins: [],
@@ -1405,0 +1464,0 @@ };

plugin/scroll-snap/index.js

@@ -169,3 +169,3 @@ 'use strict';
         if (important === void 0) { important = false; }
-        this.meta = { type: 'utilities', group: 'plugin', order: 99999 };
+        this.meta = { type: 'utilities', group: 'plugin', order: 0, offset: 0, corePlugin: false };
         this.name = name;
@@ -217,3 +217,5 @@ this.value = value;
     Property.prototype.toStyle = function (selector) {
-        return new Style(selector, this, this.important).updateMeta(this.meta);
+        var style = new Style(selector, this, this.important);
+        style.meta = this.meta;
+        return style;
     };
@@ -240,4 +242,12 @@ Property.prototype.build = function (minify) {
     };
-    Property.prototype.updateMeta = function (meta) {
-        this.meta = meta;
+    Property.prototype.updateMeta = function (type, group, order, offset, corePlugin) {
+        if (offset === void 0) { offset = 0; }
+        if (corePlugin === void 0) { corePlugin = false; }
+        this.meta = {
+            type: type,
+            group: group,
+            order: order,
+            offset: offset,
+            corePlugin: corePlugin,
+        };
         return this;
@@ -283,3 +293,3 @@ };
         if (important === void 0) { important = false; }
-        this.meta = { type: 'components', group: 'plugin', order: 99999 };
+        this.meta = { type: 'components', group: 'plugin', order: 0, offset: 0, corePlugin: false };
         this.selector = selector;
@@ -370,2 +380,9 @@ this.important = important;
     });
+    Object.defineProperty(Style.prototype, "isAtrule", {
+        get: function () {
+            return !(this.atRules === undefined || this.atRules.length === 0);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Style.generate = function (parent, property, root) {
@@ -648,4 +665,12 @@ if (!root)
     };
-    Style.prototype.updateMeta = function (meta) {
-        this.meta = meta;
+    Style.prototype.updateMeta = function (type, group, order, offset, corePlugin) {
+        if (offset === void 0) { offset = 0; }
+        if (corePlugin === void 0) { corePlugin = false; }
+        this.meta = {
+            type: type,
+            group: group,
+            order: order,
+            offset: offset,
+            corePlugin: corePlugin,
+        };
         return this;
@@ -671,3 +696,4 @@ };
         if (prefixer === void 0) { prefixer = true; }
-        var output = [];
+        var styles = [];
+        var webkitStyles = [];
         for (var _i = 0, _a = Object.entries(children); _i < _a.length; _i++) {
@@ -692,7 +718,7 @@ var _b = _a[_i], key = _b[0], value = _b[1];
             }
-            output.push(style);
+            styles.push(style);
             if (prefixer)
-                output.push(webkitStyle);
+                webkitStyles.push(webkitStyle);
         }
-        return output;
+        return __spreadArray(__spreadArray([], styles), webkitStyles);
     };
@@ -709,20 +735,2 @@ return Keyframes;
 
-var variantOrder;
-(function (variantOrder) {
-    variantOrder[variantOrder["first"] = 0] = "first";
-    variantOrder[variantOrder["last"] = 1] = "last";
-    variantOrder[variantOrder["odd"] = 2] = "odd";
-    variantOrder[variantOrder["even"] = 3] = "even";
-    variantOrder[variantOrder["visited"] = 4] = "visited";
-    variantOrder[variantOrder["checked"] = 5] = "checked";
-    variantOrder[variantOrder["group-hover"] = 6] = "group-hover";
-    variantOrder[variantOrder["group-focus"] = 7] = "group-focus";
-    variantOrder[variantOrder["focus-within"] = 8] = "focus-within";
-    variantOrder[variantOrder["hover"] = 9] = "hover";
-    variantOrder[variantOrder["focus"] = 10] = "focus";
-    variantOrder[variantOrder["focus-visible"] = 11] = "focus-visible";
-    variantOrder[variantOrder["active"] = 12] = "active";
-    variantOrder[variantOrder["disabled"] = 13] = "disabled";
-})(variantOrder || (variantOrder = {}));
-
 function expandDirection(value, divide) {
@@ -729,0 +737,0 @@ if (divide === void 0) { divide = false; }

plugin/typography/index.js

@@ -365,2 +365,180 @@ 'use strict';
 
+var layerOrder;
+(function (layerOrder) {
+    layerOrder[layerOrder["base"] = 10] = "base";
+    layerOrder[layerOrder["components"] = 150] = "components";
+    layerOrder[layerOrder["shortcuts"] = 160] = "shortcuts";
+    layerOrder[layerOrder["utilities"] = 20000] = "utilities";
+})(layerOrder || (layerOrder = {}));
+var pluginOrder;
+(function (pluginOrder) {
+    pluginOrder[pluginOrder["container"] = 100] = "container";
+    pluginOrder[pluginOrder["space"] = 200] = "space";
+    pluginOrder[pluginOrder["divideWidth"] = 300] = "divideWidth";
+    pluginOrder[pluginOrder["divideColor"] = 400] = "divideColor";
+    pluginOrder[pluginOrder["divideStyle"] = 500] = "divideStyle";
+    pluginOrder[pluginOrder["divideOpacity"] = 600] = "divideOpacity";
+    pluginOrder[pluginOrder["accessibility"] = 700] = "accessibility";
+    pluginOrder[pluginOrder["appearance"] = 800] = "appearance";
+    pluginOrder[pluginOrder["backgroundAttachment"] = 900] = "backgroundAttachment";
+    pluginOrder[pluginOrder["backgroundClip"] = 1000] = "backgroundClip";
+    pluginOrder[pluginOrder["backgroundColor"] = 1100] = "backgroundColor";
+    pluginOrder[pluginOrder["backgroundImage"] = 1200] = "backgroundImage";
+    pluginOrder[pluginOrder["gradientColorStops"] = 1300] = "gradientColorStops";
+    pluginOrder[pluginOrder["backgroundOpacity"] = 1400] = "backgroundOpacity";
+    pluginOrder[pluginOrder["backgroundPosition"] = 1500] = "backgroundPosition";
+    pluginOrder[pluginOrder["backgroundRepeat"] = 1600] = "backgroundRepeat";
+    pluginOrder[pluginOrder["backgroundSize"] = 1700] = "backgroundSize";
+    pluginOrder[pluginOrder["backgroundOrigin"] = 1750] = "backgroundOrigin";
+    pluginOrder[pluginOrder["borderCollapse"] = 1800] = "borderCollapse";
+    pluginOrder[pluginOrder["borderColor"] = 1900] = "borderColor";
+    pluginOrder[pluginOrder["borderOpacity"] = 2000] = "borderOpacity";
+    pluginOrder[pluginOrder["borderRadius"] = 2100] = "borderRadius";
+    pluginOrder[pluginOrder["borderStyle"] = 2200] = "borderStyle";
+    pluginOrder[pluginOrder["borderWidth"] = 2300] = "borderWidth";
+    pluginOrder[pluginOrder["boxDecorationBreak"] = 2350] = "boxDecorationBreak";
+    pluginOrder[pluginOrder["boxSizing"] = 2400] = "boxSizing";
+    pluginOrder[pluginOrder["cursor"] = 2500] = "cursor";
+    pluginOrder[pluginOrder["captionSide"] = 2550] = "captionSide";
+    pluginOrder[pluginOrder["emptyCells"] = 2560] = "emptyCells";
+    pluginOrder[pluginOrder["display"] = 2600] = "display";
+    pluginOrder[pluginOrder["flexDirection"] = 2700] = "flexDirection";
+    pluginOrder[pluginOrder["flexWrap"] = 2800] = "flexWrap";
+    pluginOrder[pluginOrder["placeItems"] = 2900] = "placeItems";
+    pluginOrder[pluginOrder["placeContent"] = 3000] = "placeContent";
+    pluginOrder[pluginOrder["placeSelf"] = 3100] = "placeSelf";
+    pluginOrder[pluginOrder["alignItems"] = 3200] = "alignItems";
+    pluginOrder[pluginOrder["alignContent"] = 3300] = "alignContent";
+    pluginOrder[pluginOrder["alignSelf"] = 3400] = "alignSelf";
+    pluginOrder[pluginOrder["justifyItems"] = 3500] = "justifyItems";
+    pluginOrder[pluginOrder["justifyContent"] = 3600] = "justifyContent";
+    pluginOrder[pluginOrder["justifySelf"] = 3700] = "justifySelf";
+    pluginOrder[pluginOrder["flex"] = 3800] = "flex";
+    pluginOrder[pluginOrder["flexGrow"] = 3900] = "flexGrow";
+    pluginOrder[pluginOrder["flexShrink"] = 4000] = "flexShrink";
+    pluginOrder[pluginOrder["order"] = 4100] = "order";
+    pluginOrder[pluginOrder["float"] = 4200] = "float";
+    pluginOrder[pluginOrder["clear"] = 4300] = "clear";
+    pluginOrder[pluginOrder["fontFamily"] = 4400] = "fontFamily";
+    pluginOrder[pluginOrder["fontWeight"] = 4500] = "fontWeight";
+    pluginOrder[pluginOrder["height"] = 4600] = "height";
+    pluginOrder[pluginOrder["fontSize"] = 4700] = "fontSize";
+    pluginOrder[pluginOrder["lineHeight"] = 4800] = "lineHeight";
+    pluginOrder[pluginOrder["listStylePosition"] = 4900] = "listStylePosition";
+    pluginOrder[pluginOrder["listStyleType"] = 5000] = "listStyleType";
+    pluginOrder[pluginOrder["margin"] = 5100] = "margin";
+    pluginOrder[pluginOrder["maxHeight"] = 5200] = "maxHeight";
+    pluginOrder[pluginOrder["maxWidth"] = 5300] = "maxWidth";
+    pluginOrder[pluginOrder["minHeight"] = 5400] = "minHeight";
+    pluginOrder[pluginOrder["minWidth"] = 5500] = "minWidth";
+    pluginOrder[pluginOrder["objectFit"] = 5600] = "objectFit";
+    pluginOrder[pluginOrder["objectPosition"] = 5700] = "objectPosition";
+    pluginOrder[pluginOrder["opacity"] = 5800] = "opacity";
+    pluginOrder[pluginOrder["outline"] = 5900] = "outline";
+    pluginOrder[pluginOrder["overflow"] = 6000] = "overflow";
+    pluginOrder[pluginOrder["overscrollBehavior"] = 6100] = "overscrollBehavior";
+    pluginOrder[pluginOrder["padding"] = 6200] = "padding";
+    pluginOrder[pluginOrder["placeholderColor"] = 6300] = "placeholderColor";
+    pluginOrder[pluginOrder["placeholderOpacity"] = 6400] = "placeholderOpacity";
+    pluginOrder[pluginOrder["caretColor"] = 6450] = "caretColor";
+    pluginOrder[pluginOrder["caretOpacity"] = 6460] = "caretOpacity";
+    pluginOrder[pluginOrder["tabSize"] = 6470] = "tabSize";
+    pluginOrder[pluginOrder["pointerEvents"] = 6500] = "pointerEvents";
+    pluginOrder[pluginOrder["position"] = 6600] = "position";
+    pluginOrder[pluginOrder["inset"] = 6700] = "inset";
+    pluginOrder[pluginOrder["resize"] = 6800] = "resize";
+    pluginOrder[pluginOrder["boxShadow"] = 6900] = "boxShadow";
+    pluginOrder[pluginOrder["boxShadowColor"] = 6950] = "boxShadowColor";
+    pluginOrder[pluginOrder["ringWidth"] = 7000] = "ringWidth";
+    pluginOrder[pluginOrder["ringOffsetColor"] = 7100] = "ringOffsetColor";
+    pluginOrder[pluginOrder["ringOffsetWidth"] = 7200] = "ringOffsetWidth";
+    pluginOrder[pluginOrder["ringColor"] = 7300] = "ringColor";
+    pluginOrder[pluginOrder["ringOpacity"] = 7400] = "ringOpacity";
+    pluginOrder[pluginOrder["fill"] = 7500] = "fill";
+    pluginOrder[pluginOrder["stroke"] = 7600] = "stroke";
+    pluginOrder[pluginOrder["strokeWidth"] = 7700] = "strokeWidth";
+    pluginOrder[pluginOrder["strokeDashArray"] = 7750] = "strokeDashArray";
+    pluginOrder[pluginOrder["strokeDashOffset"] = 7760] = "strokeDashOffset";
+    pluginOrder[pluginOrder["tableLayout"] = 7800] = "tableLayout";
+    pluginOrder[pluginOrder["textAlign"] = 7900] = "textAlign";
+    pluginOrder[pluginOrder["textColor"] = 8000] = "textColor";
+    pluginOrder[pluginOrder["textOpacity"] = 8100] = "textOpacity";
+    pluginOrder[pluginOrder["textOverflow"] = 8200] = "textOverflow";
+    pluginOrder[pluginOrder["textShadow"] = 8250] = "textShadow";
+    pluginOrder[pluginOrder["fontStyle"] = 8300] = "fontStyle";
+    pluginOrder[pluginOrder["textTransform"] = 8400] = "textTransform";
+    pluginOrder[pluginOrder["textDecorationStyle"] = 8450] = "textDecorationStyle";
+    pluginOrder[pluginOrder["textDecorationLength"] = 8455] = "textDecorationLength";
+    pluginOrder[pluginOrder["textDecorationColor"] = 8460] = "textDecorationColor";
+    pluginOrder[pluginOrder["textDecorationOpacity"] = 8470] = "textDecorationOpacity";
+    pluginOrder[pluginOrder["textDecorationOffset"] = 8480] = "textDecorationOffset";
+    pluginOrder[pluginOrder["textDecoration"] = 8500] = "textDecoration";
+    pluginOrder[pluginOrder["textIndent"] = 8550] = "textIndent";
+    pluginOrder[pluginOrder["textStrokeColor"] = 8560] = "textStrokeColor";
+    pluginOrder[pluginOrder["textStrokeWidth"] = 8570] = "textStrokeWidth";
+    pluginOrder[pluginOrder["fontSmoothing"] = 8600] = "fontSmoothing";
+    pluginOrder[pluginOrder["fontVariantNumeric"] = 8700] = "fontVariantNumeric";
+    pluginOrder[pluginOrder["letterSpacing"] = 8800] = "letterSpacing";
+    pluginOrder[pluginOrder["userSelect"] = 8900] = "userSelect";
+    pluginOrder[pluginOrder["verticalAlign"] = 9000] = "verticalAlign";
+    pluginOrder[pluginOrder["visibility"] = 9100] = "visibility";
+    pluginOrder[pluginOrder["backfaceVisibility"] = 9150] = "backfaceVisibility";
+    pluginOrder[pluginOrder["whitespace"] = 9200] = "whitespace";
+    pluginOrder[pluginOrder["wordBreak"] = 9300] = "wordBreak";
+    pluginOrder[pluginOrder["writingMode"] = 9340] = "writingMode";
+    pluginOrder[pluginOrder["hyphens"] = 9350] = "hyphens";
+    pluginOrder[pluginOrder["width"] = 9400] = "width";
+    pluginOrder[pluginOrder["zIndex"] = 9500] = "zIndex";
+    pluginOrder[pluginOrder["isolation"] = 9550] = "isolation";
+    pluginOrder[pluginOrder["gap"] = 9600] = "gap";
+    pluginOrder[pluginOrder["gridAutoFlow"] = 9700] = "gridAutoFlow";
+    pluginOrder[pluginOrder["gridTemplateColumns"] = 9800] = "gridTemplateColumns";
+    pluginOrder[pluginOrder["gridAutoColumns"] = 9900] = "gridAutoColumns";
+    pluginOrder[pluginOrder["gridColumn"] = 10000] = "gridColumn";
+    pluginOrder[pluginOrder["gridColumnStart"] = 10100] = "gridColumnStart";
+    pluginOrder[pluginOrder["gridColumnEnd"] = 10200] = "gridColumnEnd";
+    pluginOrder[pluginOrder["gridTemplateRows"] = 10300] = "gridTemplateRows";
+    pluginOrder[pluginOrder["gridAutoRows"] = 10400] = "gridAutoRows";
+    pluginOrder[pluginOrder["gridRow"] = 10500] = "gridRow";
+    pluginOrder[pluginOrder["gridRowStart"] = 10600] = "gridRowStart";
+    pluginOrder[pluginOrder["gridRowEnd"] = 10700] = "gridRowEnd";
+    pluginOrder[pluginOrder["transform"] = 10800] = "transform";
+    pluginOrder[pluginOrder["transformOrigin"] = 10900] = "transformOrigin";
+    pluginOrder[pluginOrder["scale"] = 11000] = "scale";
+    pluginOrder[pluginOrder["rotate"] = 11100] = "rotate";
+    pluginOrder[pluginOrder["translate"] = 11200] = "translate";
+    pluginOrder[pluginOrder["skew"] = 11300] = "skew";
+    pluginOrder[pluginOrder["perspective"] = 11350] = "perspective";
+    pluginOrder[pluginOrder["perspectiveOrigin"] = 11360] = "perspectiveOrigin";
+    pluginOrder[pluginOrder["transitionProperty"] = 11400] = "transitionProperty";
+    pluginOrder[pluginOrder["transitionTimingFunction"] = 11500] = "transitionTimingFunction";
+    pluginOrder[pluginOrder["transitionDuration"] = 11600] = "transitionDuration";
+    pluginOrder[pluginOrder["transitionDelay"] = 11700] = "transitionDelay";
+    pluginOrder[pluginOrder["keyframes"] = 11800] = "keyframes";
+    pluginOrder[pluginOrder["animation"] = 11900] = "animation";
+    pluginOrder[pluginOrder["imageRendering"] = 11950] = "imageRendering";
+    pluginOrder[pluginOrder["mixBlendMode"] = 12000] = "mixBlendMode";
+    pluginOrder[pluginOrder["backgroundBlendMode"] = 12100] = "backgroundBlendMode";
+    pluginOrder[pluginOrder["filter"] = 12200] = "filter";
+    pluginOrder[pluginOrder["blur"] = 12300] = "blur";
+    pluginOrder[pluginOrder["brightness"] = 12400] = "brightness";
+    pluginOrder[pluginOrder["contrast"] = 12500] = "contrast";
+    pluginOrder[pluginOrder["dropShadow"] = 12600] = "dropShadow";
+    pluginOrder[pluginOrder["grayscale"] = 12700] = "grayscale";
+    pluginOrder[pluginOrder["hueRotate"] = 12800] = "hueRotate";
+    pluginOrder[pluginOrder["invert"] = 12900] = "invert";
+    pluginOrder[pluginOrder["saturate"] = 13000] = "saturate";
+    pluginOrder[pluginOrder["sepia"] = 13100] = "sepia";
+    pluginOrder[pluginOrder["backdropFilter"] = 13200] = "backdropFilter";
+    pluginOrder[pluginOrder["backdropBlur"] = 13300] = "backdropBlur";
+    pluginOrder[pluginOrder["backdropBrightness"] = 13400] = "backdropBrightness";
+    pluginOrder[pluginOrder["backdropContrast"] = 13500] = "backdropContrast";
+    pluginOrder[pluginOrder["backdropGrayscale"] = 13600] = "backdropGrayscale";
+    pluginOrder[pluginOrder["backdropHueRotate"] = 13700] = "backdropHueRotate";
+    pluginOrder[pluginOrder["backdropInvert"] = 13800] = "backdropInvert";
+    pluginOrder[pluginOrder["backdropOpacity"] = 13900] = "backdropOpacity";
+    pluginOrder[pluginOrder["backdropSaturate"] = 14000] = "backdropSaturate";
+    pluginOrder[pluginOrder["backdropSepia"] = 14100] = "backdropSepia";
+})(pluginOrder || (pluginOrder = {}));
+
 var round = function (num) {
@@ -367,0 +545,0 @@ return num

types/config/order.d.ts

@@ -1,25 +0,176 @@
-export declare enum variantOrder {
-    'first' = 0,
-    'last' = 1,
-    'odd' = 2,
-    'even' = 3,
-    'visited' = 4,
-    'checked' = 5,
-    'group-hover' = 6,
-    'group-focus' = 7,
-    'focus-within' = 8,
-    'hover' = 9,
-    'focus' = 10,
-    'focus-visible' = 11,
-    'active' = 12,
-    'disabled' = 13
+export declare const variantOrder: string[];
+export declare enum layerOrder {
+    base = 10,
+    components = 150,
+    shortcuts = 160,
+    utilities = 20000
 }
-export declare const layerOrder: {
-    [key: string]: number;
-};
-export declare const pluginOrder: {
-    [key: string]: number;
-};
-export declare const keyOrder: {
-    [key: string]: number;
-};
+export declare enum pluginOrder {
+    'container' = 100,
+    'space' = 200,
+    'divideWidth' = 300,
+    'divideColor' = 400,
+    'divideStyle' = 500,
+    'divideOpacity' = 600,
+    'accessibility' = 700,
+    'appearance' = 800,
+    'backgroundAttachment' = 900,
+    'backgroundClip' = 1000,
+    'backgroundColor' = 1100,
+    'backgroundImage' = 1200,
+    'gradientColorStops' = 1300,
+    'backgroundOpacity' = 1400,
+    'backgroundPosition' = 1500,
+    'backgroundRepeat' = 1600,
+    'backgroundSize' = 1700,
+    'backgroundOrigin' = 1750,
+    'borderCollapse' = 1800,
+    'borderColor' = 1900,
+    'borderOpacity' = 2000,
+    'borderRadius' = 2100,
+    'borderStyle' = 2200,
+    'borderWidth' = 2300,
+    'boxDecorationBreak' = 2350,
+    'boxSizing' = 2400,
+    'cursor' = 2500,
+    'captionSide' = 2550,
+    'emptyCells' = 2560,
+    'display' = 2600,
+    'flexDirection' = 2700,
+    'flexWrap' = 2800,
+    'placeItems' = 2900,
+    'placeContent' = 3000,
+    'placeSelf' = 3100,
+    'alignItems' = 3200,
+    'alignContent' = 3300,
+    'alignSelf' = 3400,
+    'justifyItems' = 3500,
+    'justifyContent' = 3600,
+    'justifySelf' = 3700,
+    'flex' = 3800,
+    'flexGrow' = 3900,
+    'flexShrink' = 4000,
+    'order' = 4100,
+    'float' = 4200,
+    'clear' = 4300,
+    'fontFamily' = 4400,
+    'fontWeight' = 4500,
+    'height' = 4600,
+    'fontSize' = 4700,
+    'lineHeight' = 4800,
+    'listStylePosition' = 4900,
+    'listStyleType' = 5000,
+    'margin' = 5100,
+    'maxHeight' = 5200,
+    'maxWidth' = 5300,
+    'minHeight' = 5400,
+    'minWidth' = 5500,
+    'objectFit' = 5600,
+    'objectPosition' = 5700,
+    'opacity' = 5800,
+    'outline' = 5900,
+    'overflow' = 6000,
+    'overscrollBehavior' = 6100,
+    'padding' = 6200,
+    'placeholderColor' = 6300,
+    'placeholderOpacity' = 6400,
+    'caretColor' = 6450,
+    'caretOpacity' = 6460,
+    'tabSize' = 6470,
+    'pointerEvents' = 6500,
+    'position' = 6600,
+    'inset' = 6700,
+    'resize' = 6800,
+    'boxShadow' = 6900,
+    'boxShadowColor' = 6950,
+    'ringWidth' = 7000,
+    'ringOffsetColor' = 7100,
+    'ringOffsetWidth' = 7200,
+    'ringColor' = 7300,
+    'ringOpacity' = 7400,
+    'fill' = 7500,
+    'stroke' = 7600,
+    'strokeWidth' = 7700,
+    'strokeDashArray' = 7750,
+    'strokeDashOffset' = 7760,
+    'tableLayout' = 7800,
+    'textAlign' = 7900,
+    'textColor' = 8000,
+    'textOpacity' = 8100,
+    'textOverflow' = 8200,
+    'textShadow' = 8250,
+    'fontStyle' = 8300,
+    'textTransform' = 8400,
+    'textDecorationStyle' = 8450,
+    'textDecorationLength' = 8455,
+    'textDecorationColor' = 8460,
+    'textDecorationOpacity' = 8470,
+    'textDecorationOffset' = 8480,
+    'textDecoration' = 8500,
+    'textIndent' = 8550,
+    'textStrokeColor' = 8560,
+    'textStrokeWidth' = 8570,
+    'fontSmoothing' = 8600,
+    'fontVariantNumeric' = 8700,
+    'letterSpacing' = 8800,
+    'userSelect' = 8900,
+    'verticalAlign' = 9000,
+    'visibility' = 9100,
+    'backfaceVisibility' = 9150,
+    'whitespace' = 9200,
+    'wordBreak' = 9300,
+    'writingMode' = 9340,
+    'hyphens' = 9350,
+    'width' = 9400,
+    'zIndex' = 9500,
+    'isolation' = 9550,
+    'gap' = 9600,
+    'gridAutoFlow' = 9700,
+    'gridTemplateColumns' = 9800,
+    'gridAutoColumns' = 9900,
+    'gridColumn' = 10000,
+    'gridColumnStart' = 10100,
+    'gridColumnEnd' = 10200,
+    'gridTemplateRows' = 10300,
+    'gridAutoRows' = 10400,
+    'gridRow' = 10500,
+    'gridRowStart' = 10600,
+    'gridRowEnd' = 10700,
+    'transform' = 10800,
+    'transformOrigin' = 10900,
+    'scale' = 11000,
+    'rotate' = 11100,
+    'translate' = 11200,
+    'skew' = 11300,
+    'perspective' = 11350,
+    'perspectiveOrigin' = 11360,
+    'transitionProperty' = 11400,
+    'transitionTimingFunction' = 11500,
+    'transitionDuration' = 11600,
+    'transitionDelay' = 11700,
+    'keyframes' = 11800,
+    'animation' = 11900,
+    'imageRendering' = 11950,
+    'mixBlendMode' = 12000,
+    'backgroundBlendMode' = 12100,
+    'filter' = 12200,
+    'blur' = 12300,
+    'brightness' = 12400,
+    'contrast' = 12500,
+    'dropShadow' = 12600,
+    'grayscale' = 12700,
+    'hueRotate' = 12800,
+    'invert' = 12900,
+    'saturate' = 13000,
+    'sepia' = 13100,
+    'backdropFilter' = 13200,
+    'backdropBlur' = 13300,
+    'backdropBrightness' = 13400,
+    'backdropContrast' = 13500,
+    'backdropGrayscale' = 13600,
+    'backdropHueRotate' = 13700,
+    'backdropInvert' = 13800,
+    'backdropOpacity' = 13900,
+    'backdropSaturate' = 14000,
+    'backdropSepia' = 14100
+}

types/lib/index.d.ts

@@ -50,2 +50,3 @@ import { Style, StyleSheet } from '../utils/style';
     private _resolveConfig;
+    private _reduceFunction;
     private _resolvePresets;
@@ -52,0 +53,0 @@ private _resolveFunction;

types/utils/algorithm/compileStyleSheet.d.ts

 import { Style } from '../style/base';
-export declare function combineObject(a: {
-    [key: string]: unknown;
-}, b: {
-    [key: string]: unknown;
-}): {
-    [key: string]: unknown;
-};
-export declare function deepList<T>(list: string[], value?: T): {
-    [key: string]: unknown;
-};
-export declare function handleNest(item: unknown): unknown[];
-export declare function buildMap(obj: unknown, minify?: boolean, prefixer?: boolean): string;
-export declare function combineSelector(styleList: Style[]): Style[];
-export declare function buildAtRule(styleList: Style[], minify?: boolean, prefixer?: boolean, reverse?: boolean): string;
-export default function compileStyleSheet(styleList: Style[], minify?: boolean, prefixer?: boolean): string;
+export default function (styleList: Style[], minify?: boolean, prefixer?: boolean): string;

types/utils/algorithm/index.d.ts

@@ -1,2 +0,2 @@
-export { default as sortSelector } from './sortSelector';
+export { default as sortMeta } from './sortMeta';
 export { default as sortMediaQuery } from './sortMediaQuery';
@@ -3,0 +3,0 @@ export { default as compileStyleSheet } from './compileStyleSheet';

types/utils/style/base.d.ts

 export declare type LayerName = 'base' | 'utilities' | 'components';
 declare type Meta = {
     type: LayerName;
-    corePlugin?: boolean;
     group: string;
     order: number;
+    offset: number;
+    corePlugin: boolean;
+    variants?: string[];
 };
@@ -23,3 +25,3 @@ declare type NestObject = {
     build(minify?: boolean): string;
-    updateMeta(meta: Meta): Property;
+    updateMeta(type: LayerName, group: string, order: number, offset?: number, corePlugin?: boolean): Property;
 }
@@ -57,2 +59,3 @@ export declare class InlineAtRule extends Property {
     get simple(): boolean;
+    get isAtrule(): boolean;
     static generate(parent?: string, property?: NestObject, root?: Style): Style[];
@@ -75,3 +78,3 @@ atRule(atrule?: string, append?: boolean): this;
     build(minify?: boolean, prefixer?: boolean): string;
-    updateMeta(meta: Meta): Style;
+    updateMeta(type: LayerName, group: string, order: number, offset?: number, corePlugin?: boolean): Style;
 }
@@ -78,0 +81,0 @@ export declare class GlobalStyle extends Style {

types/utils/style/sheet.d.ts

@@ -0,3 +1,3 @@
+import { Layer } from '../../interfaces';
 import type { Style } from './base';
-import { Layer } from '../../interfaces';
 export declare class StyleSheet {
@@ -17,4 +17,4 @@ children: Style[];
     clone(): StyleSheet;
-    sort(meta?: boolean): this;
+    sort(): this;
     build(minify?: boolean): string;
 }

utils/style/index.js

@@ -36,13 +36,2 @@ 'use strict';
 
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
 function __spreadArray(to, from) {
@@ -84,5 +73,2 @@ for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
 }
-function isSpace(str) {
-    return /^\s*$/.test(str);
-}
 function camelToDash(str) {
@@ -155,3 +141,3 @@ // Use exact the same regex as Post CSS
         if (important === void 0) { important = false; }
-        this.meta = { type: 'utilities', group: 'plugin', order: 99999 };
+        this.meta = { type: 'utilities', group: 'plugin', order: 0, offset: 0, corePlugin: false };
         this.name = name;
@@ -203,3 +189,5 @@ this.value = value;
     Property.prototype.toStyle = function (selector) {
-        return new Style(selector, this, this.important).updateMeta(this.meta);
+        var style = new Style(selector, this, this.important);
+        style.meta = this.meta;
+        return style;
     };
@@ -226,4 +214,12 @@ Property.prototype.build = function (minify) {
     };
-    Property.prototype.updateMeta = function (meta) {
-        this.meta = meta;
+    Property.prototype.updateMeta = function (type, group, order, offset, corePlugin) {
+        if (offset === void 0) { offset = 0; }
+        if (corePlugin === void 0) { corePlugin = false; }
+        this.meta = {
+            type: type,
+            group: group,
+            order: order,
+            offset: offset,
+            corePlugin: corePlugin,
+        };
         return this;
@@ -269,3 +265,3 @@ };
         if (important === void 0) { important = false; }
-        this.meta = { type: 'components', group: 'plugin', order: 99999 };
+        this.meta = { type: 'components', group: 'plugin', order: 0, offset: 0, corePlugin: false };
         this.selector = selector;
@@ -356,2 +352,9 @@ this.important = important;
     });
+    Object.defineProperty(Style.prototype, "isAtrule", {
+        get: function () {
+            return !(this.atRules === undefined || this.atRules.length === 0);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Style.generate = function (parent, property, root) {
@@ -634,4 +637,12 @@ if (!root)
     };
-    Style.prototype.updateMeta = function (meta) {
-        this.meta = meta;
+    Style.prototype.updateMeta = function (type, group, order, offset, corePlugin) {
+        if (offset === void 0) { offset = 0; }
+        if (corePlugin === void 0) { corePlugin = false; }
+        this.meta = {
+            type: type,
+            group: group,
+            order: order,
+            offset: offset,
+            corePlugin: corePlugin,
+        };
         return this;
@@ -657,3 +668,4 @@ };
         if (prefixer === void 0) { prefixer = true; }
-        var output = [];
+        var styles = [];
+        var webkitStyles = [];
         for (var _i = 0, _a = Object.entries(children); _i < _a.length; _i++) {
@@ -678,7 +690,7 @@ var _b = _a[_i], key = _b[0], value = _b[1];
             }
-            output.push(style);
+            styles.push(style);
             if (prefixer)
-                output.push(webkitStyle);
+                webkitStyles.push(webkitStyle);
         }
-        return output;
+        return __spreadArray(__spreadArray([], styles), webkitStyles);
     };
@@ -695,112 +707,2 @@ return Keyframes;
 
-var variantOrder;
-(function (variantOrder) {
-    variantOrder[variantOrder["first"] = 0] = "first";
-    variantOrder[variantOrder["last"] = 1] = "last";
-    variantOrder[variantOrder["odd"] = 2] = "odd";
-    variantOrder[variantOrder["even"] = 3] = "even";
-    variantOrder[variantOrder["visited"] = 4] = "visited";
-    variantOrder[variantOrder["checked"] = 5] = "checked";
-    variantOrder[variantOrder["group-hover"] = 6] = "group-hover";
-    variantOrder[variantOrder["group-focus"] = 7] = "group-focus";
-    variantOrder[variantOrder["focus-within"] = 8] = "focus-within";
-    variantOrder[variantOrder["hover"] = 9] = "hover";
-    variantOrder[variantOrder["focus"] = 10] = "focus";
-    variantOrder[variantOrder["focus-visible"] = 11] = "focus-visible";
-    variantOrder[variantOrder["active"] = 12] = "active";
-    variantOrder[variantOrder["disabled"] = 13] = "disabled";
-})(variantOrder || (variantOrder = {}));
-var keyOrder = {
-    container: 201,
-    space: 202,
-    divide: 203,
-    bg: 204,
-    from: 205,
-    via: 206,
-    to: 207,
-    border: 208,
-    rounded: 209,
-    cursor: 210,
-    flex: 211,
-    order: 212,
-    font: 213,
-    h: 214,
-    list: 215,
-    m: 216,
-    my: 217,
-    mx: 218,
-    mt: 219,
-    mr: 220,
-    mb: 221,
-    ml: 222,
-    min: 223,
-    max: 224,
-    object: 225,
-    opacity: 226,
-    outline: 227,
-    p: 228,
-    py: 229,
-    px: 230,
-    pt: 231,
-    pr: 232,
-    pb: 233,
-    pl: 234,
-    placeholder: 235,
-    inset: 236,
-    top: 237,
-    right: 238,
-    bottom: 239,
-    left: 240,
-    shadow: 241,
-    ring: 242,
-    fill: 243,
-    stroke: 244,
-    text: 245,
-    leading: 246,
-    tracking: 247,
-    w: 248,
-    z: 249,
-    gap: 250,
-    auto: 251,
-    grid: 252,
-    col: 253,
-    row: 254,
-    transform: 255,
-    origin: 256,
-    scale: 257,
-    rotate: 258,
-    translate: 259,
-    skew: 260,
-    transition: 261,
-    ease: 262,
-    duration: 263,
-    delay: 264,
-    animate: 265,
-};
-
-function getWeights(a) {
-    var first = a.charAt(0);
-    var second = a.charAt(1);
-    if (first === ':' && second === ':')
-        return 59; // ::moz ...
-    if (first === '#')
-        return 500; // #id ...
-    if (first !== '.')
-        return first.charCodeAt(0); // html, body ...
-    var matches = a.match(/\w+/);
-    var key = matches ? matches[0] : undefined;
-    if (key && keyOrder[key])
-        return keyOrder[key];
-    return 499;
-}
-function sortMeta(a, b) {
-    return a.meta.order - b.meta.order;
-}
-function sortSelector(a, b) {
-    if (a.selector && b.selector) {
-        return getWeights(a.selector) - getWeights(b.selector);
-    }
-    return 0;
-}
-
 var minMaxWidth = /(!?\(\s*min(-device-)?-width).+\(\s*max(-device)?-width/i;
@@ -932,155 +834,94 @@ var minWidth = /\(\s*min(-device)?-width/i;
 
-function combineObject(a, b) {
-    var output = __assign({}, a);
-    for (var _i = 0, _a = Object.entries(b); _i < _a.length; _i++) {
-        var _b = _a[_i], key_of_b = _b[0], value_of_b = _b[1];
-        if (key_of_b in a) {
-            var value_of_a = a[key_of_b];
-            if (value_of_a !== value_of_b) {
-                if (value_of_b !== null &&
-                    value_of_b.constructor !== Object) {
-                    output[key_of_b] = [value_of_a, value_of_b];
-                }
-                else if (value_of_a !== null &&
-                    value_of_a.constructor === Object) {
-                    output[key_of_b] = combineObject(value_of_a, value_of_b);
-                }
-                else {
-                    output[key_of_b] = [
-                        value_of_a,
-                        combineObject(value_of_a, value_of_b),
-                    ];
-                }
-            }
-        }
-        else {
-            output[key_of_b] = value_of_b;
-        }
-    }
-    return output;
+function getWeights(a) {
+    var first = a.charAt(0);
+    var second = a.charAt(1);
+    if (first === ':' && second === ':')
+        return 59; // ::moz ...
+    if (first === '#')
+        return 500; // #id ...
+    if (first !== '.')
+        return first.charCodeAt(0); // html, body ...
+    return 499;
 }
-function deepList(list, value) {
-    var key = list.pop();
-    var current = value ? value : {};
-    if (!key)
-        return current;
-    var dict = {};
-    dict[key] = current;
-    return deepList(list, dict);
-}
-function handleNest(item) {
-    var output = [];
-    if (Array.isArray(item)) {
-        item.forEach(function (i) {
-            output = __spreadArray(__spreadArray([], output), handleNest(i));
-        });
+function sortMeta(a, b) {
+    var _a, _b, _c, _d;
+    if (a.meta.type === 'base' && b.meta.type === 'base') {
+        return getWeights((_a = a.selector) !== null && _a !== void 0 ? _a : '') - getWeights((_b = b.selector) !== null && _b !== void 0 ? _b : '');
     }
-    else {
-        if (item.build)
-            output.push(item.build());
-    }
-    return output;
+    return sortMediaQuery(((_c = a.meta.variants) === null || _c === void 0 ? void 0 : _c[0]) || '', ((_d = b.meta.variants) === null || _d === void 0 ? void 0 : _d[0]) || '') || (a.meta.order - b.meta.order) || (a.meta.offset - b.meta.offset) || +b.meta.corePlugin - +a.meta.corePlugin;
 }
-function buildMap(obj, minify, prefixer) {
+
+function _buildAtrule(atrule, children, minify, prefixer) {
     if (minify === void 0) { minify = false; }
     if (prefixer === void 0) { prefixer = true; }
+    return "" + atrule + (minify ? '' : ' ') + wrapit(_buildStyleList(children, minify, prefixer), undefined, undefined, undefined, minify);
+}
+function _buildStyleList(styleList, minify, prefixer) {
+    if (minify === void 0) { minify = false; }
+    if (prefixer === void 0) { prefixer = true; }
+    var currentAtrule;
+    var currentStyle;
+    var styleStack = [];
     var output = [];
-    if (Array.isArray(obj)) {
-        obj.forEach(function (item) {
-            if (item.constructor === Object) {
-                output.push(buildMap(item));
+    var _loop_1 = function (style) {
+        if (style.isAtrule) {
+            if (currentStyle) {
+                output.push(currentStyle.clean().build(minify, prefixer));
+                currentStyle = undefined;
             }
-            else if (Array.isArray(item)) {
-                output = __spreadArray(__spreadArray([], output), handleNest(item));
+            var newAtrule = style.atRules.pop();
+            if (currentAtrule) {
+                if (currentAtrule === newAtrule && newAtrule !== '@font-face') { // @font-face shouldn't been combined
+                    styleStack.push(style);
+                }
+                else {
+                    output.push(_buildAtrule(currentAtrule, styleStack, minify, prefixer));
+                    currentAtrule = newAtrule;
+                    styleStack = [style];
+                }
             }
             else {
-                if (item.build)
-                    output.push(item.build(minify));
+                currentAtrule = newAtrule;
+                styleStack = [style];
             }
-        });
-    }
-    else if (obj && typeof obj === 'object') {
-        var _loop_1 = function (key, value) {
-            var _gstyle = function (v) {
-                return (minify ? key.replace(/\n/g, '') : key + ' ') +
-                    wrapit(v, undefined, undefined, undefined, minify);
-            };
-            if (value instanceof Style) {
-                output.push(_gstyle(value.build(minify, prefixer)));
+        }
+        else {
+            if (currentAtrule) {
+                output.push(_buildAtrule(currentAtrule, styleStack, minify, prefixer));
+                currentAtrule = undefined;
+                styleStack = [];
             }
-            else if (value && typeof value === 'object') {
-                output.push(_gstyle(buildMap(value, minify, prefixer)));
+            if (currentStyle) {
+                if (style.rule === currentStyle.rule) {
+                    if (style.important)
+                        style.property.forEach(function (p) { return p.important = true; });
+                    if (style.wrapProperties)
+                        style.property.forEach(function (p) { var _a; return (_a = style.wrapProperties) === null || _a === void 0 ? void 0 : _a.forEach(function (wrap) { return p.name = Array.isArray(p.name) ? p.name.map(function (i) { return wrap(i); }) : wrap(p.name); }); });
+                    currentStyle.add(style.property);
+                }
+                else {
+                    output.push(currentStyle.clean().build(minify, prefixer));
+                    currentStyle = style;
+                }
             }
-        };
-        for (var _i = 0, _a = Object.entries(obj); _i < _a.length; _i++) {
-            var _b = _a[_i], key = _b[0], value = _b[1];
-            _loop_1(key, value);
+            else {
+                currentStyle = style;
+            }
         }
+    };
+    for (var _i = 0, styleList_1 = styleList; _i < styleList_1.length; _i++) {
+        var style = styleList_1[_i];
+        _loop_1(style);
     }
+    if (currentAtrule)
+        output.push(_buildAtrule(currentAtrule, styleStack, minify, prefixer));
+    if (currentStyle)
+        output.push(currentStyle.clean().build(minify, prefixer));
     return output.join(minify ? '' : '\n');
 }
-function combineSelector(styleList) {
-    var styleMap = {};
-    var passed = [];
-    styleList.forEach(function (style) {
-        var rule = style.rule;
-        if (rule) {
-            var hashValue = hash(rule);
-            if (hashValue in styleMap) {
-                styleMap[hashValue] = styleMap[hashValue].extend(style, true);
-            }
-            else {
-                styleMap[hashValue] = style;
-            }
-        }
-        else {
-            passed.push(style);
-        }
-    });
-    return __spreadArray(__spreadArray([], passed), Object.values(styleMap).map(function (style) { return style.clean(); }));
-}
-function buildAtRule(styleList, minify, prefixer, reverse) {
+function compileStyleSheet (styleList, minify, prefixer) {
     if (minify === void 0) { minify = false; }
     if (prefixer === void 0) { prefixer = true; }
-    if (reverse === void 0) { reverse = false; }
-    var ruleMap = styleList
-        .map(function (i) {
-        var _a, _b;
-        var list = __spreadArray(__spreadArray([], reverse ? ((_a = i.atRules) !== null && _a !== void 0 ? _a : []).sort(sortMediaQuery) : ((_b = i.atRules) !== null && _b !== void 0 ? _b : []).sort(sortMediaQuery).reverse()), [
-            i.rule,
-        ]);
-        var style = new Style(undefined, i.property, i.important).updateMeta(i.meta);
-        i.wrapProperties && i.wrapProperties.forEach(function (wrap) { return style.wrapProperty(wrap); });
-        return deepList(list, style);
-    })
-        .sort(function (a, b) {
-        var akey = Object.keys(a)[0];
-        var bkey = Object.keys(b)[0];
-        return sortMediaQuery(akey, bkey);
-    });
-    return buildMap(ruleMap.reduce(function (previousValue, currentValue) { return combineObject(previousValue, currentValue); }, {}), minify, prefixer);
+    return _buildStyleList(deepCopy(styleList), minify, prefixer);
 }
-function compileStyleSheet(styleList, minify, prefixer) {
-    if (minify === void 0) { minify = false; }
-    if (prefixer === void 0) { prefixer = true; }
-    var head = combineSelector(styleList.filter(function (i) { return !(i.selector && i.atRules) && !(i instanceof Container); }).sort(sortMeta)).map(function (i) { return i.build(minify, prefixer); }).join(minify ? '' : '\n');
-    var containers = {};
-    styleList.filter(function (i) { return i instanceof Container; }).forEach(function (i) {
-        if (i.selector && i.selector in containers) {
-            containers[i.selector].push(i);
-        }
-        else if (i.selector) {
-            containers[i.selector] = [i];
-        }
-    });
-    var topStyles = Object.values(containers).map(function (i) { return buildAtRule(i, minify, prefixer, true); });
-    var keyframes = buildAtRule(styleList.filter(function (i) { return i instanceof Keyframes; }), minify, prefixer);
-    if (keyframes)
-        topStyles.unshift(keyframes);
-    var top = topStyles.join(minify ? '' : '\n');
-    var body = buildAtRule(styleList.filter(function (i) { return i.selector && i.atRules && !(i instanceof Keyframes || i instanceof Container); }).sort(sortMeta), minify, prefixer);
-    return minify
-        ? (top + head + body).replace(/;\}/g, '}')
-        : [top, head, body].filter(function (i) { return !isSpace(i); }).join('\n');
-}
 
@@ -1135,3 +976,3 @@ var StyleSheet = /** @class */ (function () {
         });
-        this.children = Object.values(styleMap).map(function (i) { return i.clean(); }); //.sort());
+        this.children = Object.values(styleMap).map(function (i) { return i.clean(); });
         return this;
@@ -1154,7 +995,4 @@ };
     };
-    StyleSheet.prototype.sort = function (meta) {
-        if (meta === void 0) { meta = false; }
-        this.children = meta ? this.children.sort(function (a, b) {
-            return a.meta.order - b.meta.order;
-        }) : this.children.sort(sortSelector);
+    StyleSheet.prototype.sort = function () {
+        this.children = this.children.sort(sortMeta);
         return this;
@@ -1161,0 +999,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

1496451

1.79%

Worsened metrics

Lines of code

39856

-0.71%

No dependency changes