@compiled/react 0.11.4 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/browser/runtime/ax.js +7 -6
  2. package/dist/browser/runtime/ax.js.map +1 -1
  3. package/dist/cjs/runtime/ax.js +7 -6
  4. package/dist/cjs/runtime/ax.js.map +1 -1
  5. package/dist/esm/runtime/ax.js +7 -6
  6. package/dist/esm/runtime/ax.js.map +1 -1
  7. package/package.json +2 -2
  8. package/src/__tests__/browser.test.tsx +9 -9
  9. package/src/__tests__/ssr.test.tsx +7 -7
  10. package/src/runtime/__perf__/ax.test.ts +39 -17
  11. package/src/runtime/__tests__/ax.test.ts +76 -65
  12. package/src/runtime/__tests__/style-ssr.test.tsx +1 -1
  13. package/src/runtime/ax.ts +7 -9
package/dist/browser/runtime/ax.js CHANGED
@@ -26,10 +26,9 @@ var ATOMIC_GROUP_LENGTH = 5;
26
26
  * @param classes
27
27
  */
28
28
  export default function ax(classNames) {
29
- if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
30
- // short circuit if there's no custom class names.
31
- return classNames[0] || undefined;
32
- }
29
+ // short circuit if there's no class names.
30
+ if (classNames.length <= 1 && !classNames[0])
31
+ return undefined;
33
32
  var atomicGroups = {};
