diff --git a/CHANGELOG.md b/CHANGELOG.md index 2af69e0..340fd98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ All notable changes to eww will be listed here, starting at changes since versio - Allow floating-point numbers in percentages for window-geometry - Add support for safe access with index (`?.[n]`) (By: ModProg) - Made `and`, `or` and `?:` lazily evaluated in simplexpr (By: ModProg) +- Add Vanilla CSS support (By: Ezequiel Ramis) ## [0.4.0] (04.09.2022) diff --git a/crates/eww/src/app.rs b/crates/eww/src/app.rs index 48a2586..3b982a8 100644 --- a/crates/eww/src/app.rs +++ b/crates/eww/src/app.rs @@ -149,7 +149,7 @@ impl App { if let Err(e) = config_result.and_then(|new_config| self.load_config(new_config)) { errors.push(e) } - match crate::config::scss::parse_scss_from_file(&self.paths.get_eww_scss_path()) { + match crate::config::scss::parse_scss_from_config(&self.paths.get_config_dir()) { Ok((file_id, css)) => { if let Err(e) = self.load_css(file_id, &css) { errors.push(anyhow!(e)); diff --git a/crates/eww/src/config/scss.rs b/crates/eww/src/config/scss.rs index 4d08ee7..8561f70 100644 --- a/crates/eww/src/config/scss.rs +++ b/crates/eww/src/config/scss.rs @@ -4,18 +4,31 @@ use anyhow::{anyhow, Context}; use crate::{error_handling_ctx, util::replace_env_var_references}; -/// read an scss file, replace all environment variable references within it and +/// read an (s)css file, replace all environment variable references within it and /// then parse it into css. /// Also adds the CSS to the [`crate::file_database::FileDatabase`] -pub fn parse_scss_from_file(path: &Path) -> anyhow::Result<(usize, String)> { - let config_dir = path.parent().context("Given SCSS file has no parent directory?!")?; - let scss_file_content = - std::fs::read_to_string(path).with_context(|| format!("Given SCSS-file doesn't exist! {}", path.display()))?; - let file_content = replace_env_var_references(scss_file_content); - let grass_config = grass::Options::default().load_path(config_dir); - let css = grass::from_string(file_content, &grass_config).map_err(|err| anyhow!("SCSS parsing error: {}", err))?; +pub fn parse_scss_from_config(path: &Path) -> anyhow::Result<(usize, String)> { + let css_file = path.join("eww.css"); + let scss_file = path.join("eww.scss"); + if css_file.exists() && scss_file.exists() { + return Err(anyhow!("Encountered both an SCSS and CSS file. Only one of these may exist at a time")); + } + + let (s_css_path, css) = if css_file.exists() { + let css_file_content = std::fs::read_to_string(&css_file) + .with_context(|| format!("Given CSS file doesn't exist: {}", css_file.display()))?; + let css = replace_env_var_references(css_file_content); + (css_file, css) + } else { + let scss_file_content = + std::fs::read_to_string(&scss_file).with_context(|| format!("Given SCSS file doesn't exist! {}", path.display()))?; + let file_content = replace_env_var_references(scss_file_content); + let grass_config = grass::Options::default().load_path(path); + let css = grass::from_string(file_content, &grass_config).map_err(|err| anyhow!("SCSS parsing error: {}", err))?; + (scss_file, css) + }; let mut file_db = error_handling_ctx::FILE_DATABASE.write().unwrap(); - let file_id = file_db.insert_string(path.display().to_string(), css.clone())?; + let file_id = file_db.insert_string(s_css_path.display().to_string(), css.clone())?; Ok((file_id, css)) } diff --git a/crates/eww/src/opts.rs b/crates/eww/src/opts.rs index 31543ff..fc1c4c3 100644 --- a/crates/eww/src/opts.rs +++ b/crates/eww/src/opts.rs @@ -32,7 +32,7 @@ struct RawOpt { #[arg(long = "debug", global = true)] log_debug: bool, - /// override path to configuration directory (directory that contains eww.yuck and eww.scss) + /// override path to configuration directory (directory that contains eww.yuck and eww.(s)css) #[arg(short, long, global = true)] config: Option, diff --git a/crates/eww/src/paths.rs b/crates/eww/src/paths.rs index 376e9a6..498bd8e 100644 --- a/crates/eww/src/paths.rs +++ b/crates/eww/src/paths.rs @@ -77,10 +77,6 @@ impl EwwPaths { pub fn get_yuck_path(&self) -> PathBuf { self.config_dir.join("eww.yuck") } - - pub fn get_eww_scss_path(&self) -> PathBuf { - self.config_dir.join("eww.scss") - } } impl std::fmt::Display for EwwPaths { diff --git a/crates/eww/src/server.rs b/crates/eww/src/server.rs index 93a03ba..48adb0d 100644 --- a/crates/eww/src/server.rs +++ b/crates/eww/src/server.rs @@ -83,7 +83,7 @@ pub fn initialize_server(paths: EwwPaths, action: Option, should_ gtk::StyleContext::add_provider_for_screen(&screen, &app.css_provider, gtk::STYLE_PROVIDER_PRIORITY_APPLICATION); } - if let Ok((file_id, css)) = config::scss::parse_scss_from_file(&app.paths.get_eww_scss_path()) { + if let Ok((file_id, css)) = config::scss::parse_scss_from_config(&app.paths.get_config_dir()) { if let Err(e) = app.load_css(file_id, &css) { error_handling_ctx::print_error(e); } @@ -169,7 +169,7 @@ async fn run_filewatch>(config_dir: P, evt_send: UnboundedSender< Ok(notify::Event { kind: notify::EventKind::Modify(_), paths, .. }) => { let relevant_files_changed = paths.iter().any(|path| { let ext = path.extension().unwrap_or_default(); - ext == "yuck" || ext == "scss" + ext == "yuck" || ext == "scss" || ext == "css" }); if relevant_files_changed { if let Err(err) = tx.send(()) { diff --git a/docs/src/configuration.md b/docs/src/configuration.md index faa0567..144d8a6 100644 --- a/docs/src/configuration.md +++ b/docs/src/configuration.md @@ -10,13 +10,13 @@ If you're using VSCode, you can get syntax highlighting and formatting from [yuc It is also recommended to use [parinfer](https://shaunlebron.github.io/parinfer/), which makes working with S-expressions delightfully easy! -Additionally, any styles are defined in SCSS (which is mostly just slightly improved CSS syntax). +Additionally, any styles are defined in CSS or SCSS (which is mostly just slightly improved CSS syntax). While eww supports a significant portion of the CSS you know from the web, not everything is supported, as eww relies on GTK's own CSS engine. Notably, some animation features are unsupported, as well as most layout-related CSS properties such as flexbox, `float`, absolute position or `width`/`height`. -To get started, you'll need to create two files: `eww.yuck` and `eww.scss`. +To get started, you'll need to create two files: `eww.yuck` and `eww.scss` (or `eww.css`, if you prefer). These files must be placed under `$XDG_CONFIG_HOME/eww` (this is most likely `~/.config/eww`). Now that those files are created, you can start writing your first widget! diff --git a/docs/src/troubleshooting.md b/docs/src/troubleshooting.md index a50253d..d1db06b 100644 --- a/docs/src/troubleshooting.md +++ b/docs/src/troubleshooting.md @@ -14,7 +14,7 @@ Here you will find help if something doesn't work. If the issue isn't listed her ## My configuration is not loaded correctly -1. Make sure the `eww.yuck` and `eww.scss` files are in the correct places. +1. Make sure the `eww.yuck` and `eww.(s)css` files are in the correct places. 2. Sometimes, eww might fail to load your configuration as a result of a configuration error. Make sure your configuration is valid. ## Something isn't styled correctly! diff --git a/docs/src/working_with_gtk.md b/docs/src/working_with_gtk.md index 51376bd..0debd36 100644 --- a/docs/src/working_with_gtk.md +++ b/docs/src/working_with_gtk.md @@ -3,7 +3,7 @@ ## Gtk-theming Eww is styled in GTK CSS. -To make theming even easier, it makes use of `SCSS` and then compiles that into CSS for you. +You can use `Vanilla CSS` or `SCSS` to make theming even easier. The latter is compiled into CSS for you. If you don't know any way to style something check out the [GTK CSS Overview wiki](https://docs.gtk.org/gtk3/css-overview.html), the [GTK CSS Properties Overview wiki ](https://docs.gtk.org/gtk3/css-properties.html), or use the [GTK-Debugger](#gtk-debugger).