Commit Graph

75 Commits

Author SHA1 Message Date
Joe cfde4419f5
DEV: Preload CSS in the `<head>` (#17322)
This commit adds preload links for core/plugin/theme CSS stylesheets in the head.

Preload links are non-blocking and run in parallel. This means that they should have already been downloaded by the time we use the actual stylesheets (in the <body> tag).

Google is currently complaining about this here and this PR will address that warning.

This commit will also fix an issue in the splash screen where it sometimes doesn't respect the theme colors - causing a slightly jarring experience on dark themes.

Note that I opted not to add new specs because the underlying work required already has a lot of coverage. The new methods only change the output HTML so we can chuck that in the document <head>

This change also means that we can make all the stylesheets non-render blocking, but that will follow in a separate commit.
2022-07-05 00:23:09 +08:00
Loïc Guitaut 008b700a3f DEV: Upgrade to Rails 7
This patch upgrades Rails to version 7.0.2.4.
2022-04-28 11:51:03 +02:00
David Taylor b8526c6d75
DEV: Ensure stylesheet sourcemap URLs include __ws hostname param (#15934)
Without this parameter, requests for sourcemaps on shared-CDN multisites will not be routed to the correct database, resulting in a 404.

The stylesheet content now depends on the site hostname, so the hostname has been added to the digest.
2022-02-14 19:53:39 +00:00
Peter Zhu c5fd8c42db
DEV: Fix methods removed in Ruby 3.2 (#15459)
* File.exists? is deprecated and removed in Ruby 3.2 in favor of
File.exist?
* Dir.exists? is deprecated and removed in Ruby 3.2 in favor of
Dir.exist?
2022-01-05 18:45:08 +01:00
David Taylor 6e9bb84d12
FIX: Ensure theme names are escaped in HTML attributes (#15272)
If a theme name contained a double-quote, this problem could lead to invalid/unexpected HTML in the `<head>`

Note that this is not considered a security issue because themes can only be installed/named by administrators, and themes/administrators already have the ability to run arbitrary javascript.
2021-12-13 10:50:09 +00:00
Penar Musaraj 1167b16913
FIX: Order outputted theme stylesheets (#14133) 2021-08-25 09:37:07 +08:00
Martin Brennan e1d2b67178
DEV: Fix stylesheet manager flaky spec (#13846)
The cache_fullpath for the Stylesheet::Manager was the same for
every test runner in a parallel test environment, so when other
specs or other places e.g. the stylesheets_controller_spec ran
rm -rf Stylesheet::Manager.cache_fullpath this caused errors
for other specs running that went through the
Stylesheet::Manager::Builder#compile path, causing the error

```
Errno::ENOENT:
       No such file or directory @ rb_sysopen
```


Also fixed the stylesheet_controller which was interpolating Rails.root + CACHE_PATH
itself instead of just using Stylesheet::Manager.cache_fullpath
2021-07-26 14:22:54 +10:00
Penar Musaraj a23153fdca
FIX: Add order to outputted stylesheet link tags (#13735)
See PR for details. (Disabled by default in this commit.)
2021-07-15 12:51:46 -04:00
Penar Musaraj 95b5794331
DEV: Compile core and plugin stylesheets independently of themes (#13638)
Take 2 of https://github.com/discourse/discourse/pull/13466. 

Fixes a few issues with the original PR: 

- color definition stylesheet target now includes the theme id, to avoid themes set to use the default color scheme loading the same stylesheet 
- changes the internal cache key for color definition stylesheet to reset the pre-existing cache
2021-07-06 13:11:10 -04:00
Alan Guo Xiang Tan 3312e09d02
DEV: Incorrect name in precompile output. (#13602)
Follow-up to c54d58e28f
2021-07-01 10:52:21 +08:00
Alan Guo Xiang Tan c54d58e28f
FIX: Child themes being precompiled multiple times take 2. (#13599)
This fix was reverted in 128fdf9d9c but
fix is still relevant.
2021-07-01 10:09:39 +08:00
Penar Musaraj 128fdf9d9c
DEV: Revert stylesheet refactors (#13584)
* Revert "FIX: Clear appropriate cache when updating font settings (#13582)"

This reverts commit de6cc7a924.

* Revert "DEV: Improve output of `Stylesheet::Mananger.precompile_theme_css`."

This reverts commit 95038856c9.

* Revert "FIX: Child themes being precompiled multiple times."

This reverts commit 6986b36985.

* Revert "Update spec/components/stylesheet/manager_spec.rb"

This reverts commit ddaa7cc7ea.

* Revert "Refactor scss live refreshing"

This reverts commit a838293aaf.

* Revert "Precompile core stylesheets independently of themes"

This reverts commit 99d259d39b.

* Revert "DEV: Add simple digest for core stylesheets"

This reverts commit d82c58e6cc.
2021-06-30 21:33:15 +08:00
Alan Guo Xiang Tan 95038856c9 DEV: Improve output of `Stylesheet::Mananger.precompile_theme_css`. 2021-06-30 16:58:12 +08:00
Alan Guo Xiang Tan 6986b36985 FIX: Child themes being precompiled multiple times. 2021-06-30 16:09:45 +08:00
Penar Musaraj 99d259d39b Precompile core stylesheets independently of themes 2021-06-30 13:42:40 +08:00
Alan Guo Xiang Tan 83012b6473 FIX: Previewing theme components broken when component has no SCSS. 2021-06-22 09:48:48 +08:00
Alan Guo Xiang Tan 7901f73597 FIX: Multiple links being generated for non-theme targets.
Follow-up to 8e3691d537
2021-06-21 16:26:49 +08:00
Alan Guo Xiang Tan be655762d8 FIX: Color scheme stylesheet not loaded when no default theme is set.
Follow-up to 8e3691d537
2021-06-21 12:50:45 +08:00
Alan Guo Xiang Tan 44aa46ca05 Code review comments. 2021-06-21 11:06:58 +08:00
Alan Guo Xiang Tan 8e3691d537 PERF: Eager load Theme associations in Stylesheet Manager.
Before this change, calling `StyleSheet::Manager.stylesheet_details`
for the first time resulted in multiple queries to the database. This is
because the code was modelled in a way where each `Theme` was loaded
from the database one at a time.

This PR restructures the code such that it allows us to load all the
theme records in a single query. It also allows us to eager load the
required associations upfront. In order to achieve this, I removed the
support of loading multiple themes per request. It was initially added
to support user selectable theme components but the feature was never
completed and abandoned because it wasn't a feature that we thought was
worth building.
2021-06-21 11:06:58 +08:00
Alan Guo Xiang Tan 5f8f139ac9 PERF: Remove extra PG query.
In `Theme.list_baked_fields`, common is always included as a target.
2021-06-15 08:51:00 +08:00
Alan Guo Xiang Tan 2a4a20ad67
PERF: Avoid running a pointless PG query when theme has no variables. (#13342)
When `Theme#all_theme_variables` returns an empty array, we were running
a pointless query in `StyleSheet::Manager#uploads_digest`.

`SELECT "sha1" FROM "theme_fields" INNER JOIN "uploads" ON
"uploads"."id" = "theme_fields"."upload_id" WHERE 1=0`
2021-06-10 10:50:17 +10:00
Alan Guo Xiang Tan a8667b5454 PERF: Defer setting of distributed cache in more spots.
See follow up commit for rational.

Follow-up to 8cfe203383
2021-06-04 09:13:18 +08:00
Alan Guo Xiang Tan 8cfe203383 PERF: Defer setting of distributed cache in performance critical paths.
Setting a key/value pair in DistributedCache involves waiting on the
write to Redis to finish. In most cases, we don't need to wait on the
setting of the cache to finish. We just need to take our return value
and move on.
2021-06-03 09:30:52 +08:00
Alan Guo Xiang Tan 6a79864f14 PERF: Cache categories query in `Stylesheet::Manager.color_scheme_digest`.
The query is being executed each time we try and generate the link path
for a stylesheet within the duration of a reqeust. Categories are not
updated that often so repeating this query multiple times a request is
wasteful.

At the time of this commit, there is a `publish_discourse_stylesheet`
ActiveRecord callback on the `Category` model which clears the cache of
`Stylesheet::Manager` each time a category is saved.
2021-06-02 13:33:31 +08:00
Alan Guo Xiang Tan 958b56dc6c
PERF: Precompile child theme stylesheets. (#13040)
Previously, we only precompiled the CSS for parent themes but not for
the child themes. As a result, the CSS for child themes were being
compiled during the first request which made the respond time high for
that request.
2021-05-20 16:01:54 +10:00
David Taylor 7568c7a101
PERF: Make stylesheet max_file_mtime calculation more efficient (#12876)
Plugins always store their stylesheets under `/assets/stylesheets`, so we can make the glob pattern much more specific. In my local development environment, this increases the speed of `Stylesheet::Manager.max_file_mtime` from ~65ms to ~3ms (20x faster). This significantly improves stylesheet regeneration time, and the responsiveness of the theme admin UI.

Note that this will have negligible effect in production, because in production the value of `max_file_mtime` is aggressively cached.
2021-04-28 17:27:18 +01:00
David Taylor 1fd8f6df5f
PERF: Improve theme stylesheet compilation performance (#12850)
When building the `scss_load_paths`, we were creating a full export of the theme (including uploads), and not cleaning it up. With many uploads, this can be extremely slow (because it downloads every upload from S3), and the lack of cleanup could cause a disk to fill up over time.

This commit updates the ZipExporter to provide a `with_export_dir` API, which takes care of cleanup. It also adds a kwarg which allows exporting only extra_scss fields. This should make things much faster for themes with many uploads.
2021-04-27 14:33:43 +01:00
Penar Musaraj cf0192018e
FIX: Do not output empty style tags for components (#12229) 2021-03-01 09:14:25 -05:00
Penar Musaraj aa1442fdc3
DEV: Use separate files for theme component stylesheets (take 2) (#12225)
This switches to outputting a separate file for each theme component CSS
asset. We have separate CSS plugin files, separate JS files
(for plugins/themes/components), it makes sense to do the same for
component CSS assets.

Benefits:
- easier debugging
- fixes a regression with theme component sourcemaps
- changes to theme components are updated individually

With HTTP/2, there is also no performance downside to having additional
files in the initial request.
2021-02-26 12:30:23 -05:00
Penar Musaraj e74bdfdf8e
Revert "DEV: Use separate files for theme component stylesheets (#12214)" (#12224)
This reverts commit f57a49c2f9.

This had some unexpected side effects, needs some more work.
2021-02-26 08:20:39 -05:00
Penar Musaraj f57a49c2f9
DEV: Use separate files for theme component stylesheets (#12214)
This switches to outputting a separate file for each theme component CSS
asset. We have separate CSS plugin files, separate JS files
(for plugins/themes/components), it makes sense to do the same for
component CSS assets.

Benefits:
- easier debugging
- fixes a regression with theme component sourcemaps
- changes to theme components are updated individually

With HTTP/2, there is also no performance downside to having additional
files in the initial request.
2021-02-26 07:44:15 -05:00
Penar Musaraj e8b82724fd
DEV: Refactor theme SCSS compilation (#11919) 2021-02-02 13:09:41 -05:00
David Taylor 8be55184e6
FIX: Precompile wizard stylesheet (#11275)
This ensures it will not raise a 404 error during deploys
2020-11-18 09:36:52 +00:00
David Taylor 5d480257d4
FIX: Precompile all plugin and color definition CSS assets (#11210) 2020-11-12 10:17:38 +11:00
Penar Musaraj a4356b99af
FEATURE: Separate base and heading font site_settings (#10807)
Allows site administrators to pick different fonts for headings in the wizard and in their site settings. Also correctly displays the header logos in wizard previews.
2020-10-05 13:40:41 -04:00
Penar Musaraj 6610576deb
FIX: Clear stylesheet cache on base font change
Previously, we were not clearing the cache on themes using the default
color scheme.
2020-09-15 13:13:09 -04:00
Penar Musaraj b409954398
DEV: Improve theme support for color definitions (#10634)
- Lets child components extend color definitions
- Includes default theme color definitions
- Fails gracefully on color stylesheet SCSS errors
- Includes theme variables when extending colors
2020-09-09 11:43:34 -04:00
Penar Musaraj d4a7058cb1
DEV: Strip unicode from color scheme stylesheet filenames (#10628) 2020-09-08 15:00:16 -04:00
Jordan Vidrine e73ff68f75
FEATURE: Add css classes to stylesheet link elements (#10598)
Adding these classes to the stylesheet link elements in order to toggle dark/light schemes via this theme-component. Eventually this theme-component could possible be merged into core.
2020-09-04 15:40:40 -05:00
Bianca Nenciu 58b97ace23
DEV: Use a special import to declare font faces (#10583)
Update discourse-fonts to v0.0.3.

Follow-up to 7b7357147e.
2020-09-04 16:25:50 +03:00
Penar Musaraj 882b0aac19
DEV: Let themes extend color definitions (#10429)
Themes can now declare custom colors that get compiled in core's color definitions stylesheet, thus allowing themes to better support dark/light color schemes. 

For example, if you need your theme to use tertiary for an element in a light color scheme and quaternary in a dark scheme, you can add the following SCSS to your theme's `color_definitions.scss` file: 

```
:root {
  --mytheme-tertiary-or-quaternary: #{dark-light-choose($tertiary, $quaternary)};
}
```

And then use the `--mytheme-tertiary-or-quaternary` variable as the color property of that element. You can also use this file to add color variables that use SCSS color transformation functions (lighten, darken, saturate, etc.) without compromising your theme's compatibility with different color schemes.
2020-08-18 13:02:13 -04:00
Penar Musaraj 6dd9f2eca2
FIX: color scheme selection with non-default theme
This fixes an issue where a non-default theme set to use the base color
scheme (i.e. the theme had an empty `color_scheme_id`) was loading the
default theme's color scheme instead.
2020-08-12 08:49:13 -04:00
Penar Musaraj c05aced094
FIX: Invalidate cache when updating color scheme colors (#10417) 2020-08-11 16:28:59 -04:00
Penar Musaraj f179510a68
FIX: include both name and id in color scheme stylesheet filename slugs (#10397) 2020-08-07 13:43:45 -04:00
Penar Musaraj 6fdc711b4a
FEATURE: Allow users to opt out of automatic dark mode (#10377) 2020-08-06 09:45:37 -04:00
Penar Musaraj 266c0c50d7
FIX: Load base color scheme when default theme is not set
Followup to c937afc
2020-08-04 12:15:07 -04:00
Penar Musaraj c937afc75e
FEATURE: automatic dark mode (#10341)
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. 

This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-03 22:57:10 -04:00
Joffrey JAFFEUX c5326682d6 DEV: improves speed of live reload css in core and plugins (#8161)
This corrects live refresh of CSS when working on plugins (and core) in many cases live refresh was not working.
2019-10-10 16:10:23 +11:00
David Taylor e1e8cac58f FIX: Correct theme SCSS error handling 2019-09-17 10:20:32 +01:00