Scoped CSS features

Scoped CSS is a huge advancement towards clean CSS for applications. Unfortunately, browsers compliancy is a big issue. However frameworks and libraries, likes NuxtJS and Svelte, embed this feature thanks to automation process.

---

• POC an implementation for PureScript + Reactix (difficulty high)

Regarding bootstrap component constants

• status, variant, etc.: does that need types?
• How to set an open "constants" of data in PureScript? (see this "react-bootstrap" TypeScript example)

DOM Attributes POC

a) [~] as an Open Records Props

  myComponent { attrs: { className: "hello" }}

• only works as a required props: use is OK, but it definitely should not be a required prop
• usage with optional props must include some unsafe...: totally not ideal

b) [x] as a SharedProps for every UI Component

Just the likes of "react-basic" base components props

  myComponent { className: "hello" }

• default value issue: not suitable here, as every attrs props would need a default value

c) [~] Array of attributes

Same idea as the "react-basic" API for props

  myComponent { attrs: [ P.className "hello" ] }

---

• any idea on this?

d) [ok] YAGNI

Statistically throughout all of my previous dashboard projects, cases were DOM attributes are used in such a way are on:

• base components
• bootstrap components, majority of "className"

YAGNI solution here:

• don't think it is worth polluting every component with the SharedProps solution
• hence better go with a YAGNI: set "className" as Props by default for every bootstrap components AND rely more on wrapped based components if needed
• for specific use cases (such as other situations dirrent from the simple "className" one), create an "attrs" Row on the Props RowType (solution a) )

Premount variable definition

Every premount variable for pages and layouts have to follow a certain implicit implementation. In terms of features, the computation has to check the following:

• output wrapped within an Aff
• provide an output of success/failure type: so in case of failure, current redirection made on the targeted page will not occur

a) [ok] returns Aff Unit

• most simple case
• can work with throw and later catched/attempt

b) [?] returns Aff (Either Error Unit)

• purer definition
• heavier to use