Crashes on font shorthand with custom properties #26
Comments
tornqvist
changed the title
|
thanks for the report, will take a look later today. on a more general note, i wonder if it makes sense to resolve css vars. my initial thought is that it would open a big can of worms beyond the simple static example. also, was DropCSS incorrectly removing font-faces for you prior to this commit, and/or did you have them whitelisted? |
|
ok, i've added custom props resolving in a993e63. seems to do okay in this test: <!doctype html>
<html>
<head>
<script src="../dist/dropcss.js"></script>
<script>
function run() {
let clean = dropcss({
html: `
<html><body></body></html>
`,
css: `
:root {
--font-style: italic;
--font-weight: bold;
--line-height: 1.6em;
--font-family: 'Open Sans';
}
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
body {
font: var(--font-style) var(--font-weight) 1em/var(--line-height) var(--font-family);
}
`,
});
console.log(clean.css);
}
</script>
</head>
<body>
<button onclick="run()">run()</button>
</body>
</html>let me know how this works out. |
|
Sorry, my example was a simplified version of my actual use case. We use custom properties for both the font shorthand and the individual properties. This is more in line with what I'm working with and it's unfortunately still crashing with this fix: :root {
--font-style: italic;
--font-weight: bold;
--line-height: 1.6em;
--font-family: 'Open Sans';
--font: var(--font-style) var(--font-weight) 1em/var(--line-height) var(--font-family);
}
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
body {
font: var(--font);
} |
|
making me really work for this one 🤣 |
|
Hey, no pressure. I appreciate you taking your time! I think I overlooked your first comment and in response to that; no it did not remove my font-faces. I'll try and have a look and see if I can make sense of this. |
|
so, c3869cc implements a comprehensive custom props resolver, which properly handles multi-level composites as your example uses. the issue that now exists is with the fact that i've been using the index/offset for detecting whether eg
i think the reason it did not remove it is because your custom prop is named so there's some more re-work left until it's fully resolved. |
|
@tornqvist try the current build. this should now be handled correctly. |
|
Works like a charm. Thank you sooo much! 🎉 |
A recent fix (8e27afd) for short hand font properties will throw an error if one is using custom properties.
E.g. this rule causes the regex in said commit to not match.
The text was updated successfully, but these errors were encountered: