Relative length error

[jakob-e]

First of all – thank you for taking on this task - it is highly appreciated :-)

It seems like there is an issue when trying to compare relative and absolute lengths resulting in an error "Did not find expected sequence px"

<div class="container">
  <div class="card">Card</div>
</div>	

.container {
  container-type: inline-size;
}

@container (min-width: 160px){   <= This works
  .card {
     color: red; 
  }
}

@container (min-width: 10rem){   <= This fails
  .card {
     color: red; 
  }
}

Related to: https://github.com/GoogleChromeLabs/container-query-polyfill/blob/68425cc0e3e4399abfcf2cd26fbf3bfe0310b517/src/engine.ts#L430

Maybe something like this (thinking out loud ;-)

const input = '50vmax'

const value = parseFloat(input.replace(/[^-\d\.]/g, ''))
if(Number.isNaN(value)) {
  console.error(`${input} is not a number`)
}

const unit  = input.replace(new RegExp(value), '');  

const toPX = {
  px: v => v,
  pt: v => v * 72 / 96,
  pc: v => v * 6 / 96,
  in: v => v * 1 / 96,
  cm: v => v * 1 / 96 * 64 / 25.2,	
  mm: v => v * 1 / 96 * 64 / 25.2 / 10,
  q:  v => v * 1 / 96 * 64 / 25.2 * 40,
	
  // memoized viewport dimensions?  
  vw: v => v * innerWidth / 100,
  vh: v => v * innerHeight / 100,
  vmin: v => v * Math.min(innerWidth, innerHeight) / 100,
  vmax: v => v * Math.max(innerWidth, innerHeight) / 100,	
  
  // TODO based on root and container font size 
  rem: v => v * ...,
  em:  v => v * ...
}

if(!Object.keys(toPX).includes((unit||'').toLowerCase())) {
  console.error(`${unit} is not a supported unit`)
}

const pxValue = toPX[unit](value)

[surma]

Yup, as stated in the README in the limitations section:

Container query thresholds can only be specified using pixels.

I have no good way of resolving non-px values until Typed OM lands everywhere.

[devknoll]

Thank you for your issue.

The new version of the polyfill (currently in alpha) adds support for em, rem, and the container relative units. We'd gladly consider PRs for additional units too if there's a strong desire for them.

[WebMechanic]

The new version of the polyfill (currently in alpha) adds support for em, rem

brilliant, that pixel restriction was bugging me the most with the previous version! Apart from border, outline we virtually use no pixel values in our designs whatsoever; it's all them various font based units.

Please consider adding "the other" font based units ex and ch; if you have em those should be rather trivial to include. Thank you!

[devknoll]

@WebMechanic Thanks for your input. Could you open a new issue for font relative units enhancements? Thanks!