Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

theming: parsing a registered style with Media Queries or keyframes produces incorrect rules #9869

Closed
#12049
Closed
theming: parsing a registered style with Media Queries or keyframes produces incorrect rules#9869
#12049
Assignees
Splaktar
Labels
P2: requiredIssues that must be fixed.has: Pull RequestA PR has been created to address this issueresolution: fixedtype: bugui: CSS
Milestone
1.2.2

Description

@natete
natete
opened on Oct 20, 2016

Actual Behavior:

  • What is the issue? * When a CSS stylesheet containing media queries (or keyframes or anything that can have nesting) is registered using the Theming Provider, Angular Material processes it in a wrong way causing an incorrect result.

Now the string representing the CSS is split using a regex that doesn't take into account nesting, causing nested rules to be considered independent rules. For example:

@media (min-width: 0) and (max-width: 700px) {

  .md-THEME_NAME-theme .test-background {     
    background-color: pink;
  }

  .md-THEME_NAME-theme p {
    color: blue;
    font-weight: bold;
  }
}

Will be parsed:

@media (min-width: 0) and (max-width: 700px) {

  .md-test-theme .test-background {     
    background-color: pink;
  }
}

.md-test-theme p {
  color: blue;
  font-weight: bold;
}

Causing a bad behavior because styles defined to p elements will be applied regardless the screen size.

  • What is the expected behavior? Parsing a CSS should take into account nesting. In the example the correct result would be:
@media (min-width: 0) and (max-width: 700px) {

  .md-test-theme .test-background {     
    background-color: pink;
  }

  .md-test-theme p {
    color: blue;
    font-weight: bold;
  }
}

CodePen (or steps to reproduce the issue): *

  • CodePen Demo which shows your issue: http://codepen.io/natete/pen/BLGPbd
  • Details: Second rule inside the media query is extracted from it causing the rules to be applied in a wrong manner.

Angular Versions: *

  • Angular Version: 1.5.8
  • Angular Material Version: 1.1.1

Additional Information:

  • Browser Type: * all
  • Browser Version: * all
  • OS: * all
  • Stack Traces:

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

Activity

  1. natete
    added 2 commits that reference this issue on Oct 20, 2016

    fix(theming): fix CSS with nested rules parsing when registering a theme

    91e8fc4

    test(theming): test register style using a CSS with nested rules

    4f92c65
  2. ThomasBurleson
    assigned
    clshortfuse
    on Oct 20, 2016
  3. ThomasBurleson
    added
    P0: criticalCritical issues that must be addressed immediately.
    on Oct 20, 2016
  4. ThomasBurleson
    added this to the 1.1.2 milestone on Oct 20, 2016
  5. natete
    added 4 commits that reference this issue on Oct 21, 2016

    style(): fix code styles

    3fa0f23

    fix(theming): ignore anything inside quotes when parsing a CSS string

    ebcbb67

    test(theming): test register style using a CSS with multiple nesting …

    8aba117

    style(): improve comments and variable names

    9d78e58
  6. clshortfuse
    added
    has: Pull RequestA PR has been created to address this issue
    on Oct 24, 2016
  7. natete
    added 5 commits that reference this issue on Oct 24, 2016

    fix(theming): fix CSS with nested rules parsing when registering a theme

    3773900

    fix(theming): fix CSS with nested rules parsing when registering a theme

    a7f055c

    fix(theming): fix CSS with nested rules parsing when registering a theme

    f190436

    fix(theming): fix CSS with nested rules parsing when registering a theme

    40dae3e

    fix(theming): fix CSS with nested rules parsing when registering a theme

    f173fba

  8. 43 remaining items

  9. Splaktar
    modified the milestones: 1.1.21, 1.1.22 on Aug 15, 2019
  10. Splaktar
    modified the milestones: 1.1.22, 1.1.23 on Oct 22, 2019
  11. Splaktar
    modified the milestones: 1.1.23, 1.2.0 on Jun 8, 2020
  12. Splaktar
    modified the milestones: 1.2.0, 1.2.1 on Jul 29, 2020
  13. Splaktar
    modified the milestones: 1.2.1, 1.2.2 on Sep 14, 2020

  14. Splaktar commented on Dec 6, 2020

    @Splaktar
    Splaktar
    on Dec 6, 2020
    Contributor

    Some details on the given CodePen and this reproduction:

    • You have to reproduce this on a small display (700px wide or smaller)
    • You see white text instead of blue because the CSS rule is rendered as
    .md-test-theme * {
    color: blue;
    font-weight: bold;
    font-size: 6px;
}

    Instead of

    @media (max-width: 700px) and (min-width: 0) .md-test-theme * {
    color: blue;
    font-weight: bold;
    font-size: 6px;
}

    Broken

    Screen Shot 2020-12-05 at 21 06 08

    It should render this way

    Screen Shot 2020-12-05 at 21 05 44

  15. Splaktar
    added a commit that references this issue on Dec 6, 2020

    fix(theming): fix CSS with nested rules parsing when registering a theme

    a784ede
  16. Splaktar
    closed this as completedin #12049on Dec 9, 2020
  17. Splaktar
    added a commit that references this issue on Dec 9, 2020

    fix(theming): fix CSS with nested rules parsing when registering a theme

    71dc4eb
  18. Splaktar
    added
    resolution: fixed
    on Dec 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2: requiredIssues that must be fixed.has: Pull RequestA PR has been created to address this issueresolution: fixedtype: bugui: CSS

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions