Skip to content

Parsing CSS shorthand property containing variable as value #171

@csiga00

Description

@csiga00

Prerequisites

  • Can you reproduce the problem in a MWE?
  • Are you running the latest version of AngleSharp.Css?
  • Did you check the FAQs to see if that helps you?
  • Are you reporting to the correct repository? (there are multiple AngleSharp libraries, e.g., AngleSharp.Xml for Xml support)
  • Did you perform a search in the issues?

Description

I'm using version 1.0.0-alpha-99.

I try to replace CSS variables with actual value in a html file (I have a pdf export tool that can't handle css variables in the pre-generated html). I'm playing with AngleSharp(.Css) to parse the html file and see what can I do with it. First of all, I parsed the html content and checked the parsed style objects.
I noticed, that if a variable is used in a shorthand css property, Value is empty in all the longhand properties, even the simple ones (e.g 1px or solid, etc). If I parse a single css property (one of the longhand) with variable, Value is set correctly.

Sorry, if this is not a bug, but by design or if I'm using AngleSharp in the wrong way. I'm really new to it and I might have missed something.

Thanks for help!

Steps to Reproduce

new AngleSharp.Css.Parser.CssParser(new AngleSharp.Css.Parser.CssParserOptions() { IsIncludingUnknownDeclarations = true, IsIncludingUnknownRules = true, IsToleratingInvalidSelectors = true }).ParseDeclaration("border-bottom: 1px solid var(--pale-grey);")

new AngleSharp.Css.Parser.CssParser(new AngleSharp.Css.Parser.CssParserOptions() { IsIncludingUnknownDeclarations = true, IsIncludingUnknownRules = true, IsToleratingInvalidSelectors = true }).ParseDeclaration("border-bottom-color: var(--pale-grey);")

The same happens if I examine a document loaded with the following code, that contains a <style> node with similar css rules.

var config = AngleSharp.Configuration.Default.WithDefaultLoader(new LoaderOptions { IsResourceLoadingEnabled = true }).WithCss();
var context = BrowsingContext.New(config);
var document = context.OpenAsync(res => res.Content(File.ReadAllText(@"sample.html")));

Expected Behavior

longhand properties:

Name Value
border-bottom-width 1px
border-bottom-style solid
border-bottom-color var(--pale-grey)

single property:

Name Value
border-bottom-color var(--pale-grey)

Actual Behavior

Name Value
border-bottom-width
border-bottom-style
border-bottom-color

single property:

Name Value
border-bottom-color var(--pale-grey)

Possible Solution / Known Workarounds

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions