Skip to content

Commit f9dd3ff

Browse files
feat: implement CSS variable caching
1 parent ec6cf8f commit f9dd3ff

7 files changed

Lines changed: 64 additions & 54 deletions

File tree

builder/builder/doctype/builder_page/builder_page.py

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -251,10 +251,6 @@ def get_context(self, context):
251251
if context.preview and self.draft_blocks:
252252
blocks = self.draft_blocks
253253

254-
css_variables, dark_mode_css_variables = get_css_variables()
255-
context.css_variables = css_variables
256-
context.dark_mode_css_variables = dark_mode_css_variables
257-
258254
content, style, fonts = get_block_html(blocks)
259255
self.set_custom_font(context, fonts)
260256
context.fonts = fonts
@@ -311,7 +307,9 @@ def set_language(self, context):
311307
# Set page-specific language or fall back to default language from Builder Settings
312308
context.language = self.language
313309
if not context.language:
314-
context.default_language = frappe.get_cached_value("Builder Settings", None, "default_language") or "en"
310+
context.default_language = (
311+
frappe.get_cached_value("Builder Settings", None, "default_language") or "en"
312+
)
315313

316314
def is_component_used(self, component_id):
317315
if self.blocks and is_component_used(self.blocks, component_id):
@@ -405,23 +403,7 @@ def replace_component(self, target_component, replace_with):
405403

406404
def is_home_page(self):
407405
"""Check if this page is set as the home page in Builder Settings."""
408-
return frappe.get_cached_value("Builder Settings", None, "home_page") == self.route
409-
410-
411-
def get_css_variables():
412-
builder_variables = frappe.get_all("Builder Variable", fields=["variable_name", "value", "dark_value"])
413-
css_variables = {}
414-
dark_mode_css_variables = {}
415-
416-
for builder_variable in builder_variables:
417-
if builder_variable.variable_name and builder_variable.value:
418-
variable_name = f"--{camel_case_to_kebab_case(builder_variable.variable_name, True)}"
419-
css_variables[variable_name] = builder_variable.value
420-
421-
if hasattr(builder_variable, "dark_value") and builder_variable.dark_value:
422-
dark_mode_css_variables[variable_name] = builder_variable.dark_value
423-
424-
return css_variables, dark_mode_css_variables
406+
return frappe.get_cached_value("Builder Settings", "Builder Settings", "home_page") == self.route
425407

426408

427409
def replace_component_in_blocks(blocks, target_component, replace_with):

builder/builder/doctype/builder_variable/builder_variable.py

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
from frappe.model.document import Document
66
from frappe.model.naming import append_number_if_name_exists
77
from frappe.modules.export_file import delete_folder, export_to_files
8+
from frappe.utils.caching import redis_cache
9+
10+
from builder.utils import camel_case_to_kebab_case
811

912

1013
class BuilderVariable(Document):
@@ -26,7 +29,11 @@ class BuilderVariable(Document):
2629
def autoname(self):
2730
self.name = append_number_if_name_exists("Builder Variable", frappe.scrub(self.variable_name))
2831

32+
def after_insert(self):
33+
get_css_variables.clear_cache()
34+
2935
def on_update(self):
36+
get_css_variables.clear_cache()
3037
if self.is_standard:
3138
export_to_files(
3239
record_list=[["Builder Variable", self.name, "builder_variable"]], record_module="builder"
@@ -36,5 +43,27 @@ def on_update(self):
3643
delete_folder("builder", "builder_variable", self.name)
3744

3845
def on_trash(self):
46+
get_css_variables.clear_cache()
3947
if self.is_standard:
4048
delete_folder("builder", "builder_variable", self.name)
49+
50+
51+
@redis_cache(ttl=10 * 24 * 3600)
52+
def get_css_variables():
53+
builder_variables = frappe.get_all("Builder Variable", fields=["variable_name", "value", "dark_value"])
54+
css_variables = {}
55+
dark_mode_css_variables = {}
56+
57+
for builder_variable in builder_variables:
58+
if builder_variable.variable_name and builder_variable.value:
59+
variable_name = f"--{camel_case_to_kebab_case(builder_variable.variable_name, True)}"
60+
css_variables[variable_name] = builder_variable.value
61+
62+
if hasattr(builder_variable, "dark_value") and builder_variable.dark_value:
63+
dark_mode_css_variables[variable_name] = builder_variable.dark_value
64+
65+
return css_variables, dark_mode_css_variables
66+
67+
68+
def clear_builder_variable_cache(doc, method):
69+
get_css_variables.clear_cache()

builder/templates/generators/webpage.html

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -22,38 +22,10 @@
2222
<link rel="preconnect" href="https://fonts.googleapis.com">
2323
{% for (font, options) in fonts.items() %}<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ font }}:wght@{{ ";".join(options.weights) }}&display=swap" media="screen">{% endfor %}
2424
{{ style }}
25-
{%- if css_variables -%}
26-
<style>
27-
:root {
28-
{% for key, value in css_variables.items() %}
29-
{{ key }}: {{ value }};
30-
{% endfor %}
31-
}
32-
{%- if dark_mode_css_variables -%}
33-
@media (prefers-color-scheme: dark) {
34-
:root {
35-
{% for key, value in dark_mode_css_variables.items() %}
36-
{{ key }}: {{ value }};
37-
{% endfor %}
38-
}
39-
}
40-
{%- endif -%}
41-
{%- if preview -%}
42-
[data-prefers-color-scheme="dark"] {
43-
{% for key, value in dark_mode_css_variables.items() %}
44-
{{ key }}: {{ value }};
45-
{% endfor %}
46-
}
47-
{%- if dark_mode_css_variables -%}
48-
[data-prefers-color-scheme="light"] {
49-
{% for key, value in css_variables.items() %}
50-
{{ key }}: {{ value }};
51-
{% endfor %}
52-
}
53-
{%- endif -%}
54-
{%- endif -%}
55-
</style>
56-
{%- endif -%}
25+
<link rel="stylesheet" href="/builder_assets/variables.css" media="screen">
26+
{% if preview %}
27+
<link rel="stylesheet" href="/builder_assets/color_scheme_variables.css" media="screen">
28+
{% endif %}
5729
{%- if custom_fonts -%}
5830
<style>{% for font in custom_fonts %}@font-face {font-family: "{{ font.font_name }}";src: url("{{ font.font_file }}");}{% endfor %}</style>
5931
{%- endif -%}
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[data-prefers-color-scheme="dark"] {
2+
{%- for key, value in dark_mode_css_variables.items() %}{{ key }}: {{ value }};{%- endfor %}}
3+
4+
{%- if dark_mode_css_variables -%}[data-prefers-color-scheme="light"] {
5+
{%- for key, value in css_variables.items() %}{{ key }}: {{ value }};{%- endfor %}}
6+
{%- endif -%}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
from builder.builder.doctype.builder_variable.builder_variable import get_css_variables
2+
3+
4+
def get_context(context):
5+
css_variables, dark_mode_css_variables = get_css_variables()
6+
context.css_variables = css_variables
7+
context.dark_mode_css_variables = dark_mode_css_variables
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{%- if css_variables -%}:root {
2+
{%- for key, value in css_variables.items() %}{{ key }}: {{ value }};
3+
{%- endfor %}}{%- endif -%}
4+
5+
{%- if dark_mode_css_variables -%}@media (prefers-color-scheme: dark) {:root {
6+
{%- for key, value in dark_mode_css_variables.items() %}{{ key }}: {{ value }};
7+
{%- endfor %}}}{%- endif -%}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
from builder.builder.doctype.builder_variable.builder_variable import get_css_variables
2+
3+
4+
def get_context(context):
5+
css_variables, dark_mode_css_variables = get_css_variables()
6+
context.css_variables = css_variables
7+
context.dark_mode_css_variables = dark_mode_css_variables

0 commit comments

Comments
 (0)