Skip to content
This repository

KISS parser system #13

Prinzhorn opened this Issue · 1 comment

1 participant

Alexander Prinzhorn
Alexander Prinzhorn

Right now, skrollr automatically detects what you want to animate and how to parse. The flow is like this:

  • Is it a transform value (scale, etc.)? -> parse transform value
  • Is it a color? -> parse color
  • Is it a numeric value/multiple numeric values with unit? -> parse them
  • It must be a constant value like "block" or "center"

We could probably throw this away completely, because at the end, they are all based on numeric values.

Instead do this:

  • Extract all numeric values from the string and remember where they were.

That's it. No matter if the string is rotate(0deg) scale(1.2) or rgb(100,20,40) or just 10px or even block, we will just parse all of them in a simple structure using a regex. For example

rotate(0deg) scale(1.2) will result in something like ["rotate(?deg) scale(?)", 0, 1.2]


rgb(100, 20,40) will result in something like ["rgb(?, ?,?)", 100, 20, 40]

Without looking at the code, this will probably save 20% or even more of the current code.

It get's even better: With this change, we will get support for all kinds of properties which would be hard to handle, for example gradients or shorthand values like "background", where position, image and color are mixed.

The only thing we need to keep in mind is, that there are some CSS properties that don't support floats and need <integer> CSS value. All properties in this table with either <integer> or <color> need special handling.

Alexander Prinzhorn

It took me 20 minutes to implement (yeah, I wrote this issue text before and just opened it) and it cut the minified version almost 2k! It's now 5.6k, but without <integer> handling. So almost everything works, except for example rgba colors using the integer notation instead of percentage. But I'm confident that those cases can be handled without giving away the 2k saving completely ;-)

One thing I forgot: mapping hsl to hex for IE is missing too, so let's see how much code this takes.

Alexander Prinzhorn Prinzhorn referenced this issue

Plugin system #14

Alexander Prinzhorn Prinzhorn closed this in 58b0c17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.