Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some tricks for shave bytes (-11B for esm) #421

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/core/compile.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ export let compile = (str, defs, data) => {
// Here we check if this is strictly a boolean with false value
// define it as `''` to be picked up as empty, otherwise use
// res value
tail = res === false ? '' : res;
tail = res;
}
}
return out + next + (tail == null ? '' : tail);
return out + next + (tail == null || tail === false ? '' : tail);
Comment on lines -36 to +39
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason this also increases the size.

}, '');
};
35 changes: 21 additions & 14 deletions src/core/hash.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,21 +40,28 @@ export let hash = (compiled, sheet, global, append, keyframes) => {
let className =
cache[stringifiedCompiled] || (cache[stringifiedCompiled] = toHash(stringifiedCompiled));

// If there's no entry for the current className
if (!cache[className]) {
// Build the _ast_-ish structure if needed
let ast = stringifiedCompiled !== compiled ? compiled : astish(compiled);

// Parse it
cache[className] = parse(
// For keyframes
keyframes ? { ['@keyframes ' + className]: ast } : ast,
global ? '' : '.' + className
);
}

// add or update
update(cache[className], sheet, append);
update(
(cache[className] =
cache[className] ||
// If there's no entry for the current className
// Parse it
parse(
// For keyframes
keyframes
? // Build the _ast_-ish structure if needed
{
['@keyframes ' + className]:
stringifiedCompiled !== compiled ? compiled : astish(compiled)
}
: stringifiedCompiled !== compiled
? compiled
: astish(compiled),
global ? '' : '.' + className
)),
sheet,
append
);
Comment on lines +44 to +64
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is where the shaves are huge. The large downside though is the readability and maintenance effort if we keep it in this form. I would rather see this as a last resort.


// return hash
return className;
Expand Down
2 changes: 1 addition & 1 deletion src/core/parse.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export let parse = (obj, selector) => {
})
: key
);
} else if (val != undefined) {
} else if (val +1 ) {
// Convert all but CSS variables
key = /^--/.test(key) ? key : key.replace(/[A-Z]/g, '-$&').toLowerCase();
// Push the line for this property
Expand Down
2 changes: 1 addition & 1 deletion src/core/update.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@ export let extractCss = (target) => {
* @param {Boolean} append
*/
export let update = (css, sheet, append) => {
sheet.data.indexOf(css) == -1 && (sheet.data = append ? css + sheet.data : sheet.data + css);
~sheet.data.indexOf(css) || (sheet.data = append ? css + sheet.data : sheet.data + css);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌 this one shaves around 4B

};
12 changes: 4 additions & 8 deletions src/styled.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,11 @@ function styled(tag, forwardRef) {
}

// Assign the _as with the provided `tag` value
let _as = tag;

// If this is a string -- checking that is has a first valid char
if (tag[0]) {
// Try to assign the _as with the given _as value if any
_as = _props.as || tag;
// And remove it
delete _props.as;
}
// Try to assign the _as with the given _as value if any
let _as = (tag[0] && _props.as) || tag;
// And remove it
tag[0] && delete _props.as;
Comment on lines -51 to +55
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried this one locally and increases the overall size 😵‍💫


// Handle the forward props filter if defined and _as is a string
if (fwdProp && _as[0]) {
Expand Down