@stylix/core 3.1.3 → 4.0.1

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 (88) hide show
  1. package/dist/index.js +853 -28
  2. package/dist/index.js.map +1 -1
  3. package/dist/module.mjs +828 -0
  4. package/dist/module.mjs.map +1 -0
  5. package/dist/types.d.ts +163 -27
  6. package/dist/types.d.ts.map +1 -0
  7. package/package.json +19 -31
  8. package/dist/Stylix.d.ts +0 -3
  9. package/dist/Stylix.js +0 -66
  10. package/dist/Stylix.js.map +0 -1
  11. package/dist/StylixProvider.d.ts +0 -52
  12. package/dist/StylixProvider.js +0 -143
  13. package/dist/StylixProvider.js.map +0 -1
  14. package/dist/applyRules.d.ts +0 -5
  15. package/dist/applyRules.js +0 -31
  16. package/dist/applyRules.js.map +0 -1
  17. package/dist/classifyProps.d.ts +0 -7
  18. package/dist/classifyProps.js +0 -35
  19. package/dist/classifyProps.js.map +0 -1
  20. package/dist/css-props.json +0 -413
  21. package/dist/html-tags.json +0 -119
  22. package/dist/index.d.ts +0 -8
  23. package/dist/plugins/cleanStyles.d.ts +0 -5
  24. package/dist/plugins/cleanStyles.js +0 -28
  25. package/dist/plugins/cleanStyles.js.map +0 -1
  26. package/dist/plugins/customProps.d.ts +0 -2
  27. package/dist/plugins/customProps.js +0 -61
  28. package/dist/plugins/customProps.js.map +0 -1
  29. package/dist/plugins/defaultUnits.d.ts +0 -7
  30. package/dist/plugins/defaultUnits.js +0 -41
  31. package/dist/plugins/defaultUnits.js.map +0 -1
  32. package/dist/plugins/flattenNestedStyles.d.ts +0 -5
  33. package/dist/plugins/flattenNestedStyles.js +0 -47
  34. package/dist/plugins/flattenNestedStyles.js.map +0 -1
  35. package/dist/plugins/index.d.ts +0 -30
  36. package/dist/plugins/index.js +0 -44
  37. package/dist/plugins/index.js.map +0 -1
  38. package/dist/plugins/mediaArrays.d.ts +0 -5
  39. package/dist/plugins/mediaArrays.js +0 -56
  40. package/dist/plugins/mediaArrays.js.map +0 -1
  41. package/dist/plugins/merge$css.d.ts +0 -6
  42. package/dist/plugins/merge$css.js +0 -45
  43. package/dist/plugins/merge$css.js.map +0 -1
  44. package/dist/plugins/propCasing.d.ts +0 -5
  45. package/dist/plugins/propCasing.js +0 -21
  46. package/dist/plugins/propCasing.js.map +0 -1
  47. package/dist/plugins/replace$$class.d.ts +0 -5
  48. package/dist/plugins/replace$$class.js +0 -20
  49. package/dist/plugins/replace$$class.js.map +0 -1
  50. package/dist/plugins/themeFunctions.d.ts +0 -5
  51. package/dist/plugins/themeFunctions.js +0 -20
  52. package/dist/plugins/themeFunctions.js.map +0 -1
  53. package/dist/styleCollector.d.ts +0 -8
  54. package/dist/styleCollector.js +0 -40
  55. package/dist/styleCollector.js.map +0 -1
  56. package/dist/stylesToRuleArray.d.ts +0 -5
  57. package/dist/stylesToRuleArray.js +0 -41
  58. package/dist/stylesToRuleArray.js.map +0 -1
  59. package/dist/types.js +0 -3
  60. package/dist/types.js.map +0 -1
  61. package/dist/useStyles.d.ts +0 -16
  62. package/dist/useStyles.js +0 -115
  63. package/dist/useStyles.js.map +0 -1
  64. package/dist/util/cloneDeep.d.ts +0 -4
  65. package/dist/util/cloneDeep.js +0 -28
  66. package/dist/util/cloneDeep.js.map +0 -1
  67. package/dist/util/flatten.d.ts +0 -4
  68. package/dist/util/flatten.js +0 -19
  69. package/dist/util/flatten.js.map +0 -1
  70. package/dist/util/hashString.d.ts +0 -4
  71. package/dist/util/hashString.js +0 -15
  72. package/dist/util/hashString.js.map +0 -1
  73. package/dist/util/isPlainObject.d.ts +0 -4
  74. package/dist/util/isPlainObject.js +0 -11
  75. package/dist/util/isPlainObject.js.map +0 -1
  76. package/dist/util/mapObjectRecursive.d.ts +0 -8
  77. package/dist/util/mapObjectRecursive.js +0 -37
  78. package/dist/util/mapObjectRecursive.js.map +0 -1
  79. package/dist/util/merge.d.ts +0 -5
  80. package/dist/util/merge.js +0 -31
  81. package/dist/util/merge.js.map +0 -1
  82. package/dist/util/useIsoLayoutEffect.d.ts +0 -2
  83. package/dist/util/useIsoLayoutEffect.js +0 -8
  84. package/dist/util/useIsoLayoutEffect.js.map +0 -1
  85. package/dist/util/walkRecursive.d.ts +0 -8
  86. package/dist/util/walkRecursive.js +0 -26
  87. package/dist/util/walkRecursive.js.map +0 -1
  88. package/exports.mjs +0 -8
@@ -1 +0,0 @@
1
- {"version":3,"file":"defaultUnits.js","sourceRoot":"","sources":["../../src/plugins/defaultUnits.ts"],"names":[],"mappings":";;;AAAA,mEAAgE;AAGnD,QAAA,kBAAkB,GAAG;IAChC,SAAS;IACT,cAAc;IACd,cAAc;IACd,MAAM;IACN,WAAW;IACX,aAAa;IACb,aAAa;IACb,aAAa;IACb,SAAS;IACT,SAAS;IACT,gBAAgB;IAChB,QAAQ;IACR,SAAS;IACT,MAAM;IACN,OAAO;CACR,CAAC;AAEF;;GAEG;AACI,MAAM,YAAY,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,WAAW,GAAG,0BAAkB,EAAgB,EAAE;IAC1F,OAAO;QACL,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,eAAe;QACrB,MAAM,CAAC,GAAG,EAAE,MAAW;YACrB,OAAO,IAAA,uCAAkB,EAAC,MAAM,EAAE,eAAe,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;QAC5E,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,YAAY,gBAQvB;AAEF,MAAM,eAAe,GAAG,CAAC,GAAoB,EAAE,KAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE;IACxE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAa,CAAC,EAAE;QACzE,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC;KAC5C;AACH,CAAC,CAAC;AAEW,QAAA,iBAAiB,GAAG,IAAA,oBAAY,GAAE,CAAC"}
@@ -1,5 +0,0 @@
1
- import { StylixPlugin } from './index';
2
- /**
3
- * Flattens nested style objects that use `&` to reference parent class.
4
- */
5
- export declare const flattenNestedStyles: StylixPlugin;
@@ -1,47 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.flattenNestedStyles = void 0;
4
- const isPlainObject_1 = require("../util/isPlainObject");
5
- function flatten(styles, parent, selector, root, mediaRoot) {
6
- for (let key in styles) {
7
- const value = styles[key];
8
- if (key.startsWith('@media')) {
9
- // Flatten media queries, but nest them under the root object
10
- root[key] = root[key] || {};
11
- flatten(value, root[key], selector, root, root[key]);
12
- }
13
- else if (key.startsWith('@keyframes')) {
14
- // Add keyframe rules as-is directly to mediaRoot object
15
- mediaRoot[key] = value;
16
- }
17
- else if ((0, isPlainObject_1.isPlainObject)(styles[key])) {
18
- // Concatenate or replace & in selectors and then continue flattening styles
19
- if (key.includes('&')) {
20
- key = key.replace(/&/g, selector);
21
- }
22
- else {
23
- key = (selector + ' ' + key).trim();
24
- }
25
- parent[key] = parent[key] || {};
26
- flatten(value, parent, key, root, mediaRoot);
27
- }
28
- else {
29
- // Selector is just a css property
30
- parent[selector] = parent[selector] || {};
31
- parent[selector][key] = styles[key];
32
- }
33
- }
34
- }
35
- /**
36
- * Flattens nested style objects that use `&` to reference parent class.
37
- */
38
- exports.flattenNestedStyles = {
39
- name: 'flattenNestedStyles',
40
- type: 'processStyles',
41
- plugin(ctx, styles) {
42
- const flattened = {};
43
- flatten(styles, flattened, '', flattened, flattened);
44
- return flattened;
45
- },
46
- };
47
- //# sourceMappingURL=flattenNestedStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"flattenNestedStyles.js","sourceRoot":"","sources":["../../src/plugins/flattenNestedStyles.ts"],"names":[],"mappings":";;;AAAA,yDAAsD;AAGtD,SAAS,OAAO,CAAC,MAAW,EAAE,MAAW,EAAE,QAAgB,EAAE,IAAS,EAAE,SAAc;IACpF,KAAK,IAAI,GAAG,IAAI,MAAM,EAAE;QACtB,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,IAAI,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YAC5B,6DAA6D;YAC7D,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;YAC5B,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;SACtD;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE;YACvC,wDAAwD;YACxD,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;SACxB;aAAM,IAAI,IAAA,6BAAa,EAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE;YACrC,4EAA4E;YAC5E,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;aACnC;iBAAM;gBACL,GAAG,GAAG,CAAC,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;aACrC;YACD,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;YAChC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;SAC9C;aAAM;YACL,kCAAkC;YAClC,MAAM,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YAC1C,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;SACrC;KACF;AACH,CAAC;AAED;;GAEG;AACU,QAAA,mBAAmB,GAAiB;IAC/C,IAAI,EAAE,qBAAqB;IAC3B,IAAI,EAAE,eAAe;IACrB,MAAM,CAAC,GAAgC,EAAE,MAAW;QAClD,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,OAAO,SAAS,CAAC;IACnB,CAAC;CACF,CAAC"}
@@ -1,30 +0,0 @@
1
- import { StylixContext, StylixPublicContext } from '../StylixProvider';
2
- /**
3
- * Stylix plugin function context object
4
- */
5
- export type StylixPluginFunctionContext = StylixPublicContext & {
6
- hash: string;
7
- };
8
- /**
9
- * Stylix plugin interface
10
- */
11
- export interface StylixPlugin {
12
- name: string;
13
- type: 'initialize' | 'processStyles' | 'preprocessStyles';
14
- plugin(ctx: StylixPluginFunctionContext, styles: any): any;
15
- before?: StylixPlugin;
16
- after?: StylixPlugin;
17
- atIndex?: number;
18
- }
19
- export declare function applyPlugins(type: StylixPlugin['type'], styles: any, hash: string, context: StylixContext): any;
20
- export { customProps } from './customProps';
21
- export declare const defaultPlugins: {
22
- themeFunctions: StylixPlugin;
23
- merge$css: StylixPlugin;
24
- mediaArrays: StylixPlugin;
25
- propCasing: StylixPlugin;
26
- flattenNestedStyles: StylixPlugin;
27
- replace$$class: StylixPlugin;
28
- defaultPixelUnits: StylixPlugin;
29
- cleanStyles: StylixPlugin;
30
- };
@@ -1,44 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.defaultPlugins = exports.customProps = exports.applyPlugins = void 0;
4
- const cleanStyles_1 = require("./cleanStyles");
5
- const defaultUnits_1 = require("./defaultUnits");
6
- const flattenNestedStyles_1 = require("./flattenNestedStyles");
7
- const mediaArrays_1 = require("./mediaArrays");
8
- const merge_css_1 = require("./merge$css");
9
- const propCasing_1 = require("./propCasing");
10
- const replace__class_1 = require("./replace$$class");
11
- const themeFunctions_1 = require("./themeFunctions");
12
- function applyPlugins(type, styles, hash, context) {
13
- const pluginContext = {
14
- id: context.id,
15
- devMode: context.devMode,
16
- theme: context.theme,
17
- media: context.media,
18
- stylesheet: context.stylesheet,
19
- styleElement: context.styleElement,
20
- styleProps: context.styleProps,
21
- hash,
22
- };
23
- let processedStyles = styles;
24
- for (const i in context.plugins) {
25
- const plugin = context.plugins[i];
26
- if (plugin.type === type)
27
- processedStyles = plugin.plugin(pluginContext, processedStyles);
28
- }
29
- return processedStyles;
30
- }
31
- exports.applyPlugins = applyPlugins;
32
- var customProps_1 = require("./customProps");
33
- Object.defineProperty(exports, "customProps", { enumerable: true, get: function () { return customProps_1.customProps; } });
34
- exports.defaultPlugins = {
35
- themeFunctions: themeFunctions_1.themeFunctions,
36
- merge$css: merge_css_1.merge$css,
37
- mediaArrays: mediaArrays_1.mediaArrays,
38
- propCasing: propCasing_1.propCasing,
39
- flattenNestedStyles: flattenNestedStyles_1.flattenNestedStyles,
40
- replace$$class: replace__class_1.replace$$class,
41
- defaultPixelUnits: defaultUnits_1.defaultPixelUnits,
42
- cleanStyles: cleanStyles_1.cleanStyles,
43
- };
44
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/plugins/index.ts"],"names":[],"mappings":";;;AACA,+CAA4C;AAC5C,iDAAmD;AACnD,+DAA4D;AAC5D,+CAA4C;AAC5C,2CAAwC;AACxC,6CAA0C;AAC1C,qDAAkD;AAClD,qDAAkD;AAmBlD,SAAgB,YAAY,CAC1B,IAA0B,EAC1B,MAAW,EACX,IAAY,EACZ,OAAsB;IAEtB,MAAM,aAAa,GAAG;QACpB,EAAE,EAAE,OAAO,CAAC,EAAE;QACd,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,YAAY,EAAE,OAAO,CAAC,YAAY;QAClC,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,IAAI;KACL,CAAC;IAEF,IAAI,eAAe,GAAG,MAAM,CAAC;IAC7B,KAAK,MAAM,CAAC,IAAI,OAAO,CAAC,OAAO,EAAE;QAC/B,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAClC,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI;YAAE,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;KAC3F;IACD,OAAO,eAAe,CAAC;AACzB,CAAC;AAvBD,oCAuBC;AAED,6CAA4C;AAAnC,0GAAA,WAAW,OAAA;AAEP,QAAA,cAAc,GAAG;IAC5B,cAAc,EAAd,+BAAc;IACd,SAAS,EAAT,qBAAS;IACT,WAAW,EAAX,yBAAW;IACX,UAAU,EAAV,uBAAU;IACV,mBAAmB,EAAnB,yCAAmB;IACnB,cAAc,EAAd,+BAAc;IACd,iBAAiB,EAAjB,gCAAiB;IACjB,WAAW,EAAX,yBAAW;CACZ,CAAC"}
@@ -1,5 +0,0 @@
1
- import { StylixPlugin } from './index';
2
- /**
3
- * Expands arrays as media queries.
4
- */
5
- export declare const mediaArrays: StylixPlugin;
@@ -1,56 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.mediaArrays = void 0;
4
- const isPlainObject_1 = require("../util/isPlainObject");
5
- const mapObjectRecursive_1 = require("../util/mapObjectRecursive");
6
- /**
7
- * Expands arrays as media queries.
8
- */
9
- exports.mediaArrays = {
10
- name: 'mediaArrays',
11
- type: 'processStyles',
12
- plugin(ctx, styles) {
13
- // Fill out ditto values
14
- styles = (0, mapObjectRecursive_1.mapObjectRecursive)(styles, mapDittoValues);
15
- const mediaStyles = {};
16
- let nonMediaStyles = styles;
17
- for (const i in ctx.media) {
18
- const mediaQuery = ctx.media[i];
19
- if (!mediaQuery) {
20
- nonMediaStyles = (0, mapObjectRecursive_1.mapObjectRecursive)(styles, mapNonMedia, { i });
21
- }
22
- else {
23
- mediaStyles[`@media ${mediaQuery}`] = (0, mapObjectRecursive_1.mapObjectRecursive)(styles, mapMediaStyles, { i });
24
- }
25
- }
26
- return Object.assign(Object.assign({}, nonMediaStyles), mediaStyles);
27
- },
28
- };
29
- function mapDittoValues(key, value) {
30
- if (Array.isArray(value)) {
31
- for (const i in value) {
32
- const v = value[i];
33
- if (v === '@')
34
- value[i] = value[+i - 1];
35
- }
36
- return { [key]: value };
37
- }
38
- }
39
- function mapNonMedia(key, value, object, context) {
40
- if (Array.isArray(value)) {
41
- return { [key]: value[context.i] };
42
- }
43
- }
44
- function mapMediaStyles(key, value, object, context) {
45
- if (key.startsWith('@keyframes'))
46
- context.keyframes = true;
47
- if (Array.isArray(value)) {
48
- return { [key]: value[context.i] };
49
- }
50
- if ((0, isPlainObject_1.isPlainObject)(value) || context.keyframes) {
51
- return;
52
- }
53
- // delete key/value pair if primitive
54
- return { [key]: undefined };
55
- }
56
- //# sourceMappingURL=mediaArrays.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"mediaArrays.js","sourceRoot":"","sources":["../../src/plugins/mediaArrays.ts"],"names":[],"mappings":";;;AAAA,yDAAsD;AACtD,mEAAgE;AAGhE;;GAEG;AACU,QAAA,WAAW,GAAiB;IACvC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,eAAe;IACrB,MAAM,CAAC,GAAgC,EAAE,MAAW;QAClD,wBAAwB;QACxB,MAAM,GAAG,IAAA,uCAAkB,EAAC,MAAM,EAAE,cAAc,CAAC,CAAC;QACpD,MAAM,WAAW,GAAG,EAAE,CAAC;QACvB,IAAI,cAAc,GAAG,MAAM,CAAC;QAC5B,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,KAAK,EAAE;YACzB,MAAM,UAAU,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAChC,IAAI,CAAC,UAAU,EAAE;gBACf,cAAc,GAAG,IAAA,uCAAkB,EAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;aACjE;iBAAM;gBACL,WAAW,CAAC,UAAU,UAAU,EAAE,CAAC,GAAG,IAAA,uCAAkB,EAAC,MAAM,EAAE,cAAc,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;aACzF;SACF;QACD,uCAAY,cAAc,GAAK,WAAW,EAAG;IAC/C,CAAC;CACF,CAAC;AAEF,SAAS,cAAc,CAAC,GAAG,EAAE,KAAK;IAChC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE;YACrB,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACnB,IAAI,CAAC,KAAK,GAAG;gBAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;SACzC;QACD,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;KACzB;AACH,CAAC;AAED,SAAS,WAAW,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO;IAC9C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;KACpC;AACH,CAAC;AAED,SAAS,cAAc,CAAC,GAAW,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO;IACzD,IAAI,GAAG,CAAC,UAAU,CAAC,YAAY,CAAC;QAAE,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IAC3D,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;KACpC;IACD,IAAI,IAAA,6BAAa,EAAC,KAAK,CAAC,IAAI,OAAO,CAAC,SAAS,EAAE;QAC7C,OAAO;KACR;IACD,qCAAqC;IACrC,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC;AAC9B,CAAC"}
@@ -1,6 +0,0 @@
1
- import { StylixPlugin } from './index';
2
- /**
3
- * Merges $css property into parent styles
4
- */
5
- export declare const merge$css: StylixPlugin;
6
- export declare function _merge$css(obj: any, ctx: any): void;
@@ -1,45 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports._merge$css = exports.merge$css = void 0;
4
- const flatten_1 = require("../util/flatten");
5
- const isPlainObject_1 = require("../util/isPlainObject");
6
- /**
7
- * Merges $css property into parent styles
8
- */
9
- exports.merge$css = {
10
- name: 'merge$css',
11
- type: 'processStyles',
12
- plugin(ctx, styles) {
13
- const result = {};
14
- _merge$css(styles, result);
15
- return result;
16
- },
17
- };
18
- function _merge$css(obj, ctx) {
19
- if (!(0, isPlainObject_1.isPlainObject)(obj))
20
- return;
21
- for (const key in obj) {
22
- if (key === '$css') {
23
- const $css = obj[key];
24
- if (Array.isArray($css)) {
25
- const flat$css = (0, flatten_1.flatten)($css);
26
- for (const val of flat$css) {
27
- _merge$css(val, ctx);
28
- }
29
- }
30
- else {
31
- _merge$css($css, ctx);
32
- }
33
- }
34
- else {
35
- let value = obj[key];
36
- if ((0, isPlainObject_1.isPlainObject)(value)) {
37
- value = ctx[key] || {};
38
- _merge$css(obj[key], value);
39
- }
40
- ctx[key] = value;
41
- }
42
- }
43
- }
44
- exports._merge$css = _merge$css;
45
- //# sourceMappingURL=merge$css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"merge$css.js","sourceRoot":"","sources":["../../src/plugins/merge$css.ts"],"names":[],"mappings":";;;AAAA,6CAA0C;AAC1C,yDAAsD;AAGtD;;GAEG;AACU,QAAA,SAAS,GAAiB;IACrC,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,eAAe;IACrB,MAAM,CAAC,GAAgC,EAAE,MAAW;QAClD,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC3B,OAAO,MAAM,CAAC;IAChB,CAAC;CACF,CAAC;AAEF,SAAgB,UAAU,CAAC,GAAQ,EAAE,GAAQ;IAC3C,IAAI,CAAC,IAAA,6BAAa,EAAC,GAAG,CAAC;QAAE,OAAO;IAChC,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,IAAI,GAAG,KAAK,MAAM,EAAE;YAClB,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;YACtB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACvB,MAAM,QAAQ,GAAG,IAAA,iBAAO,EAAC,IAAI,CAAC,CAAC;gBAC/B,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE;oBAC1B,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;iBACtB;aACF;iBAAM;gBACL,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;aACvB;SACF;aAAM;YACL,IAAI,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;YACrB,IAAI,IAAA,6BAAa,EAAC,KAAK,CAAC,EAAE;gBACxB,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;gBACvB,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;aAC7B;YACD,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;SAClB;KACF;AACH,CAAC;AAtBD,gCAsBC"}
@@ -1,5 +0,0 @@
1
- import { StylixPlugin } from './index';
2
- /**
3
- * Fixes casing and hyphenation on known style props
4
- */
5
- export declare const propCasing: StylixPlugin;
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.propCasing = void 0;
4
- const classifyProps_1 = require("../classifyProps");
5
- const mapObjectRecursive_1 = require("../util/mapObjectRecursive");
6
- /**
7
- * Fixes casing and hyphenation on known style props
8
- */
9
- exports.propCasing = {
10
- name: 'normalizeStyleProps',
11
- type: 'processStyles',
12
- plugin(ctx, styles) {
13
- return (0, mapObjectRecursive_1.mapObjectRecursive)(styles, propCasingMap, { ctx });
14
- },
15
- };
16
- function propCasingMap(key, value, object, context) {
17
- if (typeof key === 'string' && context.ctx.styleProps[(0, classifyProps_1.simplifyStylePropName)(key)]) {
18
- return { [context.ctx.styleProps[(0, classifyProps_1.simplifyStylePropName)(key)]]: value };
19
- }
20
- }
21
- //# sourceMappingURL=propCasing.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"propCasing.js","sourceRoot":"","sources":["../../src/plugins/propCasing.ts"],"names":[],"mappings":";;;AAAA,oDAAyD;AACzD,mEAAgE;AAGhE;;GAEG;AACU,QAAA,UAAU,GAAiB;IACtC,IAAI,EAAE,qBAAqB;IAC3B,IAAI,EAAE,eAAe;IACrB,MAAM,CAAC,GAAgC,EAAE,MAAW;QAClD,OAAO,IAAA,uCAAkB,EAAC,MAAM,EAAE,aAAa,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5D,CAAC;CACF,CAAC;AAEF,SAAS,aAAa,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO;IAChD,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAA,qCAAqB,EAAC,GAAG,CAAC,CAAC,EAAE;QACjF,OAAO,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAA,qCAAqB,EAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;KACxE;AACH,CAAC"}
@@ -1,5 +0,0 @@
1
- import { StylixPlugin } from './index';
2
- /**
3
- * Replaces $$class with hash in string values
4
- */
5
- export declare const replace$$class: StylixPlugin;
@@ -1,20 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.replace$$class = void 0;
4
- const mapObjectRecursive_1 = require("../util/mapObjectRecursive");
5
- /**
6
- * Replaces $$class with hash in string values
7
- */
8
- exports.replace$$class = {
9
- name: 'replace$$class',
10
- type: 'processStyles',
11
- plugin(ctx, styles) {
12
- return (0, mapObjectRecursive_1.mapObjectRecursive)(styles, replace$$classMap, { ctx });
13
- },
14
- };
15
- function replace$$classMap(key, value, object, context) {
16
- value = typeof value === 'string' ? value.replace('$$class', context.ctx.hash) : value;
17
- key = typeof key === 'string' ? key.replace('$$class', context.ctx.hash) : key;
18
- return { [key]: value };
19
- }
20
- //# sourceMappingURL=replace$$class.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"replace$$class.js","sourceRoot":"","sources":["../../src/plugins/replace$$class.ts"],"names":[],"mappings":";;;AAAA,mEAAgE;AAGhE;;GAEG;AACU,QAAA,cAAc,GAAiB;IAC1C,IAAI,EAAE,gBAAgB;IACtB,IAAI,EAAE,eAAe;IACrB,MAAM,CAAC,GAAgC,EAAE,MAAW;QAClD,OAAO,IAAA,uCAAkB,EAAC,MAAM,EAAE,iBAAiB,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;IAChE,CAAC;CACF,CAAC;AAEF,SAAS,iBAAiB,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO;IACpD,KAAK,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACvF,GAAG,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC/E,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AAC1B,CAAC"}
@@ -1,5 +0,0 @@
1
- import { StylixPlugin } from './index';
2
- /**
3
- * Evaluates functions in style objects, providing the theme and media from the current Stylix context.
4
- */
5
- export declare const themeFunctions: StylixPlugin;
@@ -1,20 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.themeFunctions = void 0;
4
- const mapObjectRecursive_1 = require("../util/mapObjectRecursive");
5
- /**
6
- * Evaluates functions in style objects, providing the theme and media from the current Stylix context.
7
- */
8
- exports.themeFunctions = {
9
- name: 'themeFunctions',
10
- type: 'preprocessStyles',
11
- plugin(ctx, styles) {
12
- return (0, mapObjectRecursive_1.mapObjectRecursive)(styles, themeFunctionsMap, { ctx });
13
- },
14
- };
15
- function themeFunctionsMap(key, value, object, context) {
16
- if (typeof value === 'function') {
17
- return { [key]: value(context.ctx.theme, context.ctx) };
18
- }
19
- }
20
- //# sourceMappingURL=themeFunctions.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"themeFunctions.js","sourceRoot":"","sources":["../../src/plugins/themeFunctions.ts"],"names":[],"mappings":";;;AAAA,mEAAgE;AAGhE;;GAEG;AACU,QAAA,cAAc,GAAiB;IAC1C,IAAI,EAAE,gBAAgB;IACtB,IAAI,EAAE,kBAAkB;IACxB,MAAM,CAAC,GAAgC,EAAE,MAAW;QAClD,OAAO,IAAA,uCAAkB,EAAC,MAAM,EAAE,iBAAiB,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;IAChE,CAAC;CACF,CAAC;AAEF,SAAS,iBAAiB,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO;IACpD,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE;QAC/B,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;KACzD;AACH,CAAC"}
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- export interface StyleCollector {
3
- collect: (element: React.ReactElement) => React.ReactElement;
4
- render: React.FC<React.ComponentProps<'style'>>;
5
- styles: string[];
6
- }
7
- export declare const styleCollectorContext: React.Context<string[]>;
8
- export declare function createStyleCollector(): StyleCollector;
@@ -1,40 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.createStyleCollector = exports.styleCollectorContext = void 0;
27
- const react_1 = __importStar(require("react"));
28
- exports.styleCollectorContext = (0, react_1.createContext)(null);
29
- function createStyleCollector() {
30
- const styles = [];
31
- const collector = {
32
- collect: (element) => (react_1.default.createElement(exports.styleCollectorContext.Provider, { value: styles }, element)),
33
- render: (props) => (react_1.default.createElement("style", Object.assign({ type: "text/css", key: props.id || 'stylix' }, props, { dangerouslySetInnerHTML: { __html: collector.styles.join(' ') } }))),
34
- styles,
35
- };
36
- collector.render.displayName = 'StylixStyleCollectorRenderer';
37
- return collector;
38
- }
39
- exports.createStyleCollector = createStyleCollector;
40
- //# sourceMappingURL=styleCollector.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styleCollector.js","sourceRoot":"","sources":["../src/styleCollector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6C;AAQhC,QAAA,qBAAqB,GAAG,IAAA,qBAAa,EAAW,IAAI,CAAC,CAAC;AAEnE,SAAgB,oBAAoB;IAClC,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,MAAM,SAAS,GAAmB;QAChC,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CACpB,8BAAC,6BAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,IAAG,OAAO,CAAkC,CAC1F;QACD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACjB,uDACE,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,KAAK,CAAC,EAAE,IAAI,QAAQ,IACrB,KAAK,IACT,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAC/D,CACH;QACD,MAAM;KACP,CAAC;IACF,SAAS,CAAC,MAAM,CAAC,WAAW,GAAG,8BAA8B,CAAC;IAC9D,OAAO,SAAS,CAAC;AACnB,CAAC;AAlBD,oDAkBC"}
@@ -1,5 +0,0 @@
1
- import { StylixContext } from './StylixProvider';
2
- /**
3
- * Converts a Stylix CSS object to an array of rules, suitable for passing to StyleSheet#insertRule.
4
- */
5
- export default function stylesToRuleArray(styles: any, hash: string, context: StylixContext): string[];
@@ -1,41 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const plugins_1 = require("./plugins");
4
- const isPlainObject_1 = require("./util/isPlainObject");
5
- /**
6
- * Converts a Stylix CSS object to an array of rules, suitable for passing to StyleSheet#insertRule.
7
- */
8
- function stylesToRuleArray(styles, hash, context) {
9
- try {
10
- const processedStyles = (0, plugins_1.applyPlugins)('processStyles', styles, hash, context);
11
- // serialize to css rules array
12
- const serialize = function serialize(selector, styles) {
13
- const lines = [];
14
- for (const key in styles) {
15
- const value = styles[key];
16
- if ((0, isPlainObject_1.isPlainObject)(value))
17
- lines.push(serialize(key, value));
18
- else
19
- lines.push(` ${key}: ${value};`);
20
- }
21
- return `${selector} {\n${lines.join('\n')} }`;
22
- };
23
- const result = [];
24
- for (const key in processedStyles) {
25
- const value = processedStyles[key];
26
- result.push(serialize(key, value));
27
- }
28
- return result;
29
- }
30
- catch (e) {
31
- if (e.name && e.reason) {
32
- console.error(`${e.name}: ${e.reason}\n`, e.source.replace('\n', ' ').substr(Math.max(0, e.column - 20), 100) + '\n', ' '.repeat(20) + '^');
33
- }
34
- else {
35
- console.error(e);
36
- }
37
- return [];
38
- }
39
- }
40
- exports.default = stylesToRuleArray;
41
- //# sourceMappingURL=stylesToRuleArray.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"stylesToRuleArray.js","sourceRoot":"","sources":["../src/stylesToRuleArray.ts"],"names":[],"mappings":";;AAAA,uCAAyC;AAEzC,wDAAqD;AAErD;;GAEG;AACH,SAAwB,iBAAiB,CACvC,MAAW,EACX,IAAY,EACZ,OAAsB;IAEtB,IAAI;QACF,MAAM,eAAe,GAAG,IAAA,sBAAY,EAAC,eAAe,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;QAE7E,+BAA+B;QAC/B,MAAM,SAAS,GAAG,SAAS,SAAS,CAAC,QAAQ,EAAE,MAAM;YACnD,MAAM,KAAK,GAAa,EAAE,CAAC;YAC3B,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;gBACxB,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC1B,IAAI,IAAA,6BAAa,EAAC,KAAK,CAAC;oBAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;;oBACvD,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,KAAK,GAAG,CAAC,CAAC;aACxC;YACD,OAAO,GAAG,QAAQ,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;QAChD,CAAC,CAAC;QAEF,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,MAAM,GAAG,IAAI,eAAe,EAAE;YACjC,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;YACnC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;SACpC;QACD,OAAO,MAAM,CAAC;KACf;IAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,EAAE;YACtB,OAAO,CAAC,KAAK,CACX,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,MAAM,IAAI,EAC1B,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC,GAAG,IAAI,EAC1E,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,GAAG,CACrB,CAAC;SACH;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SAClB;QACD,OAAO,EAAE,CAAC;KACX;AACH,CAAC;AArCD,oCAqCC"}
package/dist/types.js DELETED
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=types.js.map
package/dist/types.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
@@ -1,16 +0,0 @@
1
- /**
2
- * Accepts a Stylix CSS object and returns a unique className based on the styles' hash.
3
- * The styles are registered with the Stylix context and will be applied to the document.
4
- * If `global` is false, provided styles will be nested within the generated classname.
5
- * Returns the className hash if enabled, or an empty string.
6
- */
7
- export declare function useStyles(styles: any, options?: {
8
- global?: boolean;
9
- disabled?: boolean;
10
- }): string;
11
- export declare function useKeyframes(keyframes: any, options?: {
12
- disabled?: boolean;
13
- }): string;
14
- export declare function useGlobalStyles(styles: any, options?: {
15
- disabled?: boolean;
16
- }): string;
package/dist/useStyles.js DELETED
@@ -1,115 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.useGlobalStyles = exports.useKeyframes = exports.useStyles = void 0;
7
- const react_1 = require("react");
8
- const applyRules_1 = __importDefault(require("./applyRules"));
9
- const plugins_1 = require("./plugins");
10
- const stylesToRuleArray_1 = __importDefault(require("./stylesToRuleArray"));
11
- const StylixProvider_1 = require("./StylixProvider");
12
- const hashString_1 = require("./util/hashString");
13
- const useIsoLayoutEffect_1 = __importDefault(require("./util/useIsoLayoutEffect"));
14
- function cleanup(ctx) {
15
- if (typeof ctx.cleanupRequest !== 'undefined')
16
- return;
17
- ctx.cleanupRequest = setTimeout(() => {
18
- let deleted = false;
19
- for (const i in ctx.rules) {
20
- const rule = ctx.rules[i];
21
- if (!rule.refs) {
22
- delete ctx.rules[rule.hash];
23
- deleted = true;
24
- }
25
- }
26
- deleted && (0, applyRules_1.default)(ctx);
27
- delete ctx.cleanupRequest;
28
- }, 100);
29
- }
30
- function compare(a, b) {
31
- if (a === b)
32
- return true;
33
- if (typeof a !== typeof b)
34
- return false;
35
- if (typeof a === 'object') {
36
- if (Array.isArray(a) && Array.isArray(b) && a.length !== b.length)
37
- return false;
38
- else if (Object.keys(a).length !== Object.keys(b).length)
39
- return false;
40
- for (const key in b) {
41
- if (!compare(a[key], b[key]))
42
- return false;
43
- }
44
- }
45
- return a === b;
46
- }
47
- /**
48
- * Accepts a Stylix CSS object and returns a unique className based on the styles' hash.
49
- * The styles are registered with the Stylix context and will be applied to the document.
50
- * If `global` is false, provided styles will be nested within the generated classname.
51
- * Returns the className hash if enabled, or an empty string.
52
- */
53
- function useStyles(styles, options = { global: false, disabled: false }) {
54
- const stylixCtx = (0, StylixProvider_1.useStylixContext)();
55
- const prevRef = (0, react_1.useRef)({ styles: {}, hash: '' });
56
- const changed = !compare(styles, prevRef.current.styles);
57
- prevRef.current.styles = styles;
58
- if (changed) {
59
- // Preprocess styles with plugins
60
- if (!options.disabled && styles)
61
- styles = (0, plugins_1.applyPlugins)('preprocessStyles', styles, null, stylixCtx);
62
- // Serialize value and generate hash
63
- const json = !options.disabled && styles && JSON.stringify(styles);
64
- prevRef.current.hash =
65
- json && json !== '{}' && json !== '[]'
66
- ? (0, hashString_1.hashString)(JSON.stringify(stylixCtx.media || []) + json)
67
- : '';
68
- }
69
- const { hash } = prevRef.current;
70
- if (hash && changed && !stylixCtx.rules[hash]) {
71
- // If not global styles, wrap original styles with classname
72
- if (!options.global)
73
- styles = { ['.' + hash]: styles };
74
- stylixCtx.rules[hash] = {
75
- hash,
76
- rules: (0, stylesToRuleArray_1.default)(styles, hash, stylixCtx),
77
- refs: 1,
78
- };
79
- stylixCtx.requestApply = true;
80
- }
81
- // Apply styles if requested.
82
- // This runs on every render. We utilize useLayoutEffect so that it runs *after* all the other
83
- // renders have completed. stylixCtx.requestApply guards against multiple runs. This reduces the number of calls
84
- // to applyRules(), but prevents styles potentially being added to the DOM after other components force the
85
- // browser to compute styles.
86
- (0, useIsoLayoutEffect_1.default)(() => {
87
- if (!stylixCtx.requestApply)
88
- return;
89
- stylixCtx.requestApply = false;
90
- (0, applyRules_1.default)(stylixCtx);
91
- }, undefined, true);
92
- // When hash changes, add/remove ref count
93
- (0, useIsoLayoutEffect_1.default)(() => {
94
- if (!hash || !changed)
95
- return;
96
- if (stylixCtx.rules[hash]) {
97
- stylixCtx.rules[hash].refs++;
98
- }
99
- return () => {
100
- stylixCtx.rules[hash].refs--;
101
- cleanup(stylixCtx);
102
- };
103
- }, [hash], false);
104
- return hash;
105
- }
106
- exports.useStyles = useStyles;
107
- function useKeyframes(keyframes, options = { disabled: false }) {
108
- return useStyles({ '@keyframes $$class': keyframes }, Object.assign({ global: true }, options));
109
- }
110
- exports.useKeyframes = useKeyframes;
111
- function useGlobalStyles(styles, options = { disabled: false }) {
112
- return useStyles(styles, Object.assign(Object.assign({}, options), { global: true }));
113
- }
114
- exports.useGlobalStyles = useGlobalStyles;
115
- //# sourceMappingURL=useStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useStyles.js","sourceRoot":"","sources":["../src/useStyles.ts"],"names":[],"mappings":";;;;;;AAAA,iCAA+B;AAE/B,8DAAsC;AACtC,uCAAyC;AACzC,4EAAoD;AACpD,qDAAmE;AACnE,kDAA+C;AAC/C,mFAA2D;AAE3D,SAAS,OAAO,CAAC,GAAkB;IACjC,IAAI,OAAO,GAAG,CAAC,cAAc,KAAK,WAAW;QAAE,OAAO;IAEtD,GAAG,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE;QACnC,IAAI,OAAO,GAAG,KAAK,CAAC;QAEpB,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,KAAK,EAAE;YACzB,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACd,OAAO,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC5B,OAAO,GAAG,IAAI,CAAC;aAChB;SACF;QACD,OAAO,IAAI,IAAA,oBAAU,EAAC,GAAG,CAAC,CAAC;QAE3B,OAAO,GAAG,CAAC,cAAc,CAAC;IAC5B,CAAC,EAAE,GAAG,CAAQ,CAAC;AACjB,CAAC;AAED,SAAS,OAAO,CAAC,CAAM,EAAE,CAAM;IAC7B,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACzB,IAAI,OAAO,CAAC,KAAK,OAAO,CAAC;QAAE,OAAO,KAAK,CAAC;IACxC,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;QACzB,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;aAC3E,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QACvE,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAAE,OAAO,KAAK,CAAC;SAC5C;KACF;IACD,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC;AAED;;;;;GAKG;AACH,SAAgB,SAAS,CACvB,MAAW,EACX,UAAoD,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE;IAEtF,MAAM,SAAS,GAAG,IAAA,iCAAgB,GAAE,CAAC;IAErC,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAS,CAAC,CAAC;IAExD,MAAM,OAAO,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAEzD,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC;IAEhC,IAAI,OAAO,EAAE;QACX,iCAAiC;QACjC,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,MAAM;YAC7B,MAAM,GAAG,IAAA,sBAAY,EAAC,kBAAkB,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;QAErE,oCAAoC;QACpC,MAAM,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,IAAI,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QACnE,OAAO,CAAC,OAAO,CAAC,IAAI;YAClB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI;gBACpC,CAAC,CAAC,IAAA,uBAAU,EAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;gBAC1D,CAAC,CAAC,EAAE,CAAC;KACV;IAED,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;IAEjC,IAAI,IAAI,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QAC7C,4DAA4D;QAC5D,IAAI,CAAC,OAAO,CAAC,MAAM;YAAE,MAAM,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QACvD,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG;YACtB,IAAI;YACJ,KAAK,EAAE,IAAA,2BAAiB,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC;YACjD,IAAI,EAAE,CAAC;SACR,CAAC;QACF,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC;KAC/B;IAED,6BAA6B;IAC7B,8FAA8F;IAC9F,gHAAgH;IAChH,2GAA2G;IAC3G,6BAA6B;IAC7B,IAAA,4BAAkB,EAChB,GAAG,EAAE;QACH,IAAI,CAAC,SAAS,CAAC,YAAY;YAAE,OAAO;QACpC,SAAS,CAAC,YAAY,GAAG,KAAK,CAAC;QAC/B,IAAA,oBAAU,EAAC,SAAS,CAAC,CAAC;IACxB,CAAC,EACD,SAAS,EACT,IAAI,CACL,CAAC;IAEF,0CAA0C;IAC1C,IAAA,4BAAkB,EAChB,GAAG,EAAE;QACH,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO;QAE9B,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;YACzB,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;SAC9B;QAED,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;YAC7B,OAAO,CAAC,SAAS,CAAC,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,IAAI,CAAC,EACN,KAAK,CACN,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC;AAxED,8BAwEC;AAED,SAAgB,YAAY,CAC1B,SAAc,EACd,UAAkC,EAAE,QAAQ,EAAE,KAAK,EAAE;IAErD,OAAO,SAAS,CAAC,EAAE,oBAAoB,EAAE,SAAS,EAAE,kBAAI,MAAM,EAAE,IAAI,IAAK,OAAO,EAAG,CAAC;AACtF,CAAC;AALD,oCAKC;AAED,SAAgB,eAAe,CAC7B,MAAW,EACX,UAAkC,EAAE,QAAQ,EAAE,KAAK,EAAE;IAErD,OAAO,SAAS,CAAC,MAAM,kCAAO,OAAO,KAAE,MAAM,EAAE,IAAI,IAAG,CAAC;AACzD,CAAC;AALD,0CAKC"}
@@ -1,4 +0,0 @@
1
- /**
2
- * Deeply clones a value.
3
- */
4
- export declare function cloneDeep<T>(value: T): T;