discourse/spec/lib/stylesheet/importer_spec.rb
Rafael dos Santos Silva 6e522e4aad
DEV: Move to Sass compilation to dart-sass (#19910)
This PR is a major change to Sass compilation in Discourse.

The new version of sass-ruby moves to dart-sass putting we back on the supported version of Sass. It does so while keeping compatibility with the existing method signatures, so minimal change is needed in Discourse for this change.

This moves us

From:
  - sassc 2.0.1 (Feb 2019)
  - libsass 3.5.2 (May 2018)

To:
  - dart-sass 1.58

This update applies the following breaking changes:

> 
> These breaking changes are coming soon or have recently been released:
> 
>  [Functions are stricter about which units they allow](https://sass-lang.com/documentation/breaking-changes/function-units) beginning in Dart Sass 1.32.0.
> 
>  [Selectors with invalid combinators are invalid](https://sass-lang.com/documentation/breaking-changes/bogus-combinators) beginning in Dart Sass 1.54.0.
> 
>  [/ is changing from a division operation to a list separator](https://sass-lang.com/documentation/breaking-changes/slash-div) beginning in Dart Sass 1.33.0.
> 
>  [Parsing the special syntax of @-moz-document will be invalid](https://sass-lang.com/documentation/breaking-changes/moz-document) beginning in Dart Sass 1.7.2.
> 
>  [Compound selectors could not be extended](https://sass-lang.com/documentation/breaking-changes/extend-compound) in Dart Sass 1.0.0 and Ruby Sass 4.0.0.


SCSS files have been migrated automatically using `sass-migrator division app/assets/stylesheets/**/*.scss`
2023-02-07 12:24:57 -03:00

147 lines
5.0 KiB
Ruby

# frozen_string_literal: true
require "stylesheet/importer"
RSpec.describe Stylesheet::Importer do
def compile_css(name)
Stylesheet::Compiler.compile_asset(name)[0]
end
describe "#category_backgrounds" do
it "applies CDN to background category images" do
expect(compile_css("color_definitions")).to_not include("body.category-")
background = Fabricate(:upload)
parent_category = Fabricate(:category)
category =
Fabricate(
:category,
parent_category_id: parent_category.id,
uploaded_background: background,
)
expect(compile_css("color_definitions")).to include(
"body.category-#{parent_category.slug}-#{category.slug}{background-image:url(#{background.url})}",
)
GlobalSetting.stubs(:cdn_url).returns("//awesome.cdn")
expect(compile_css("color_definitions")).to include(
"body.category-#{parent_category.slug}-#{category.slug}{background-image:url(//awesome.cdn#{background.url})}",
)
end
it "applies S3 CDN to background category images" do
setup_s3
SiteSetting.s3_use_iam_profile = true
SiteSetting.s3_upload_bucket = "test"
SiteSetting.s3_region = "ap-southeast-2"
SiteSetting.s3_cdn_url = "https://s3.cdn"
background = Fabricate(:upload_s3)
category = Fabricate(:category, uploaded_background: background)
expect(compile_css("color_definitions")).to include(
"body.category-#{category.slug}{background-image:url(https://s3.cdn/original",
)
end
end
describe "#font" do
it "includes font variable" do
default_font = ":root{--font-family: Arial, sans-serif}"
expect(compile_css("color_definitions")).to include(default_font)
expect(compile_css("embed")).to include(default_font)
expect(compile_css("publish")).to include(default_font)
end
it "includes separate body and heading font declarations" do
base_font = DiscourseFonts.fonts[2]
heading_font = DiscourseFonts.fonts[3]
SiteSetting.base_font = base_font[:key]
SiteSetting.heading_font = heading_font[:key]
expect(compile_css("color_definitions")).to include(
":root{--font-family: #{base_font[:stack]}}",
).and include(":root{--heading-font-family: #{heading_font[:stack]}}")
set_cdn_url("http://cdn.localhost")
# uses CDN and includes cache-breaking param
expect(compile_css("color_definitions")).to include(
"http://cdn.localhost/fonts/#{base_font[:variants][0][:filename]}?v=#{DiscourseFonts::VERSION}",
).and include(
"http://cdn.localhost/fonts/#{heading_font[:variants][0][:filename]}?v=#{DiscourseFonts::VERSION}",
)
end
it "includes all fonts in wizard" do
expect(compile_css("wizard").scan(/\.body-font-/).count).to eq(DiscourseFonts.fonts.count)
expect(compile_css("wizard").scan(/\.heading-font-/).count).to eq(DiscourseFonts.fonts.count)
expect(compile_css("wizard").scan(/@font-face/).count).to eq(
DiscourseFonts.fonts.map { |f| f[:variants]&.count || 0 }.sum,
)
end
end
describe "#import_color_definitions" do
let(:scss) { ":root{--custom-color: green}" }
let(:scss_child) do
"$navy: #000080; :root{--custom-color: red; --custom-color-rgb: \#{hexToRGB($navy)}}"
end
let(:theme) do
Fabricate(:theme).tap do |t|
t.set_field(target: :common, name: "color_definitions", value: scss)
t.save!
end
end
let(:child) do
Fabricate(:theme, component: true, name: "Child Theme").tap do |t|
t.set_field(target: :common, name: "color_definitions", value: scss_child)
t.save!
end
end
it "should include color definitions in the theme" do
styles = Stylesheet::Importer.new({ theme_id: theme.id }).import_color_definitions
expect(styles).to include(scss)
end
it "should include color definitions from components" do
theme.add_relative_theme!(:child, child)
theme.save!
styles = Stylesheet::Importer.new({ theme_id: theme.id }).import_color_definitions
expect(styles).to include("Color definitions from Child Theme")
expect(styles).to include("--custom-color: red")
expect(styles).to include("--custom-color-rgb: 0, 0, 128")
end
it "should include default theme color definitions" do
SiteSetting.default_theme_id = theme.id
styles = Stylesheet::Importer.new({}).import_color_definitions
expect(styles).to include(scss)
end
end
describe "#import_wcag_overrides" do
it "should do nothing on a regular scheme" do
scheme = ColorScheme.create_from_base(name: "Regular")
expect(Stylesheet::Importer.new({ color_scheme_id: scheme.id }).import_wcag_overrides).to eq(
"",
)
end
it "should include WCAG overrides for WCAG based scheme" do
scheme = ColorScheme.create_from_base(name: "WCAG New", base_scheme_id: "WCAG Dark")
expect(Stylesheet::Importer.new({ color_scheme_id: scheme.id }).import_wcag_overrides).to eq(
"@import \"wcag\";",
)
end
end
end