Set prng seed

[NiciusB]

I use webpack to compile a number of components into different bundles. That means that if I change one single component, users will have every bundle but one cached, and we don't waste bandwidth.
My problem is that I use the sass random function in a couple of them, and that causes their content to change every time I compile the website even if no code has been changed.

If there was a way to always set up the prng seed, this would not happen.
There's a sass class function to set up the seed: http://sass-lang.com/documentation/Sass/Script/Functions.html#random_seed=-class_method

However, I can't seem to be able to run that function with node-sass
I could compile a version of LibSass that always sets up the same seed, but I thought this would be a nice addition anyway, since the sass function is already there

[xzyfer]

This would first need to be supported by LibSass

…

On Fri., 28 Sep. 2018, 6:38 pm Nuno Balbona, ***@***.***> wrote: First of all, I apologise if this is not the right project to place this issue. I looked at libsass and sass but this seemed like the right one. I use webpack to bundle different components. That means that when I change one single component, users will have everything but that one cached, and we don't waste bandwidth. My problem is that I use the sass random function in a couple of them, and that causes their content to change every time I compile the website even if no code has been changed. If there was a way to always set up the prng seed, this would not happen. There's a sass class function to set up the seed: http://sass-lang.com/documentation/Sass/Script/Functions.html#random_seed=-class_method However, I can't seem to be able to run that function with node-sass I could compile a version of LibSass that always sets up the same seed, but I thought this would be a nice addition anyway, since the sass function is already there Thanks! Nuno — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2503>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWM1l35mdL4AKBUkVq-LqMA5OwE6Tks5ufeAQgaJpZM4W-Fca> .

[NiciusB]

Related: sass/libsass#2705

[saper]

@NiciusB can you explain your use case a bit more? Why are you doing this?

[NiciusB]

We use the random function to generate some decorative elements
(Example: The petals in the header on https://curiouscat.me/Nuno or the rain in the header on https://curiouscat.me/CuriousCat)

Not being able to set the random seed means that every webpack compilation has a different hash for the CSS files that contain the header. I have reduced it's impact by putting them on a separate file, but still it would be nice to have the same hash.
The same effect could be achieved with CSS generated by JS, but it's nice to just do it in sass.

Another use case could be tests, as mentioned in the LibSass issue.

[saper]

But even if set a random seed - the order of execution of scss files is not guaranteed. How to solve this?

Maybe there should be a way to generate a reproducible hash on file name, class names or whatever to generate stable per-page values?

[NiciusB]

It's not guaranteed, but does it change randomly? If I add new scss files that don't contain the random function, would it affect the order of execution of my random-containing scss files?

Having per-page stable seeds would be nice. Adding such a feature would be overkill for my use case (assuming that the order of execution is stable enough), but I see how there might be other use-cases that would benefit from it

[saper]

It may, especially during watching or when we will optimize for speed of the compilation.

How would you like to provide the seed? As a parameter to render, renderSync? Something else?

[NiciusB]

Sending a "seed" parameter to render that's used to calculate the seed for every file sounds good.

However, I have checked my code (it's been a while) and I seem to be using a custom prng function

const Alea = require('alea')
const cssCustomRandom = new Alea(1)
[...]
functions: {
  'custom-random($min: 0, $max: 1, $precision: 2)': function(min, max, precision) {
    precision = Math.pow(10, precision.getValue())
    const num = Math.floor(cssCustomRandom() * max.getValue() * precision) / precision + min.getValue()
    return new sass.types.Number(num)
  }
}

It's not working as intended since the hash problem persists, but it's most probably due to the changing execution order that you mentioned. This could probably be mitigated by sending an aditional "namespace" parameter.
If that works, my use case could be trivially solved in userland. It might still be a nice to have feature, tho

[saper]

libsass currently initializes pseudo-random generator once, during the library startup. That would probably need to change if custom seeding is needed, but that also may create trouble for users who expect some reproducibility of results.

There is no notion of a "session" in libsass but we know that not only one file is rendered it once - it also includes mixins and other includes. I am not sure that setting the seed per render call is a good solution for all use cases.

We should have more feedback on how this feature should work to deliver expected results. Otherwise the non-random results may become random again.

Linking #2746 for an example of global state.