Skip to content

Parsing CSS shorthand property containing variable as value #171

Open
@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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions