Randomize your style.
We are now using TypeScript. The upside is that we can use interfaces and abstract classes. The downside is that we are using TypeScript.
Content Security Policy
Random CSS is now compatible with a strict Content Security Policy, i.e., one that forbids the use of inline CSS. The root component has an
unsafe prop which defaults to
false. If you pass
true to this prop, then it will use inline CSS. Otherwise it will use external CSS and you must be sure to link to the CSS file in your
While using external CSS is considered safer, it comes with a tradeoff: It significantly limits the number of possible values supported for some CSS properties, particularly color properties.
To use an external stylesheet, we have to create a rule for every value that we want to support for a given property. This means that using
rgb() is pretty much out of the question.
rgb() accepts three integers, each ranging from 0 to 255. So to support every possible combination, we would have to create 2563 = 16,777,216 rules for each color property. Creating that many rules for just one property results in a stylesheet that is over 1GB in size.
So when using external CSS, we use the color keywords, of which there are only 142.
- npm install
- npm run watch
- Open index.html in browser.
This project is licensed under the ISC License. See LICENSE.md for details.