@compiled/react 0.11.3 → 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.
- package/dist/browser/runtime/ax.js +7 -6
- package/dist/browser/runtime/ax.js.map +1 -1
- package/dist/browser/runtime/is-server-environment.js +4 -3
- package/dist/browser/runtime/is-server-environment.js.map +1 -1
- package/dist/cjs/runtime/ax.js +7 -6
- package/dist/cjs/runtime/ax.js.map +1 -1
- package/dist/cjs/runtime/is-server-environment.js +4 -3
- package/dist/cjs/runtime/is-server-environment.js.map +1 -1
- package/dist/esm/runtime/ax.js +7 -6
- package/dist/esm/runtime/ax.js.map +1 -1
- package/dist/esm/runtime/is-server-environment.js +4 -3
- package/dist/esm/runtime/is-server-environment.js.map +1 -1
- package/package.json +2 -2
- package/src/__tests__/browser.test.tsx +9 -9
- package/src/__tests__/ssr.test.tsx +7 -7
- package/src/runtime/__perf__/ax.test.ts +39 -17
- package/src/runtime/__tests__/ax.test.ts +76 -65
- package/src/runtime/__tests__/style-ssr.test.tsx +1 -1
- package/src/runtime/ax.ts +7 -9
- package/src/runtime/is-server-environment.ts +6 -3
|
@@ -26,10 +26,9 @@ var ATOMIC_GROUP_LENGTH = 5;
|
|
|
26
26
|
* @param classes
|
|
27
27
|
*/
|
|
28
28
|
export default function ax(classNames) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
return
|
|
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
|
|
43
|
-
|
|
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 = '';
|
|
@@ -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,
|
|
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"}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
*/
|
|
5
5
|
var isJsDomEnvironment = function () {
|
|
6
6
|
return window.name === 'nodejs' ||
|
|
7
|
-
navigator.userAgent.includes('Node.js') ||
|
|
8
|
-
navigator.userAgent.includes('jsdom');
|
|
7
|
+
(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent.includes('Node.js')) ||
|
|
8
|
+
(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent.includes('jsdom'));
|
|
9
9
|
};
|
|
10
10
|
/**
|
|
11
11
|
* Returns `true` when inside a node environment,
|
|
@@ -20,7 +20,8 @@ var isJsDomEnvironment = function () {
|
|
|
20
20
|
* ```
|
|
21
21
|
*/
|
|
22
22
|
export var isServerEnvironment = function () {
|
|
23
|
-
if (typeof
|
|
23
|
+
if (typeof window === 'undefined' ||
|
|
24
|
+
(typeof process !== 'undefined' && process.versions != null && process.versions.node != null)) {
|
|
24
25
|
return true;
|
|
25
26
|
}
|
|
26
27
|
if (isJsDomEnvironment()) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-server-environment.js","sourceRoot":"","sources":["../../../src/runtime/is-server-environment.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,IAAM,kBAAkB,GAAG;IACzB,OAAA,MAAM,CAAC,IAAI,KAAK,QAAQ;
|
|
1
|
+
{"version":3,"file":"is-server-environment.js","sourceRoot":"","sources":["../../../src/runtime/is-server-environment.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,IAAM,kBAAkB,GAAG;IACzB,OAAA,MAAM,CAAC,IAAI,KAAK,QAAQ;SACxB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;SACxC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;AAFtC,CAEsC,CAAC;AACzC;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,IACE,OAAO,MAAM,KAAK,WAAW;QAC7B,CAAC,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,QAAQ,IAAI,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,EAC7F;QACA,OAAO,IAAI,CAAC;KACb;IACD,IAAI,kBAAkB,EAAE,EAAE;QACxB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;AACf,CAAC,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
|
-
|
|
32
|
-
|
|
33
|
-
return
|
|
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
|
|
45
|
-
|
|
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 = '';
|
|
@@ -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,
|
|
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"}
|
|
@@ -7,8 +7,8 @@ exports.isServerEnvironment = void 0;
|
|
|
7
7
|
*/
|
|
8
8
|
var isJsDomEnvironment = function () {
|
|
9
9
|
return window.name === 'nodejs' ||
|
|
10
|
-
navigator.userAgent.includes('Node.js') ||
|
|
11
|
-
navigator.userAgent.includes('jsdom');
|
|
10
|
+
(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent.includes('Node.js')) ||
|
|
11
|
+
(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent.includes('jsdom'));
|
|
12
12
|
};
|
|
13
13
|
/**
|
|
14
14
|
* Returns `true` when inside a node environment,
|
|
@@ -23,7 +23,8 @@ var isJsDomEnvironment = function () {
|
|
|
23
23
|
* ```
|
|
24
24
|
*/
|
|
25
25
|
var isServerEnvironment = function () {
|
|
26
|
-
if (typeof
|
|
26
|
+
if (typeof window === 'undefined' ||
|
|
27
|
+
(typeof process !== 'undefined' && process.versions != null && process.versions.node != null)) {
|
|
27
28
|
return true;
|
|
28
29
|
}
|
|
29
30
|
if (isJsDomEnvironment()) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-server-environment.js","sourceRoot":"","sources":["../../../src/runtime/is-server-environment.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,IAAM,kBAAkB,GAAG;IACzB,OAAA,MAAM,CAAC,IAAI,KAAK,QAAQ;
|
|
1
|
+
{"version":3,"file":"is-server-environment.js","sourceRoot":"","sources":["../../../src/runtime/is-server-environment.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,IAAM,kBAAkB,GAAG;IACzB,OAAA,MAAM,CAAC,IAAI,KAAK,QAAQ;SACxB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;SACxC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;AAFtC,CAEsC,CAAC;AACzC;;;;;;;;;;;GAWG;AACI,IAAM,mBAAmB,GAAG;IACjC,IACE,OAAO,MAAM,KAAK,WAAW;QAC7B,CAAC,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,QAAQ,IAAI,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,EAC7F;QACA,OAAO,IAAI,CAAC;KACb;IACD,IAAI,kBAAkB,EAAE,EAAE;QACxB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAXW,QAAA,mBAAmB,uBAW9B"}
|
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
|
-
|
|
30
|
-
|
|
31
|
-
return
|
|
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
|
|
43
|
-
|
|
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 = '';
|
|
@@ -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,
|
|
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"}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
*/
|
|
5
5
|
var isJsDomEnvironment = function () {
|
|
6
6
|
return window.name === 'nodejs' ||
|
|
7
|
-
navigator.userAgent.includes('Node.js') ||
|
|
8
|
-
navigator.userAgent.includes('jsdom');
|
|
7
|
+
(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent.includes('Node.js')) ||
|
|
8
|
+
(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent.includes('jsdom'));
|
|
9
9
|
};
|
|
10
10
|
/**
|
|
11
11
|
* Returns `true` when inside a node environment,
|
|
@@ -20,7 +20,8 @@ var isJsDomEnvironment = function () {
|
|
|
20
20
|
* ```
|
|
21
21
|
*/
|
|
22
22
|
export var isServerEnvironment = function () {
|
|
23
|
-
if (typeof
|
|
23
|
+
if (typeof window === 'undefined' ||
|
|
24
|
+
(typeof process !== 'undefined' && process.versions != null && process.versions.node != null)) {
|
|
24
25
|
return true;
|
|
25
26
|
}
|
|
26
27
|
if (isJsDomEnvironment()) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-server-environment.js","sourceRoot":"","sources":["../../../src/runtime/is-server-environment.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,IAAM,kBAAkB,GAAG;IACzB,OAAA,MAAM,CAAC,IAAI,KAAK,QAAQ;
|
|
1
|
+
{"version":3,"file":"is-server-environment.js","sourceRoot":"","sources":["../../../src/runtime/is-server-environment.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,IAAM,kBAAkB,GAAG;IACzB,OAAA,MAAM,CAAC,IAAI,KAAK,QAAQ;SACxB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;SACxC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;AAFtC,CAEsC,CAAC;AACzC;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,IACE,OAAO,MAAM,KAAK,WAAW;QAC7B,CAAC,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,QAAQ,IAAI,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,EAC7F;QACA,OAAO,IAAI,CAAC;KACb;IACD,IAAI,kBAAkB,EAAE,EAAE;QACxB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@compiled/react",
|
|
3
|
-
"version": "0.
|
|
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
|
|
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",
|
|
@@ -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
|
|
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
|
|
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
|
|
98
|
-
<style nonce
|
|
99
|
-
<style nonce
|
|
100
|
-
<style nonce
|
|
101
|
-
<style nonce
|
|
102
|
-
<style nonce
|
|
103
|
-
<style nonce
|
|
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
|
});
|
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
139
|
-
<a href
|
|
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
|
|
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
|
});
|
|
@@ -3,24 +3,26 @@ import { runBenchmark } from '@compiled/benchmark';
|
|
|
3
3
|
import { ax } from '../index';
|
|
4
4
|
|
|
5
5
|
describe('ax benchmark', () => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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
|
});
|
|
@@ -1,70 +1,81 @@
|
|
|
1
1
|
import ax from '../ax';
|
|
2
2
|
|
|
3
3
|
describe('ax', () => {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
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
|
});
|
|
@@ -48,7 +48,7 @@ describe('<Style />', () => {
|
|
|
48
48
|
);
|
|
49
49
|
|
|
50
50
|
expect(result.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
|
|
51
|
-
"<style data-cmpld
|
|
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
|
-
|
|
32
|
-
|
|
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
|
|
49
|
-
|
|
50
|
-
|
|
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
|
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
*/
|
|
5
5
|
const isJsDomEnvironment = () =>
|
|
6
6
|
window.name === 'nodejs' ||
|
|
7
|
-
navigator
|
|
8
|
-
navigator
|
|
7
|
+
navigator?.userAgent.includes('Node.js') ||
|
|
8
|
+
navigator?.userAgent.includes('jsdom');
|
|
9
9
|
/**
|
|
10
10
|
* Returns `true` when inside a node environment,
|
|
11
11
|
* else `false`.
|
|
@@ -19,7 +19,10 @@ const isJsDomEnvironment = () =>
|
|
|
19
19
|
* ```
|
|
20
20
|
*/
|
|
21
21
|
export const isServerEnvironment = (): boolean => {
|
|
22
|
-
if (
|
|
22
|
+
if (
|
|
23
|
+
typeof window === 'undefined' ||
|
|
24
|
+
(typeof process !== 'undefined' && process.versions != null && process.versions.node != null)
|
|
25
|
+
) {
|
|
23
26
|
return true;
|
|
24
27
|
}
|
|
25
28
|
if (isJsDomEnvironment()) {
|