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

Introduce Style element #167

Merged
merged 7 commits into from
Aug 28, 2023
Merged

Introduce Style element #167

merged 7 commits into from
Aug 28, 2023

Conversation

lippserd
Copy link
Member

This PR introduces a new Style element to provide strict CSP compliant dynamic CSS when necessary.

Note that it is still a work in progress, so it is not in the right namespace, is not documented, API is subject to change, and lacks unit tests.

Example of creating style with some rulesets:

$style = new Style();
$style->add('.size', [
    'height' => '1em',
    'width'  => '1em'
]);
$style->add('.border', [
    'border' => '1px solid black'
]);

Output:

<style>
.size {
  height: 1em;
  width: 1em;
}
.border {
  border: 1px solid black;
}
</style>

Now we wrap the rules in a selector:

$style->setSelector('.parent');

Output:

<style>
.parent .size {
  height: 1em;
  width: 1em;
}
.parent .border {
  border: 1px solid black;
}
</style>

We can also use LESS variables and nested rulesets:

$style->setProperty('@black', 'black');
$style->addRuleset(
    LessRuleset::create('.widget', ['color' => '@black'])
        ->add('&.detail', ['font-size' => 'bigger'])
);

Output:

<style>
.parent .size {
  height: 1em;
  width: 1em;
}
.parent .border {
  border: 1px solid black;
}
.parent .widget {
  color: var(--black, #000000);
}
.parent .widget.detail {
  font-size: bigger;
}
</style>

Style can be automatically wrapped in a module scope:

$style->setModule(Icinga::app()->getRequest()->getModuleName());

Output:


<style>
.icinga-module.module-icingadb .parent .size {
  height: 1em;
  width: 1em;
}
.icinga-module.module-icingadb .parent .border {
  border: 1px solid black;
}
.icinga-module.module-icingadb .parent .widget {
  color: var(--black, #000000);
}
.icinga-module.module-icingadb .parent .widget.detail {
  font-size: bigger;
}
</style>

And for conformance with strict CSP, a nonce can be set:

$style->setNonce(Csp::getStyleNonce());

Output:

<style nonce="9MEcubtLrEm7isUUbl/l0A==">
...
</style>

@cla-bot cla-bot bot added the cla/signed label Jul 12, 2023
@lippserd lippserd requested a review from nilmerg July 12, 2023 11:45
@lippserd
Copy link
Member Author

@nilmerg I'd like to discuss API and namespace.

@nilmerg
Copy link
Member

nilmerg commented Aug 25, 2023

Thinking about using lessc directly, as suggested by @yhabteab. Inline style is mainly used for layout purposes and for this, theming and mode support isn't relevant. If we don't support that this way, devs are encouraged to define proper styles.

@nilmerg nilmerg marked this pull request as ready for review August 28, 2023 13:30
@nilmerg nilmerg added this to the v0.9.0 milestone Aug 28, 2023
@nilmerg nilmerg added the enhancement New feature or request label Aug 28, 2023
Copy link
Member

@nilmerg nilmerg left a comment

Choose a reason for hiding this comment

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

Since it doesn't depend on Icinga Web anymore, the namespace should be fine as it is now.

@nilmerg nilmerg merged commit c0bb0d1 into main Aug 28, 2023
12 checks passed
@nilmerg nilmerg deleted the style-element branch August 28, 2023 13:47
nilmerg added a commit to Icinga/icingadb-web that referenced this pull request Sep 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla/signed enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants