Support fluidStart that matches value in the breakpoints array

Supposing I have breakpoints array = ['20em', '30em', '40em']

And fontSizes array = ['0.75em', '0.875em','1em','1.125em','1.375em']

And I set fluidStart = 20em which is the first breakpoint in my array

And I want to use fluid fontsizes = [2, 3, 4] // 1em, 1.125em, 1.37em @ 20em, 30em, 40em bps

Setting fluidStart to the same value as a breakpoint in the array doesn’t produce the correct fluid font sizes. The 1.125em fontsize is being used to calculate fluid font between 20em and 30em bps instead of the 1em fontsize .

It works as in your example if the fluidStart value isn’t in the breakpoints array so that bp array becomes only ['30em','40em']. But I don’t want to change my bp array as it is being used for other components design.

[galacemiguel]

It seems the issue still stands. Using a fluidStart in the breakpoints array is interpolating incorrectly.

Ah, that’s right. I had not anticipated this kind of usage. Will work on it, thanks!

As I stated earlier, your example used a fluidStart not in the breakpoint array which led to my confusion and bringing up this issue and #7.

Can we close #7 though now? @elitenoire

[elitenoire]

It seems the issue still stands. Using a fluidStart in the breakpoints array is interpolating incorrectly. Here is a codesandbox to help test out values.

// theme.js
const theme = {
  breakpoints: ["20em", "30em", "40em"],
  fontSizes: ["0.75em", "0.875em", "1em", "1.125em", "1.375em"]
};

theme.breakpoints.fluidStart = "30em"; // theme.breakpoints[1]

// Fluid Text component
fontsizes = [2, 3, 4]

With the above, I expect only the last fontSize to be fluid.