Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement CSS Cascade Layers support #1

Closed
wants to merge 12 commits into from

Conversation

AlexandrHoroshih
Copy link
Owner

@AlexandrHoroshih AlexandrHoroshih commented Sep 5, 2023

Closes theKashey#50

What is implemented

  • @layer rules got special processing, similiar to @media rules
  • AST types are refactored to make a clear distinction between processed at-rules (like @media or @layer, which are handled in a custom way) and unprocessed at-rules (any other "unknown" rule, which will be dropped into critical-css as-is)

What is not implemented

There is a possible edge-case:
It is possible to have the same layers order definition at multiple files, something like this

/* index.css */
@layer a, b, c;

// ...styles

/* chunk.css */
@layer a, b, c;

// ...styles

I think, it is possible in the situation, where layers are added automatically by bundlers, based on some heuristics or rules, since this way layers order is guaranteed and is not dependent on loading order 🤔

In that case used-styles probably should deduplicate these definitions.

But since i do not have any actual real-life use-cases, which would require something like this, it is not added in this PR

If this problem will actually happend one day - then cross-file deduplication of layer definitions can be solved by introducing something like "shared context" for the AST parser:

const astFromFiles = (fileDate: StyleFiles): StyleAst => {
  const sharedContext = {}

  return Object.keys(fileDate).reduce((acc, file) => {
    acc[file] = buildAst(fileDate[file], file, sharedContext);

    return acc;
  }, {} as StyleAst);
};

const buildAst = (cssString, file, context = {}) => {
  // ...
 if (context.layerDefinitions.has(`@layer ${rule.params}`) {
  return;
 }
}

@AlexandrHoroshih AlexandrHoroshih changed the title Add current css layers handling snapshots Implement CSS Cascade Layers support Sep 15, 2023
@AlexandrHoroshih AlexandrHoroshih marked this pull request as ready for review September 15, 2023 12:39
@AlexandrHoroshih AlexandrHoroshih deleted the css-cascade-layers branch September 16, 2023 12:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CSS Cascade Layers support
1 participant