Less live build #946

mweimann · 2019-05-25T17:29:04Z

mweimann comentou

2019-05-25 17:29:04 +00:00

Membro

What

This PR introduces a live build of the less files in the browser.

It removes the fsfe.min.css from the repo.

Why

This should solve some issues regarding styles:

It isn't necessary any longer to call lessc for development
- That was an obstacle for some people
Conflicts in the fsfe.min.css file are avoided

How

There is now a new file config.xsl in the project root. Depending on the css-mode variable it uses the live browser less build or includes the fsfe.min.css.

browser → less browser build
compiled → include fsfe.min.css

ToDo

There are still some things to do to make this work.

Less build on build/deployment system
Some testing

**What** This PR introduces a live build of the less files in the browser. It removes the `fsfe.min.css` from the repo. **Why** This should solve some issues regarding styles: * It isn't necessary any longer to call `lessc` for development * That was an obstacle for some people * Conflicts in the `fsfe.min.css` file are avoided **How** There is now a new file `config.xsl` in the project root. Depending on the `css-mode` variable it uses the live browser less build or includes the `fsfe.min.css`. `browser` → less browser build `compiled` → include `fsfe.min.css` **ToDo** There are still some things to do to make this work. * [ ] Less build on build/deployment system * [ ] Some testing

mweimann adicionou o rótulo

build

2019-05-25 17:29:04 +00:00

mweimann comentou

2019-05-25 17:33:20 +00:00

Autor

Membro

@reinhard maybe you could have a look at the idea. For the build system setup I also need your help (see ToDo).

cc @max.mehl

@reinhard maybe you could have a look at the idea. For the build system setup I also need your help (see ToDo). cc @max.mehl

reinhard comentou

2019-05-25 18:07:21 +00:00

Membro

How cool!

To build the .min.css files, I think the main (phase 1) Makefile would be the ideal place.

There might be better ways to distingiush between development and production environment, for example by adding a xslt parameter which is automatically set in the build script. I first need to understand which actually should be development environment, and which should be production environment. For example, will the automatic build of test.fsfe.org be production or development?

How cool! To build the .min.css files, I think the main (phase 1) Makefile would be the ideal place. There might be better ways to distingiush between development and production environment, for example by adding a xslt parameter which is automatically set in the build script. I first need to understand which actually should be development environment, and which should be production environment. For example, will the automatic build of test.fsfe.org be production or development?

mweimann comentou

2019-05-26 09:46:34 +00:00

Autor

Membro

@reinhard I took another round with Max to integrate the valentine mode as well. We updated the name of the control file to config. The variable is now css-mode. Max suggested to simply sed the css-mode in the make file. Could you prepare that.

@reinhard I took another round with Max to integrate the valentine mode as well. We updated the name of the control file to `config`. The variable is now `css-mode`. Max suggested to simply `sed` the `css-mode` in the make file. Could you prepare that.

max.mehl comentou

2019-05-26 13:38:18 +00:00

Proprietário

Max suggested to simply sed the css-mode in the make file

Sorry, I didn't see Reinhard's suggestion before, a parameter would be even cooler, but to be honest I don't have a strong preference here.

For example, will the automatic build of test.fsfe.org be production or development?

IMHO production or compiled as it is called now. The server can take care of the CSS generation, so I see no reason for increasing the loading time.

> Max suggested to simply sed the css-mode in the make file Sorry, I didn't see Reinhard's suggestion before, a parameter would be even cooler, but to be honest I don't have a strong preference here. > For example, will the automatic build of test.fsfe.org be production or development? IMHO production or `compiled` as it is called now. The server can take care of the CSS generation, so I see no reason for increasing the loading time.

reinhard comentou

2019-05-26 19:29:55 +00:00

Membro

So the dynamic genereration of the CSS with JavaScript is intended only for the case when fsfe-local-build is used with fsfe-preview.sh, correct?

mweimann comentou

2019-05-27 07:58:18 +00:00

Autor

Membro

Yes, it's only for local development.

vincent comentou

2019-05-27 12:10:21 +00:00

Membro

Great feature, thank you! Just a reminder that once this gets merged we should update this documentation.

Great feature, thank you! Just a reminder that once this gets merged we should update [this](http://wiki.fsfe.org/TechDocs/Mainpage/CSSwithLESS) documentation.

mweimann alterou o título de ~~WIP: Less live build~~ para Less live build

2019-05-27 18:27:25 +00:00

mweimann comentou

2019-05-27 18:28:35 +00:00

Autor

Membro

@reinhard if you're happy with it could you prepare the make file? lessc then has also to be available on the build system.

I'll update the wiki page right after the merge.

@reinhard if you're happy with it could you prepare the make file? `lessc` then has also to be available on the build system. I'll update the wiki page right after the merge.

reinhard comentou

2019-05-27 20:40:45 +00:00

Membro

Sorry, I was busy today, will comment tomorrow.

reinhard fechou este pull request

2019-05-29 09:03:28 +00:00

max.mehl comentou

2019-05-29 10:31:36 +00:00

Proprietário

Really nice, thank you @mweimann and @reinhard !

For all people who already use local build, it's important to run fsfe-preview --copy look/ build/ scripts/ to have everything prepared. From then on, all pages have to be rebuild at least once to render them correctly since fsfe.min.css is no longer available. But probably a full rebuild would make sense anyway.

Really nice, thank you @mweimann and @reinhard ! For all people who already use local build, it's important to run `fsfe-preview --copy look/ build/ scripts/` to have everything prepared. From then on, all pages have to be rebuild at least once to render them correctly since fsfe.min.css is no longer available. But probably a full rebuild would make sense anyway.

mweimann comentou

2019-05-29 10:46:48 +00:00

Autor

Membro

I wrote a ticket for updating the wiki and send a mail to the list: #967

I'll do that later.

I wrote a ticket for updating the wiki and send a mail to the list: #967 I'll do that later.

👍 2

mweimann excluiu branch feature/dev-less

2019-05-29 10:46:53 +00:00

max.mehl adicionou esta issue para o marco Hackathon1905

2019-06-03 14:28:38 +00:00