Skip to content

Commit

Permalink
fix: do not process undefined variable values
Browse files Browse the repository at this point in the history
  • Loading branch information
brijeshb42 committed Oct 20, 2023
1 parent daa19e4 commit 3f0e2df
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 3 deletions.
2 changes: 1 addition & 1 deletion packages/zero-runtime/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"build:types": "node ../../scripts/buildTypes.mjs",
"prebuild": "rimraf build tsconfig.build.tsbuildinfo",
"release": "yarn build && npm publish build",
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/zero-babel-plugin/**/*.test.{js,ts,tsx}'",
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'",
"typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json",
"typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
},
Expand Down
27 changes: 25 additions & 2 deletions packages/zero-runtime/src/styled.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,18 @@ function getVariantClasses(componentProps, variants) {
return variantClasses;
}

/**
* @param {string} propKey
* @returns {boolean}
*/
function defaultShouldForwardProp(propKey) {
return propKey !== 'sx' && propKey !== 'as' && propKey !== 'ownerState';
}

/**
* @typedef {typeof defaultShouldForwardProp} ShouldForwardProp
*/

/**
* @TODO - Filter props and only pass necessary props to children
*
Expand All @@ -27,6 +39,7 @@ function getVariantClasses(componentProps, variants) {
* @param {string} options.variants.className Classname generated for this specific variant through styled processor.
* @param {string} options.name
* @param {string} options.slot
* @param {ShouldForwardProp} options.shouldForwardProp
* @param {Object} options.defaultProps Default props object copied over and inlined from theme object
*/
export default function styled(tag, options = {}) {
Expand All @@ -38,6 +51,7 @@ export default function styled(tag, options = {}) {
name,
slot,
defaultProps = {},
shouldForwardProp = defaultShouldForwardProp,
} = options;
let componentName = 'Component';

Expand All @@ -62,6 +76,9 @@ export default function styled(tag, options = {}) {
const varStyles = Object.entries(cssVars).reduce(
(acc, [cssVariable, [variableFunction, isUnitLess]]) => {
const value = variableFunction(props);
if (typeof value === 'undefined') {
return acc;
}
if (typeof value === 'string' || isUnitLess) {
acc[`--${cssVariable}`] = value;
} else {
Expand All @@ -87,12 +104,18 @@ export default function styled(tag, options = {}) {
}

const finalClassName = clsx(classes, sxClass, className, getVariantClasses(props, variants));
const toPassProps = Object.keys(restProps)
.filter((item) => shouldForwardProp(item))
.reduce((acc, key) => {
acc[key] = restProps[key];
return acc;
}, {});

// eslint-disable-next-line no-underscore-dangle
if (!Component.__isStyled) {
return (
<Component
{...restProps}
{...toPassProps}
ref={ref}
className={finalClassName}
style={{
Expand All @@ -105,7 +128,7 @@ export default function styled(tag, options = {}) {

return (
<Component
{...restProps}
{...toPassProps}
ownerState={ownerState}
ref={ref}
className={finalClassName}
Expand Down

0 comments on commit 3f0e2df

Please sign in to comment.