🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@react-style-system/ssr

Package Overview
Dependencies
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-style-system/ssr - npm Package Compare versions

Comparing version
0.0.0-9e1088e9b
 to
0.0.0-a56660eaa
+34
-41
index.esm.js

@@ -0,26 +1,14 @@

import _extends from '@babel/runtime/helpers/extends';
import React, { useMemo, forwardRef } from 'react';
import classNames from 'classnames';
import { useTheme, useColorContext, css, createReadablePalette } from '@react-style-system/core';
import { useTheme, useColorContext } from '@react-style-system/core';
export * from '@react-style-system/core';
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
function hashStyleObj(styleObj) {
if (!styleObj) return '';
return Object.keys(styleObj).map(key => `${key}_${styleObj[key]}`).join('__|__');
}
function hashStyleObj(styleObj) {
return Object.keys(styleObj).map(key => `${key}_${styleObj[key]}`).join('__|__');
function usePreserveReference(styleObj) {
return useMemo(() => styleObj, // eslint-disable-next-line react-hooks/exhaustive-deps
[hashStyleObj(styleObj)]);
} // preserve the object reference

@@ -36,14 +24,16 @@

const theme = useTheme();
const colorContext = useColorContext();
const defaultColor = colorContext.color;
const defaultSurfaceColor = colorContext.surface;
const {
color = defaultColor,
surface = defaultSurfaceColor,
style: incomingStyle,
color,
surface
} = useColorContext(props);
const {
color: _color,
surface: _surface,
className: incomingClassName,
styles: incomingStyles = empty,
style: _incomingStyle,
styles: _incomingStyles = empty,
...restOfProps
} = props;
const incomingStyleHash = hashStyleObj(incomingStyles); // create a map of unprocessed styles
const incomingStyle = usePreserveReference(_incomingStyle);
const incomingStyles = usePreserveReference(_incomingStyles); // create a map of unprocessed styles

@@ -56,4 +46,6 @@ const {

const variableObject = stylesFn({
css,
color: createReadablePalette(color, surface),
css: () => {
throw new Error('css tag was executed in SSR mode');
},
color,
theme,

@@ -92,9 +84,12 @@ surface,

const thisStyleKeys = Object.keys(thisStyles);
return thisStyleKeys.reduce((merged, key) => {
const mergedStyles = thisStyleKeys.reduce((merged, key) => {
const thisStyle = thisStyles[key];
const incomingStyle = incomingStyles[key];
merged[key] = classNames(thisStyle, incomingStyle);
merged[key] = [thisStyle, incomingStyle].filter(Boolean).join(' ');
return merged;
}, {}); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [thisStyles, incomingStyleHash]);
}, {});
return { ...mergedStyles,
cssVariableObject
};
}, [thisStyles, cssVariableObject, incomingStyles]);
const Component = component || 'div';

@@ -107,5 +102,5 @@ const Root = useMemo(() => {

} = rootProps;
return React.createElement(Component, _extends({}, rootProps, {
return /*#__PURE__*/React.createElement(Component, _extends({}, rootProps, {
ref: ref,
className: classNames(mergedStyles.root, rootClassName, incomingClassName),
className: [mergedStyles.root, rootClassName, incomingClassName].filter(Boolean).join(' '),
style: { ...rootStyles,

@@ -116,5 +111,4 @@ ...incomingStyle,

}));
}); // TODO: audit this 👇
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [incomingClassName, incomingStyleHash, mergedStyles.root, Component]);
});
}, [mergedStyles.root, incomingClassName, incomingStyle, cssVariableObject]);
return {

@@ -125,4 +119,3 @@ Root,

};
}
} // This is a type-assertion so ensure that this type is compatible with the
return useStyles;

@@ -129,0 +122,0 @@ }

+1
-1
index.esm.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.esm.js","sources":["../../packages/ssr/src/createStyles.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport classNames from 'classnames';\nimport {\n ReactComponent,\n StyleProps,\n StyleFnArgs,\n css,\n useTheme,\n useColorContext,\n createReadablePalette,\n} from '@react-style-system/core';\n\ntype GetComponentProps<\n ComponentType extends ReactComponent\n> = ComponentType extends React.ComponentType<infer U>\n ? U\n : ComponentType extends keyof JSX.IntrinsicElements\n ? JSX.IntrinsicElements[ComponentType]\n : any;\n\nfunction hashStyleObj(styleObj: { [key: string]: string | undefined }) {\n return Object.keys(styleObj)\n .map(key => `${key}_${styleObj[key]}`)\n .join('__|__');\n}\n\n// preserve the object reference\nconst empty = {};\n\nconst identity = <T extends any>(t: T) => t;\n\nfunction createStyles<Styles extends { [key: string]: string }, Theme = any>(\n stylesFn: (args: StyleFnArgs<Theme>) => Styles,\n) {\n function useStyles<\n Props extends StyleProps<Styles>,\n ComponentType extends ReactComponent = 'div'\n >(\n props: Props = {} as any,\n component?: ComponentType,\n ): Omit<Props, 'surface' | 'color' | 'style' | 'styles' | 'className'> & {\n Root: React.ComponentType<GetComponentProps<ComponentType>>;\n styles: Styles;\n } {\n const theme = useTheme<Theme>();\n const colorContext = useColorContext();\n const defaultColor = colorContext.color;\n const defaultSurfaceColor = colorContext.surface;\n const {\n color = defaultColor,\n surface = defaultSurfaceColor,\n style: incomingStyle,\n className: incomingClassName,\n styles: incomingStyles = empty as Styles,\n ...restOfProps\n } = props;\n\n const incomingStyleHash = hashStyleObj(incomingStyles);\n\n // create a map of unprocessed styles\n const { cssVariableObject, classes, classNamePrefix } = useMemo(() => {\n const variableObject: any = stylesFn({\n css,\n color: createReadablePalette(color, surface),\n theme,\n surface,\n staticVar: identity,\n });\n\n const { classNamePrefix, ...classNamesVariableValues } = variableObject;\n\n const cssVariableObject = Object.entries(classNamesVariableValues)\n .map(([className, values]) =>\n (values as string[]).map((value, i) => ({\n key: `--${classNamePrefix}-${className}-${i}`,\n value,\n })),\n )\n .flat()\n .reduce((acc, { key, value }) => {\n acc[key] = value;\n return acc;\n }, {} as { [key: string]: string });\n\n return {\n cssVariableObject,\n classes: Object.keys(classNamesVariableValues),\n classNamePrefix,\n };\n }, [color, surface, theme]);\n\n // calculate the class names\n const thisStyles = useMemo(() => {\n return classes\n .map(key => [key, `${classNamePrefix}-${key}`])\n .reduce((acc, [key, className]) => {\n acc[key as keyof Styles] = className as Styles[keyof Styles];\n return acc;\n }, {} as Styles);\n }, [classNamePrefix, classes]);\n\n const mergedStyles = useMemo(() => {\n const thisStyleKeys = Object.keys(thisStyles) as Array<keyof Styles>;\n\n return thisStyleKeys.reduce((merged, key) => {\n const thisStyle = thisStyles[key];\n const incomingStyle = incomingStyles[key];\n\n merged[key] = classNames(\n thisStyle,\n incomingStyle,\n ) as Styles[keyof Styles];\n\n return merged;\n }, {} as Styles);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [thisStyles, incomingStyleHash]);\n\n const Component = (component || 'div') as React.ComponentType<any>;\n\n const Root = useMemo(() => {\n return forwardRef((rootProps: StyleProps<Styles>, ref: any) => {\n const { className: rootClassName, style: rootStyles } = rootProps;\n\n return (\n <Component\n {...rootProps}\n ref={ref}\n className={classNames(\n mergedStyles.root,\n rootClassName,\n incomingClassName,\n )}\n style={{\n ...rootStyles,\n ...incomingStyle,\n ...cssVariableObject,\n }}\n />\n );\n }) as React.ComponentType<GetComponentProps<ComponentType>>;\n // TODO: audit this 👇\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [incomingClassName, incomingStyleHash, mergedStyles.root, Component]);\n\n return {\n Root,\n styles: mergedStyles,\n ...restOfProps,\n };\n }\n\n return useStyles;\n}\n\nexport default createStyles;\n"],"names":["hashStyleObj","styleObj","Object","keys","map","key","join","empty","identity","t","createStyles","stylesFn","useStyles","props","component","theme","useTheme","colorContext","useColorContext","defaultColor","color","defaultSurfaceColor","surface","style","incomingStyle","className","incomingClassName","styles","incomingStyles","restOfProps","incomingStyleHash","cssVariableObject","classes","classNamePrefix","useMemo","variableObject","css","createReadablePalette","staticVar","classNamesVariableValues","entries","values","value","i","flat","reduce","acc","thisStyles","mergedStyles","thisStyleKeys","merged","thisStyle","classNames","Component","Root","forwardRef","rootProps","ref","rootClassName","rootStyles","root"],"mappings":"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"}
{"version":3,"file":"index.esm.js","sources":["../../packages/ssr/src/createStyles.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport {\n ReactComponent,\n StyleProps,\n StyleFnArgs,\n GetComponentProps,\n UseStyles,\n useTheme,\n useColorContext,\n} from '@react-style-system/core';\n\nfunction hashStyleObj(\n styleObj: { [key: string]: string | undefined } | null | undefined,\n) {\n if (!styleObj) return '';\n\n return Object.keys(styleObj)\n .map((key) => `${key}_${styleObj[key]}`)\n .join('__|__');\n}\n\nfunction usePreserveReference<\n T extends { [key: string]: string | undefined } | null | undefined\n>(styleObj: T): T {\n return useMemo(\n () => styleObj,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [hashStyleObj(styleObj)],\n );\n}\n\n// preserve the object reference\nconst empty = {};\n\nconst identity = <T extends any>(t: T) => t;\n\nfunction createStyles<Styles extends { [key: string]: string }, Theme = any>(\n stylesFn: (args: StyleFnArgs<Theme>) => Styles,\n) {\n function useStyles<\n Props extends StyleProps<Styles>,\n ComponentType extends ReactComponent = 'div'\n >(\n props: Props = {} as any,\n component?: ComponentType,\n ): Omit<Props, 'surface' | 'color' | 'style' | 'styles' | 'className'> & {\n Root: React.ComponentType<GetComponentProps<ComponentType>>;\n styles: Styles & { cssVariableObject: { [key: string]: string } };\n } {\n const theme = useTheme<Theme>();\n const { color, surface } = useColorContext(props);\n const {\n color: _color,\n surface: _surface,\n className: incomingClassName,\n style: _incomingStyle,\n styles: _incomingStyles = empty as Styles,\n ...restOfProps\n } = props;\n\n const incomingStyle = usePreserveReference(_incomingStyle as any);\n const incomingStyles = usePreserveReference(_incomingStyles as any);\n\n // create a map of unprocessed styles\n const { cssVariableObject, classes, classNamePrefix } = useMemo(() => {\n const variableObject: any = stylesFn({\n css: () => {\n throw new Error('css tag was executed in SSR mode');\n },\n color,\n theme,\n surface,\n staticVar: identity,\n });\n\n const { classNamePrefix, ...classNamesVariableValues } = variableObject;\n\n const cssVariableObject = Object.entries(classNamesVariableValues)\n .map(([className, values]) =>\n (values as string[]).map((value, i) => ({\n key: `--${classNamePrefix}-${className}-${i}`,\n value,\n })),\n )\n .flat()\n .reduce((acc, { key, value }) => {\n acc[key] = value;\n return acc;\n }, {} as { [key: string]: string });\n\n return {\n cssVariableObject,\n classes: Object.keys(classNamesVariableValues),\n classNamePrefix,\n };\n }, [color, surface, theme]);\n\n // calculate the class names\n const thisStyles = useMemo(() => {\n return classes\n .map((key) => [key, `${classNamePrefix}-${key}`])\n .reduce((acc, [key, className]) => {\n acc[key as keyof Styles] = className as Styles[keyof Styles];\n return acc;\n }, {} as Styles);\n }, [classNamePrefix, classes]);\n\n const mergedStyles = useMemo(() => {\n const thisStyleKeys = Object.keys(thisStyles) as Array<keyof Styles>;\n\n const mergedStyles = thisStyleKeys.reduce((merged, key) => {\n const thisStyle = thisStyles[key];\n const incomingStyle = incomingStyles[key];\n\n merged[key] = [thisStyle, incomingStyle]\n .filter(Boolean)\n .join(' ') as Styles[keyof Styles];\n\n return merged;\n }, {} as Styles);\n\n return { ...mergedStyles, cssVariableObject };\n }, [thisStyles, cssVariableObject, incomingStyles]);\n\n const Component = (component || 'div') as React.ComponentType<any>;\n\n const Root = useMemo(() => {\n return forwardRef((rootProps: StyleProps<Styles>, ref: any) => {\n const { className: rootClassName, style: rootStyles } = rootProps;\n\n return (\n <Component\n {...rootProps}\n ref={ref}\n className={[mergedStyles.root, rootClassName, incomingClassName]\n .filter(Boolean)\n .join(' ')}\n style={{\n ...rootStyles,\n ...incomingStyle,\n ...cssVariableObject,\n }}\n />\n );\n }) as React.ComponentType<GetComponentProps<ComponentType>>;\n }, [\n mergedStyles.root,\n incomingClassName,\n incomingStyle,\n cssVariableObject,\n ]);\n\n return {\n Root,\n styles: mergedStyles,\n ...restOfProps,\n };\n }\n\n // This is a type-assertion so ensure that this type is compatible with the\n // `UseStyles` type. TODO: may want to find a better way to enforce this\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n useStyles as UseStyles<any, any>;\n\n return useStyles;\n}\n\nexport default createStyles;\n"],"names":["hashStyleObj","styleObj","Object","keys","map","key","join","usePreserveReference","useMemo","empty","identity","t","createStyles","stylesFn","useStyles","props","component","theme","useTheme","color","surface","useColorContext","_color","_surface","className","incomingClassName","style","_incomingStyle","styles","_incomingStyles","restOfProps","incomingStyle","incomingStyles","cssVariableObject","classes","classNamePrefix","variableObject","css","Error","staticVar","classNamesVariableValues","entries","values","value","i","flat","reduce","acc","thisStyles","mergedStyles","thisStyleKeys","merged","thisStyle","filter","Boolean","Component","Root","forwardRef","rootProps","ref","rootClassName","rootStyles","root"],"mappings":";;;;;AAWA,SAASA,YAAT,CACEC,QADF,EAEE;AACA,MAAI,CAACA,QAAL,EAAe,OAAO,EAAP;AAEf,SAAOC,MAAM,CAACC,IAAP,CAAYF,QAAZ,EACJG,GADI,CACCC,GAAD,IAAU,GAAEA,GAAI,IAAGJ,QAAQ,CAACI,GAAD,CAAM,EADjC,EAEJC,IAFI,CAEC,OAFD,CAAP;AAGD;;AAED,SAASC,oBAAT,CAEEN,QAFF,EAEkB;AAChB,SAAOO,OAAO,CACZ,MAAMP,QADM;AAGZ,GAACD,YAAY,CAACC,QAAD,CAAb,CAHY,CAAd;AAKD;;;AAGD,MAAMQ,KAAK,GAAG,EAAd;;AAEA,MAAMC,QAAQ,GAAmBC,CAAhB,IAAyBA,CAA1C;;AAEA,SAASC,YAAT,CACEC,QADF,EAEE;AACA,WAASC,SAAT,CAIEC,KAAY,GAAG,EAJjB,EAKEC,SALF,EASE;AACA,UAAMC,KAAK,GAAGC,QAAQ,EAAtB;AACA,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAqBC,eAAe,CAACN,KAAD,CAA1C;AACA,UAAM;AACJI,MAAAA,KAAK,EAAEG,MADH;AAEJF,MAAAA,OAAO,EAAEG,QAFL;AAGJC,MAAAA,SAAS,EAAEC,iBAHP;AAIJC,MAAAA,KAAK,EAAEC,cAJH;AAKJC,MAAAA,MAAM,EAAEC,eAAe,GAAGpB,KALtB;AAMJ,SAAGqB;AANC,QAOFf,KAPJ;AASA,UAAMgB,aAAa,GAAGxB,oBAAoB,CAACoB,cAAD,CAA1C;AACA,UAAMK,cAAc,GAAGzB,oBAAoB,CAACsB,eAAD,CAA3C,CAbA;;AAgBA,UAAM;AAAEI,MAAAA,iBAAF;AAAqBC,MAAAA,OAArB;AAA8BC,MAAAA;AAA9B,QAAkD3B,OAAO,CAAC,MAAM;AACpE,YAAM4B,cAAmB,GAAGvB,QAAQ,CAAC;AACnCwB,QAAAA,GAAG,EAAE,MAAM;AACT,gBAAM,IAAIC,KAAJ,CAAU,kCAAV,CAAN;AACD,SAHkC;AAInCnB,QAAAA,KAJmC;AAKnCF,QAAAA,KALmC;AAMnCG,QAAAA,OANmC;AAOnCmB,QAAAA,SAAS,EAAE7B;AAPwB,OAAD,CAApC;AAUA,YAAM;AAAEyB,QAAAA,eAAF;AAAmB,WAAGK;AAAtB,UAAmDJ,cAAzD;AAEA,YAAMH,iBAAiB,GAAG/B,MAAM,CAACuC,OAAP,CAAeD,wBAAf,EACvBpC,GADuB,CACnB,CAAC,CAACoB,SAAD,EAAYkB,MAAZ,CAAD,KACFA,MAAD,CAAqBtC,GAArB,CAAyB,CAACuC,KAAD,EAAQC,CAAR,MAAe;AACtCvC,QAAAA,GAAG,EAAG,KAAI8B,eAAgB,IAAGX,SAAU,IAAGoB,CAAE,EADN;AAEtCD,QAAAA;AAFsC,OAAf,CAAzB,CAFsB,EAOvBE,IAPuB,GAQvBC,MARuB,CAQhB,CAACC,GAAD,EAAM;AAAE1C,QAAAA,GAAF;AAAOsC,QAAAA;AAAP,OAAN,KAAyB;AAC/BI,QAAAA,GAAG,CAAC1C,GAAD,CAAH,GAAWsC,KAAX;AACA,eAAOI,GAAP;AACD,OAXuB,EAWrB,EAXqB,CAA1B;AAaA,aAAO;AACLd,QAAAA,iBADK;AAELC,QAAAA,OAAO,EAAEhC,MAAM,CAACC,IAAP,CAAYqC,wBAAZ,CAFJ;AAGLL,QAAAA;AAHK,OAAP;AAKD,KA/B8D,EA+B5D,CAAChB,KAAD,EAAQC,OAAR,EAAiBH,KAAjB,CA/B4D,CAA/D,CAhBA;;AAkDA,UAAM+B,UAAU,GAAGxC,OAAO,CAAC,MAAM;AAC/B,aAAO0B,OAAO,CACX9B,GADI,CACCC,GAAD,IAAS,CAACA,GAAD,EAAO,GAAE8B,eAAgB,IAAG9B,GAAI,EAAhC,CADT,EAEJyC,MAFI,CAEG,CAACC,GAAD,EAAM,CAAC1C,GAAD,EAAMmB,SAAN,CAAN,KAA2B;AACjCuB,QAAAA,GAAG,CAAC1C,GAAD,CAAH,GAA2BmB,SAA3B;AACA,eAAOuB,GAAP;AACD,OALI,EAKF,EALE,CAAP;AAMD,KAPyB,EAOvB,CAACZ,eAAD,EAAkBD,OAAlB,CAPuB,CAA1B;AASA,UAAMe,YAAY,GAAGzC,OAAO,CAAC,MAAM;AACjC,YAAM0C,aAAa,GAAGhD,MAAM,CAACC,IAAP,CAAY6C,UAAZ,CAAtB;AAEA,YAAMC,YAAY,GAAGC,aAAa,CAACJ,MAAd,CAAqB,CAACK,MAAD,EAAS9C,GAAT,KAAiB;AACzD,cAAM+C,SAAS,GAAGJ,UAAU,CAAC3C,GAAD,CAA5B;AACA,cAAM0B,aAAa,GAAGC,cAAc,CAAC3B,GAAD,CAApC;AAEA8C,QAAAA,MAAM,CAAC9C,GAAD,CAAN,GAAc,CAAC+C,SAAD,EAAYrB,aAAZ,EACXsB,MADW,CACJC,OADI,EAEXhD,IAFW,CAEN,GAFM,CAAd;AAIA,eAAO6C,MAAP;AACD,OAToB,EASlB,EATkB,CAArB;AAWA,aAAO,EAAE,GAAGF,YAAL;AAAmBhB,QAAAA;AAAnB,OAAP;AACD,KAf2B,EAezB,CAACe,UAAD,EAAaf,iBAAb,EAAgCD,cAAhC,CAfyB,CAA5B;AAiBA,UAAMuB,SAAS,GAAIvC,SAAS,IAAI,KAAhC;AAEA,UAAMwC,IAAI,GAAGhD,OAAO,CAAC,MAAM;AACzB,aAAOiD,UAAU,CAAC,CAACC,SAAD,EAAgCC,GAAhC,KAA6C;AAC7D,cAAM;AAAEnC,UAAAA,SAAS,EAAEoC,aAAb;AAA4BlC,UAAAA,KAAK,EAAEmC;AAAnC,YAAkDH,SAAxD;AAEA,4BACE,oBAAC,SAAD,eACMA,SADN;AAEE,UAAA,GAAG,EAAEC,GAFP;AAGE,UAAA,SAAS,EAAE,CAACV,YAAY,CAACa,IAAd,EAAoBF,aAApB,EAAmCnC,iBAAnC,EACR4B,MADQ,CACDC,OADC,EAERhD,IAFQ,CAEH,GAFG,CAHb;AAME,UAAA,KAAK,EAAE,EACL,GAAGuD,UADE;AAEL,eAAG9B,aAFE;AAGL,eAAGE;AAHE;AANT,WADF;AAcD,OAjBgB,CAAjB;AAkBD,KAnBmB,EAmBjB,CACDgB,YAAY,CAACa,IADZ,EAEDrC,iBAFC,EAGDM,aAHC,EAIDE,iBAJC,CAnBiB,CAApB;AA0BA,WAAO;AACLuB,MAAAA,IADK;AAEL5B,MAAAA,MAAM,EAAEqB,YAFH;AAGL,SAAGnB;AAHE,KAAP;AAKD,GAvHD;AA8HA,SAAOhB,SAAP;AACD;;;;"}
+60
-36
index.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('@react-style-system/core')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', '@react-style-system/core'], factory) :
(global = global || self, factory(global.ReactStyleSystem = {}, global.React, global.classNames, global.ReactStylesSystem));
}(this, (function (exports, React, classNames, core) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@react-style-system/core')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', '@react-style-system/core'], factory) :
(global = global || self, factory(global.ReactStyleSystem = {}, global.React, global.ReactStyleSystem));
}(this, (function (exports, React, core) { 'use strict';
var React__default = 'default' in React ? React['default'] : React;
classNames = classNames && classNames.hasOwnProperty('default') ? classNames['default'] : classNames;

@@ -114,3 +113,3 @@ function _defineProperty(obj, key, value) {

function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

@@ -123,6 +122,3 @@

function _iterableToArrayLimit(arr, i) {
if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
return;
}
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];

@@ -153,10 +149,35 @@ var _n = true;

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function hashStyleObj(styleObj) {
if (!styleObj) return '';
return Object.keys(styleObj).map(function (key) {
return "".concat(key, "_").concat(styleObj[key]);
}).join('__|__');
}
function usePreserveReference(styleObj) {
return React.useMemo(function () {
return styleObj;
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[hashStyleObj(styleObj)]);
} // preserve the object reference

@@ -176,22 +197,24 @@

var theme = core.useTheme();
var colorContext = core.useColorContext();
var defaultColor = colorContext.color;
var defaultSurfaceColor = colorContext.surface;
var _props$color = props.color,
color = _props$color === void 0 ? defaultColor : _props$color,
_props$surface = props.surface,
surface = _props$surface === void 0 ? defaultSurfaceColor : _props$surface,
incomingStyle = props.style,
var _useColorContext = core.useColorContext(props),
color = _useColorContext.color,
surface = _useColorContext.surface;
var _color = props.color,
_surface = props.surface,
incomingClassName = props.className,
_incomingStyle = props.style,
_props$styles = props.styles,
incomingStyles = _props$styles === void 0 ? empty : _props$styles,
restOfProps = _objectWithoutProperties(props, ["color", "surface", "style", "className", "styles"]);
_incomingStyles = _props$styles === void 0 ? empty : _props$styles,
restOfProps = _objectWithoutProperties(props, ["color", "surface", "className", "style", "styles"]);
var incomingStyleHash = hashStyleObj(incomingStyles); // create a map of unprocessed styles
var incomingStyle = usePreserveReference(_incomingStyle);
var incomingStyles = usePreserveReference(_incomingStyles); // create a map of unprocessed styles
var _useMemo = React.useMemo(function () {
var variableObject = stylesFn({
css: core.css,
color: core.createReadablePalette(color, surface),
css: function css() {
throw new Error('css tag was executed in SSR mode');
},
color: color,
theme: theme,

@@ -247,9 +270,12 @@ surface: surface,

var thisStyleKeys = Object.keys(thisStyles);
return thisStyleKeys.reduce(function (merged, key) {
var mergedStyles = thisStyleKeys.reduce(function (merged, key) {
var thisStyle = thisStyles[key];
var incomingStyle = incomingStyles[key];
merged[key] = classNames(thisStyle, incomingStyle);
merged[key] = [thisStyle, incomingStyle].filter(Boolean).join(' ');
return merged;
}, {}); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [thisStyles, incomingStyleHash]);
}, {});
return _objectSpread2(_objectSpread2({}, mergedStyles), {}, {
cssVariableObject: cssVariableObject
});
}, [thisStyles, cssVariableObject, incomingStyles]);
var Component = component || 'div';

@@ -260,10 +286,9 @@ var Root = React.useMemo(function () {

rootStyles = rootProps.style;
return React__default.createElement(Component, _extends({}, rootProps, {
return /*#__PURE__*/React__default.createElement(Component, _extends({}, rootProps, {
ref: ref,
className: classNames(mergedStyles.root, rootClassName, incomingClassName),
style: _objectSpread2({}, rootStyles, {}, incomingStyle, {}, cssVariableObject)
className: [mergedStyles.root, rootClassName, incomingClassName].filter(Boolean).join(' '),
style: _objectSpread2(_objectSpread2(_objectSpread2({}, rootStyles), incomingStyle), cssVariableObject)
}));
}); // TODO: audit this 👇
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [incomingClassName, incomingStyleHash, mergedStyles.root, Component]);
});
}, [mergedStyles.root, incomingClassName, incomingStyle, cssVariableObject]);
return _objectSpread2({

@@ -273,4 +298,3 @@ Root: Root,

}, restOfProps);
}
} // This is a type-assertion so ensure that this type is compatible with the
return useStyles;

@@ -277,0 +301,0 @@ }

