Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.x] Theme Extender to Allow overriding LESS files #3008

Merged
merged 10 commits into from
Sep 10, 2021

Conversation

SychO9
Copy link
Member

@SychO9 SychO9 commented Aug 10, 2021

Fixes #2817

Changes proposed in this pull request:
This PR introduces the ability to just override a LESS file's contents through an extender.
This is mainly useful for theme development, as there are times in extensively customized themes where overriding the actual file makes a huge difference vs overriding CSS styles which can turn into a maintenance hell real fast.

Reviewers should focus on:

  • Would we rather have these methods in an existing extender such as Frontend.
  • Are we okay having a clear separation of what is a file source and an imported file ? or would we rather abstract that into just overrideFile. I'm personally okay with having this separation, I believe extension developers should understand the difference.

Confirmed

  • Frontend changes: tested on a local Flarum installation.
  • Backend changes: tests are green (run composer test).

@askvortsov1
Copy link
Member

Before getting into the code, what are some use cases for this? Isn't overriding already possible by just specifying new less after the first set

@davwheat
Copy link
Member

Yes, but I believe that results in duplicated styles.

If we take

// styles.less
a {
  color: red;
}

// theme.less
a {
  color: blue;
}

...we end up with both separate styles in the compiled CSS one after the other. Less doesn't merge them into one selector and remove the unused property-value pair.

https://beautifytools.com/less-compiler.php

@SychO9
Copy link
Member Author

SychO9 commented Aug 15, 2021

Before getting into the code, what are some use cases for this? Isn't overriding already possible by just specifying new less after the first set

I'm glad you asked, made me think about this some more, and here are the pros and cons of having this.

Pros

Cons

  • If a theme overrides a LESS file and we introduce a bug fix or a feature that changes or adds to that file, the maintainer of the theme would have to adapt their theme themselves.
  • Although we can try to avoid the following situation, there are times where simple LESS changes in core between minor releases could break themes that override relevant LESS files if we don't pay attention. For example we could be adding a new class to file1.less and using that class in file2.less. If theme X overrides file1.less but not file2.less, there will be a reference to an unexisting class, which I assume the preprocessor errors out on (that's what it does in dev mode, would be great if we could make it gracefully fail, I'm not even sure it does error out on production, I need to look into this)

@tankerkiller125
Copy link
Contributor

I haven't had a chance to review the code yet, but I agree with the idea in general. I have found theming Flarum to be a royal pain because of trying to override pre-existing CSS and other logic as it stands currently. Letting communities start with a blank slate if that's what they want is the way to go.

@askvortsov1
Copy link
Member

When you're designing an element, you would normally rather start from a blank canvas, than a styled element. With an already styled element you have to first override and undo the styles you do not wish to have, only then can you start shaping it, but even then you'd always end up constantly undoing default styles.

This one sold me. I haven't really done theming work, and assumed that most of it is tweaks as opposed to 0-1 work. Will take a look at the code next week when I have access to my laptop again.

Copy link
Contributor

@tankerkiller125 tankerkiller125 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have not had a chance to test locally, so someone will need to do that.

src/Extend/Theme.php Outdated Show resolved Hide resolved
tests/integration/extenders/ThemeTest.php Show resolved Hide resolved

$response = $this->send($this->request('GET', '/'));

$this->assertEquals(500, $response->getStatusCode());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we be a bit more specific as to the expected error message? I'm wary of expecting 500s as that can sometimes provide very little useful debugging info (or could be triggered when other, unrelated stuff is broken).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

might be better to drop this test

@askvortsov1 askvortsov1 merged commit f56fc11 into master Sep 10, 2021
@askvortsov1 askvortsov1 deleted the sm/2817-override-less-imports branch September 10, 2021 17:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Theme extender] Ability to override core LESS files
4 participants