@compiled/react 0.17.3 → 0.18.0

package/dist/browser/runtime/sheet.d.ts

@@ -1,7 +1,12 @@
 import type { Bucket, StyleSheetOpts } from './types';
 /**
- * Ordered style buckets using their short psuedo name.
- * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
+ * Ordered style buckets using their short pseudo name.
+ *
+ * This is very bare-bones, with no support for nesting, like styles in
+ * `@media` queries, pseudo-selectors mixed with shorthand properties, etc.
+ *
+ * If changes are needed to the pseudo-selectors, make sure that it aligns with the
+ * definition in `packages/css/src/utils/style-ordering.ts`.
  */
 export declare const styleBucketOrdering: Bucket[];
 /**

package/dist/browser/runtime/sheet.js

@@ -1,9 +1,22 @@
 import { isCacheDisabled } from './cache';
+import { getShorthandDepth } from './shorthand';
 /**
- * Ordered style buckets using their short psuedo name.
- * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
+ * Ordered style buckets using their short pseudo name.
+ *
+ * This is very bare-bones, with no support for nesting, like styles in
+ * `@media` queries, pseudo-selectors mixed with shorthand properties, etc.
+ *
+ * If changes are needed to the pseudo-selectors, make sure that it aligns with the
+ * definition in `packages/css/src/utils/style-ordering.ts`.
  */
 export const styleBucketOrdering = [
+    // shorthand properties
+    's-0',
+    's-1',
+    's-2',
+    's-3',
+    's-4',
+    's-5',
     // catch-all
     '',
     // link
@@ -30,8 +43,8 @@ const styleBucketsInHead = {};
 /**
  * Maps the long pseudo name to the short pseudo name.
  * Pseudos that match here will be ordered,
- * everythin else will make their way to the catch all style bucket.
- * We reduce the pseduo name to save bundlesize.
+ * everything else will make their way to the catch all style bucket.
+ * We reduce the pseudo name to save bundlesize.
  * Thankfully there aren't any overlaps, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.
  */
 const pseudosMap = {
@@ -102,15 +115,23 @@ export const getStyleBucketName = (sheet) => {
     if (sheet.charCodeAt(0) === 64 /* "@" */) {
         return 'm';
     }
+    const firstBracket = sheet.indexOf('{');
     /**
      * We assume that classname will always be 9 character long,
-     * using this the 10th character could be a pseudo declaration.
+     * using this the 10th characters could be a pseudo declaration.
      */
     if (sheet.charCodeAt(10) === 58 /* ":" */) {
         // We send through a subset of the string instead of the full pseudo name.
         // For example `"focus-visible"` name would instead of `"us-visible"`.
         // Return a mapped pseudo else the default catch all bucket.
-        return pseudosMap[sheet.slice(14, sheet.indexOf('{'))] || '';
+        const mapped = pseudosMap[sheet.slice(14, firstBracket)];
+        if (mapped)
+            return mapped;
+    }
+    const property = sheet.slice(firstBracket + 1, sheet.indexOf(':', firstBracket)).trim();
+    const shorthandDepth = getShorthandDepth(property);
+    if (typeof shorthandDepth === 'number') {
+        return `s-${shorthandDepth}`;
     }
     // Return default catch all bucket
     return '';

package/dist/browser/runtime/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../src/runtime/sheet.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../src/runtime/sheet.ts"],"names":[],"mappings":"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"}

package/dist/browser/runtime/shorthand.d.ts

@@ -0,0 +1,9 @@
+import type { Depths } from '@compiled/utils';
+/** We look at shorthands to determine what level they are because we need some shorthands to override other shorthands…
+ * 0 – `all`
+ * 1 – `border`, `margin`, `flex`, etc
+ * 2 – `border-block`, `border-top` `margin-inline`
+ * 3 – `border-block-end`, etc
+ * null – `border-top-color`, `border-block-start-color`, `margin-block-start`, `margin-top`, etc (not shorthands)
+ */
+export declare const getShorthandDepth: (shorthand: string) => Depths | null;

package/dist/browser/runtime/shorthand.js

@@ -0,0 +1,87 @@
+// Copied from packages/utils/src/shorthand.ts so that we avoid
+// inflating the bundle size of @compiled/react/runtime with the contents
+// of @compiled/utils
+//
+// Keep this `shorthandBuckets` in sync with the `shorthandBuckets` defined in
+// packages/utils/src/shorthand.ts
+const shorthandBuckets = {
+    all: 0,
+    animation: 1,
+    'animation-range': 1,
+    background: 1,
+    border: 1,
+    'border-color': 2,
+    'border-style': 2,
+    'border-width': 2,
+    'border-block': 3,
+    'border-inline': 3,
+    'border-top': 4,
+    'border-right': 4,
+    'border-bottom': 4,
+    'border-left': 4,
+    'border-block-start': 5,
+    'border-block-end': 5,
+    'border-inline-start': 5,
+    'border-inline-end': 5,
+    'border-image': 1,
+    'border-radius': 1,
+    'column-rule': 1,
+    columns: 1,
+    'contain-intrinsic-size': 1,
+    container: 1,
+    flex: 1,
+    'flex-flow': 1,
+    font: 1,
+    'font-synthesis': 1,
+    'font-variant': 2,
+    gap: 1,
+    grid: 1,
+    'grid-area': 1,
+    'grid-column': 2,
+    'grid-row': 2,
+    'grid-template': 2,
+    inset: 1,
+    'inset-block': 2,
+    'inset-inline': 2,
+    'list-style': 1,
+    margin: 1,
+    'margin-block': 2,
+    'margin-inline': 2,
+    mask: 1,
+    'mask-border': 1,
+    offset: 1,
+    outline: 1,
+    overflow: 1,
+    'overscroll-behavior': 1,
+    padding: 1,
+    'padding-block': 2,
+    'padding-inline': 2,
+    'place-content': 1,
+    'place-items': 1,
+    'place-self': 1,
+    'position-try': 1,
+    'scroll-margin': 1,
+    'scroll-margin-block': 2,
+    'scroll-margin-inline': 2,
+    'scroll-padding': 1,
+    'scroll-padding-block': 2,
+    'scroll-padding-inline': 2,
+    'scroll-timeline': 1,
+    'text-decoration': 1,
+    'text-emphasis': 1,
+    'text-wrap': 1,
+    transition: 1,
+    'view-timeline': 1,
+};
+/** We look at shorthands to determine what level they are because we need some shorthands to override other shorthands…
+ * 0 – `all`
+ * 1 – `border`, `margin`, `flex`, etc
+ * 2 – `border-block`, `border-top` `margin-inline`
+ * 3 – `border-block-end`, etc
+ * null – `border-top-color`, `border-block-start-color`, `margin-block-start`, `margin-top`, etc (not shorthands)
+ */
+export const getShorthandDepth = (shorthand) => {
+    var _a;
+    return (_a = shorthandBuckets[shorthand]) !== null && _a !== void 0 ? _a : null;
+};
+//# sourceMappingURL=shorthand.js.map

package/dist/browser/runtime/shorthand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shorthand.js","sourceRoot":"","sources":["../../../src/runtime/shorthand.ts"],"names":[],"mappings":"AAMA,+DAA+D;AAC/D,yEAAyE;AACzE,qBAAqB;AACrB,EAAE;AACF,8EAA8E;AAC9E,kCAAkC;AAClC,MAAM,gBAAgB,GAAgC;IACpD,GAAG,EAAE,CAAC;IACN,SAAS,EAAE,CAAC;IACZ,iBAAiB,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC;IAEb,MAAM,EAAE,CAAC;IACT,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IAEjB,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAElB,YAAY,EAAE,CAAC;IACf,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC;IAEhB,oBAAoB,EAAE,CAAC;IACvB,kBAAkB,EAAE,CAAC;IACrB,qBAAqB,EAAE,CAAC;IACxB,mBAAmB,EAAE,CAAC;IAEtB,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAElB,aAAa,EAAE,CAAC;IAChB,OAAO,EAAE,CAAC;IACV,wBAAwB,EAAE,CAAC;IAC3B,SAAS,EAAE,CAAC;IACZ,IAAI,EAAE,CAAC;IACP,WAAW,EAAE,CAAC;IACd,IAAI,EAAE,CAAC;IACP,gBAAgB,EAAE,CAAC;IACnB,cAAc,EAAE,CAAC;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,WAAW,EAAE,CAAC;IACd,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC;IACb,eAAe,EAAE,CAAC;IAClB,KAAK,EAAE,CAAC;IACR,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,YAAY,EAAE,CAAC;IAEf,MAAM,EAAE,CAAC;IACT,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAElB,IAAI,EAAE,CAAC;IACP,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,CAAC;IACX,qBAAqB,EAAE,CAAC;IAExB,OAAO,EAAE,CAAC;IACV,eAAe,EAAE,CAAC;IAClB,gBAAgB,EAAE,CAAC;IAEnB,eAAe,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,cAAc,EAAE,CAAC;IAEjB,eAAe,EAAE,CAAC;IAClB,qBAAqB,EAAE,CAAC;IACxB,sBAAsB,EAAE,CAAC;IAEzB,gBAAgB,EAAE,CAAC;IACnB,sBAAsB,EAAE,CAAC;IACzB,uBAAuB,EAAE,CAAC;IAE1B,iBAAiB,EAAE,CAAC;IACpB,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,WAAW,EAAE,CAAC;IACd,UAAU,EAAE,CAAC;IACb,eAAe,EAAE,CAAC;CACnB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,SAAiB,EAAiB,EAAE;;IACpE,OAAO,MAAA,gBAAgB,CAAC,SAAgC,CAAC,mCAAI,IAAI,CAAC;AACpE,CAAC,CAAC"}

package/dist/browser/runtime/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Depths } from '@compiled/utils';
 export interface StyleSheetOpts {
     /**
      * Used to set a nonce on the style element.
@@ -10,7 +11,7 @@ export interface StyleSheetOpts {
 /**
  * Buckets under which we will group our stylesheets
  */
-export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
+export type Bucket = `s-${Depths}` | '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
 export type UseCacheHook = () => Record<string, true>;
 export type ProviderComponent = (props: {
     children: JSX.Element[] | JSX.Element;

package/dist/cjs/runtime/sheet.d.ts

@@ -1,7 +1,12 @@
 import type { Bucket, StyleSheetOpts } from './types';
 /**
- * Ordered style buckets using their short psuedo name.
- * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
+ * Ordered style buckets using their short pseudo name.
+ *
+ * This is very bare-bones, with no support for nesting, like styles in
+ * `@media` queries, pseudo-selectors mixed with shorthand properties, etc.
+ *
+ * If changes are needed to the pseudo-selectors, make sure that it aligns with the
+ * definition in `packages/css/src/utils/style-ordering.ts`.
  */
 export declare const styleBucketOrdering: Bucket[];
 /**

package/dist/cjs/runtime/sheet.js

@@ -2,11 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyleBucketName = exports.styleBucketOrdering = void 0;
 const cache_1 = require("./cache");
+const shorthand_1 = require("./shorthand");
 /**
- * Ordered style buckets using their short psuedo name.
- * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
+ * Ordered style buckets using their short pseudo name.
+ *
+ * This is very bare-bones, with no support for nesting, like styles in
+ * `@media` queries, pseudo-selectors mixed with shorthand properties, etc.
+ *
+ * If changes are needed to the pseudo-selectors, make sure that it aligns with the
+ * definition in `packages/css/src/utils/style-ordering.ts`.
  */
 exports.styleBucketOrdering = [
+    // shorthand properties
+    's-0',
+    's-1',
+    's-2',
+    's-3',
+    's-4',
+    's-5',
     // catch-all
     '',
     // link
@@ -33,8 +46,8 @@ const styleBucketsInHead = {};
 /**
  * Maps the long pseudo name to the short pseudo name.
  * Pseudos that match here will be ordered,
- * everythin else will make their way to the catch all style bucket.
- * We reduce the pseduo name to save bundlesize.
+ * everything else will make their way to the catch all style bucket.
+ * We reduce the pseudo name to save bundlesize.
  * Thankfully there aren't any overlaps, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.
  */
 const pseudosMap = {
@@ -105,15 +118,23 @@ const getStyleBucketName = (sheet) => {
     if (sheet.charCodeAt(0) === 64 /* "@" */) {
         return 'm';
     }
+    const firstBracket = sheet.indexOf('{');
     /**
      * We assume that classname will always be 9 character long,
-     * using this the 10th character could be a pseudo declaration.
+     * using this the 10th characters could be a pseudo declaration.
      */
     if (sheet.charCodeAt(10) === 58 /* ":" */) {
         // We send through a subset of the string instead of the full pseudo name.
         // For example `"focus-visible"` name would instead of `"us-visible"`.
         // Return a mapped pseudo else the default catch all bucket.
-        return pseudosMap[sheet.slice(14, sheet.indexOf('{'))] || '';
+        const mapped = pseudosMap[sheet.slice(14, firstBracket)];
+        if (mapped)
+            return mapped;
+    }
+    const property = sheet.slice(firstBracket + 1, sheet.indexOf(':', firstBracket)).trim();
+    const shorthandDepth = (0, shorthand_1.getShorthandDepth)(property);
+    if (typeof shorthandDepth === 'number') {
+        return `s-${shorthandDepth}`;
     }
     // Return default catch all bucket
     return '';

package/dist/cjs/runtime/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../src/runtime/sheet.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../src/runtime/sheet.ts"],"names":[],"mappings":"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"}

package/dist/cjs/runtime/shorthand.d.ts

@@ -0,0 +1,9 @@
+import type { Depths } from '@compiled/utils';
+/** We look at shorthands to determine what level they are because we need some shorthands to override other shorthands…
+ * 0 – `all`
+ * 1 – `border`, `margin`, `flex`, etc
+ * 2 – `border-block`, `border-top` `margin-inline`
+ * 3 – `border-block-end`, etc
+ * null – `border-top-color`, `border-block-start-color`, `margin-block-start`, `margin-top`, etc (not shorthands)
+ */
+export declare const getShorthandDepth: (shorthand: string) => Depths | null;

package/dist/cjs/runtime/shorthand.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getShorthandDepth = void 0;
+// Copied from packages/utils/src/shorthand.ts so that we avoid
+// inflating the bundle size of @compiled/react/runtime with the contents
+// of @compiled/utils
+//
+// Keep this `shorthandBuckets` in sync with the `shorthandBuckets` defined in
+// packages/utils/src/shorthand.ts
+const shorthandBuckets = {
+    all: 0,
+    animation: 1,
+    'animation-range': 1,
+    background: 1,
+    border: 1,
+    'border-color': 2,
+    'border-style': 2,
+    'border-width': 2,
+    'border-block': 3,
+    'border-inline': 3,
+    'border-top': 4,
+    'border-right': 4,
+    'border-bottom': 4,
+    'border-left': 4,
+    'border-block-start': 5,
+    'border-block-end': 5,
+    'border-inline-start': 5,
+    'border-inline-end': 5,
+    'border-image': 1,
+    'border-radius': 1,
+    'column-rule': 1,
+    columns: 1,
+    'contain-intrinsic-size': 1,
+    container: 1,
+    flex: 1,
+    'flex-flow': 1,
+    font: 1,
+    'font-synthesis': 1,
+    'font-variant': 2,
+    gap: 1,
+    grid: 1,
+    'grid-area': 1,
+    'grid-column': 2,
+    'grid-row': 2,
+    'grid-template': 2,
+    inset: 1,
+    'inset-block': 2,
+    'inset-inline': 2,
+    'list-style': 1,
+    margin: 1,
+    'margin-block': 2,
+    'margin-inline': 2,
+    mask: 1,
+    'mask-border': 1,
+    offset: 1,
+    outline: 1,
+    overflow: 1,
+    'overscroll-behavior': 1,
+    padding: 1,
+    'padding-block': 2,
+    'padding-inline': 2,
+    'place-content': 1,
+    'place-items': 1,
+    'place-self': 1,
+    'position-try': 1,
+    'scroll-margin': 1,
+    'scroll-margin-block': 2,
+    'scroll-margin-inline': 2,
+    'scroll-padding': 1,
+    'scroll-padding-block': 2,
+    'scroll-padding-inline': 2,
+    'scroll-timeline': 1,
+    'text-decoration': 1,
+    'text-emphasis': 1,
+    'text-wrap': 1,
+    transition: 1,
+    'view-timeline': 1,
+};
+/** We look at shorthands to determine what level they are because we need some shorthands to override other shorthands…
+ * 0 – `all`
+ * 1 – `border`, `margin`, `flex`, etc
+ * 2 – `border-block`, `border-top` `margin-inline`
+ * 3 – `border-block-end`, etc
+ * null – `border-top-color`, `border-block-start-color`, `margin-block-start`, `margin-top`, etc (not shorthands)
+ */
+const getShorthandDepth = (shorthand) => {
+    var _a;
+    return (_a = shorthandBuckets[shorthand]) !== null && _a !== void 0 ? _a : null;
+};
+exports.getShorthandDepth = getShorthandDepth;
+//# sourceMappingURL=shorthand.js.map

package/dist/cjs/runtime/shorthand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shorthand.js","sourceRoot":"","sources":["../../../src/runtime/shorthand.ts"],"names":[],"mappings":";;;AAMA,+DAA+D;AAC/D,yEAAyE;AACzE,qBAAqB;AACrB,EAAE;AACF,8EAA8E;AAC9E,kCAAkC;AAClC,MAAM,gBAAgB,GAAgC;IACpD,GAAG,EAAE,CAAC;IACN,SAAS,EAAE,CAAC;IACZ,iBAAiB,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC;IAEb,MAAM,EAAE,CAAC;IACT,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IAEjB,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAElB,YAAY,EAAE,CAAC;IACf,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC;IAEhB,oBAAoB,EAAE,CAAC;IACvB,kBAAkB,EAAE,CAAC;IACrB,qBAAqB,EAAE,CAAC;IACxB,mBAAmB,EAAE,CAAC;IAEtB,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAElB,aAAa,EAAE,CAAC;IAChB,OAAO,EAAE,CAAC;IACV,wBAAwB,EAAE,CAAC;IAC3B,SAAS,EAAE,CAAC;IACZ,IAAI,EAAE,CAAC;IACP,WAAW,EAAE,CAAC;IACd,IAAI,EAAE,CAAC;IACP,gBAAgB,EAAE,CAAC;IACnB,cAAc,EAAE,CAAC;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,WAAW,EAAE,CAAC;IACd,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC;IACb,eAAe,EAAE,CAAC;IAClB,KAAK,EAAE,CAAC;IACR,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,YAAY,EAAE,CAAC;IAEf,MAAM,EAAE,CAAC;IACT,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAElB,IAAI,EAAE,CAAC;IACP,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,CAAC;IACX,qBAAqB,EAAE,CAAC;IAExB,OAAO,EAAE,CAAC;IACV,eAAe,EAAE,CAAC;IAClB,gBAAgB,EAAE,CAAC;IAEnB,eAAe,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,cAAc,EAAE,CAAC;IAEjB,eAAe,EAAE,CAAC;IAClB,qBAAqB,EAAE,CAAC;IACxB,sBAAsB,EAAE,CAAC;IAEzB,gBAAgB,EAAE,CAAC;IACnB,sBAAsB,EAAE,CAAC;IACzB,uBAAuB,EAAE,CAAC;IAE1B,iBAAiB,EAAE,CAAC;IACpB,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,WAAW,EAAE,CAAC;IACd,UAAU,EAAE,CAAC;IACb,eAAe,EAAE,CAAC;CACnB,CAAC;AAEF;;;;;;GAMG;AACI,MAAM,iBAAiB,GAAG,CAAC,SAAiB,EAAiB,EAAE;;IACpE,OAAO,MAAA,gBAAgB,CAAC,SAAgC,CAAC,mCAAI,IAAI,CAAC;AACpE,CAAC,CAAC;AAFW,QAAA,iBAAiB,qBAE5B"}

package/dist/cjs/runtime/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Depths } from '@compiled/utils';
 export interface StyleSheetOpts {
     /**
      * Used to set a nonce on the style element.
@@ -10,7 +11,7 @@ export interface StyleSheetOpts {
 /**
  * Buckets under which we will group our stylesheets
  */
-export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
+export type Bucket = `s-${Depths}` | '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
 export type UseCacheHook = () => Record<string, true>;
 export type ProviderComponent = (props: {
     children: JSX.Element[] | JSX.Element;

package/dist/esm/runtime/sheet.d.ts

@@ -1,7 +1,12 @@
 import type { Bucket, StyleSheetOpts } from './types';
 /**
- * Ordered style buckets using their short psuedo name.
- * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
+ * Ordered style buckets using their short pseudo name.
+ *
+ * This is very bare-bones, with no support for nesting, like styles in
+ * `@media` queries, pseudo-selectors mixed with shorthand properties, etc.
+ *
+ * If changes are needed to the pseudo-selectors, make sure that it aligns with the
+ * definition in `packages/css/src/utils/style-ordering.ts`.
  */
 export declare const styleBucketOrdering: Bucket[];
 /**

package/dist/esm/runtime/sheet.js

@@ -1,9 +1,22 @@
 import { isCacheDisabled } from './cache';
+import { getShorthandDepth } from './shorthand';
 /**
- * Ordered style buckets using their short psuedo name.
- * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
+ * Ordered style buckets using their short pseudo name.
+ *
+ * This is very bare-bones, with no support for nesting, like styles in
+ * `@media` queries, pseudo-selectors mixed with shorthand properties, etc.
+ *
+ * If changes are needed to the pseudo-selectors, make sure that it aligns with the
+ * definition in `packages/css/src/utils/style-ordering.ts`.
  */
 export const styleBucketOrdering = [
+    // shorthand properties
+    's-0',
+    's-1',
+    's-2',
+    's-3',
+    's-4',
+    's-5',
     // catch-all
     '',
     // link
@@ -30,8 +43,8 @@ const styleBucketsInHead = {};
 /**
  * Maps the long pseudo name to the short pseudo name.
  * Pseudos that match here will be ordered,
- * everythin else will make their way to the catch all style bucket.
- * We reduce the pseduo name to save bundlesize.
+ * everything else will make their way to the catch all style bucket.
+ * We reduce the pseudo name to save bundlesize.
  * Thankfully there aren't any overlaps, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.
  */
 const pseudosMap = {
@@ -102,15 +115,23 @@ export const getStyleBucketName = (sheet) => {
     if (sheet.charCodeAt(0) === 64 /* "@" */) {
         return 'm';
     }
+    const firstBracket = sheet.indexOf('{');
     /**
      * We assume that classname will always be 9 character long,
-     * using this the 10th character could be a pseudo declaration.
+     * using this the 10th characters could be a pseudo declaration.
      */
     if (sheet.charCodeAt(10) === 58 /* ":" */) {
         // We send through a subset of the string instead of the full pseudo name.
         // For example `"focus-visible"` name would instead of `"us-visible"`.
         // Return a mapped pseudo else the default catch all bucket.
-        return pseudosMap[sheet.slice(14, sheet.indexOf('{'))] || '';
+        const mapped = pseudosMap[sheet.slice(14, firstBracket)];
+        if (mapped)
+            return mapped;
+    }
+    const property = sheet.slice(firstBracket + 1, sheet.indexOf(':', firstBracket)).trim();
+    const shorthandDepth = getShorthandDepth(property);
+    if (typeof shorthandDepth === 'number') {
+        return `s-${shorthandDepth}`;
     }
     // Return default catch all bucket
     return '';

package/dist/esm/runtime/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../src/runtime/sheet.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../src/runtime/sheet.ts"],"names":[],"mappings":"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"}

package/dist/esm/runtime/shorthand.d.ts

@@ -0,0 +1,9 @@
+import type { Depths } from '@compiled/utils';
+/** We look at shorthands to determine what level they are because we need some shorthands to override other shorthands…
+ * 0 – `all`
+ * 1 – `border`, `margin`, `flex`, etc
+ * 2 – `border-block`, `border-top` `margin-inline`
+ * 3 – `border-block-end`, etc
+ * null – `border-top-color`, `border-block-start-color`, `margin-block-start`, `margin-top`, etc (not shorthands)
+ */
+export declare const getShorthandDepth: (shorthand: string) => Depths | null;

package/dist/esm/runtime/shorthand.js

@@ -0,0 +1,87 @@
+// Copied from packages/utils/src/shorthand.ts so that we avoid
+// inflating the bundle size of @compiled/react/runtime with the contents
+// of @compiled/utils
+//
+// Keep this `shorthandBuckets` in sync with the `shorthandBuckets` defined in
+// packages/utils/src/shorthand.ts
+const shorthandBuckets = {
+    all: 0,
+    animation: 1,
+    'animation-range': 1,
+    background: 1,
+    border: 1,
+    'border-color': 2,
+    'border-style': 2,
+    'border-width': 2,
+    'border-block': 3,
+    'border-inline': 3,
+    'border-top': 4,
+    'border-right': 4,
+    'border-bottom': 4,
+    'border-left': 4,
+    'border-block-start': 5,
+    'border-block-end': 5,
+    'border-inline-start': 5,
+    'border-inline-end': 5,
+    'border-image': 1,
+    'border-radius': 1,
+    'column-rule': 1,
+    columns: 1,
+    'contain-intrinsic-size': 1,
+    container: 1,
+    flex: 1,
+    'flex-flow': 1,
+    font: 1,
+    'font-synthesis': 1,
+    'font-variant': 2,
+    gap: 1,
+    grid: 1,
+    'grid-area': 1,
+    'grid-column': 2,
+    'grid-row': 2,
+    'grid-template': 2,
+    inset: 1,
+    'inset-block': 2,
+    'inset-inline': 2,
+    'list-style': 1,
+    margin: 1,
+    'margin-block': 2,
+    'margin-inline': 2,
+    mask: 1,
+    'mask-border': 1,
+    offset: 1,
+    outline: 1,
+    overflow: 1,
+    'overscroll-behavior': 1,
+    padding: 1,
+    'padding-block': 2,
+    'padding-inline': 2,
+    'place-content': 1,
+    'place-items': 1,
+    'place-self': 1,
+    'position-try': 1,
+    'scroll-margin': 1,
+    'scroll-margin-block': 2,
+    'scroll-margin-inline': 2,
+    'scroll-padding': 1,
+    'scroll-padding-block': 2,
+    'scroll-padding-inline': 2,
+    'scroll-timeline': 1,
+    'text-decoration': 1,
+    'text-emphasis': 1,
+    'text-wrap': 1,
+    transition: 1,
+    'view-timeline': 1,
+};
+/** We look at shorthands to determine what level they are because we need some shorthands to override other shorthands…
+ * 0 – `all`
+ * 1 – `border`, `margin`, `flex`, etc
+ * 2 – `border-block`, `border-top` `margin-inline`
+ * 3 – `border-block-end`, etc
+ * null – `border-top-color`, `border-block-start-color`, `margin-block-start`, `margin-top`, etc (not shorthands)
+ */
+export const getShorthandDepth = (shorthand) => {
+    var _a;
+    return (_a = shorthandBuckets[shorthand]) !== null && _a !== void 0 ? _a : null;
+};
+//# sourceMappingURL=shorthand.js.map

package/dist/esm/runtime/shorthand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shorthand.js","sourceRoot":"","sources":["../../../src/runtime/shorthand.ts"],"names":[],"mappings":"AAMA,+DAA+D;AAC/D,yEAAyE;AACzE,qBAAqB;AACrB,EAAE;AACF,8EAA8E;AAC9E,kCAAkC;AAClC,MAAM,gBAAgB,GAAgC;IACpD,GAAG,EAAE,CAAC;IACN,SAAS,EAAE,CAAC;IACZ,iBAAiB,EAAE,CAAC;IACpB,UAAU,EAAE,CAAC;IAEb,MAAM,EAAE,CAAC;IACT,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IAEjB,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAElB,YAAY,EAAE,CAAC;IACf,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC;IAEhB,oBAAoB,EAAE,CAAC;IACvB,kBAAkB,EAAE,CAAC;IACrB,qBAAqB,EAAE,CAAC;IACxB,mBAAmB,EAAE,CAAC;IAEtB,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAElB,aAAa,EAAE,CAAC;IAChB,OAAO,EAAE,CAAC;IACV,wBAAwB,EAAE,CAAC;IAC3B,SAAS,EAAE,CAAC;IACZ,IAAI,EAAE,CAAC;IACP,WAAW,EAAE,CAAC;IACd,IAAI,EAAE,CAAC;IACP,gBAAgB,EAAE,CAAC;IACnB,cAAc,EAAE,CAAC;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,WAAW,EAAE,CAAC;IACd,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC;IACb,eAAe,EAAE,CAAC;IAClB,KAAK,EAAE,CAAC;IACR,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,YAAY,EAAE,CAAC;IAEf,MAAM,EAAE,CAAC;IACT,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC;IAElB,IAAI,EAAE,CAAC;IACP,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,CAAC;IACX,qBAAqB,EAAE,CAAC;IAExB,OAAO,EAAE,CAAC;IACV,eAAe,EAAE,CAAC;IAClB,gBAAgB,EAAE,CAAC;IAEnB,eAAe,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,cAAc,EAAE,CAAC;IAEjB,eAAe,EAAE,CAAC;IAClB,qBAAqB,EAAE,CAAC;IACxB,sBAAsB,EAAE,CAAC;IAEzB,gBAAgB,EAAE,CAAC;IACnB,sBAAsB,EAAE,CAAC;IACzB,uBAAuB,EAAE,CAAC;IAE1B,iBAAiB,EAAE,CAAC;IACpB,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,WAAW,EAAE,CAAC;IACd,UAAU,EAAE,CAAC;IACb,eAAe,EAAE,CAAC;CACnB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,SAAiB,EAAiB,EAAE;;IACpE,OAAO,MAAA,gBAAgB,CAAC,SAAgC,CAAC,mCAAI,IAAI,CAAC;AACpE,CAAC,CAAC"}

package/dist/esm/runtime/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Depths } from '@compiled/utils';
 export interface StyleSheetOpts {
     /**
      * Used to set a nonce on the style element.
@@ -10,7 +11,7 @@ export interface StyleSheetOpts {
 /**
  * Buckets under which we will group our stylesheets
  */
-export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
+export type Bucket = `s-${Depths}` | '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
 export type UseCacheHook = () => Record<string, true>;
 export type ProviderComponent = (props: {
     children: JSX.Element[] | JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.17.3",
+  "version": "0.18.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -76,6 +76,7 @@
   },
   "devDependencies": {
     "@compiled/benchmark": "^1.1.0",
+    "@compiled/utils": "^0.12.0",
     "@fixture/strict-api-test": "*",
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",

package/src/runtime/__tests__/style-ssr.test.tsx

@@ -43,12 +43,19 @@ describe('<Style />', () => {
           `._g1234567:visited{ color: grey; }`,
           `._h1234567:focus-visible{ color: white; }`,
           `._i1234567:focus-within{ color: black; }`,
+          `._j1234567{ border: none; }`,
+          `._j1234567{ border-top: 1px solid transparent; }`,
+          `._j1234567{ border-top-color: red; }`,
+          `._j1234567:focus{ border-top-color: transparent; }`,
+          `._j1234567:focus{ border-color: blue; }`,
+          `._j1234567:focus{ border: 1px solid; }`,
         ]}
       </Style>
     );
 
+    // WARNING: This is wrong, the `focus` border properties are different than without focus, borders would be indeterministic.
     expect(result.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
-      "<style data-cmpld="true">._c1234567{ display: block; }._d1234567:link{ color: green; }._g1234567:visited{ color: grey; }._i1234567:focus-within{ color: black; }._f1234567:focus{ color: pink; }._h1234567:focus-visible{ color: white; }._a1234567:hover{ color: red; }._b1234567:active{ color: blue; }@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
+      "<style data-cmpld="true">._j1234567{ border: none; }._j1234567{ border-top: 1px solid transparent; }._c1234567{ display: block; }._j1234567{ border-top-color: red; }._d1234567:link{ color: green; }._g1234567:visited{ color: grey; }._i1234567:focus-within{ color: black; }._f1234567:focus{ color: pink; }._j1234567:focus{ border-top-color: transparent; }._j1234567:focus{ border-color: blue; }._j1234567:focus{ border: 1px solid; }._h1234567:focus-visible{ color: white; }._a1234567:hover{ color: red; }._b1234567:active{ color: blue; }@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
       "
     `);
   });

package/src/runtime/__tests__/style.test.tsx

@@ -66,7 +66,7 @@ describe('<Style />', () => {
     });
   });
 
-  it('should warn in dev when using a dangerous pseduo selector', () => {
+  it('should warn in dev when using a dangerous pseudo selector', () => {
     createIsolatedTest((Style) => {
       process.env.NODE_ENV = 'development';
 
@@ -124,6 +124,50 @@ describe('<Style />', () => {
     });
   });
 
+  it('should render shorthands in buckets', () => {
+    // Our buckets don't actually support mixing pseudo-selectors with shorthand
+    // properties, so the pseudo-selector buckets don't have correct shorthand
+    // property order...
+    createIsolatedTest((Style) => {
+      render(
+        <Style>
+          {[
+            `._a1234567:hover{ all: revert; }`,
+            `._a1234567{ all: unset; }`,
+            `._b1234567{ border: solid 1px blue; }`,
+            `._c1234567{ border-block: solid 2px blue; }`,
+            `._d1234567{ border-block-end: solid 3px blue; }`,
+            `._e1234567{ border-bottom: solid 4px blue; }`,
+            `._g1234567{ border-inline: solid 5px blue; }`,
+            `._h1234567{ border-top: solid 6px blue; }`,
+            `._i1234567{ border-top-color: pink; }`,
+            `._j1234567{ padding: 5px; }`,
+            `._k1234567{ padding-block: 6px; }`,
+            `._l1234567{ padding-inline: 7px; }`,
+            `._m1234567{ padding-top: 8px; }`,
+
+            `._g1234567:hover{ border-inline: solid 5px blue; }`,
+            `._k1234567:hover{ padding-block: 6px; }`,
+            `._l1234567:hover{ padding-inline: 7px; }`,
+            `._j1234567:hover{ padding: 5px; }`,
+          ]}
+        </Style>
+      );
+      expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
+        "<style>._a1234567{ all: unset; }</style>
+        <style>._b1234567{ border: solid 1px blue; }._j1234567{ padding: 5px; }</style>
+        <style>._k1234567{ padding-block: 6px; }._l1234567{ padding-inline: 7px; }</style>
+        <style>._c1234567{ border-block: solid 2px blue; }._g1234567{ border-inline: solid 5px blue; }</style>
+        <style>._e1234567{ border-bottom: solid 4px blue; }._h1234567{ border-top: solid 6px blue; }</style>
+        <style>._d1234567{ border-block-end: solid 3px blue; }</style>
+        <style>._i1234567{ border-top-color: pink; }._m1234567{ padding-top: 8px; }</style>
+        <style>._a1234567:hover{ all: revert; }._g1234567:hover{ border-inline: solid 5px blue; }._k1234567:hover{ padding-block: 6px; }._l1234567:hover{ padding-inline: 7px; }._j1234567:hover{ padding: 5px; }</style>
+        "
+      `);
+      expect(console.error).not.toHaveBeenCalled();
+    });
+  });
+
   it('should update styles', () => {
     createIsolatedTest((Style) => {
       const { rerender } = render(<Style>{[`.first-render { display: block; }`]}</Style>);

package/src/runtime/sheet.ts

@@ -1,11 +1,24 @@
 import { isCacheDisabled } from './cache';
+import { getShorthandDepth } from './shorthand';
 import type { Bucket, StyleSheetOpts } from './types';
 
 /**
- * Ordered style buckets using their short psuedo name.
- * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
+ * Ordered style buckets using their short pseudo name.
+ *
+ * This is very bare-bones, with no support for nesting, like styles in
+ * `@media` queries, pseudo-selectors mixed with shorthand properties, etc.
+ *
+ * If changes are needed to the pseudo-selectors, make sure that it aligns with the
+ * definition in `packages/css/src/utils/style-ordering.ts`.
  */
 export const styleBucketOrdering: Bucket[] = [
+  // shorthand properties
+  's-0',
+  's-1',
+  's-2',
+  's-3',
+  's-4',
+  's-5',
   // catch-all
   '',
   // link
@@ -34,8 +47,8 @@ const styleBucketsInHead: Partial<Record<Bucket, HTMLStyleElement>> = {};
 /**
  * Maps the long pseudo name to the short pseudo name.
  * Pseudos that match here will be ordered,
- * everythin else will make their way to the catch all style bucket.
- * We reduce the pseduo name to save bundlesize.
+ * everything else will make their way to the catch all style bucket.
+ * We reduce the pseudo name to save bundlesize.
  * Thankfully there aren't any overlaps, see: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes.
  */
 const pseudosMap: Record<string, Bucket | undefined> = {
@@ -114,15 +127,25 @@ export const getStyleBucketName = (sheet: string): Bucket => {
     return 'm';
   }
 
+  const firstBracket = sheet.indexOf('{');
+
   /**
    * We assume that classname will always be 9 character long,
-   * using this the 10th character could be a pseudo declaration.
+   * using this the 10th characters could be a pseudo declaration.
    */
   if (sheet.charCodeAt(10) === 58 /* ":" */) {
     // We send through a subset of the string instead of the full pseudo name.
     // For example `"focus-visible"` name would instead of `"us-visible"`.
     // Return a mapped pseudo else the default catch all bucket.
-    return pseudosMap[sheet.slice(14, sheet.indexOf('{'))] || '';
+    const mapped = pseudosMap[sheet.slice(14, firstBracket)];
+    if (mapped) return mapped;
+  }
+
+  const property = sheet.slice(firstBracket + 1, sheet.indexOf(':', firstBracket)).trim();
+
+  const shorthandDepth = getShorthandDepth(property);
+  if (typeof shorthandDepth === 'number') {
+    return `s-${shorthandDepth}` as const;
   }
 
   // Return default catch all bucket

package/src/runtime/shorthand.ts

@@ -0,0 +1,105 @@
+import type {
+  Depths,
+  ShorthandProperties,
+  shorthandBuckets as ShorthandBucketsType,
+} from '@compiled/utils';
+
+// Copied from packages/utils/src/shorthand.ts so that we avoid
+// inflating the bundle size of @compiled/react/runtime with the contents
+// of @compiled/utils
+//
+// Keep this `shorthandBuckets` in sync with the `shorthandBuckets` defined in
+// packages/utils/src/shorthand.ts
+const shorthandBuckets: typeof ShorthandBucketsType = {
+  all: 0,
+  animation: 1,
+  'animation-range': 1,
+  background: 1,
+
+  border: 1,
+  'border-color': 2,
+  'border-style': 2,
+  'border-width': 2,
+
+  'border-block': 3,
+  'border-inline': 3,
+
+  'border-top': 4,
+  'border-right': 4,
+  'border-bottom': 4,
+  'border-left': 4,
+
+  'border-block-start': 5,
+  'border-block-end': 5,
+  'border-inline-start': 5,
+  'border-inline-end': 5,
+
+  'border-image': 1,
+  'border-radius': 1,
+
+  'column-rule': 1,
+  columns: 1,
+  'contain-intrinsic-size': 1,
+  container: 1,
+  flex: 1,
+  'flex-flow': 1,
+  font: 1,
+  'font-synthesis': 1,
+  'font-variant': 2,
+  gap: 1,
+  grid: 1,
+  'grid-area': 1,
+  'grid-column': 2,
+  'grid-row': 2,
+  'grid-template': 2,
+  inset: 1,
+  'inset-block': 2,
+  'inset-inline': 2,
+  'list-style': 1,
+
+  margin: 1,
+  'margin-block': 2,
+  'margin-inline': 2,
+
+  mask: 1,
+  'mask-border': 1,
+  offset: 1,
+  outline: 1,
+  overflow: 1,
+  'overscroll-behavior': 1,
+
+  padding: 1,
+  'padding-block': 2,
+  'padding-inline': 2,
+
+  'place-content': 1,
+  'place-items': 1,
+  'place-self': 1,
+  'position-try': 1,
+
+  'scroll-margin': 1,
+  'scroll-margin-block': 2,
+  'scroll-margin-inline': 2,
+
+  'scroll-padding': 1,
+  'scroll-padding-block': 2,
+  'scroll-padding-inline': 2,
+
+  'scroll-timeline': 1,
+  'text-decoration': 1,
+  'text-emphasis': 1,
+  'text-wrap': 1,
+  transition: 1,
+  'view-timeline': 1,
+};
+
+/** We look at shorthands to determine what level they are because we need some shorthands to override other shorthands…
+ * 0 – `all`
+ * 1 – `border`, `margin`, `flex`, etc
+ * 2 – `border-block`, `border-top` `margin-inline`
+ * 3 – `border-block-end`, etc
+ * null – `border-top-color`, `border-block-start-color`, `margin-block-start`, `margin-top`, etc (not shorthands)
+ */
+export const getShorthandDepth = (shorthand: string): Depths | null => {
+  return shorthandBuckets[shorthand as ShorthandProperties] ?? null;
+};

package/src/runtime/types.ts

@@ -1,3 +1,5 @@
+import type { Depths } from '@compiled/utils';
+
 export interface StyleSheetOpts {
   /**
    * Used to set a nonce on the style element.
@@ -11,6 +13,8 @@ export interface StyleSheetOpts {
  * Buckets under which we will group our stylesheets
  */
 export type Bucket =
+  // shorthand properties
+  | `s-${Depths}`
   // catch-all
   | ''
   // link