Adapt fluid parameter to work with units other than 'px' about stylus-library

[jonjahr]

I don't know how to get fluid() to work with percent units. Fluid is based off a A vw + B px expression. Changing the expression to A vw + B % would require knowing how to convert % to px... which requires knowing the size of the rendered DOM element... which could be constantly variable based on the viewport and the element's contents... and I don't know how to access this from a stylus mixin.

If I was faced with the same situation in the issue above, I would convert 5% and 15% to their respective px values, and do a fluid from that. I know this isn't a perfect solution, but it's the best non-JS solution I can think of.

[jonjahr]

I worked on this a bit, and ran into further issues. If you look at real-world values that fluid produces, the value of B is usually negative. This means that even if you did come up with some A vw + B % fluid expression, it will react changes in parent height in the opposite way you want it to. For example, if you wrote fluid(top, 5%, 15%), and your container height got taller, positioned element would move up instead of down. (This is because when the parent gets taller, the % units get bigger, the B part of the expression gets bigger, and after you do A + (bigger negative B), the resulting top value gets smaller).

Here's where I got with a fluid mixin that supports percent, but like I said it doesn't feel promising:

fluid-calc(max-size, min-size, max-break=desktop, min-break=mobile, px-per-unit=1)
	// Save and remove units.  Fallback to px.
	max-unit = unit(max-size) || 'px'
	min-unit = unit(min-size) || 'px'
	max-size = unit(max-size, '')
	min-size = unit(min-size, '')
	max-break = unit(max-break, '')
	min-break = unit(min-break, '')

	// Throw error if max and min have different units
	if max-unit != min-unit
		error("fluid-calc: 'max' and 'min' must use the same units, but different units provided: " + max-unit + ", " + min-unit)

	// Convert max and min to px, if not already px
	max-size = max-size * px-per-unit
	min-size = min-size * px-per-unit

	// Return the calc expression that sets a scaling value
	ratio = (max-size - min-size) / (max-break - min-break)
	base-size-px = min-size - ratio * min-break  // 👈 Usually negative

	ratio-vw = unit((ratio * 100), 'vw')
	base-size = unit((base-size-px / px-per-unit), max-unit)  // 👈 Usually negative

	return "calc(%s + %s)" % (base-size ratio-vw)