+1
-1
index.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.js","sources":["../../packages/ssr/src/createStyles.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport classNames from 'classnames';\nimport {\n ReactComponent,\n StyleProps,\n StyleFnArgs,\n css,\n useTheme,\n useColorContext,\n createReadablePalette,\n} from '@react-style-system/core';\n\ntype GetComponentProps<\n ComponentType extends ReactComponent\n> = ComponentType extends React.ComponentType<infer U>\n ? U\n : ComponentType extends keyof JSX.IntrinsicElements\n ? JSX.IntrinsicElements[ComponentType]\n : any;\n\nfunction hashStyleObj(styleObj: { [key: string]: string | undefined }) {\n return Object.keys(styleObj)\n .map(key => `${key}_${styleObj[key]}`)\n .join('__|__');\n}\n\n// preserve the object reference\nconst empty = {};\n\nconst identity = <T extends any>(t: T) => t;\n\nfunction createStyles<Styles extends { [key: string]: string }, Theme = any>(\n stylesFn: (args: StyleFnArgs<Theme>) => Styles,\n) {\n function useStyles<\n Props extends StyleProps<Styles>,\n ComponentType extends ReactComponent = 'div'\n >(\n props: Props = {} as any,\n component?: ComponentType,\n ): Omit<Props, 'surface' | 'color' | 'style' | 'styles' | 'className'> & {\n Root: React.ComponentType<GetComponentProps<ComponentType>>;\n styles: Styles;\n } {\n const theme = useTheme<Theme>();\n const colorContext = useColorContext();\n const defaultColor = colorContext.color;\n const defaultSurfaceColor = colorContext.surface;\n const {\n color = defaultColor,\n surface = defaultSurfaceColor,\n style: incomingStyle,\n className: incomingClassName,\n styles: incomingStyles = empty as Styles,\n ...restOfProps\n } = props;\n\n const incomingStyleHash = hashStyleObj(incomingStyles);\n\n // create a map of unprocessed styles\n const { cssVariableObject, classes, classNamePrefix } = useMemo(() => {\n const variableObject: any = stylesFn({\n css,\n color: createReadablePalette(color, surface),\n theme,\n surface,\n staticVar: identity,\n });\n\n const { classNamePrefix, ...classNamesVariableValues } = variableObject;\n\n const cssVariableObject = Object.entries(classNamesVariableValues)\n .map(([className, values]) =>\n (values as string[]).map((value, i) => ({\n key: `--${classNamePrefix}-${className}-${i}`,\n value,\n })),\n )\n .flat()\n .reduce((acc, { key, value }) => {\n acc[key] = value;\n return acc;\n }, {} as { [key: string]: string });\n\n return {\n cssVariableObject,\n classes: Object.keys(classNamesVariableValues),\n classNamePrefix,\n };\n }, [color, surface, theme]);\n\n // calculate the class names\n const thisStyles = useMemo(() => {\n return classes\n .map(key => [key, `${classNamePrefix}-${key}`])\n .reduce((acc, [key, className]) => {\n acc[key as keyof Styles] = className as Styles[keyof Styles];\n return acc;\n }, {} as Styles);\n }, [classNamePrefix, classes]);\n\n const mergedStyles = useMemo(() => {\n const thisStyleKeys = Object.keys(thisStyles) as Array<keyof Styles>;\n\n return thisStyleKeys.reduce((merged, key) => {\n const thisStyle = thisStyles[key];\n const incomingStyle = incomingStyles[key];\n\n merged[key] = classNames(\n thisStyle,\n incomingStyle,\n ) as Styles[keyof Styles];\n\n return merged;\n }, {} as Styles);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [thisStyles, incomingStyleHash]);\n\n const Component = (component || 'div') as React.ComponentType<any>;\n\n const Root = useMemo(() => {\n return forwardRef((rootProps: StyleProps<Styles>, ref: any) => {\n const { className: rootClassName, style: rootStyles } = rootProps;\n\n return (\n <Component\n {...rootProps}\n ref={ref}\n className={classNames(\n mergedStyles.root,\n rootClassName,\n incomingClassName,\n )}\n style={{\n ...rootStyles,\n ...incomingStyle,\n ...cssVariableObject,\n }}\n />\n );\n }) as React.ComponentType<GetComponentProps<ComponentType>>;\n // TODO: audit this 👇\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [incomingClassName, incomingStyleHash, mergedStyles.root, Component]);\n\n return {\n Root,\n styles: mergedStyles,\n ...restOfProps,\n };\n }\n\n return useStyles;\n}\n\nexport default createStyles;\n"],"names":["hashStyleObj","styleObj","Object","keys","map","key","join","empty","identity","t","createStyles","stylesFn","useStyles","props","component","theme","useTheme","colorContext","useColorContext","defaultColor","color","defaultSurfaceColor","surface","incomingStyle","style","incomingClassName","className","styles","incomingStyles","restOfProps","incomingStyleHash","useMemo","variableObject","css","createReadablePalette","staticVar","classNamePrefix","classNamesVariableValues","cssVariableObject","entries","values","value","i","flat","reduce","acc","classes","thisStyles","mergedStyles","thisStyleKeys","merged","thisStyle","classNames","Component","Root","forwardRef","rootProps","ref","rootClassName","rootStyles","React","root"],"mappings":"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"}
{"version":3,"file":"index.js","sources":["../../packages/ssr/src/createStyles.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport {\n ReactComponent,\n StyleProps,\n StyleFnArgs,\n GetComponentProps,\n UseStyles,\n useTheme,\n useColorContext,\n} from '@react-style-system/core';\n\nfunction hashStyleObj(\n styleObj: { [key: string]: string | undefined } | null | undefined,\n) {\n if (!styleObj) return '';\n\n return Object.keys(styleObj)\n .map((key) => `${key}_${styleObj[key]}`)\n .join('__|__');\n}\n\nfunction usePreserveReference<\n T extends { [key: string]: string | undefined } | null | undefined\n>(styleObj: T): T {\n return useMemo(\n () => styleObj,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [hashStyleObj(styleObj)],\n );\n}\n\n// preserve the object reference\nconst empty = {};\n\nconst identity = <T extends any>(t: T) => t;\n\nfunction createStyles<Styles extends { [key: string]: string }, Theme = any>(\n stylesFn: (args: StyleFnArgs<Theme>) => Styles,\n) {\n function useStyles<\n Props extends StyleProps<Styles>,\n ComponentType extends ReactComponent = 'div'\n >(\n props: Props = {} as any,\n component?: ComponentType,\n ): Omit<Props, 'surface' | 'color' | 'style' | 'styles' | 'className'> & {\n Root: React.ComponentType<GetComponentProps<ComponentType>>;\n styles: Styles & { cssVariableObject: { [key: string]: string } };\n } {\n const theme = useTheme<Theme>();\n const { color, surface } = useColorContext(props);\n const {\n color: _color,\n surface: _surface,\n className: incomingClassName,\n style: _incomingStyle,\n styles: _incomingStyles = empty as Styles,\n ...restOfProps\n } = props;\n\n const incomingStyle = usePreserveReference(_incomingStyle as any);\n const incomingStyles = usePreserveReference(_incomingStyles as any);\n\n // create a map of unprocessed styles\n const { cssVariableObject, classes, classNamePrefix } = useMemo(() => {\n const variableObject: any = stylesFn({\n css: () => {\n throw new Error('css tag was executed in SSR mode');\n },\n color,\n theme,\n surface,\n staticVar: identity,\n });\n\n const { classNamePrefix, ...classNamesVariableValues } = variableObject;\n\n const cssVariableObject = Object.entries(classNamesVariableValues)\n .map(([className, values]) =>\n (values as string[]).map((value, i) => ({\n key: `--${classNamePrefix}-${className}-${i}`,\n value,\n })),\n )\n .flat()\n .reduce((acc, { key, value }) => {\n acc[key] = value;\n return acc;\n }, {} as { [key: string]: string });\n\n return {\n cssVariableObject,\n classes: Object.keys(classNamesVariableValues),\n classNamePrefix,\n };\n }, [color, surface, theme]);\n\n // calculate the class names\n const thisStyles = useMemo(() => {\n return classes\n .map((key) => [key, `${classNamePrefix}-${key}`])\n .reduce((acc, [key, className]) => {\n acc[key as keyof Styles] = className as Styles[keyof Styles];\n return acc;\n }, {} as Styles);\n }, [classNamePrefix, classes]);\n\n const mergedStyles = useMemo(() => {\n const thisStyleKeys = Object.keys(thisStyles) as Array<keyof Styles>;\n\n const mergedStyles = thisStyleKeys.reduce((merged, key) => {\n const thisStyle = thisStyles[key];\n const incomingStyle = incomingStyles[key];\n\n merged[key] = [thisStyle, incomingStyle]\n .filter(Boolean)\n .join(' ') as Styles[keyof Styles];\n\n return merged;\n }, {} as Styles);\n\n return { ...mergedStyles, cssVariableObject };\n }, [thisStyles, cssVariableObject, incomingStyles]);\n\n const Component = (component || 'div') as React.ComponentType<any>;\n\n const Root = useMemo(() => {\n return forwardRef((rootProps: StyleProps<Styles>, ref: any) => {\n const { className: rootClassName, style: rootStyles } = rootProps;\n\n return (\n <Component\n {...rootProps}\n ref={ref}\n className={[mergedStyles.root, rootClassName, incomingClassName]\n .filter(Boolean)\n .join(' ')}\n style={{\n ...rootStyles,\n ...incomingStyle,\n ...cssVariableObject,\n }}\n />\n );\n }) as React.ComponentType<GetComponentProps<ComponentType>>;\n }, [\n mergedStyles.root,\n incomingClassName,\n incomingStyle,\n cssVariableObject,\n ]);\n\n return {\n Root,\n styles: mergedStyles,\n ...restOfProps,\n };\n }\n\n // This is a type-assertion so ensure that this type is compatible with the\n // `UseStyles` type. TODO: may want to find a better way to enforce this\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n useStyles as UseStyles<any, any>;\n\n return useStyles;\n}\n\nexport default createStyles;\n"],"names":["hashStyleObj","styleObj","Object","keys","map","key","join","usePreserveReference","useMemo","empty","identity","t","createStyles","stylesFn","useStyles","props","component","theme","useTheme","useColorContext","color","surface","_color","_surface","incomingClassName","className","_incomingStyle","style","styles","_incomingStyles","restOfProps","incomingStyle","incomingStyles","variableObject","css","Error","staticVar","classNamePrefix","classNamesVariableValues","cssVariableObject","entries","values","value","i","flat","reduce","acc","classes","thisStyles","mergedStyles","thisStyleKeys","merged","thisStyle","filter","Boolean","Component","Root","forwardRef","rootProps","ref","rootClassName","rootStyles","React","root"],"mappings":"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"}
+5
-4
package.json
{
"name": "@react-style-system/ssr",
"version": "0.0.0-9e1088e9b",
"version": "0.0.0-a56660eaa",
"author": {

@@ -13,3 +13,3 @@ "email": "ricokahler@me.com",

},
"description": "a carefully thought-out system system for React components",
"description": "a lean, component-centric style system for React components",
"keywords": [

@@ -26,6 +26,7 @@ "css",

"dependencies": {
"@react-style-system/core": "0.0.0-9e1088e9b",
"@react-style-system/core": "0.0.0-a56660eaa",
"@types/classnames": "2.2.10",
"classnames": "2.2.6"
"classnames": "2.2.6",
"@babel/runtime": "7.9.6"
}
}
+6
-3
src/createStyles.d.ts
import React from 'react';
import { ReactComponent, StyleProps, StyleFnArgs } from '@react-style-system/core';
declare type GetComponentProps<ComponentType extends ReactComponent> = ComponentType extends React.ComponentType<infer U> ? U : ComponentType extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[ComponentType] : any;
import { ReactComponent, StyleProps, StyleFnArgs, GetComponentProps } from '@react-style-system/core';
declare function createStyles<Styles extends {

@@ -8,4 +7,8 @@ [key: string]: string;

Root: React.ComponentType<GetComponentProps<ComponentType>>;
styles: Styles;
styles: Styles & {
cssVariableObject: {
[key: string]: string;
};
};
};
export default createStyles;