Your IP : 216.73.216.86
GlobalStyles.js 0000644 00000003064 15170147737 0007525 0 ustar 00 "use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlobalStyles = void 0;
const react_1 = __importDefault(require("react"));
const reactEmotion = __importStar(require("@emotion/react"));
function GlobalStyles(props) {
const { styles } = props;
return react_1.default.createElement(reactEmotion.Global, { styles: reactEmotion.css(styles) });
}
exports.GlobalStyles = GlobalStyles;
withStyles.d.ts 0000644 00000002704 15170147737 0007534 0 ustar 00 import React from "react";
import type { ReactHTML } from "react";
import type { ReactComponent } from "./tools/ReactComponent";
import type { CSSObject } from "./types";
export declare function createWithStyles<Theme>(params: {
useTheme: () => Theme;
}): {
withStyles: <C extends keyof React.ReactHTML | ReactComponent<any>, Props extends C extends ReactComponent<infer P> ? P : C extends keyof React.ReactHTML ? React.ReactHTML[C] extends ReactComponent<infer P_1> ? NonNullable<P_1> : never : never, CssObjectByRuleName extends Props extends {
classes?: Partial<infer ClassNameByRuleName> | undefined;
} ? { [RuleName in keyof ClassNameByRuleName]?: CSSObject | undefined; } & {
[mediaQuery: `@media${string}`]: { [RuleName_1 in keyof ClassNameByRuleName]?: CSSObject | undefined; };
} : {
root: CSSObject;
} & {
[mediaQuery: `@media${string}`]: {
root: CSSObject;
};
}>(Component: C, cssObjectByRuleNameOrGetCssObjectByRuleName: (CssObjectByRuleName & {
[mediaQuery: `@media${string}`]: { [Key in keyof CssObjectByRuleName]?: CSSObject | undefined; };
}) | ((theme: Theme, props: Props, classes: Record<Exclude<keyof CssObjectByRuleName, `@media${string}`>, string>) => CssObjectByRuleName), params?: {
name?: string | Record<string, unknown> | undefined;
uniqId?: string | undefined;
} | undefined) => C extends keyof React.ReactHTML ? React.ReactHTML[C] : C;
};
package.json 0000644 00000007216 15170147737 0007054 0 ustar 00 {
"_from": "tss-react@^3.6.0",
"_id": "tss-react@3.7.1",
"_inBundle": false,
"_integrity": "sha512-dfWUoxBlKZfIG9UC1A2h02OmcE/Ni0itCmmZu94E9g+KyBhKMHKcsKvUm0bNlRqTmYjXiCgPJDmj5fyc8CSrLg==",
"_location": "/tss-react",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "tss-react@^3.6.0",
"name": "tss-react",
"escapedName": "tss-react",
"rawSpec": "^3.6.0",
"saveSpec": null,
"fetchSpec": "^3.6.0"
},
"_requiredBy": [
"/mui-datatables"
],
"_resolved": "https://registry.npmjs.org/tss-react/-/tss-react-3.7.1.tgz",
"_shasum": "119647731490f9e7e62c7f6a38a78df981929a4b",
"_spec": "tss-react@^3.6.0",
"_where": "C:\\xampp\\htdocs\\emeraltd\\node_modules\\mui-datatables",
"author": {
"name": "u/garronej"
},
"bugs": {
"url": "https://github.com/garronej/tss-react/issues"
},
"bundleDependencies": false,
"dependencies": {
"@emotion/cache": "*",
"@emotion/serialize": "*",
"@emotion/utils": "*"
},
"deprecated": false,
"description": "makeStyles is dead, long live makeStyles!",
"devDependencies": {
"@emotion/react": "11.9.0",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.3.0",
"@mui/material": "5.8.0",
"@types/node": "^15.3.1",
"@types/react": "18.0.9",
"@types/react-dom": "18.0.4",
"@typescript-eslint/eslint-plugin": "^4.24.0",
"@typescript-eslint/parser": "^4.24.0",
"eslint": "^7.26.0",
"eslint-config-prettier": "^8.3.0",
"husky": "^4.3.8",
"lint-staged": "^11.0.0",
"next": "12.1.7-canary.4",
"prettier": "^2.3.0",
"react": "18.1.0",
"ts-node": "^10.2.1",
"tsafe": "^0.10.0",
"typescript": "^4.4.3"
},
"files": [
"@emotion/css.d.ts",
"@emotion/css.js",
"@emotion/react.d.ts",
"@emotion/react.js",
"GlobalStyles.d.ts",
"GlobalStyles.js",
"cache.d.ts",
"cache.js",
"compat.d.ts",
"compat.js",
"cssAndCx.d.ts",
"cssAndCx.js",
"index.d.ts",
"index.js",
"makeStyles.d.ts",
"makeStyles.js",
"mergeClasses.d.ts",
"mergeClasses.js",
"mui.d.ts",
"mui.js",
"nextJs.d.ts",
"nextJs.js",
"tools/ReactComponent.d.ts",
"tools/ReactComponent.js",
"tools/assert.d.ts",
"tools/assert.js",
"tools/capitalize.d.ts",
"tools/capitalize.js",
"tools/classnames.d.ts",
"tools/classnames.js",
"tools/getDependencyArrayRef.d.ts",
"tools/getDependencyArrayRef.js",
"tools/objectKeys.d.ts",
"tools/objectKeys.js",
"tools/polyfills/Object.fromEntries.d.ts",
"tools/polyfills/Object.fromEntries.js",
"tools/typeGuard.d.ts",
"tools/typeGuard.js",
"tools/useGuaranteedMemo.d.ts",
"tools/useGuaranteedMemo.js",
"types.d.ts",
"types.js",
"withStyles.d.ts",
"withStyles.js",
"withStyles_compat.d.ts",
"withStyles_compat.js"
],
"homepage": "https://www.tss-react.dev",
"husky": {
"hooks": {
"pre-commit": "lint-staged -v"
}
},
"keywords": [
"jss",
"hooks",
"react",
"@material-ui",
"mui",
"css",
"makeStyles",
"withStyles"
],
"license": "MIT",
"lint-staged": {
"*.{ts,tsx}": [
"eslint --fix"
],
"*.{ts,tsx,json,md}": [
"prettier --write"
]
},
"main": "index.js",
"name": "tss-react",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.2 || ^18.0.0",
"@emotion/react": "^11.4.1",
"@emotion/server": "^11.4.0"
},
"peerDependenciesMeta": {
"@emotion/server": {
"optional": true
}
},
"repository": {
"type": "git",
"url": "git://github.com/garronej/tss-react.git"
},
"types": "index.d.ts",
"version": "3.7.1"
}
GlobalStyles.d.ts 0000644 00000000256 15170147737 0007761 0 ustar 00 /// <reference types="react" />
import type { CSSInterpolation } from "./types";
export declare function GlobalStyles(props: {
styles: CSSInterpolation;
}): JSX.Element;
types.js 0000644 00000000500 15170147737 0006255 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.matchCSSObject = void 0;
function matchCSSObject(arg) {
return (arg instanceof Object &&
!("styles" in arg) &&
!("length" in arg) &&
!("__emotion_styles" in arg));
}
exports.matchCSSObject = matchCSSObject;
nextJs.d.ts 0000644 00000000454 15170147737 0006630 0 ustar 00 import type NextDocument from "next/document";
import type { EmotionCache } from "@emotion/cache";
/** @se <https://docs.tss-react.dev/ssr/next.js> */
export declare function withEmotionCache(params: {
Document: typeof NextDocument;
getCaches?: () => EmotionCache[];
}): typeof NextDocument;
cssAndCx.js 0000644 00000010462 15170147737 0006627 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCssAndCx = exports.createCssAndCx = void 0;
const classnames_1 = require("./tools/classnames");
const serialize_1 = require("@emotion/serialize");
const utils_1 = require("@emotion/utils");
const useGuaranteedMemo_1 = require("./tools/useGuaranteedMemo");
const cache_1 = require("./cache");
const types_1 = require("./types");
exports.createCssAndCx = (() => {
function merge(registered, css, className) {
const registeredStyles = [];
const rawClassName = (0, utils_1.getRegisteredStyles)(registered, registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css(registeredStyles);
}
function createCssAndCx(params) {
const { cache } = params;
const css = (...args) => {
const serialized = (0, serialize_1.serializeStyles)(args, cache.registered);
(0, utils_1.insertStyles)(cache, serialized, false);
const className = `${cache.key}-${serialized.name}`;
scope: {
const arg = args[0];
if (!(0, types_1.matchCSSObject)(arg)) {
break scope;
}
increaseSpecificityToTakePrecedenceOverMediaQuerries.saveClassNameCSSObjectMapping(cache, className, arg);
}
return className;
};
const cx = (...args) => {
const className = (0, classnames_1.classnames)(args);
const feat27FixedClassnames = increaseSpecificityToTakePrecedenceOverMediaQuerries.fixClassName(cache, className, css);
return merge(cache.registered, css, feat27FixedClassnames);
//return merge(cache.registered, css, className);
};
return { css, cx };
}
return { createCssAndCx };
})().createCssAndCx;
/** Will pickup the contextual cache if any */
function useCssAndCx() {
const cache = (0, cache_1.useTssEmotionCache)();
const { css, cx } = (0, useGuaranteedMemo_1.useGuaranteedMemo)(() => (0, exports.createCssAndCx)({ cache }), [cache]);
return { css, cx };
}
exports.useCssAndCx = useCssAndCx;
// https://github.com/garronej/tss-react/issues/27
const increaseSpecificityToTakePrecedenceOverMediaQuerries = (() => {
const cssObjectMapByCache = new WeakMap();
return {
"saveClassNameCSSObjectMapping": (cache, className, cssObject) => {
let cssObjectMap = cssObjectMapByCache.get(cache);
if (cssObjectMap === undefined) {
cssObjectMap = new Map();
cssObjectMapByCache.set(cache, cssObjectMap);
}
cssObjectMap.set(className, cssObject);
},
"fixClassName": (() => {
function fix(classNameCSSObjects) {
let isThereAnyMediaQueriesInPreviousClasses = false;
return classNameCSSObjects.map(([className, cssObject]) => {
if (cssObject === undefined) {
return className;
}
let out;
if (!isThereAnyMediaQueriesInPreviousClasses) {
out = className;
for (const key in cssObject) {
if (key.startsWith("@media")) {
isThereAnyMediaQueriesInPreviousClasses = true;
break;
}
}
}
else {
out = {
"&&": cssObject,
};
}
return out;
});
}
return (cache, className, css) => {
const cssObjectMap = cssObjectMapByCache.get(cache);
return (0, classnames_1.classnames)(fix(className
.split(" ")
.map(className => [
className,
cssObjectMap === null || cssObjectMap === void 0 ? void 0 : cssObjectMap.get(className),
])).map(classNameOrCSSObject => typeof classNameOrCSSObject === "string"
? classNameOrCSSObject
: css(classNameOrCSSObject)));
};
})(),
};
})();
LICENSE 0000644 00000002114 15170147737 0005563 0 ustar 00 MIT License
Copyright (c) 2020 GitHub user u/garronej
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
index.js 0000644 00000004264 15170147737 0006233 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createMakeAndWithStyles = exports.TssCacheProvider = exports.getTssDefaultEmotionCache = exports.GlobalStyles = exports.keyframes = exports.createWithStyles = exports.createMakeStyles = exports.useMergedClasses = exports.useCssAndCx = void 0;
/** @see <https://docs.tss-react.dev/api-references> */
var cssAndCx_1 = require("./cssAndCx");
Object.defineProperty(exports, "useCssAndCx", { enumerable: true, get: function () { return cssAndCx_1.useCssAndCx; } });
var mergeClasses_1 = require("./mergeClasses");
Object.defineProperty(exports, "useMergedClasses", { enumerable: true, get: function () { return mergeClasses_1.useMergedClasses; } });
const makeStyles_1 = require("./makeStyles");
Object.defineProperty(exports, "createMakeStyles", { enumerable: true, get: function () { return makeStyles_1.createMakeStyles; } });
const withStyles_1 = require("./withStyles");
Object.defineProperty(exports, "createWithStyles", { enumerable: true, get: function () { return withStyles_1.createWithStyles; } });
/** @see <https://docs.tss-react.dev/api-references/keyframes> */
var react_1 = require("@emotion/react");
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return react_1.keyframes; } });
/** @see <https://docs.tss-react.dev/api-references/globalstyles> */
var GlobalStyles_1 = require("./GlobalStyles");
Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return GlobalStyles_1.GlobalStyles; } });
/** @see <https://docs.tss-react.dev/cache> */
var cache_1 = require("./cache");
Object.defineProperty(exports, "getTssDefaultEmotionCache", { enumerable: true, get: function () { return cache_1.getTssDefaultEmotionCache; } });
Object.defineProperty(exports, "TssCacheProvider", { enumerable: true, get: function () { return cache_1.TssCacheProvider; } });
/** @see <https://docs.tss-react.dev/api-references/makestyles-usestyles> */
function createMakeAndWithStyles(params) {
return Object.assign(Object.assign({}, (0, makeStyles_1.createMakeStyles)(params)), (0, withStyles_1.createWithStyles)(params));
}
exports.createMakeAndWithStyles = createMakeAndWithStyles;
withStyles_compat.d.ts 0000644 00000002132 15170147737 0011072 0 ustar 00 import React from "react";
import type { ReactHTML } from "react";
import type { ReactComponent } from "./tools/ReactComponent";
import type { CSSObject } from "./types";
export declare function createWithStyles<Theme>(params: {
useTheme: () => Theme;
}): {
withStyles: <C extends keyof React.ReactHTML | ReactComponent<any>, Props extends C extends ReactComponent<infer P> ? P : C extends keyof React.ReactHTML ? React.ReactHTML[C] extends ReactComponent<infer P_1> ? NonNullable<P_1> : never : never, CssObjectByRuleName extends Props extends {
classes?: Partial<infer ClassNameByRuleName> | undefined;
} ? { [RuleName in keyof ClassNameByRuleName]?: CSSObject | undefined; } : {
root: CSSObject;
}>(Component: C, cssObjectByRuleNameOrGetCssObjectByRuleName: CssObjectByRuleName | ((theme: Theme, props: Props, classes: Record<keyof CssObjectByRuleName, string>) => CssObjectByRuleName), params?: {
name?: string | Record<string, unknown> | undefined;
uniqId?: string | undefined;
} | undefined) => C extends keyof React.ReactHTML ? React.ReactHTML[C] : C;
};
cssAndCx.d.ts 0000644 00000000477 15170147737 0007070 0 ustar 00 import type { Cx, Css } from "./types";
import type { EmotionCache } from "@emotion/cache";
export declare const createCssAndCx: (params: {
cache: EmotionCache;
}) => {
css: Css;
cx: Cx;
};
/** Will pickup the contextual cache if any */
export declare function useCssAndCx(): {
css: Css;
cx: Cx;
};
withStyles_compat.js 0000644 00000011647 15170147737 0010651 0 ustar 00 "use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createWithStyles = void 0;
/* eslint-disable @typescript-eslint/no-explicit-any */
const react_1 = __importStar(require("react"));
const makeStyles_1 = require("./makeStyles");
const capitalize_1 = require("./tools/capitalize");
function createWithStyles(params) {
const { useTheme } = params;
const { makeStyles } = (0, makeStyles_1.createMakeStyles)({ useTheme });
function withStyles(Component, cssObjectByRuleNameOrGetCssObjectByRuleName, params) {
const Component_ = typeof Component === "string"
? (() => {
const tag = Component;
const Out = function (_a) {
var { children } = _a, props = __rest(_a, ["children"]);
return (0, react_1.createElement)(tag, props, children);
};
Object.defineProperty(Out, "name", {
"value": (0, capitalize_1.capitalize)(tag),
});
return Out;
})()
: Component;
const name = (() => {
const { name } = Component_;
return typeof name === "string" ? name : undefined;
})();
const useStyles = makeStyles(params)(typeof cssObjectByRuleNameOrGetCssObjectByRuleName === "function"
? (theme, props, classes) => incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName(theme, props, classes))
: incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName));
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Out = (0, react_1.forwardRef)(function (props, ref) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { className, classes: _classes } = props, rest = __rest(props, ["className", "classes"]);
const { classes, cx } = useStyles(props, { props });
return (react_1.default.createElement(Component_, Object.assign({ ref: ref, className: cx(classes.root, className) }, (typeof Component === "string" ? {} : { classes }), rest)));
});
if (name !== undefined) {
Object.defineProperty(Out, "name", {
"value": `${name}WithStyles`,
});
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return Out;
}
return { withStyles };
}
exports.createWithStyles = createWithStyles;
function incorporateMediaQueries(cssObjectByRuleNameWithMediaQueries) {
const cssObjectByRuleName = {};
const cssObjectByRuleNameWithMediaQueriesByMediaQuery = {};
Object.keys(cssObjectByRuleNameWithMediaQueries).forEach(ruleNameOrMediaQuery => ((ruleNameOrMediaQuery.startsWith("@media")
? cssObjectByRuleNameWithMediaQueriesByMediaQuery
: cssObjectByRuleName)[ruleNameOrMediaQuery] =
cssObjectByRuleNameWithMediaQueries[ruleNameOrMediaQuery]));
Object.keys(cssObjectByRuleNameWithMediaQueriesByMediaQuery).forEach(mediaQuery => {
const cssObjectByRuleNameBis = cssObjectByRuleNameWithMediaQueriesByMediaQuery[mediaQuery];
Object.keys(cssObjectByRuleNameBis).forEach(ruleName => {
var _a;
return (cssObjectByRuleName[ruleName] = Object.assign(Object.assign({}, ((_a = cssObjectByRuleName[ruleName]) !== null && _a !== void 0 ? _a : {})), { [mediaQuery]: cssObjectByRuleNameBis[ruleName] }));
});
});
return cssObjectByRuleName;
}
makeStyles.d.ts 0000644 00000002156 15170147737 0007477 0 ustar 00 import type { CSSObject } from "./types";
export declare function createMakeStyles<Theme>(params: {
useTheme: () => Theme;
}): {
makeStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
name?: string | Record<string, unknown> | undefined;
uniqId?: string | undefined;
} | undefined) => <RuleName extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName, CSSObject> | ((theme: Theme, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<RuleNameSubsetReferencableInNestedSelectors | RuleName, CSSObject>)) => (params: Params, styleOverrides?: {
props: {
classes?: Record<string, string>;
} & Record<string, unknown>;
ownerState?: Record<string, unknown> | undefined;
} | undefined) => {
classes: Record<RuleName, string>;
theme: Theme;
css: import("./types").Css;
cx: import("./types").Cx;
};
useStyles: () => {
theme: Theme;
css: import("./types").Css;
cx: import("./types").Cx;
};
};
tools/typeGuard.js 0000644 00000000450 15170147737 0010221 0 ustar 00 "use strict";
/* eslint-disable @typescript-eslint/no-explicit-any */
Object.defineProperty(exports, "__esModule", { value: true });
exports.typeGuard = void 0;
/** https://docs.tsafe.dev/typeguard */
function typeGuard(_value, isMatched) {
return isMatched;
}
exports.typeGuard = typeGuard;
tools/useGuaranteedMemo.js 0000644 00000001232 15170147737 0011666 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useGuaranteedMemo = void 0;
const react_1 = require("react");
/** Like react's useMemo but with guarantee that the fn
* won't be invoked again if deps hasn't change */
function useGuaranteedMemo(fn, deps) {
const ref = (0, react_1.useRef)();
if (!ref.current ||
deps.length !== ref.current.prevDeps.length ||
ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0) {
ref.current = {
"v": fn(),
"prevDeps": [...deps],
};
}
return ref.current.v;
}
exports.useGuaranteedMemo = useGuaranteedMemo;
tools/classnames.d.ts 0000644 00000000546 15170147737 0010650 0 ustar 00 export declare type CxArg = undefined | null | string | boolean | {
[className: string]: boolean | null | undefined;
} | readonly CxArg[];
/** Copy pasted from
* https://github.com/emotion-js/emotion/blob/23f43ab9f24d44219b0b007a00f4ac681fe8712e/packages/react/src/class-names.js#L17-L63
**/
export declare const classnames: (args: CxArg[]) => string;
tools/polyfills/Object.fromEntries.js 0000644 00000001114 15170147737 0013772 0 ustar 00 "use strict";
/* eslint-disable @typescript-eslint/no-explicit-any */
Object.defineProperty(exports, "__esModule", { value: true });
exports.objectFromEntries = void 0;
exports.objectFromEntries = !Object
.fromEntries
? (entries) => {
if (!entries || !entries[Symbol.iterator]) {
throw new Error("Object.fromEntries() requires a single iterable argument");
}
const o = {};
Object.keys(entries).forEach(key => {
const [k, v] = entries[key];
o[k] = v;
});
return o;
}
: Object.fromEntries;
tools/polyfills/Object.fromEntries.d.ts 0000644 00000000103 15170147737 0014223 0 ustar 00 export declare const objectFromEntries: typeof Object.fromEntries;
tools/getDependencyArrayRef.js 0000644 00000002477 15170147737 0012502 0 ustar 00 "use strict";
/* eslint-disable @typescript-eslint/no-explicit-any */
Object.defineProperty(exports, "__esModule", { value: true });
exports.getDependencyArrayRef = void 0;
/**
* useEffect(
* ()=> { ... },
* [ { "foo": "bar" } ]
* )
* => The callback will be invoked every render.
* because { "foo": "bar" } is a new instance every render.
*
* useEffect(
* ()=> { ... },
* [ getDependencyArrayRef({ "foo": "bar" }) ]
* );
* => The callback will only be invoked once.
*
* The optimization will be enabled only if obj is
* of the form Record<string, string | number | undefined | null>
* overwise the object is returned (the function is the identity function).
*/
function getDependencyArrayRef(obj) {
if (!(obj instanceof Object) || typeof obj === "function") {
return obj;
}
const arr = [];
for (const key in obj) {
const value = obj[key];
const typeofValue = typeof value;
if (!(typeofValue === "string" ||
(typeofValue === "number" && !isNaN(value)) ||
typeofValue === "boolean" ||
value === undefined ||
value === null)) {
return obj;
}
arr.push(`${key}:${typeofValue}_${value}`);
}
return "xSqLiJdLMd9s" + arr.join("|");
}
exports.getDependencyArrayRef = getDependencyArrayRef;
tools/objectKeys.js 0000644 00000000444 15170147737 0010362 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.objectKeys = void 0;
/** Object.keys() with types */
function objectKeys(o) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return Object.keys(o);
}
exports.objectKeys = objectKeys;
tools/assert.d.ts 0000644 00000000166 15170147737 0010016 0 ustar 00 /** https://docs.tsafe.dev/assert */
export declare function assert(condition: any, msg?: string): asserts condition;
tools/ReactComponent.js 0000644 00000000115 15170147737 0011174 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
tools/getDependencyArrayRef.d.ts 0000644 00000001104 15170147737 0012720 0 ustar 00 /**
* useEffect(
* ()=> { ... },
* [ { "foo": "bar" } ]
* )
* => The callback will be invoked every render.
* because { "foo": "bar" } is a new instance every render.
*
* useEffect(
* ()=> { ... },
* [ getDependencyArrayRef({ "foo": "bar" }) ]
* );
* => The callback will only be invoked once.
*
* The optimization will be enabled only if obj is
* of the form Record<string, string | number | undefined | null>
* overwise the object is returned (the function is the identity function).
*/
export declare function getDependencyArrayRef(obj: any): any;
tools/assert.js 0000644 00000000501 15170147737 0007553 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.assert = void 0;
/** https://docs.tsafe.dev/assert */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function assert(condition, msg) {
if (!condition) {
throw new Error(msg);
}
}
exports.assert = assert;
tools/typeGuard.d.ts 0000644 00000000174 15170147737 0010460 0 ustar 00 /** https://docs.tsafe.dev/typeguard */
export declare function typeGuard<T>(_value: any, isMatched: boolean): _value is T;
tools/capitalize.js 0000644 00000000524 15170147737 0010404 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.capitalize = void 0;
/** @see <https://docs.tsafe.dev/capitalize> */
function capitalize(str) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return (str.charAt(0).toUpperCase() + str.slice(1));
}
exports.capitalize = capitalize;
tools/ReactComponent.d.ts 0000644 00000000231 15170147737 0011427 0 ustar 00 import type { FC, ComponentClass } from "react";
export declare type ReactComponent<Props> = ((props: Props) => ReturnType<FC>) | ComponentClass<Props>;
tools/classnames.js 0000644 00000003632 15170147737 0010413 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.classnames = void 0;
const assert_1 = require("./assert");
const typeGuard_1 = require("./typeGuard");
/** Copy pasted from
* https://github.com/emotion-js/emotion/blob/23f43ab9f24d44219b0b007a00f4ac681fe8712e/packages/react/src/class-names.js#L17-L63
**/
const classnames = (args) => {
const len = args.length;
let i = 0;
let cls = "";
for (; i < len; i++) {
const arg = args[i];
if (arg == null)
continue;
let toAdd;
switch (typeof arg) {
case "boolean":
break;
case "object": {
if (Array.isArray(arg)) {
toAdd = (0, exports.classnames)(arg);
}
else {
(0, assert_1.assert)(!(0, typeGuard_1.typeGuard)(arg, false));
if (process.env.NODE_ENV !== "production" &&
arg.styles !== undefined &&
arg.name !== undefined) {
console.error("You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n" +
"`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.");
}
toAdd = "";
for (const k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += " ");
toAdd += k;
}
}
}
break;
}
default: {
toAdd = arg;
}
}
if (toAdd) {
cls && (cls += " ");
cls += toAdd;
}
}
return cls;
};
exports.classnames = classnames;
tools/capitalize.d.ts 0000644 00000000175 15170147737 0010642 0 ustar 00 /** @see <https://docs.tsafe.dev/capitalize> */
export declare function capitalize<S extends string>(str: S): Capitalize<S>;
tools/objectKeys.d.ts 0000644 00000000172 15170147737 0010614 0 ustar 00 /** Object.keys() with types */
export declare function objectKeys<T extends Record<string, unknown>>(o: T): (keyof T)[];
tools/useGuaranteedMemo.d.ts 0000644 00000000345 15170147737 0012126 0 ustar 00 /// <reference types="react" />
/** Like react's useMemo but with guarantee that the fn
* won't be invoked again if deps hasn't change */
export declare function useGuaranteedMemo<T>(fn: () => T, deps: React.DependencyList): T;
mergeClasses.js 0000644 00000003133 15170147737 0007533 0 ustar 00 "use strict";
/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
Object.defineProperty(exports, "__esModule", { value: true });
exports.useMergedClasses = exports.mergeClasses = void 0;
const objectKeys_1 = require("./tools/objectKeys");
const getDependencyArrayRef_1 = require("./tools/getDependencyArrayRef");
const cssAndCx_1 = require("./cssAndCx");
const react_1 = require("react");
function mergeClasses(classesFromUseStyles, classesFromProps, cx) {
//NOTE: We use this test to be resilient in case classesFromProps is not of the expected type.
if (!(classesFromProps instanceof Object)) {
return classesFromUseStyles;
}
const out = {};
(0, objectKeys_1.objectKeys)(classesFromUseStyles).forEach(ruleName => (out[ruleName] = cx(classesFromUseStyles[ruleName], classesFromProps[ruleName])));
(0, objectKeys_1.objectKeys)(classesFromProps).forEach(ruleName => {
if (ruleName in classesFromUseStyles) {
return;
}
const className = classesFromProps[ruleName];
//...Same here, that why we don't do className === undefined
if (typeof className !== "string") {
return;
}
out[ruleName] = className;
});
return out;
}
exports.mergeClasses = mergeClasses;
function useMergedClasses(classes, classesOv) {
const { cx } = (0, cssAndCx_1.useCssAndCx)();
return (0, react_1.useMemo)(() => mergeClasses(classes, classesOv, cx), [classes, (0, getDependencyArrayRef_1.getDependencyArrayRef)(classesOv), cx]);
}
exports.useMergedClasses = useMergedClasses;
cache.d.ts 0000644 00000001016 15170147737 0006413 0 ustar 00 import type { ReactNode } from "react";
import type { EmotionCache } from "@emotion/cache";
declare const getDoExistsTssDefaultEmotionCacheMemoizedValue: () => boolean, getTssDefaultEmotionCache: (params?: {
doReset: boolean;
} | undefined) => EmotionCache;
export { getDoExistsTssDefaultEmotionCacheMemoizedValue, getTssDefaultEmotionCache, };
export declare function useTssEmotionCache(): EmotionCache;
export declare function TssCacheProvider(props: {
value: EmotionCache;
children: ReactNode;
}): JSX.Element;
@emotion/react.d.ts 0000644 00000000404 15170147737 0010220 0 ustar 00 import type { EmotionCache } from "@emotion/utils";
declare module "@emotion/react" {
function __unsafe_useEmotionCache(): EmotionCache | null;
}
export { __unsafe_useEmotionCache as useEmotionCache } from "@emotion/react";
export * from "@emotion/react";
@emotion/react.js 0000644 00000001772 15170147737 0007775 0 ustar 00 "use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useEmotionCache = void 0;
var react_1 = require("@emotion/react");
Object.defineProperty(exports, "useEmotionCache", { enumerable: true, get: function () { return react_1.__unsafe_useEmotionCache; } });
__exportStar(require("@emotion/react"), exports);
@emotion/css.js 0000644 00000001111 15170147737 0007452 0 ustar 00 "use strict";
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.keyframes = exports.cx = exports.css = void 0;
const cssAndCx_1 = require("../cssAndCx");
const cache_1 = require("../cache");
/** NOTE: These function use the default cache ("tss-react/cache") */
_a = (0, cssAndCx_1.createCssAndCx)({
"cache": (0, cache_1.getTssDefaultEmotionCache)(),
}), exports.css = _a.css, exports.cx = _a.cx;
var react_1 = require("@emotion/react");
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return react_1.keyframes; } });
@emotion/css.d.ts 0000644 00000000414 15170147737 0007713 0 ustar 00 export type { CSSInterpolation, CSSObject, Css, Cx, CxArg } from "../types";
/** NOTE: These function use the default cache ("tss-react/cache") */
export declare const css: import("../types").Css, cx: import("../types").Cx;
export { keyframes } from "@emotion/react";
mui.js 0000644 00000000733 15170147737 0005713 0 ustar 00 "use strict";
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useStyles = exports.withStyles = exports.makeStyles = void 0;
const styles_1 = require("@mui/material/styles");
const index_1 = require("./index");
/** @see <https://docs.tss-react.dev/setup> */
_a = (0, index_1.createMakeAndWithStyles)({
useTheme: styles_1.useTheme,
}), exports.makeStyles = _a.makeStyles, exports.withStyles = _a.withStyles, exports.useStyles = _a.useStyles;
mergeClasses.d.ts 0000644 00000000714 15170147737 0007771 0 ustar 00 import type { Cx } from "./types";
export declare function mergeClasses<T extends string, U extends string>(classesFromUseStyles: Record<T, string>, classesFromProps: Partial<Record<U, string>> | undefined, cx: Cx): Record<T, string> & (string extends U ? {} : Partial<Record<Exclude<U, T>, string>>);
export declare function useMergedClasses<T extends string>(classes: Record<T, string>, classesOv: Partial<Record<T, string>> | undefined): Record<T, string>;
cache.js 0000644 00000007577 15170147737 0006201 0 ustar 00 "use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TssCacheProvider = exports.useTssEmotionCache = exports.getTssDefaultEmotionCache = exports.getDoExistsTssDefaultEmotionCacheMemoizedValue = void 0;
const react_1 = __importStar(require("react"));
const cache_1 = __importDefault(require("@emotion/cache"));
const { getDoExistsTssDefaultEmotionCacheMemoizedValue, getTssDefaultEmotionCache, reactContext, } = (() => {
const propertyKey = "__tss-react_context";
const peerDepObj =
// eslint-disable-next-line @typescript-eslint/no-explicit-any
react_1.createContext;
let sharedContext = peerDepObj["__tss-react_context"];
if (sharedContext === undefined) {
const { getTssDefaultEmotionCache, getDoExistsTssDefaultEmotionCacheMemoizedValue, } = (() => {
let cache = undefined;
/**
* Lazily initialized singleton
* If doReset is set to true the memoized instance will be
* discarded and a new one created.
* */
function getTssDefaultEmotionCache(params) {
const { doReset = false } = params !== null && params !== void 0 ? params : {};
if (doReset) {
cache = undefined;
}
if (cache === undefined) {
cache = (0, cache_1.default)({ "key": "tss" });
}
return cache;
}
return {
getTssDefaultEmotionCache,
"getDoExistsTssDefaultEmotionCacheMemoizedValue": () => cache !== undefined,
};
})();
sharedContext = {
getTssDefaultEmotionCache,
getDoExistsTssDefaultEmotionCacheMemoizedValue,
"reactContext": (0, react_1.createContext)(undefined),
};
Object.defineProperty(peerDepObj, propertyKey, {
"configurable": false,
"enumerable": false,
"writable": false,
"value": sharedContext,
});
}
return sharedContext;
})();
exports.getDoExistsTssDefaultEmotionCacheMemoizedValue = getDoExistsTssDefaultEmotionCacheMemoizedValue;
exports.getTssDefaultEmotionCache = getTssDefaultEmotionCache;
function useTssEmotionCache() {
const cacheExplicitlyProvidedForTss = (0, react_1.useContext)(reactContext);
return cacheExplicitlyProvidedForTss !== null && cacheExplicitlyProvidedForTss !== void 0 ? cacheExplicitlyProvidedForTss : getTssDefaultEmotionCache();
}
exports.useTssEmotionCache = useTssEmotionCache;
function TssCacheProvider(props) {
const { children, value } = props;
return (react_1.default.createElement(reactContext.Provider, { value: value }, children));
}
exports.TssCacheProvider = TssCacheProvider;
README.md 0000644 00000016006 15170147737 0006042 0 ustar 00 <p align="center">
<img src="https://user-images.githubusercontent.com/6702424/109334865-8f85bf00-7861-11eb-90ab-da36f9afe1b6.png">
</p>
<p align="center">
<i>✨ makeStyles is dead, long live makeStyles! ✨</i>
<br>
<br>
<a href="https://github.com/garronej/tss-react/actions">
<img src="https://github.com/garronej/tss-react/workflows/ci/badge.svg?branch=main">
</a>
<a href="https://www.npmjs.com/package/tss-react">
<img src="https://img.shields.io/npm/dm/tss-react">
</a>
<a href="https://github.com/garronej/tss-react/blob/main/LICENSE">
<img src="https://img.shields.io/npm/l/tss-react">
</a>
</p>
<p align="center">
<a href="https://www.tss-react.dev">Home</a>
-
<a href="https://docs.tss-react.dev">Documentation</a>
</p>
`'tss-react'` is intended to be the replacement for
[@material-ui v4 `makeStyles`](https://material-ui.com/styles/basics/#hook-api) and [`'react-jss'`](https://cssinjs.org/react-jss/?v=v10.9.0).
> If you like TSS consider giving the project a ⭐️
- ✅ Seamless integration with [mui](https://mui.com).
- ✅ [`withStyles`](https://v4.mui.com/styles/api/#withstyles-styles-options-higher-order-component) API support.
- ✅ Server side rendering support (e.g: Next.js, Gatsby).
- ✅ Offers a [type-safe equivalent of the JSS `$` syntax](https://docs.tss-react.dev/nested-selectors).
- ✅ Custom `@emotion` cache support.
- ✅ Build on top of [`@emotion/react`](https://emotion.sh/docs/@emotion/react), it has very little impact on the bundle size alongside mui (~5kB minziped).
- ✅ [Maintained for the foreseeable future](https://github.com/mui-org/material-ui/issues/28463#issuecomment-923085976), issues are dealt with within good delays.
- ✅ As fast as `emotion` ([see the difference](https://stackoverflow.com/questions/68383046/is-there-a-performance-difference-between-the-sx-prop-and-the-makestyles-functio)
with mui's `makeStyles`)
- ✅ Library authors: [`tss-react` won’t be yet another entry in your `peerDependencies`](https://docs.tss-react.dev/publish-a-module-that-uses-tss).
- ✅ Support [MUI's theme global styles overrides](https://docs.tss-react.dev/mui-theme-styleoverrides)
```bash
$ yarn add tss-react @emotion/react
```
<p align="center">
<img src="https://user-images.githubusercontent.com/6702424/134704429-83b2760d-0b4d-42e8-9c9a-f287a3353c13.gif">
</p>
**JavaScript support**: [YES](https://github.com/garronej/tss-react/issues/28).
https://user-images.githubusercontent.com/6702424/166390575-0530e16b-4aff-4914-a8fa-20b02da829cc.mov
<p align="center">
<br/>
<i>Playground:</i><br>
<a href='https://stackblitz.com/edit/tss-react?file=Hello.tsx'>
<img src="https://user-images.githubusercontent.com/6702424/109010505-214dca80-76b0-11eb-885e-2e5ef7ade821.png">
</a>
</p>
<p align="center">
<br/>
<a href="https://docs.tss-react.dev/setup"><b>Get started 🚀</b></a>
</p>
# Development
```bash
yarn
yarn build
#For automatically recompiling when file change
#npx tsc -w
# To start the Single Page Application test app (create react app)
# This app is live here: https://www.tss-react.dev/test/
yarn start_spa
# To start the Server Side Rendering app (next.js)
yarn start_ssr
# To start the Server Side Rendering app that test the mui v4 integration.
yarn start_muiV4
```
In SSR everything should work with [JavaScript disabled](https://developer.chrome.com/docs/devtools/javascript/disable/)
# Changelog highlights
<details>
<summary>Click to expand</summary>
## v3.7.1
- Retrocompatibility with React 16. [Ref](https://github.com/garronej/tss-react/issues/95)
## v3.3.1
- I.E is **almost** supported out of the box (See note at the end of [this sections](#nested-selectors---syntax-))
## Breaking changes in v3
- New API for [nested selectors](#nested-selectors--syntax-). We no longer use `createRef()`.
- [`label` have been renamed `name`](#naming-the-stylesheets-useful-for-debugging) for helping the migration from [the old mui API](https://mui.com/styles/api/#makestyles-styles-options-hook).
</details>
# FAQ
<details>
<summary>Click to expand</summary>
## Why this instead of [the hook API](https://material-ui.com/styles/basics/#hook-api) of Material UI v4?
First of all because `makeStyle` is deprecated in `@material-ui` v5 but also
because it has some major flaws. Let's consider this example:
```tsx
import { makeStyles, createStyles } from "@material-ui/core/styles";
type Props = {
color: "red" | "blue";
};
const useStyles = makeStyles(theme =>
createStyles<"root" | "label", { color: "red" | "blue" }>({
"root": {
"backgroundColor": theme.palette.primary.main,
},
"label": ({ color }) => ({
color,
}),
}),
);
function MyComponent(props: Props) {
const classes = useStyles(props);
return (
<div className={classes.root}>
<span className={classes.label}>Hello World</span>
</div>
);
}
```
Two pain points:
- Because TypeScript doesn't support [partial argument inference](https://github.com/microsoft/TypeScript/issues/26242),
we have to explicitly enumerate the classes name as an union type `"root" | "label"`.
- We shouldn't have to import [`createStyles`](https://material-ui.com/styles/api/#createstyles-styles-styles) to get correct typings.
Let's now compare with `tss-react`
```tsx
import { makeStyles } from "./makeStyles";
type Props = {
color: "red" | "blue";
};
const { useStyles } = makeStyles<{ color: "red" | "blue" }>()(
(theme, { color }) => ({
"root": {
"backgroundColor": theme.palette.primary.main,
},
"label": { color },
}),
);
function MyComponent(props: Props) {
const { classes } = useStyles(props);
return (
<div className={classes.root}>
<span className={classes.label}>Hello World</span>
</div>
);
}
```
Benefits:
- Less verbose, same type safety.
- You don't need to remember how things are supposed to be named, just let intellisense guide you.
Besides, the hook api of `material-ui`, have other problems:
- One major bug: [see issue](https://github.com/mui-org/material-ui/issues/24513#issue-790027173)
- `JSS` has poor performances compared to `emotion` [source](https://github.com/mui-org/material-ui/issues/22342#issue-684407575)
## Why this instead of Styled component ?
See [this issue](https://github.com/mui-org/material-ui/issues/22342#issuecomment-764495033)
## Compile error `TS1023`
If you get this error:
```log
node_modules/tss-react/index.d.ts:18:10 - error TS1023: An index signature parameter type must be either 'string' or 'number'.
18 [mediaQuery: `@media${string}`]: { [RuleName_1 in keyof ClassNameByRuleName]?: import("./types").CSSObject | undefined; };
~~~~~~~~~~
```
it means that you need to update TypeScript to a version >= 4.4.
If you can't use `import { } from "tss-react/compat";` instead of `import { } from "tss-react"`.
Only `withStyles()` will have slightly inferior type inference.
</details>
compat.js 0000644 00000004230 15170147737 0006400 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createMakeAndWithStyles = exports.TssCacheProvider = exports.getTssDefaultEmotionCache = exports.GlobalStyles = exports.keyframes = exports.createWithStyles = exports.createMakeStyles = exports.useMergedClasses = exports.useCssAndCx = void 0;
var cssAndCx_1 = require("./cssAndCx");
Object.defineProperty(exports, "useCssAndCx", { enumerable: true, get: function () { return cssAndCx_1.useCssAndCx; } });
var mergeClasses_1 = require("./mergeClasses");
Object.defineProperty(exports, "useMergedClasses", { enumerable: true, get: function () { return mergeClasses_1.useMergedClasses; } });
const makeStyles_1 = require("./makeStyles");
Object.defineProperty(exports, "createMakeStyles", { enumerable: true, get: function () { return makeStyles_1.createMakeStyles; } });
const withStyles_compat_1 = require("./withStyles_compat");
Object.defineProperty(exports, "createWithStyles", { enumerable: true, get: function () { return withStyles_compat_1.createWithStyles; } });
/** @see <https://docs.tss-react.dev/api-references/keyframes> */
var react_1 = require("@emotion/react");
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return react_1.keyframes; } });
/** @see <https://docs.tss-react.dev/api-references/globalstyles> */
var GlobalStyles_1 = require("./GlobalStyles");
Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return GlobalStyles_1.GlobalStyles; } });
/** @see <https://docs.tss-react.dev/cache> */
var cache_1 = require("./cache");
Object.defineProperty(exports, "getTssDefaultEmotionCache", { enumerable: true, get: function () { return cache_1.getTssDefaultEmotionCache; } });
Object.defineProperty(exports, "TssCacheProvider", { enumerable: true, get: function () { return cache_1.TssCacheProvider; } });
/** @see <https://docs.tss-react.dev/api-references/makestyles-usestyles> */
function createMakeAndWithStyles(params) {
return Object.assign(Object.assign({}, (0, makeStyles_1.createMakeStyles)(params)), (0, withStyles_compat_1.createWithStyles)(params));
}
exports.createMakeAndWithStyles = createMakeAndWithStyles;
index.d.ts 0000644 00000006557 15170147737 0006476 0 ustar 00 /// <reference types="react" />
export type { CSSInterpolation, CSSObject, Css, Cx, CxArg } from "./types";
/** @see <https://docs.tss-react.dev/api-references> */
export { useCssAndCx } from "./cssAndCx";
export { useMergedClasses } from "./mergeClasses";
import { createMakeStyles } from "./makeStyles";
export { createMakeStyles };
import { createWithStyles } from "./withStyles";
export { createWithStyles };
/** @see <https://docs.tss-react.dev/api-references/keyframes> */
export { keyframes } from "@emotion/react";
/** @see <https://docs.tss-react.dev/api-references/globalstyles> */
export { GlobalStyles } from "./GlobalStyles";
/** @see <https://docs.tss-react.dev/cache> */
export { getTssDefaultEmotionCache, TssCacheProvider } from "./cache";
/** @see <https://docs.tss-react.dev/api-references/makestyles-usestyles> */
export declare function createMakeAndWithStyles<Theme>(params: {
useTheme: () => Theme;
}): {
withStyles: <C extends keyof import("react").ReactHTML | import("./tools/ReactComponent").ReactComponent<any>, Props extends C extends import("./tools/ReactComponent").ReactComponent<infer P> ? P : C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] extends import("./tools/ReactComponent").ReactComponent<infer P_1> ? NonNullable<P_1> : never : never, CssObjectByRuleName extends Props extends {
classes?: Partial<infer ClassNameByRuleName> | undefined;
} ? { [RuleName in keyof ClassNameByRuleName]?: import("./types").CSSObject | undefined; } & {
[mediaQuery: `@media${string}`]: { [RuleName_1 in keyof ClassNameByRuleName]?: import("./types").CSSObject | undefined; };
} : {
root: import("./types").CSSObject;
} & {
[mediaQuery: `@media${string}`]: {
root: import("./types").CSSObject;
};
}>(Component: C, cssObjectByRuleNameOrGetCssObjectByRuleName: (CssObjectByRuleName & {
[mediaQuery: `@media${string}`]: { [Key in keyof CssObjectByRuleName]?: import("./types").CSSObject | undefined; };
}) | ((theme: Theme, props: Props, classes: Record<Exclude<keyof CssObjectByRuleName, `@media${string}`>, string>) => CssObjectByRuleName), params?: {
name?: string | Record<string, unknown> | undefined;
uniqId?: string | undefined;
} | undefined) => C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] : C;
makeStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
name?: string | Record<string, unknown> | undefined;
uniqId?: string | undefined;
} | undefined) => <RuleName_2 extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName_2, import("./types").CSSObject> | ((theme: Theme, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<RuleNameSubsetReferencableInNestedSelectors | RuleName_2, import("./types").CSSObject>)) => (params: Params, styleOverrides?: {
props: {
classes?: Record<string, string> | undefined;
} & Record<string, unknown>;
ownerState?: Record<string, unknown> | undefined;
} | undefined) => {
classes: Record<RuleName_2, string>;
theme: Theme;
css: import("./types").Css;
cx: import("./types").Cx;
};
useStyles: () => {
theme: Theme;
css: import("./types").Css;
cx: import("./types").Cx;
};
};
compat.d.ts 0000644 00000005636 15170147737 0006647 0 ustar 00 /// <reference types="react" />
export type { CSSInterpolation, CSSObject, Css, Cx, CxArg } from "./types";
export { useCssAndCx } from "./cssAndCx";
export { useMergedClasses } from "./mergeClasses";
import { createMakeStyles } from "./makeStyles";
export { createMakeStyles };
import { createWithStyles } from "./withStyles_compat";
export { createWithStyles };
/** @see <https://docs.tss-react.dev/api-references/keyframes> */
export { keyframes } from "@emotion/react";
/** @see <https://docs.tss-react.dev/api-references/globalstyles> */
export { GlobalStyles } from "./GlobalStyles";
/** @see <https://docs.tss-react.dev/cache> */
export { getTssDefaultEmotionCache, TssCacheProvider } from "./cache";
/** @see <https://docs.tss-react.dev/api-references/makestyles-usestyles> */
export declare function createMakeAndWithStyles<Theme>(params: {
useTheme: () => Theme;
}): {
withStyles: <C extends keyof import("react").ReactHTML | import("./tools/ReactComponent").ReactComponent<any>, Props extends C extends import("./tools/ReactComponent").ReactComponent<infer P> ? P : C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] extends import("./tools/ReactComponent").ReactComponent<infer P_1> ? NonNullable<P_1> : never : never, CssObjectByRuleName extends Props extends {
classes?: Partial<infer ClassNameByRuleName> | undefined;
} ? { [RuleName in keyof ClassNameByRuleName]?: import("./types").CSSObject | undefined; } : {
root: import("./types").CSSObject;
}>(Component: C, cssObjectByRuleNameOrGetCssObjectByRuleName: CssObjectByRuleName | ((theme: Theme, props: Props, classes: Record<keyof CssObjectByRuleName, string>) => CssObjectByRuleName), params?: {
name?: string | Record<string, unknown> | undefined;
uniqId?: string | undefined;
} | undefined) => C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] : C;
makeStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
name?: string | Record<string, unknown> | undefined;
uniqId?: string | undefined;
} | undefined) => <RuleName_1 extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName_1, import("./types").CSSObject> | ((theme: Theme, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<RuleNameSubsetReferencableInNestedSelectors | RuleName_1, import("./types").CSSObject>)) => (params: Params, styleOverrides?: {
props: {
classes?: Record<string, string> | undefined;
} & Record<string, unknown>;
ownerState?: Record<string, unknown> | undefined;
} | undefined) => {
classes: Record<RuleName_1, string>;
theme: Theme;
css: import("./types").Css;
cx: import("./types").Cx;
};
useStyles: () => {
theme: Theme;
css: import("./types").Css;
cx: import("./types").Cx;
};
};
types.d.ts 0000644 00000001153 15170147737 0006516 0 ustar 00 import type { CSSObject as CSSObject_base, CSSInterpolation } from "@emotion/serialize";
export type { CSSInterpolation };
export interface CSSObject extends CSSObject_base {
/** https://emotion.sh/docs/labels */
label?: string;
}
export interface Css {
(template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
(...args: CSSInterpolation[]): string;
}
import type { CxArg } from "./tools/classnames";
export type { CxArg };
export declare type Cx = (...classNames: CxArg[]) => string;
export declare function matchCSSObject(arg: TemplateStringsArray | CSSInterpolation): arg is CSSObject;
mui.d.ts 0000644 00000005024 15170147737 0006145 0 ustar 00 /// <reference types="react" />
/** @see <https://docs.tss-react.dev/setup> */
export declare const makeStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
name?: string | Record<string, unknown> | undefined;
uniqId?: string | undefined;
} | undefined) => <RuleName extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName, import("./types").CSSObject> | ((theme: import("@mui/material/styles").Theme, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<RuleNameSubsetReferencableInNestedSelectors | RuleName, import("./types").CSSObject>)) => (params: Params, styleOverrides?: {
props: {
classes?: Record<string, string> | undefined;
} & Record<string, unknown>;
ownerState?: Record<string, unknown> | undefined;
} | undefined) => {
classes: Record<RuleName, string>;
theme: import("@mui/material/styles").Theme;
css: import("./types").Css;
cx: import("./types").Cx;
}, withStyles: <C extends keyof import("react").ReactHTML | import("./tools/ReactComponent").ReactComponent<any>, Props extends C extends import("./tools/ReactComponent").ReactComponent<infer P> ? P : C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] extends import("./tools/ReactComponent").ReactComponent<infer P_1> ? NonNullable<P_1> : never : never, CssObjectByRuleName extends Props extends {
classes?: Partial<infer ClassNameByRuleName> | undefined;
} ? { [RuleName in keyof ClassNameByRuleName]?: import("./types").CSSObject | undefined; } & {
[mediaQuery: `@media${string}`]: { [RuleName_1 in keyof ClassNameByRuleName]?: import("./types").CSSObject | undefined; };
} : {
root: import("./types").CSSObject;
} & {
[mediaQuery: `@media${string}`]: {
root: import("./types").CSSObject;
};
}>(Component: C, cssObjectByRuleNameOrGetCssObjectByRuleName: (CssObjectByRuleName & {
[mediaQuery: `@media${string}`]: { [Key in keyof CssObjectByRuleName]?: import("./types").CSSObject | undefined; };
}) | ((theme: import("@mui/material/styles").Theme, props: Props, classes: Record<Exclude<keyof CssObjectByRuleName, `@media${string}`>, string>) => CssObjectByRuleName), params?: {
name?: string | Record<string, unknown> | undefined;
uniqId?: string | undefined;
} | undefined) => C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] : C, useStyles: () => {
theme: import("@mui/material/styles").Theme;
css: import("./types").Css;
cx: import("./types").Cx;
};
nextJs.js 0000644 00000010163 15170147737 0006372 0 ustar 00 "use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.withEmotionCache = void 0;
const React = __importStar(require("react"));
const create_instance_1 = __importDefault(require("@emotion/server/create-instance"));
const cache_1 = require("./cache");
/** @se <https://docs.tss-react.dev/ssr/next.js> */
function withEmotionCache(params) {
const { Document, getCaches = () => [] } = params;
return class DocumentWithEmotionCache extends Document {
static getInitialProps(ctx) {
return __awaiter(this, void 0, void 0, function* () {
const emotionServers = (() => {
const caches = getCaches();
return (0, cache_1.getDoExistsTssDefaultEmotionCacheMemoizedValue)() &&
caches.indexOf((0, cache_1.getTssDefaultEmotionCache)()) >= 0
? caches
: [
...caches,
(0, cache_1.getTssDefaultEmotionCache)({ "doReset": true }),
];
})()
.sort((a, b) => getPrepend(a) === getPrepend(b)
? 0
: getPrepend(a)
? -1
: 1)
.map(create_instance_1.default);
const initialProps = yield Document.getInitialProps(ctx);
return Object.assign(Object.assign({}, initialProps), { "styles": [
...React.Children.toArray(initialProps.styles),
...emotionServers
.map(({ extractCriticalToChunks }) => extractCriticalToChunks(initialProps.html)
.styles.filter(({ css }) => css !== "")
.map(style => (React.createElement("style", { "data-emotion": `${style.key} ${style.ids.join(" ")}`, key: style.key, dangerouslySetInnerHTML: {
"__html": style.css,
} }))))
.reduce((prev, curr) => [...prev, ...curr], []),
] });
});
}
};
}
exports.withEmotionCache = withEmotionCache;
function getPrepend(cache) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return !!cache.sheet.prepend;
}
withStyles.js 0000644 00000011647 15170147737 0007306 0 ustar 00 "use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createWithStyles = void 0;
/* eslint-disable @typescript-eslint/no-explicit-any */
const react_1 = __importStar(require("react"));
const makeStyles_1 = require("./makeStyles");
const capitalize_1 = require("./tools/capitalize");
function createWithStyles(params) {
const { useTheme } = params;
const { makeStyles } = (0, makeStyles_1.createMakeStyles)({ useTheme });
function withStyles(Component, cssObjectByRuleNameOrGetCssObjectByRuleName, params) {
const Component_ = typeof Component === "string"
? (() => {
const tag = Component;
const Out = function (_a) {
var { children } = _a, props = __rest(_a, ["children"]);
return (0, react_1.createElement)(tag, props, children);
};
Object.defineProperty(Out, "name", {
"value": (0, capitalize_1.capitalize)(tag),
});
return Out;
})()
: Component;
const name = (() => {
const { name } = Component_;
return typeof name === "string" ? name : undefined;
})();
const useStyles = makeStyles(params)(typeof cssObjectByRuleNameOrGetCssObjectByRuleName === "function"
? (theme, props, classes) => incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName(theme, props, classes))
: incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName));
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Out = (0, react_1.forwardRef)(function (props, ref) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { className, classes: _classes } = props, rest = __rest(props, ["className", "classes"]);
const { classes, cx } = useStyles(props, { props });
return (react_1.default.createElement(Component_, Object.assign({ ref: ref, className: cx(classes.root, className) }, (typeof Component === "string" ? {} : { classes }), rest)));
});
if (name !== undefined) {
Object.defineProperty(Out, "name", {
"value": `${name}WithStyles`,
});
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return Out;
}
return { withStyles };
}
exports.createWithStyles = createWithStyles;
function incorporateMediaQueries(cssObjectByRuleNameWithMediaQueries) {
const cssObjectByRuleName = {};
const cssObjectByRuleNameWithMediaQueriesByMediaQuery = {};
Object.keys(cssObjectByRuleNameWithMediaQueries).forEach(ruleNameOrMediaQuery => ((ruleNameOrMediaQuery.startsWith("@media")
? cssObjectByRuleNameWithMediaQueriesByMediaQuery
: cssObjectByRuleName)[ruleNameOrMediaQuery] =
cssObjectByRuleNameWithMediaQueries[ruleNameOrMediaQuery]));
Object.keys(cssObjectByRuleNameWithMediaQueriesByMediaQuery).forEach(mediaQuery => {
const cssObjectByRuleNameBis = cssObjectByRuleNameWithMediaQueriesByMediaQuery[mediaQuery];
Object.keys(cssObjectByRuleNameBis).forEach(ruleName => {
var _a;
return (cssObjectByRuleName[ruleName] = Object.assign(Object.assign({}, ((_a = cssObjectByRuleName[ruleName]) !== null && _a !== void 0 ? _a : {})), { [mediaQuery]: cssObjectByRuleNameBis[ruleName] }));
});
});
return cssObjectByRuleName;
}
makeStyles.js 0000644 00000015405 15170147737 0007244 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createMakeStyles = void 0;
/* eslint-disable @typescript-eslint/no-explicit-any */
const react_1 = require("react");
const Object_fromEntries_1 = require("./tools/polyfills/Object.fromEntries");
const objectKeys_1 = require("./tools/objectKeys");
const cssAndCx_1 = require("./cssAndCx");
const getDependencyArrayRef_1 = require("./tools/getDependencyArrayRef");
const typeGuard_1 = require("./tools/typeGuard");
const cache_1 = require("./cache");
const assert_1 = require("./tools/assert");
const mergeClasses_1 = require("./mergeClasses");
let counter = 0;
function createMakeStyles(params) {
const { useTheme } = params;
/** returns useStyle. */
function makeStyles(params) {
const { name: nameOrWrappedName, uniqId = counter++ } = params !== null && params !== void 0 ? params : {};
const name = typeof nameOrWrappedName !== "object"
? nameOrWrappedName
: Object.keys(nameOrWrappedName)[0];
return function (cssObjectByRuleNameOrGetCssObjectByRuleName) {
const getCssObjectByRuleName = typeof cssObjectByRuleNameOrGetCssObjectByRuleName ===
"function"
? cssObjectByRuleNameOrGetCssObjectByRuleName
: () => cssObjectByRuleNameOrGetCssObjectByRuleName;
return function useStyles(params, styleOverrides) {
var _a, _b;
const theme = useTheme();
const { css, cx } = (0, cssAndCx_1.useCssAndCx)();
const cache = (0, cache_1.useTssEmotionCache)();
let classes = (0, react_1.useMemo)(() => {
const refClassesCache = {};
const refClasses = typeof Proxy !== "undefined" &&
new Proxy({}, {
"get": (_target, propertyKey) => {
if (typeof propertyKey === "symbol") {
(0, assert_1.assert)(false);
}
return (refClassesCache[propertyKey] = `${cache.key}-${uniqId}${name !== undefined ? `-${name}` : ""}-${propertyKey}-ref`);
},
});
const cssObjectByRuleName = getCssObjectByRuleName(theme, params, refClasses || {});
const classes = (0, Object_fromEntries_1.objectFromEntries)((0, objectKeys_1.objectKeys)(cssObjectByRuleName).map(ruleName => {
const cssObject = cssObjectByRuleName[ruleName];
if (!cssObject.label) {
cssObject.label = `${name !== undefined ? `${name}-` : ""}${ruleName}`;
}
return [
ruleName,
`${css(cssObject)}${(0, typeGuard_1.typeGuard)(ruleName, ruleName in refClassesCache)
? ` ${refClassesCache[ruleName]}`
: ""}`,
];
}));
(0, objectKeys_1.objectKeys)(refClassesCache).forEach(ruleName => {
if (ruleName in classes) {
return;
}
classes[ruleName] =
refClassesCache[ruleName];
});
return classes;
}, [cache, css, cx, theme, (0, getDependencyArrayRef_1.getDependencyArrayRef)(params)]);
const propsClasses = styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props.classes;
{
classes = (0, react_1.useMemo)(() => (0, mergeClasses_1.mergeClasses)(classes, propsClasses, cx), [classes, (0, getDependencyArrayRef_1.getDependencyArrayRef)(propsClasses), cx]);
}
{
let cssObjectByRuleNameOrGetCssObjectByRuleName = undefined;
try {
cssObjectByRuleNameOrGetCssObjectByRuleName =
name !== undefined
? (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.styleOverrides
: undefined;
// eslint-disable-next-line no-empty
}
catch (_c) { }
const themeClasses = (0, react_1.useMemo)(() => {
if (!cssObjectByRuleNameOrGetCssObjectByRuleName) {
return undefined;
}
const themeClasses = {};
for (const ruleName in cssObjectByRuleNameOrGetCssObjectByRuleName) {
const cssObjectOrGetCssObject = cssObjectByRuleNameOrGetCssObjectByRuleName[ruleName];
if (!(cssObjectOrGetCssObject instanceof Object)) {
continue;
}
themeClasses[ruleName] = css(typeof cssObjectOrGetCssObject === "function"
? cssObjectOrGetCssObject(Object.assign({ theme, "ownerState": styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.ownerState }, styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props))
: cssObjectOrGetCssObject);
}
return themeClasses;
}, [
cssObjectByRuleNameOrGetCssObjectByRuleName ===
undefined
? undefined
: JSON.stringify(cssObjectByRuleNameOrGetCssObjectByRuleName),
(0, getDependencyArrayRef_1.getDependencyArrayRef)(styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props),
(0, getDependencyArrayRef_1.getDependencyArrayRef)(styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.ownerState),
css,
]);
classes = (0, react_1.useMemo)(() => (0, mergeClasses_1.mergeClasses)(classes, themeClasses, cx), [classes, themeClasses, cx]);
}
return {
classes,
theme,
css,
cx,
};
};
};
}
function useStyles() {
const theme = useTheme();
const { css, cx } = (0, cssAndCx_1.useCssAndCx)();
return { theme, css, cx };
}
return { makeStyles, useStyles };
}
exports.createMakeStyles = createMakeStyles;
CHANGELOG.md 0000644 00000026731 15170147737 0006402 0 ustar 00 ### **3.7.1** (2022-07-05)
- Merge pull request #96 from garronej/react_retrocompat
React retrocompat
- Release beta
- #95
## **3.7.0** (2022-05-24)
- #87
- Validate that everything is now working with React 18
- #78
- No more problem with React 18 and Next.js
### **3.6.2** (2022-04-18)
- Make @emtoion/server an optional peer dependency
- Use type from @emotion/serialize instead of copying them
- Make test app runnable on Windows #78 emotion-js/emotion#2725
### **3.6.1** (2022-04-10)
- Merge pull request #74 from baharalidurrani/react18-peer-testing
react v18 peer dependency updated
- react v18 peer dependency updated
### **3.6.1** (2022-04-10)
- Merge pull request #74 from baharalidurrani/react18-peer-testing
react v18 peer dependency updated
- react v18 peer dependency updated
## **3.6.0** (2022-03-20)
- Support MUI Global style overrides https://github.com/gregnb/mui-datatables/pull/1871
- #65
- Add documentation about how to publish a module using tss
### **3.5.2** (2022-03-07)
- Use createContext as shared object for storing contex
### **3.5.1** (2022-03-06)
- Declare react a peer dependency
## **3.5.0** (2022-03-06)
- Feat: tss-react dosen't need to be in peerDependencies
- Yarn 2 (berry) compat
### **3.4.2** (2022-02-23)
- Update meta information
- Update README.md
- Update broken link
- Merge pull request #61 from garronej/patch-1
Push demo SPA under www.tss-react.dev/test
- Push demo SPA under www.tss-react.dev/test
It is now used for the GitLanding page
### **3.4.1** (2022-02-06)
- Bump version (changeleog ignore)
- Fix compat index
## **3.4.0** (2022-02-06)
- Add missing useMergeClasses to compat index
### **3.3.6** (2022-01-26)
- Improve new readme
### **3.3.5** (2022-01-26)
- Add JSDoc link to new documentation website
- Incremental update on MUI integration documentation
### **3.3.4** (2022-01-22)
- Mention early in the readme what cx is doing
### **3.3.3** (2022-01-22)
- Imporove MUI integration documentation
- Remove bundle phobia link, the result are not actuate.
### **3.3.2** (2022-01-15)
- Merge pull request #55 from bayzat/with-styles-merging-classes
Add support of merging classes in withStyles
- #54
- Gives instructions for material-ui v4
- Update README
- Add support of merging classes passed to the component which is constructed by withStyles
- README: Explain how to disable prefer-const for useMergedClasses
- Add official mui guide in the readme
### **3.3.1** (2022-01-06)
- #50
- Remove legacy code
- Officially states that IE is not fully supported.
- Add missing import in documentation
## **3.3.0** (2022-01-04)
- Document useMergedClasses() #49
Signed-off-by: garronej <joseph.garrone.gj@gmail.com>
- Feature useMergedClasses #49
Signed-off-by: garronej <joseph.garrone.gj@gmail.com>
### **3.2.4** (2021-12-19)
- Do not crash if if Proxy is not defined #43
- Do not destructure parameters #40
### **3.2.3** (2021-12-19)
- Remove need for an Array.prototype.find polyfill #43
### **3.2.2** (2021-12-15)
### **3.2.1** (2021-12-13)
- README: Fix label is now name
- Fix search/replace error #40
## **3.2.0** (2021-12-13)
- Allow to provide name to withStyles
- Use fonction name if any in withStyle
## **3.1.0** (2021-12-12)
- Feat: tss-react/mui
### **3.0.2** (2021-12-09)
- Remove tsafe from dependencies #42
### **3.0.1** (2021-12-08)
- Add tsafe as dev dep #42
# **3.0.0** (2021-12-07)
- Merge pull request #40 from garronej/new_api_for_nested_selector
v3
- Merge remote-tracking branch 'origin/main' into new_api_for_nested_selector
- Make counter global: https://github.com/garronej/tss-react/pull/40#issuecomment-988056052
- Improve documentation on nested selectors
- Restore ability to provide style without callback
- Merge remote-tracking branch 'origin/main' into new_api_for_nested_selector
- Merge remote-tracking branch 'origin/main' into new_api_for_nested_selector
- Breaking change: Polyfills for very old browsers should be added manually to prevent impacting the bundle size
- Breaking change: Renaming label -> name #35
- ssr: make getCaches optional
- Remove noise in readme
- New API for nested selectors
### **2.1.1** (2021-11-23)
- Do not serialize function
- Avoid using JSON.stringify in getDependencyArrayRef #39
## **2.1.0** (2021-11-14)
- Better debugging experience with labels #35
### **2.0.4** (2021-11-14)
- Optimization: Prevent computing re computing classes every render #35
### **2.0.3** (2021-11-09)
- #36
### **2.0.2** (2021-11-05)
- #34
- Update README.md
### **2.0.1** (2021-10-24)
- @emotion/server have been removed from dependencies, in SSR project it must be installed manually
# **2.0.0** (2021-10-24)
- #30
- #28
## **1.1.0** (2021-10-16)
- #27
- Write a test case that fails for #27
### **1.0.3** (2021-10-13)
- #26: Enable to select parent
- #26: Add warning about parent selection
### **1.0.2** (2021-10-12)
- Add compatibility version for older typescript versions
### **1.0.1** (2021-10-12)
- Remove explicit dependency on @emotion/cache, @emotion/utils and @emotion/serialize that are all dependencies of @emotion/react
- withStyles(): Don't apply classes prop to the HTML components
# **1.0.0** (2021-10-10)
- Add gif to illustrate withStyles()
- Document withStyles
- Update exsiting documentation to help integrate with muiv5
- Feat withStyles with 'a', 'div', 'li' ect...
### **0.9.5** (2021-10-10)
- Implicitely peer depend on csstype
- Implicit peer dep on @emotion/cache, BREAKING CHANGE: no longer expose tss-react/@emotion/cache, use @emotion/cache instead
- Test SPA with latest mui version
- Test SSR with latest mui version
### **0.9.4** (2021-10-04)
- Test withStyles (superficially)
- Implement withStyles
- Test media queries (chagelog ignore)
- Implement withStyle (runtime)
- Move all test apps in test/apps
- Successfully type withStyles
- Merge pull request #24 from wald-tq/keyframes
Fix `keyframe` -> `keyframes` in README.md
- Fix `keyframe` -> `keyframes` in README.md
`keyframe` should be `keyframes`.
### **0.9.3** (2021-09-21)
- #22 Do not include ts sources in the npm bundle because of jest (and rollback to targeting es6)
### **0.9.2** (2021-09-21)
- Target ES5 instead of ES6
### **0.9.1** (2021-09-14)
## **0.9.0** (2021-09-14)
- New implementation for composition and nested selectors ($ syntax)
- **BREAKING CHANGE**: New implementation for composition and nested selectors ($ syntax)
[Doc](https://github.com/garronej/tss-react#selecting-children-by-class-name)
[Migration example](https://github.com/garronej/tss-react/commit/1257fbce9be0f21161aa70ead9ac6f48c95704c5#diff-b39151de90b15a9663bdcd105f57336a6278613b38fb846f2a7c61b4068d7047)
### **0.8.1** (2021-08-31)
- fmt
## **0.8.0** (2021-08-31)
- Feature <TssCacheProvider> #16
- Mitigate 'maze of factories' effect #26571
- Enable classes prop to work in mui v5 #20 #19 #18 #17 #15
- Repoduce the error #17
- Expose useCssAndCx for project with no theme
- Update table of content
- Update README.md
### **0.7.3** (2021-08-20)
- Expose useCssAndCx for project with no theme
- Update table of content
- #14: Add hint to help users get rid of types errors
- Update README.md
### **0.7.2** (2021-08-18)
- Export @emotion/css polyfill: tss-react/@emotion/css
### **0.7.1** (2021-08-18)
- Add storybook warning
## **0.7.0** (2021-08-18)
- typeself way of selecting children by class name
- Merge pull request #13 from jsakas/nested-selectors
Allow nested selectors
- feat: allow nested selectors
- @emotion/styled is a peer dep of @material-ui/core v5
- Bar bold claim #12
- test/ssr: Test integration with mui theme
- test/spa: Test integration with mui theme
## **0.6.0** (2021-08-11)
- Merge pull request #10 from howlettt/readme-typos
Small readme typo fixes
- Small typo fixes
- Add SSR support for mui v4
- Improve muiv5 integration testing
- Improve cache support
- Switching to a sollution that works today
- Custom cache integration with mui and SSR
- Ability to provide cache explicitely
- Fix workflow
- Publish beta version with emotion as peer dep
### **0.5.2** (2021-08-08)
### **0.5.1** (2021-08-08)
## **0.5.0** (2021-08-08)
- #6 Support custom @emotion/cache
- Merge pull request #9 from howlettt/material-ui-5
- Adding Material UI 5 injectFirst example
- Merge pull request #8 from burtek/patch-1
Fix typos and syntax errors in code snippets in README.md
- Update README.md
Fix typos and syntax errors in code snippets
- Merge pull request #7 from oliviertassinari/patch-1
emotion is slower and faster
- emotion is slower and faster
It depends
### **0.4.1** (2021-07-19)
## **0.4.0** (2021-07-19)
- Update GIFs
- #5 Do not return useStyles as a wrapped value
### **0.3.3** (2021-07-16)
- Document keyframe
- Sollution for composition #2
- Update README
### **0.3.2** (2021-07-14)
- Correct GlobalStyles API
### **0.3.1** (2021-07-13)
- Add <GlobalStyles>
## **0.3.0** (2021-07-12)
- Remove the need for a provider, even in SSR
## **0.2.0** (2021-07-12)
- Rename useCssAndCx -> useStyleTools and return theme as well
### **0.1.5** (2021-07-12)
- Do not test on windows to save time
- Reexport keyframe from @emotion/react
### **0.1.4** (2021-07-12)
- Do not depend on @emotion/serialize types
### **0.1.3** (2021-07-12)
- Internally define all the exposed API types
- Update README
### **0.1.2** (2021-07-12)
- Exclude test apps from linting
- Fix workflow
- Format
### **0.1.1** (2021-07-12)
- Configure eslint and prettier
## **0.1.0** (2021-07-12)
- Update CI
- Format
- makeStyles accepts an object
- Fix SPA
- SSR working perfectly with Next.js
- Refactoring test environement
- update deps
- Provider not mandatory for SPA
- update keywords
- v1 API 🚀
- Build post install
- Setup testing setup for SSR
- Remove unessesary dev dependency
- Update README.md
- Update README.md
- Fix language statistics
- Implement test setup for SPA and SSR
- Use methode of @nguyenvanthanh97 for implementing a polyfil of @emotion/css from @emotion/react
- update ci
- Update README.md
### **0.0.12** (2021-03-20)
- Default params is no properties
### **0.0.10** (2021-03-05)
- Fix the type definition of cx
### **0.0.9** (2021-02-28)
- update readme
- Update README.md
### **0.0.8** (2021-02-27)
- update
- Update logo
### **0.0.7** (2021-02-26)
- Fix logo
- Change emoji
- Feat standalone or plugin, update readme
### **0.0.6** (2021-02-26)
- Change package name
- Update
- Fix workflow
- update workflow
- Updat workflows
- Fix publish workflow
- Migrate to yarn, update de CI
### **0.0.5** (2021-02-24)
### **0.0.5** (2021-02-24)
### **0.0.4** (2021-02-24)
- Update README
### **0.0.3** (2021-02-24)
- Update readme