34
33
  for (var i = 0; i < classNames.length; i++) {
35
34
  var cls = classNames[i];
@@ -39,8 +38,10 @@ export default function ax(classNames) {
39
38
  var groups = cls.split(' ');
40
39
  for (var x = 0; x < groups.length; x++) {
41
40
  var atomic = groups[x];
42
- var atomicGroupName = atomic.slice(0, atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined);
43
- atomicGroups[atomicGroupName] = atomic;
41
+ var isAtomic = atomic.charCodeAt(0) === UNDERSCORE_UNICODE;
42
+ var isCompressed = isAtomic && atomic.charCodeAt(5) === UNDERSCORE_UNICODE;
43
+ var atomicGroupName = isAtomic ? atomic.slice(0, ATOMIC_GROUP_LENGTH) : atomic;
44
+ atomicGroups[atomicGroupName] = isCompressed ? atomic.slice(ATOMIC_GROUP_LENGTH + 1) : atomic;
44
45
  }
45
46
  }
46
47
  var str = '';
package/dist/browser/runtime/ax.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAA0C;IACnE,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACnF,kDAAkD;QAClD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAClC,CAAC,EACD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAC9E,CAAC;YACF,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACxC;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC"}
1
+ {"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAA0C;IACnE,2CAA2C;IAC3C,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAAE,OAAO,SAAS,CAAC;IAE/D,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC;YAC7D,IAAM,YAAY,GAAG,QAAQ,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC;YAE7E,IAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YACjF,YAAY,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,mBAAmB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;SAC/F;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC"}
package/dist/cjs/runtime/ax.js CHANGED
@@ -28,10 +28,9 @@ var ATOMIC_GROUP_LENGTH = 5;
28
28
  * @param classes
29
29
  */
30
30
  function ax(classNames) {
31
- if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
32
- // short circuit if there's no custom class names.
33
- return classNames[0] || undefined;
34
- }
31
+ // short circuit if there's no class names.
32
+ if (classNames.length <= 1 && !classNames[0])
33
+ return undefined;
35
34
  var atomicGroups = {};
36
35
  for (var i = 0; i < classNames.length; i++) {
37
36
  var cls = classNames[i];
@@ -41,8 +40,10 @@ function ax(classNames) {
41
40
  var groups = cls.split(' ');
42
41
  for (var x = 0; x < groups.length; x++) {
43
42
  var atomic = groups[x];
44
- var atomicGroupName = atomic.slice(0, atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined);
45
- atomicGroups[atomicGroupName] = atomic;
43
+ var isAtomic = atomic.charCodeAt(0) === UNDERSCORE_UNICODE;
44
+ var isCompressed = isAtomic && atomic.charCodeAt(5) === UNDERSCORE_UNICODE;
45
+ var atomicGroupName = isAtomic ? atomic.slice(0, ATOMIC_GROUP_LENGTH) : atomic;
46
+ atomicGroups[atomicGroupName] = isCompressed ? atomic.slice(ATOMIC_GROUP_LENGTH + 1) : atomic;
46
47
  }
47
48
  }
48
49
  var str = '';
package/dist/cjs/runtime/ax.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":";;AAAA,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAwB,EAAE,CAAC,UAA0C;IACnE,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACnF,kDAAkD;QAClD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAClC,CAAC,EACD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAC9E,CAAC;YACF,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACxC;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC;AAlCD,qBAkCC"}
1
+ {"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":";;AAAA,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAwB,EAAE,CAAC,UAA0C;IACnE,2CAA2C;IAC3C,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAAE,OAAO,SAAS,CAAC;IAE/D,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC;YAC7D,IAAM,YAAY,GAAG,QAAQ,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC;YAE7E,IAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YACjF,YAAY,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,mBAAmB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;SAC/F;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC;AAhCD,qBAgCC"}
package/dist/esm/runtime/ax.js CHANGED
@@ -26,10 +26,9 @@ var ATOMIC_GROUP_LENGTH = 5;
26
26
  * @param classes
27
27
  */
28
28
  export default function ax(classNames) {
29
- if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
30
- // short circuit if there's no custom class names.
31
- return classNames[0] || undefined;
32
- }
29
+ // short circuit if there's no class names.
30
+ if (classNames.length <= 1 && !classNames[0])
31
+ return undefined;
33
32
  var atomicGroups = {};
34
33
  for (var i = 0; i < classNames.length; i++) {
35
34
  var cls = classNames[i];
@@ -39,8 +38,10 @@ export default function ax(classNames) {
39
38
  var groups = cls.split(' ');
40
39
  for (var x = 0; x < groups.length; x++) {
41
40
  var atomic = groups[x];
42
- var atomicGroupName = atomic.slice(0, atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined);
43
- atomicGroups[atomicGroupName] = atomic;
41
+ var isAtomic = atomic.charCodeAt(0) === UNDERSCORE_UNICODE;
42
+ var isCompressed = isAtomic && atomic.charCodeAt(5) === UNDERSCORE_UNICODE;
43
+ var atomicGroupName = isAtomic ? atomic.slice(0, ATOMIC_GROUP_LENGTH) : atomic;
44
+ atomicGroups[atomicGroupName] = isCompressed ? atomic.slice(ATOMIC_GROUP_LENGTH + 1) : atomic;
44
45
  }
45
46
  }
46
47
  var str = '';
package/dist/esm/runtime/ax.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAA0C;IACnE,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACnF,kDAAkD;QAClD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAClC,CAAC,EACD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAC9E,CAAC;YACF,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACxC;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC"}
1
+ {"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAA0C;IACnE,2CAA2C;IAC3C,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAAE,OAAO,SAAS,CAAC;IAE/D,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC;YAC7D,IAAM,YAAY,GAAG,QAAQ,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC;YAE7E,IAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YACjF,YAAY,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,mBAAmB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;SAC/F;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@compiled/react",
3
- "version": "0.11.4",
3
+ "version": "0.12.0",
4
4
  "description": "A familiar and performant compile time CSS-in-JS library for React.",
5
5
  "keywords": [
6
6
  "compiled",
@@ -75,7 +75,7 @@
75
75
  "csstype": "^3.1.1"
76
76
  },
77
77
  "devDependencies": {
78
- "@compiled/benchmark": "^1.0.1",
78
+ "@compiled/benchmark": "^1.1.0",
79
79
  "@testing-library/react": "^12.1.5",
80
80
  "@types/jsdom": "^16.2.15",
81
81
  "@types/react-dom": "^17.0.18",
package/src/__tests__/browser.test.tsx CHANGED
@@ -24,7 +24,7 @@ describe('browser', () => {
24
24
  const { baseElement } = render(<StyledDiv>hello world</StyledDiv>);
25
25
 
26
26
  expect(baseElement.innerHTML).toMatchInlineSnapshot(
27
- `"<div><div class=\\"_1wyb1fwx\\">hello world</div></div>"`
27
+ `"<div><div class="_1wyb1fwx">hello world</div></div>"`
28
28
  );
29
29
  });
30
30
 
@@ -41,7 +41,7 @@ describe('browser', () => {
41
41
  );
42
42
 
43
43
  expect(document.head.innerHTML).toMatchInlineSnapshot(
44
- `"<style nonce=\\"k0Mp1lEd\\">._1wybdlk8{font-size:14px}</style>"`
44
+ `"<style nonce="k0Mp1lEd">._1wybdlk8{font-size:14px}</style>"`
45
45
  );
46
46
  });
47
47
 
@@ -94,13 +94,13 @@ describe('browser', () => {
94
94
  render(<StyledLink href="https://atlassian.design">Atlassian Design System</StyledLink>);
95
95
 
96
96
  expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
97
- "<style nonce=\\"k0Mp1lEd\\">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._v0vw1x77:focus-visible, ._ysv71x77:link{color:white}</style>
98
- <style nonce=\\"k0Mp1lEd\\">._ysv75scu:link{color:red}</style>
99
- <style nonce=\\"k0Mp1lEd\\">._105332ev:visited{color:pink}</style>
100
- <style nonce=\\"k0Mp1lEd\\">._f8pjbf54:focus{color:green}</style>
101
- <style nonce=\\"k0Mp1lEd\\">._30l31gy6:hover{color:yellow}</style>
102
- <style nonce=\\"k0Mp1lEd\\">._9h8h13q2:active{color:blue}</style>
103
- <style nonce=\\"k0Mp1lEd\\">@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._jbabtwqo:focus-visible, ._6146twqo:hover{color:grey}._1cld11x8:active{color:black}}</style>
97
+ "<style nonce="k0Mp1lEd">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._v0vw1x77:focus-visible, ._ysv71x77:link{color:white}</style>
98
+ <style nonce="k0Mp1lEd">._ysv75scu:link{color:red}</style>
99
+ <style nonce="k0Mp1lEd">._105332ev:visited{color:pink}</style>
100
+ <style nonce="k0Mp1lEd">._f8pjbf54:focus{color:green}</style>
101
+ <style nonce="k0Mp1lEd">._30l31gy6:hover{color:yellow}</style>
102
+ <style nonce="k0Mp1lEd">._9h8h13q2:active{color:blue}</style>
103
+ <style nonce="k0Mp1lEd">@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._jbabtwqo:focus-visible, ._6146twqo:hover{color:grey}._1cld11x8:active{color:black}}</style>
104
104
  "
105
105
  `);
106
106
  });
package/src/__tests__/ssr.test.tsx CHANGED
@@ -17,7 +17,7 @@ describe('SSR', () => {
17
17
  const result = renderToStaticMarkup(<StyledDiv>hello world</StyledDiv>);
18
18
 
19
19
  expect(result).toMatchInlineSnapshot(
20
- `"<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1wyb1fwx{font-size:12px}</style><div class=\\"_1wyb1fwx\\">hello world</div>"`
20
+ `"<style data-cmpld="true" nonce="k0Mp1lEd">._1wyb1fwx{font-size:12px}</style><div class="_1wyb1fwx">hello world</div>"`
21
21
  );
22
22
  });
23
23
 
@@ -44,7 +44,7 @@ describe('SSR', () => {
44
44
  );
45
45
 
46
46
  expect(result).toMatchInlineSnapshot(
47
- `"<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1wyb1fwx{font-size:12px}</style><div class=\\"_1wyb1fwx\\">hello world</div><div class=\\"_1wyb1fwx\\">hello world</div>"`
47
+ `"<style data-cmpld="true" nonce="k0Mp1lEd">._1wyb1fwx{font-size:12px}</style><div class="_1wyb1fwx">hello world</div><div class="_1wyb1fwx">hello world</div>"`
48
48
  );
49
49
  });
50
50
 
@@ -68,7 +68,7 @@ describe('SSR', () => {
68
68
  );
69
69
 
70
70
  expect(result).toMatchInlineSnapshot(
71
- `"<div><div><div><style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1wyb1fwx{font-size:12px}</style><div class=\\"_1wyb1fwx\\">hello world</div></div></div><div class=\\"_1wyb1fwx\\">hello world</div></div>"`
71
+ `"<div><div><div><style data-cmpld="true" nonce="k0Mp1lEd">._1wyb1fwx{font-size:12px}</style><div class="_1wyb1fwx">hello world</div></div></div><div class="_1wyb1fwx">hello world</div></div>"`
72
72
  );
73
73
  });
74
74
 
@@ -88,7 +88,7 @@ describe('SSR', () => {
88
88
  );
89
89
 
90
90
  expect(result).toMatchInlineSnapshot(
91
- `"<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1e0c1txw{display:flex}</style><div class=\\"_1e0c1txw\\"><style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1wyb1fwx{font-size:12px}</style><div class=\\"_1wyb1fwx\\">hello world</div><div class=\\"_1wyb1fwx\\">hello world</div></div>"`
91
+ `"<style data-cmpld="true" nonce="k0Mp1lEd">._1e0c1txw{display:flex}</style><div class="_1e0c1txw"><style data-cmpld="true" nonce="k0Mp1lEd">._1wyb1fwx{font-size:12px}</style><div class="_1wyb1fwx">hello world</div><div class="_1wyb1fwx">hello world</div></div>"`
92
92
  );
93
93
  });
94
94
 
@@ -135,8 +135,8 @@ describe('SSR', () => {
135
135
  );
136
136
 
137
137
  expect(result.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
138
- "<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._ysv75scu:link{color:red}._105332ev:visited{color:pink}._f8pjbf54:focus{color:green}._30l31gy6:hover{color:yellow}._9h8h13q2:active{color:blue}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._1cld11x8:active{color:black}}</style>
139
- <a href=\\"https://atlassian.design\\" class=\\"_1e0c1txw _1wyb12am _syaz1cnh _30l31gy6 _9h8h13q2 _ysv75scu _1df61gy6 _7okp11x8 _f8pjbf54 _105332ev _1o8z1gy6 _1cld11x8\\">Atlassian Design System</a>"
138
+ "<style data-cmpld="true" nonce="k0Mp1lEd">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._ysv75scu:link{color:red}._105332ev:visited{color:pink}._f8pjbf54:focus{color:green}._30l31gy6:hover{color:yellow}._9h8h13q2:active{color:blue}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._1cld11x8:active{color:black}}</style>
139
+ <a href="https://atlassian.design" class="_1e0c1txw _1wyb12am _syaz1cnh _30l31gy6 _9h8h13q2 _ysv75scu _1df61gy6 _7okp11x8 _f8pjbf54 _105332ev _1o8z1gy6 _1cld11x8">Atlassian Design System</a>"
140
140
  `);
141
141
  });
142
142
 
@@ -154,7 +154,7 @@ describe('SSR', () => {
154
154
  );
155
155
 
156
156
  expect(result).toMatchInlineSnapshot(
157
- `"<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1m9k13q2>span{color:blue}</style><div class=\\"_1m9k13q2\\"><span>hello world</span></div>"`
157
+ `"<style data-cmpld="true" nonce="k0Mp1lEd">._1m9k13q2>span{color:blue}</style><div class="_1m9k13q2"><span>hello world</span></div>"`
158
158
  );
159
159
  });
160
160
  });
package/src/runtime/__perf__/ax.test.ts CHANGED
@@ -3,24 +3,26 @@ import { runBenchmark } from '@compiled/benchmark';
3
3
  import { ax } from '../index';
4
4
 
5
5
  describe('ax benchmark', () => {
6
- it('completes with ax() string as the fastest', async () => {
7
- const arr = [
8
- '_19itglyw',
9
- '_2rko1l7b',
10
- '_ca0qftgi',
11
- '_u5f319bv',
12
- '_n3tdftgi',
13
- '_19bv19bv',
14
- '_bfhk1mzw',
15
- '_syazu67f',
16
- '_k48p1nn1',
17
- '_ect41kw7',
18
- '_1wybdlk8',
19
- '_irr3mlcl',
20
- '_1di6vctu',
21
- undefined,
22
- ];
6
+ const arr = [
7
+ '_19itglyw',
8
+ '_2rko1l7b',
9
+ '_ca0qftgi',
10
+ '_u5f319bv',
11
+ '_n3tdftgi',
12
+ '_19bv19bv',
13
+ '_bfhk1mzw',
14
+ '_syazu67f',
15
+ '_k48p1nn1',
16
+ '_ect41kw7',
17
+ '_1wybdlk8',
18
+ '_irr3mlcl',
19
+ '_1di6vctu',
20
+ // `undefined` is an acceptable parameter so we want to include it in the test case.
21
+ // Example: ax(['aaaabbbb', foo() && "aaaacccc"])
22
+ undefined,
23
+ ];
23
24
 
25
+ it('completes with ax() string as the fastest', async () => {
24
26
  // Remove undefined and join the strings
25
27
  const str = arr.slice(0, -1).join(' ');
26
28
 
@@ -39,4 +41,24 @@ describe('ax benchmark', () => {
39
41
  fastest: ['ax() string'],
40
42
  });
41
43
  }, 30000);
44
+
45
+ it('completes with ax() non-compressed class names as the fastest', async () => {
46
+ const arrWithCompressedClassNames = arr.map((item) =>
47
+ item ? `${item.slice(0, 4)}_${item.slice(8)}` : item
48
+ );
49
+ const benchmark = await runBenchmark('ax', [
50
+ {
51
+ name: 'ax() array',
52
+ fn: () => ax(arr),
53
+ },
54
+ {
55
+ name: 'ax() array with compressed class names',
56
+ fn: () => ax(arrWithCompressedClassNames),
57
+ },
58
+ ]);
59
+
60
+ expect(benchmark).toMatchObject({
61
+ fastest: ['ax() array'],
62
+ });
63
+ }, 30000);
42
64
  });
package/src/runtime/__tests__/ax.test.ts CHANGED
@@ -1,70 +1,81 @@
1
1
  import ax from '../ax';
2
2
 
3
3
  describe('ax', () => {
4
- it('should join single classes together', () => {
5
- const result = ax(['foo', 'bar']);
6
-
7
- expect(result).toEqual('foo bar');
8
- });
9
-
10
- it('should join multi classes together', () => {
11
- const result = ax(['foo baz', 'bar']);
12
-
13
- expect(result).toEqual('foo baz bar');
14
- });
15
-
16
- it('should remove undefined', () => {
17
- const result = ax(['foo', 'bar', undefined]);
18
-
19
- expect(result).toEqual('foo bar');
20
- });
21
-
22
- it('should ensure the last atomic declaration of a single group wins', () => {
23
- const result = ax(['_aaaabbbb', '_aaaacccc']);
24
-
25
- expect(result).toEqual('_aaaacccc');
26
- });
27
-
28
- it('should ensure the last atomic declaration of many single groups wins', () => {
29
- const result = ax(['_aaaabbbb', '_aaaacccc', '_aaaadddd', '_aaaaeeee']);
30
-
31
- expect(result).toEqual('_aaaaeeee');
32
- });
33
-
34
- it('should ensure the last atomic declaration of a multi group wins', () => {
35
- const result = ax(['_aaaabbbb _aaaacccc']);
36
-
37
- expect(result).toEqual('_aaaacccc');
38
- });
39
-
40
- it('should ensure the last atomic declaration of many multi groups wins', () => {
41
- const result = ax(['_aaaabbbb _aaaacccc _aaaadddd _aaaaeeee']);
42
-
43
- expect(result).toEqual('_aaaaeeee');
44
- });
45
-
46
- it('should not remove any atomic declarations if there are no duplicate groups', () => {
47
- const result = ax(['_aaaabbbb', '_bbbbcccc']);
48
-
49
- expect(result).toEqual('_aaaabbbb _bbbbcccc');
50
- });
51
-
52
- it('should not apply conditional class', () => {
53
- const isEnabled: boolean = (() => false)();
54
- const result = ax([isEnabled && 'foo', 'bar']);
55
-
56
- expect(result).toEqual('bar');
57
- });
58
-
59
- it('should ignore non atomic declarations', () => {
60
- const result = ax(['hello_there', 'hello_world']);
61
-
62
- expect(result).toEqual('hello_there hello_world');
63
- });
64
-
65
- it('should ignore non atomic declarations when atomic declarations exist', () => {
66
- const result = ax(['hello_there', 'hello_world', '_aaaabbbb']);
67
-
68
- expect(result).toEqual('hello_there hello_world _aaaabbbb');
4
+ const isEnabled: boolean = (() => false)();
5
+
6
+ it.each([
7
+ ['should handle empty array', [], undefined],
8
+ ['should handle array with undefined', [undefined], undefined],
9
+ ['should join single classes together', ['foo', 'bar'], 'foo bar'],
10
+ ['should join multi classes together', ['foo baz', 'bar'], 'foo baz bar'],
11
+ ['should remove undefined', ['foo', 'bar', undefined], 'foo bar'],
12
+ [
13
+ 'should ensure the last atomic declaration of a single group wins',
14
+ ['_aaaabbbb', '_aaaacccc'],
15
+ '_aaaacccc',
16
+ ],
17
+ [
18
+ 'should ensure the last atomic declaration of a single group with short class name wins',
19
+ ['_aaaabbbb', '_aaaacccc', '_aaaa_a'],
20
+ 'a',
21
+ ],
22
+ [
23
+ 'should ensure the last atomic declaration of many single groups wins',
24
+ ['_aaaabbbb', '_aaaacccc', '_aaaadddd', '_aaaaeeee'],
25
+ '_aaaaeeee',
26
+ ],
27
+ [
28
+ 'should ensure the last atomic declaration of many single groups with short class name wins',
29
+ ['_aaaabbbb', '_aaaacccc', '_aaaa_a', '_aaaa_b'],
30
+ 'b',
31
+ ],
32
+ [
33
+ 'should ensure the last atomic declaration of a multi group wins',
34
+ ['_aaaabbbb _aaaacccc'],
35
+ '_aaaacccc',
36
+ ],
37
+ [
38
+ 'should ensure the last atomic declaration of a multi group with short class name wins',
39
+ ['_aaaa_e', '_aaaabbbb _aaaacccc'],
40
+ '_aaaacccc',
41
+ ],
42
+ [
43
+ 'should ensure the last atomic declaration of many multi groups wins',
44
+ ['_aaaabbbb _aaaacccc _aaaadddd _aaaaeeee'],
45
+ '_aaaaeeee',
46
+ ],
47
+ [
48
+ 'should ensure the last atomic declaration of many multi groups with short class name wins',
49
+ ['_aaaabbbb', '_aaaa_a', '_bbbb_b', '_ddddcccc'],
50
+ 'a b _ddddcccc',
51
+ ],
52
+ [
53
+ 'should not remove any atomic declarations if there are no duplicate groups',
54
+ ['_aaaabbbb', '_bbbbcccc'],
55
+ '_aaaabbbb _bbbbcccc',
56
+ ],
57
+ [
58
+ 'should not remove any atomic declarations if there are short class name and no duplicate groups',
59
+ ['_eeee_e', '_aaaabbbb', '_bbbbcccc'],
60
+ 'e _aaaabbbb _bbbbcccc',
61
+ ],
62
+ ['should not apply conditional class', [isEnabled && 'foo', 'bar'], 'bar'],
63
+ [
64
+ 'should ignore non atomic declarations',
65
+ ['hello_there', 'hello_world'],
66
+ 'hello_there hello_world',
67
+ ],
68
+ [
69
+ 'should ignore non atomic declarations when atomic declarations exist',
70
+ ['hello_there', 'hello_world', '_aaaabbbb'],
71
+ 'hello_there hello_world _aaaabbbb',
72
+ ],
73
+ [
74
+ 'should ignore non atomic declarations when atomic declarations with short class name exist',
75
+ ['hello_there', 'hello_world', '_aaaa_a'],
76
+ 'hello_there hello_world a',
77
+ ],
78
+ ])('%s', (_, params, result) => {
79
+ expect(result).toEqual(ax(params));
69
80
  });
70
81
  });
package/src/runtime/__tests__/style-ssr.test.tsx CHANGED
@@ -48,7 +48,7 @@ describe('<Style />', () => {
48
48
  );
49
49
 
50
50
  expect(result.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
51
- "<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>
51
+ "<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>
52
52
  "
53
53
  `);
54
54
  });
package/src/runtime/ax.ts CHANGED
@@ -28,10 +28,8 @@ const ATOMIC_GROUP_LENGTH = 5;
28
28
  * @param classes
29
29
  */
30
30
  export default function ax(classNames: (string | undefined | false)[]): string | undefined {
31
- if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
32
- // short circuit if there's no custom class names.
33
- return classNames[0] || undefined;
34
- }
31
+ // short circuit if there's no class names.
32
+ if (classNames.length <= 1 && !classNames[0]) return undefined;
35
33
 
36
34
  const atomicGroups: Record<string, string> = {};
37
35
 
@@ -45,11 +43,11 @@ export default function ax(classNames: (string | undefined | false)[]): string |
45
43
 
46
44
  for (let x = 0; x < groups.length; x++) {
47
45
  const atomic = groups[x];
48
- const atomicGroupName = atomic.slice(
49
- 0,
50
- atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined
51
- );
52
- atomicGroups[atomicGroupName] = atomic;
46
+ const isAtomic = atomic.charCodeAt(0) === UNDERSCORE_UNICODE;
47
+ const isCompressed = isAtomic && atomic.charCodeAt(5) === UNDERSCORE_UNICODE;
48
+
49
+ const atomicGroupName = isAtomic ? atomic.slice(0, ATOMIC_GROUP_LENGTH) : atomic;
50
+ atomicGroups[atomicGroupName] = isCompressed ? atomic.slice(ATOMIC_GROUP_LENGTH + 1) : atomic;
53
51
  }
54
52
  }
55
53