@stylix/core 3.1.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 (85) hide show
  1. package/README.md +100 -0
  2. package/dist/Stylix.d.ts +3 -0
  3. package/dist/Stylix.js +66 -0
  4. package/dist/Stylix.js.map +1 -0
  5. package/dist/StylixProvider.d.ts +51 -0
  6. package/dist/StylixProvider.js +139 -0
  7. package/dist/StylixProvider.js.map +1 -0
  8. package/dist/applyRules.d.ts +5 -0
  9. package/dist/applyRules.js +31 -0
  10. package/dist/applyRules.js.map +1 -0
  11. package/dist/classifyProps.d.ts +7 -0
  12. package/dist/classifyProps.js +35 -0
  13. package/dist/classifyProps.js.map +1 -0
  14. package/dist/css-props.json +413 -0
  15. package/dist/html-tags.json +119 -0
  16. package/dist/index.d.ts +8 -0
  17. package/dist/index.js +28 -0
  18. package/dist/index.js.map +1 -0
  19. package/dist/plugins/cleanStyles.d.ts +5 -0
  20. package/dist/plugins/cleanStyles.js +28 -0
  21. package/dist/plugins/cleanStyles.js.map +1 -0
  22. package/dist/plugins/customProps.d.ts +2 -0
  23. package/dist/plugins/customProps.js +61 -0
  24. package/dist/plugins/customProps.js.map +1 -0
  25. package/dist/plugins/defaultUnits.d.ts +7 -0
  26. package/dist/plugins/defaultUnits.js +41 -0
  27. package/dist/plugins/defaultUnits.js.map +1 -0
  28. package/dist/plugins/flattenNestedStyles.d.ts +5 -0
  29. package/dist/plugins/flattenNestedStyles.js +47 -0
  30. package/dist/plugins/flattenNestedStyles.js.map +1 -0
  31. package/dist/plugins/index.d.ts +30 -0
  32. package/dist/plugins/index.js +44 -0
  33. package/dist/plugins/index.js.map +1 -0
  34. package/dist/plugins/mediaArrays.d.ts +5 -0
  35. package/dist/plugins/mediaArrays.js +56 -0
  36. package/dist/plugins/mediaArrays.js.map +1 -0
  37. package/dist/plugins/merge$css.d.ts +6 -0
  38. package/dist/plugins/merge$css.js +45 -0
  39. package/dist/plugins/merge$css.js.map +1 -0
  40. package/dist/plugins/propCasing.d.ts +5 -0
  41. package/dist/plugins/propCasing.js +25 -0
  42. package/dist/plugins/propCasing.js.map +1 -0
  43. package/dist/plugins/replace$$class.d.ts +5 -0
  44. package/dist/plugins/replace$$class.js +20 -0
  45. package/dist/plugins/replace$$class.js.map +1 -0
  46. package/dist/plugins/themeFunctions.d.ts +5 -0
  47. package/dist/plugins/themeFunctions.js +20 -0
  48. package/dist/plugins/themeFunctions.js.map +1 -0
  49. package/dist/styleCollector.d.ts +8 -0
  50. package/dist/styleCollector.js +36 -0
  51. package/dist/styleCollector.js.map +1 -0
  52. package/dist/stylesToRuleArray.d.ts +5 -0
  53. package/dist/stylesToRuleArray.js +41 -0
  54. package/dist/stylesToRuleArray.js.map +1 -0
  55. package/dist/types.d.ts +76 -0
  56. package/dist/types.js +3 -0
  57. package/dist/types.js.map +1 -0
  58. package/dist/useStyles.d.ts +16 -0
  59. package/dist/useStyles.js +81 -0
  60. package/dist/useStyles.js.map +1 -0
  61. package/dist/util/cloneDeep.d.ts +4 -0
  62. package/dist/util/cloneDeep.js +28 -0
  63. package/dist/util/cloneDeep.js.map +1 -0
  64. package/dist/util/flatten.d.ts +4 -0
  65. package/dist/util/flatten.js +19 -0
  66. package/dist/util/flatten.js.map +1 -0
  67. package/dist/util/hashString.d.ts +4 -0
  68. package/dist/util/hashString.js +15 -0
  69. package/dist/util/hashString.js.map +1 -0
  70. package/dist/util/isPlainObject.d.ts +4 -0
  71. package/dist/util/isPlainObject.js +11 -0
  72. package/dist/util/isPlainObject.js.map +1 -0
  73. package/dist/util/mapObjectRecursive.d.ts +8 -0
  74. package/dist/util/mapObjectRecursive.js +48 -0
  75. package/dist/util/mapObjectRecursive.js.map +1 -0
  76. package/dist/util/merge.d.ts +5 -0
  77. package/dist/util/merge.js +31 -0
  78. package/dist/util/merge.js.map +1 -0
  79. package/dist/util/useIsoLayoutEffect.d.ts +3 -0
  80. package/dist/util/useIsoLayoutEffect.js +6 -0
  81. package/dist/util/useIsoLayoutEffect.js.map +1 -0
  82. package/dist/util/walkRecursive.d.ts +8 -0
  83. package/dist/util/walkRecursive.js +26 -0
  84. package/dist/util/walkRecursive.js.map +1 -0
  85. package/package.json +65 -0
package/README.md ADDED
@@ -0,0 +1,100 @@
1
+ # Stylix ⚛ React, with style.
2
+
3
+ Add styles to your React apps with props: the easy, natural, and low learning curve approach.
4
+
5
+ Stylix is a new library and methodology for styling your React apps. With Stylix, you add styles to
6
+ your components the same way you add any other information: with **props**.
7
+
8
+ No separate CSS files, quirky alternative JavaScript syntax, or build tool
9
+ configuration—**everything is React**, minimizing your learning curve and encouraging the same
10
+ patterns and organizational best practices that have made React so popular.
11
+
12
+ If you still aren't convinced, read the [Why Stylix?](https://stylix.dev) documentation page to see
13
+ why we created Stylix, and why we think you'll love it.
14
+
15
+ **[Ready the full documentation](https://stylix.dev)** for more guides and API reference.
16
+
17
+ ## Installation
18
+
19
+ Stylix can be installed with **npm** or **yarn**:
20
+
21
+ ```sh
22
+ $ npm install --save @stylix/core
23
+ # or
24
+ $ yard add @stylix/core
25
+ ```
26
+
27
+ Stylix is compatible with React 16.8+.
28
+
29
+ ## How to use Stylix
30
+
31
+ ### Wrap your app with a `<StylixProvider>` element
32
+
33
+ Start by importing `StylixProvider` from `@stylix/core` and placing a `<StylixProvider>` element at
34
+ the root of your app:
35
+
36
+ ```tsx
37
+ import { StylixProvider } from '@stylix/core';
38
+
39
+ function App() {
40
+ return (
41
+ <StylixProvider>
42
+ {/* your app */}
43
+ </StylixProvider>
44
+ );
45
+ }
46
+ ```
47
+
48
+ The `<StylixProvider>` element can provide themes, media queries, and plugins to descendent
49
+ elements. Each `<StylixProvider>` element outputs the CSS for its descendant elements to a `<style>`
50
+ element that it places in your page's `<head>`. This behavior, and a few other configuration
51
+ options, can be customized.
52
+
53
+ ### Style your markup with Stylix HTML tags
54
+
55
+ Import the default `$` object from `@stylix/core` and use it to render stylable HTML elements in
56
+ place of the regular old tags:
57
+
58
+ ```tsx
59
+ import $ from '@stylix/core';
60
+
61
+ <$.div
62
+ color="SkyBlue"
63
+ text-align="center"
64
+ font-size={40}
65
+ font-weight="bold"
66
+ font-style="italic"
67
+ >
68
+ Hello, Stylix!
69
+ </$.div>
70
+ ```
71
+
72
+ ## Want to contribute? Have bugs, issues, or questions?
73
+
74
+ Open an issue or submit a PR on our GitHub page:
75
+
76
+ https://github.com/brombal/stylix
77
+
78
+ We ascribe to the
79
+ [Contributor Covenant Code of Conduct](https://www.contributor-covenant.org/version/2/0/code_of_conduct).
80
+
81
+ ## License
82
+
83
+ [MIT](https://opensource.org/licenses/MIT)
84
+
85
+ Copyright 2020 Brombal, LLC
86
+
87
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
88
+ associated documentation files (the "Software"), to deal in the Software without restriction,
89
+ including without limitation the rights to use, copy, modify, merge, publish, distribute,
90
+ sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
91
+ furnished to do so, subject to the following conditions:
92
+
93
+ The above copyright notice and this permission notice shall be included in all copies or substantial
94
+ portions of the Software.
95
+
96
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
97
+ NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
98
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
99
+ OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
100
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/dist/Stylix.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { Stylix$Component } from './types';
2
+ declare const Stylix: Stylix$Component;
3
+ export default Stylix;
package/dist/Stylix.js ADDED
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ const react_1 = __importDefault(require("react"));
18
+ const classifyProps_1 = require("./classifyProps");
19
+ const html_tags_json_1 = __importDefault(require("./html-tags.json"));
20
+ const StylixProvider_1 = require("./StylixProvider");
21
+ const useStyles_1 = require("./useStyles");
22
+ function _Stylix(props, ref) {
23
+ const _a = props, { $el, $css, $disabled, className, children } = _a, rest = __rest(_a, ["$el", "$css", "$disabled", "className", "children"]);
24
+ const ctx = StylixProvider_1.useStylixContext();
25
+ const [styleProps, otherProps] = classifyProps_1.classifyProps(rest, ctx.styleProps);
26
+ if ($css)
27
+ styleProps.$css = $css;
28
+ const hash = useStyles_1.useStyles(styleProps, { disabled: $disabled });
29
+ const allProps = Object.assign({ className: `${hash} ${className || ''}`.trim(), ref: ref }, otherProps);
30
+ if (react_1.default.isValidElement($el)) {
31
+ const $elProps = Object.assign({}, $el.props);
32
+ allProps.className += ' ' + ($elProps.className || '');
33
+ delete $elProps.className;
34
+ return react_1.default.cloneElement($el, Object.assign(Object.assign({}, allProps), $elProps), ...(react_1.default.Children.toArray(children) || []));
35
+ }
36
+ return react_1.default.createElement($el, Object.assign({}, allProps), children);
37
+ }
38
+ const Stylix = react_1.default.forwardRef(_Stylix);
39
+ Stylix.styled = ($el, conflictingPropMapping) => {
40
+ var _a;
41
+ // We could go through the mental gymnastics to figure out the correct type here, but it really doesn't matter,
42
+ // as the return type specified in types.ts is correct.
43
+ const r = react_1.default.forwardRef((props, ref) => {
44
+ let el = $el;
45
+ if (conflictingPropMapping) {
46
+ const newProps = {};
47
+ for (const k in conflictingPropMapping) {
48
+ newProps[conflictingPropMapping[k]] = props[k];
49
+ }
50
+ el = react_1.default.createElement($el, Object.assign({}, newProps));
51
+ }
52
+ return _Stylix(Object.assign({ $el: el }, props), ref);
53
+ });
54
+ r.displayName = `$.${$el.displayName || $el.name || ((_a = $el.toString) === null || _a === void 0 ? void 0 : _a.call($el)) || 'Unnamed'}`;
55
+ r.__isStylix = true;
56
+ return r;
57
+ };
58
+ Stylix.displayName = 'Stylix';
59
+ Stylix.__isStylix = true;
60
+ for (const i in html_tags_json_1.default) {
61
+ const tag = html_tags_json_1.default[i];
62
+ const htmlComponent = Stylix.styled(tag);
63
+ Stylix[tag] = htmlComponent;
64
+ }
65
+ exports.default = Stylix;
66
+ //# sourceMappingURL=Stylix.js.map
package/dist/Stylix.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Stylix.js","sourceRoot":"","sources":["../src/Stylix.tsx"],"names":[],"mappings":"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"}
package/dist/StylixProvider.d.ts ADDED
@@ -0,0 +1,51 @@
1
+ import React from 'react';
2
+ import { StylixPlugin } from './plugins';
3
+ /**
4
+ * Stylix context
5
+ *
6
+ * The <StylixProvider> wrapper represents an "instance" of Stylix - a configuration, set of plugins, and reference to
7
+ * the <style> element where css is output. All nodes contained within a <StylixProvider> element will share this
8
+ * Stylix instance's configuration.
9
+ *
10
+ * A StylixProvider internally contains a <StylixTheme>, so you can conveniently provide a theme object and media query
11
+ * array with a single element.
12
+ *
13
+ * See the README for more details.
14
+ */
15
+ declare type StylixProviderProps<Theme = any> = StylixThemeProps<Theme> & {
16
+ id?: string;
17
+ devMode?: boolean;
18
+ plugins?: StylixPlugin[] | StylixPlugin[][];
19
+ styleElement?: HTMLStyleElement;
20
+ children: any;
21
+ };
22
+ declare type StylixThemeProps<Theme = any> = {
23
+ theme?: Theme;
24
+ media?: string[];
25
+ children: any;
26
+ };
27
+ export declare type StylixContext<Theme = any> = {
28
+ id: string;
29
+ devMode: boolean;
30
+ theme: Theme;
31
+ media: string[];
32
+ plugins: StylixPlugin[];
33
+ stylesheet: CSSStyleSheet;
34
+ styleElement: HTMLStyleElement;
35
+ styleCollector?: string[];
36
+ rules: {
37
+ [key: string]: {
38
+ hash: string;
39
+ rules: string[];
40
+ refs: number;
41
+ };
42
+ };
43
+ styleProps: Record<string, string>;
44
+ cleanupRequest: number;
45
+ };
46
+ export declare type StylixPublicContext = Pick<StylixContext, 'id' | 'devMode' | 'theme' | 'media' | 'stylesheet' | 'styleElement' | 'styleProps'>;
47
+ export declare function useStylixContext<Theme = any>(): StylixContext<Theme>;
48
+ export declare function useStylixTheme<Theme = any>(): Theme;
49
+ export declare function StylixProvider({ id, devMode, plugins, styleElement, children, ...themeProps }: StylixProviderProps): React.ReactElement;
50
+ export declare function StylixTheme({ children, media, theme }: StylixThemeProps): JSX.Element;
51
+ export {};
package/dist/StylixProvider.js ADDED
@@ -0,0 +1,139 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
11
+ }) : function(o, v) {
12
+ o["default"] = v;
13
+ });
14
+ var __importStar = (this && this.__importStar) || function (mod) {
15
+ if (mod && mod.__esModule) return mod;
16
+ var result = {};
17
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
+ __setModuleDefault(result, mod);
19
+ return result;
20
+ };
21
+ var __rest = (this && this.__rest) || function (s, e) {
22
+ var t = {};
23
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
24
+ t[p] = s[p];
25
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
26
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
27
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
28
+ t[p[i]] = s[p[i]];
29
+ }
30
+ return t;
31
+ };
32
+ var __importDefault = (this && this.__importDefault) || function (mod) {
33
+ return (mod && mod.__esModule) ? mod : { "default": mod };
34
+ };
35
+ Object.defineProperty(exports, "__esModule", { value: true });
36
+ exports.StylixTheme = exports.StylixProvider = exports.useStylixTheme = exports.useStylixContext = void 0;
37
+ const react_1 = __importStar(require("react"));
38
+ const classifyProps_1 = require("./classifyProps");
39
+ const css_props_json_1 = __importDefault(require("./css-props.json"));
40
+ const plugins_1 = require("./plugins");
41
+ const styleCollector_1 = require("./styleCollector");
42
+ const flatten_1 = require("./util/flatten");
43
+ const merge_1 = require("./util/merge");
44
+ const useIsoLayoutEffect_1 = __importDefault(require("./util/useIsoLayoutEffect"));
45
+ const IS_DEV_ENV = process.env.NODE_ENV !== 'production';
46
+ const defaultStyleProps = {};
47
+ for (const value of css_props_json_1.default) {
48
+ defaultStyleProps[classifyProps_1.simplifyStylePropName(value)] = value;
49
+ }
50
+ function createStylixContext(userValues = {}) {
51
+ var _a, _b;
52
+ const ctx = {
53
+ id: userValues.id || Math.round(Math.random() * 10000).toString(10),
54
+ devMode: (_a = userValues.devMode) !== null && _a !== void 0 ? _a : IS_DEV_ENV,
55
+ styleProps: defaultStyleProps,
56
+ theme: userValues.theme || null,
57
+ media: userValues.media || null,
58
+ styleElement: userValues.styleElement,
59
+ plugins: flatten_1.flatten(Object.values(plugins_1.defaultPlugins)),
60
+ rules: {},
61
+ cleanupRequest: undefined,
62
+ };
63
+ if (!ctx.styleElement && typeof document !== 'undefined') {
64
+ ctx.styleElement = document.createElement('style');
65
+ if (ctx.id)
66
+ ctx.styleElement.id = 'stylix-' + ctx.id;
67
+ ctx.styleElement.className = 'stylix';
68
+ document.head.appendChild(ctx.styleElement);
69
+ }
70
+ if (ctx.styleElement)
71
+ ctx.stylesheet = ctx.styleElement.sheet;
72
+ if ((_b = userValues.plugins) === null || _b === void 0 ? void 0 : _b.length) {
73
+ const flatPlugins = flatten_1.flatten(userValues.plugins);
74
+ for (const i in flatPlugins) {
75
+ const plugin = flatPlugins[i];
76
+ let pluginIndex = -1;
77
+ if (plugin.before && ctx.plugins.includes(plugin.before))
78
+ pluginIndex = ctx.plugins.indexOf(plugin.before);
79
+ if (plugin.after && ctx.plugins.includes(plugin.after))
80
+ pluginIndex = ctx.plugins.indexOf(plugin.after) + 1;
81
+ if ('atIndex' in plugin)
82
+ pluginIndex = plugin.atIndex;
83
+ if (pluginIndex === -1)
84
+ ctx.plugins.push(plugin);
85
+ else
86
+ ctx.plugins.splice(pluginIndex, 0, plugin);
87
+ }
88
+ }
89
+ plugins_1.applyPlugins('initialize', null, null, ctx);
90
+ return ctx;
91
+ }
92
+ // The React context object
93
+ const stylixContext = react_1.default.createContext(createStylixContext());
94
+ // Convenience wrapper hook that returns the current Stylix context
95
+ function useStylixContext() {
96
+ return react_1.useContext(stylixContext);
97
+ }
98
+ exports.useStylixContext = useStylixContext;
99
+ // Convenience wrapper hook that returns just the current Stylix theme
100
+ function useStylixTheme() {
101
+ return react_1.useContext(stylixContext).theme;
102
+ }
103
+ exports.useStylixTheme = useStylixTheme;
104
+ function StylixProvider(_a) {
105
+ var { id, devMode, plugins, styleElement, children } = _a, themeProps = __rest(_a, ["id", "devMode", "plugins", "styleElement", "children"]);
106
+ const ctx = react_1.useRef();
107
+ if (!ctx.current)
108
+ ctx.current = createStylixContext({ id, devMode, plugins, styleElement });
109
+ ctx.current.styleCollector = react_1.useContext(styleCollector_1.styleCollectorContext);
110
+ return (react_1.default.createElement(stylixContext.Provider, { value: ctx.current },
111
+ react_1.default.createElement(StylixTheme, Object.assign({}, themeProps), children)));
112
+ }
113
+ exports.StylixProvider = StylixProvider;
114
+ function mergeContexts(contextA, contextB) {
115
+ const obj = Object.assign({}, contextA);
116
+ const themeB = contextB.theme;
117
+ if (contextB) {
118
+ for (const key in contextB) {
119
+ const value = contextB[key];
120
+ if (typeof value !== 'undefined')
121
+ obj[key] = value;
122
+ }
123
+ }
124
+ obj.theme = merge_1.merge(contextA.theme || {}, themeB);
125
+ return obj;
126
+ }
127
+ function StylixTheme({ children, media, theme }) {
128
+ const parentCtx = react_1.useContext(stylixContext);
129
+ const [contextValue, setContextValue] = react_1.useState(() => mergeContexts(parentCtx, { media, theme }));
130
+ // contextValue should only update (and cause re-renders) when relevant properties change.
131
+ // `media` is treated as special because providing an array of strings is easier to do inline,
132
+ // but we don't want to cause descendent re-renders if the values don't change.
133
+ useIsoLayoutEffect_1.default(() => {
134
+ setContextValue(mergeContexts(parentCtx, { media, theme }));
135
+ }, [parentCtx, (media === null || media === void 0 ? void 0 : media.join('|')) || '', theme]);
136
+ return react_1.default.createElement(stylixContext.Provider, { value: contextValue }, children);
137
+ }
138
+ exports.StylixTheme = StylixTheme;
139
+ //# sourceMappingURL=StylixProvider.js.map
package/dist/StylixProvider.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StylixProvider.js","sourceRoot":"","sources":["../src/StylixProvider.tsx"],"names":[],"mappings":"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"}
package/dist/applyRules.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { StylixContext } from './StylixProvider';
2
+ /**
3
+ * Applies rules from given StylixContext to the <style> element.
4
+ */
5
+ export default function applyRules(ctx: StylixContext): void;
package/dist/applyRules.js ADDED
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ /**
4
+ * Applies rules from given StylixContext to the <style> element.
5
+ */
6
+ function applyRules(ctx) {
7
+ const flattenedRules = [];
8
+ for (const key in ctx.rules) {
9
+ const val = ctx.rules[key];
10
+ flattenedRules.push(...val.rules);
11
+ }
12
+ if (ctx.styleCollector) {
13
+ ctx.styleCollector.length = 0;
14
+ ctx.styleCollector.push(...flattenedRules);
15
+ return;
16
+ }
17
+ if (ctx.devMode) {
18
+ ctx.styleElement.innerHTML = flattenedRules.join('\n');
19
+ }
20
+ else {
21
+ const container = ctx.stylesheet;
22
+ if (container.rules)
23
+ while (container.rules.length) {
24
+ container.deleteRule(0);
25
+ }
26
+ for (const i in flattenedRules)
27
+ container.insertRule(flattenedRules[i], +i);
28
+ }
29
+ }
30
+ exports.default = applyRules;
31
+ //# sourceMappingURL=applyRules.js.map
package/dist/applyRules.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"applyRules.js","sourceRoot":"","sources":["../src/applyRules.ts"],"names":[],"mappings":";;AAEA;;GAEG;AACH,SAAwB,UAAU,CAAC,GAAkB;IACnD,MAAM,cAAc,GAAa,EAAE,CAAC;IAEpC,KAAK,MAAM,GAAG,IAAI,GAAG,CAAC,KAAK,EAAE;QAC3B,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC3B,cAAc,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;KACnC;IAED,IAAI,GAAG,CAAC,cAAc,EAAE;QACtB,GAAG,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;QAC9B,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,CAAC;QAC3C,OAAO;KACR;IAED,IAAI,GAAG,CAAC,OAAO,EAAE;QACf,GAAG,CAAC,YAAY,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxD;SAAM;QACL,MAAM,SAAS,GAAG,GAAG,CAAC,UAAU,CAAC;QACjC,IAAI,SAAS,CAAC,KAAK;YACjB,OAAO,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE;gBAC7B,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACzB;QACH,KAAK,MAAM,CAAC,IAAI,cAAc;YAAE,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;KAC7E;AACH,CAAC;AAxBD,6BAwBC"}
package/dist/classifyProps.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export declare function classifyProps(props: any, knownProps: Record<string, string>): [any, any];
2
+ /**
3
+ * Determines if `value` is a recognized CSS property (can be standard CSS or custom Stylix prop).
4
+ */
5
+ export declare function isStyleProp(value: string, knownProps: Record<string, string>): boolean;
6
+ export declare function isValidJSXProp(value: string): boolean;
7
+ export declare function simplifyStylePropName(value: string): string;
package/dist/classifyProps.js ADDED
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.simplifyStylePropName = exports.isValidJSXProp = exports.isStyleProp = exports.classifyProps = void 0;
4
+ function classifyProps(props, knownProps) {
5
+ const styles = {};
6
+ const other = {};
7
+ for (const key in props) {
8
+ // If prop is not a valid JSX prop, it must be a CSS selector
9
+ if (!isValidJSXProp(key) || isStyleProp(key, knownProps)) {
10
+ styles[key] = props[key];
11
+ }
12
+ else {
13
+ other[key] = props[key];
14
+ }
15
+ }
16
+ return [styles, other];
17
+ }
18
+ exports.classifyProps = classifyProps;
19
+ /**
20
+ * Determines if `value` is a recognized CSS property (can be standard CSS or custom Stylix prop).
21
+ */
22
+ function isStyleProp(value, knownProps) {
23
+ return isValidJSXProp(value) && simplifyStylePropName(value) in knownProps;
24
+ }
25
+ exports.isStyleProp = isStyleProp;
26
+ function isValidJSXProp(value) {
27
+ // Not an exact check, but mostly rules out complex css selectors
28
+ return /^[a-z$][a-z0-9_-]*$/i.test(value);
29
+ }
30
+ exports.isValidJSXProp = isValidJSXProp;
31
+ function simplifyStylePropName(value) {
32
+ return value.toLowerCase().replace(/[^a-z]/gi, '');
33
+ }
34
+ exports.simplifyStylePropName = simplifyStylePropName;
35
+ //# sourceMappingURL=classifyProps.js.map
package/dist/classifyProps.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"classifyProps.js","sourceRoot":"","sources":["../src/classifyProps.ts"],"names":[],"mappings":";;;AAAA,SAAgB,aAAa,CAAC,KAAU,EAAE,UAAkC;IAC1E,MAAM,MAAM,GAAG,EAAS,CAAC;IACzB,MAAM,KAAK,GAAG,EAAS,CAAC;IAExB,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;QACvB,6DAA6D;QAC7D,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,WAAW,CAAC,GAAG,EAAE,UAAU,CAAC,EAAE;YACxD,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACL,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;SACzB;KACF;IAED,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzB,CAAC;AAdD,sCAcC;AAED;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAa,EAAE,UAAkC;IAC3E,OAAO,cAAc,CAAC,KAAK,CAAC,IAAI,qBAAqB,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC;AAC7E,CAAC;AAFD,kCAEC;AAED,SAAgB,cAAc,CAAC,KAAa;IAC1C,iEAAiE;IACjE,OAAO,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC5C,CAAC;AAHD,wCAGC;AAED,SAAgB,qBAAqB,CAAC,KAAa;IACjD,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AACrD,CAAC;AAFD,sDAEC"}