@leancodepl/styled-tools
Version:
Utilities for styled-components
57 lines (52 loc) • 1.58 kB
JavaScript
;
var styledComponents = require('styled-components');
function mkProxy(accessor) {
var cache = {};
return new Proxy(accessor, {
get: function get(target, property) {
var _cache, _property;
if (property === "prototype") {
return Function.prototype;
}
var _;
(_ = (_cache = cache)[_property = property]) !== null && _ !== void 0 ? _ : _cache[_property] = mkProxy(function(context) {
var value = target(context);
return guard(value) ? value === null || value === void 0 ? void 0 : value[property] : undefined;
});
return cache[property];
}
});
}
function guard(value) {
return typeof value === "object";
}
/**
* Creates type-safe theme utilities for styled-components with full TypeScript support.
*
* @template TTheme - The theme object type extending Value
* @returns Object containing theme proxy and useTheme hook
* @example
* ```typescript
* interface AppTheme {
* colors: { primary: string; secondary: string };
* spacing: { small: string; large: string };
* }
*
* const { theme, useTheme } = mkTheme<AppTheme>();
*
* const Button = styled.button`
* color: ${theme.colors.primary};
* padding: ${theme.spacing.small};
* `;
* ```
*/ function mkTheme() {
return {
theme: mkProxy(function(ctx) {
return ctx.theme;
}),
useTheme: function() {
return styledComponents.useTheme();
}
};
}
exports.mkTheme = mkTheme;