Let users store and use custom CSS per page

[akramsarkis]

• [ ] Generate 3 CSS presets for a specific UI each, the user can choose from one them in a drop down which include an additional choice "Other" that open the possibility to upload your own CSS file
• the presets can be uploaded as medias on Sections website project and we use the links from there We could simplify things and define as many presets as we want through env variable by putting a json made of the preset name and the url to the file That way we could edit the presets on the go
• The file name is the name of the preset
• You will read from this folder to show the existing presets in the drop down list
• For each preset you choose you will have a link to download it
• You can modify it and then use it to upload a custom css
• [ ] Let users store and use custom CSS per page
• They will show in the user media library
• [ ] Minify CSS

Acceptance testing

• [ ] Have available a specific folder in amazone to store the presets
• [ ] The file name of the preset should be the name of the preset
• [ ] From the site you will have a drop down list to select one of those preset that will be applied to the site
• [ ] When selecting a preset I must have a link to download the css file
• [ ] From the drop down there will be a choise "Other" and if selecting it you can upload your own css file that will be stored in your media library only and that will be applied to the site
• [ ] Check the site you are testing on using this tool https://pagespeed.web.dev/ for mobile and desktop

[mahfouzhseineweev]

The 3 CSS presets for a specific UI each are for what exactly ? Themes for section controls in Admin edit mode ?

The idea is clear however this needs more elaboration and grooming to be done correctly and the updates needed on the library are quite big to support this feature as we are going to change the way css is currently set to have specific classes per elements, a part of this was done in the cname update.

I can't give a correct estimation for this one but I can give a range of 5-8h

[mahfouzhseineweev]

After discussion with Julien:

The goal is to rely on tailwind configs to speed up the setting of some styles. But to also allow feeding custom css styles too.

1. Define the standard as part of the preset+custom css feature in the nuxt-sections Library (document it) ⚠️ Do not reinvent the wheel and rely on the standards provided by tailwind

2. Implement the standard in 1. inside the sections that ship with the vue-cli-plugin

3. Create presets following the standard (a preset will work the same way as a custom css it's just that it's made available to use out of the box to users)

4. Create a custom css that follows the standard too

The presets can be uploaded as medias on Sections website project and we use the links from there We could simplify things and define as many presets as we want through env variable by putting a json made of the preset name and the url to the file That way we could edit the presets on the go

[mahfouzhseineweev]

@akramsarkis

1) Just for now as I don't have access to sections website prod, I have uploaded the presets on sections dev as Preset 1, Preset 2, Preset 3. Please do not update these files directly

2) For your QA use the sections of blogs as they are the ones that are following the css Tailwind rules standards and skip the other sections that are for sections website which will be removed later

You can use the page I was using that is /blogs

The following ENV variable should be added to meta sections env variables on rancher:

NUXT_ENV_SECTIONS_CSS_PRESET=[{\"name\": \"Preset 1\", \"url\": \"https://s3.amazonaws.com/eweevtestbucketprivate/sections/preset1f5bee855a36c43708a8c7b801864715c.css\"},{\"name\": \"Preset 2\", \"url\": \"https://s3.amazonaws.com/eweevtestbucketprivate/sections/preset2127eaa90b85f48798c16665f2a96cf5a.css\"},{\"name\": \"Preset 3\", \"url\": \"https://s3.amazonaws.com/eweevtestbucketprivate/sections/preset3348a13214941498bb6391ab43ae5d057.css\"}]

[akramsarkis]

@mahfouzhseineweev please find below my feedbacks

• [x] When I select a preset and I save my settings, I am required to refresh my page to see the changes, they should see directly after saving my settings
• [x] When I select a preset and I click on export nothing is happening

[akramsarkis]

When exporting preset1 it is not working and in the console there is the below error:

And here answer of Hussein:

Hussein Mahfouz

A CORS error which is not from my side. In all cases, the amazon links will be moved to sections website prod account. So we will revisit this one later on, nothing can be done from my side for it

[akramsarkis]

@jfayad all good but there is just the comment above about Preset1 if you can check it, for the other preset I can export them without any problem.

For now Hussein put them as static as you were not there to add them as env variable, he will adjust it once you are there

[jfayad]

@mahfouzhseineweev when adding a custom css (or using a preset) how is the impact on the performance ?

[mahfouzhseineweev]

@jfayad For the presets, I used main standard classes that will not affect the performance and they just override existing Tailwind classes (colors, fonts etc...)

For the custom css uploaded, it will depend on the content of the CSS, and if these CSS classes are used in the page or not. If they are not used it will increase the Unused CSS but according to page speed it wont have a noticeable impact unlike the unused scripts and the large containtfull painting

[jfayad]

noted, LGTM

[akramsarkis]

@mahfouzhseineweev you are using a fetch type when downloading a preset file which is causing the CORS from amazon , you need to checj what you can use maybe Get in instead of Fetch

[mahfouzhseineweev]

@akramsarkis But then why would it work for a file and not for another ?

[akramsarkis]

@akramsarkis But then why would it work for a file and not for another ?

Well @mahfouzhseineweev no idea but this is Julien that mention this , I just added it there

[jfayad]

@mahfouzhseineweev make sure the user can also choose to not have any preset nor custom css file on his page

[mahfouzhseineweev]

@jfayad Already the case

[akramsarkis]

All good, closing