This project is not covered by Drupal’s security advisory policy.

Evaluate the use of @layer rule in Drupal context

We now have CSS laysers which could actually solve the "heavy CSS issue": When you override a style in your theme you currantly need to increase specifity.

Using CSS layers would allow us to use the same Selectors as the base styles and increase specifity only by the layer order.

For reference CSS-tricks summarizes @layer very well.

Not supported by browsers (See below).

Theory of this module

is to use the defined css layers provided by core.

Which are

  • CSS_BASE = -200
  • CSS_LAYOUT = -100
  • CSS_COMPONENT = 0 (equals CSS_AGGREGATE_DEFAULT = 0)
  • CSS_STATE = 100
  • CSS_THEME = 200

Reference for AssetResolver

As libraryDiscovery->getLibraryByName() does not provide the layers, I just used weights for now to chrchive something like: 

<link rel="stylesheet" media="all" href=".../css-layers.css" />
<link rel="stylesheet" media="all" href=".../core.css" layer="layout" />
<link rel="stylesheet" media="all" href=".../coffee.css" layer="component" />
<link rel="stylesheet" media="all" href=".../theme.css" layer="theme" />

The modules library just contains basic layer definition:

@layer base, layout, component, state, theme;

THE issue with this approach

Sadly CSS layers are currently only supported at the import level. E.g: 

@import url(blabla.css) layer(theme);

Which we don't use in Drupal currently. Seems we need to wait for that.

Aggregation

Leverage "group" css-property to agregate in Groups but with layers?

Needs a deeper evaluation

Wight or CSS-Category based approach?

Implement using the actual css "layer" named $category in LibraryDiscoveryParser::buildByExtension() instead of current weight based approach.

Potntial "CSS layers" are defined in xx.libraries.yml.

demo:
  css:
    base:
      demo/css/base.css: { minified: false }
    layout:
      demo/css/layout.css: { minified: false }      
    component:      
      demo/css/component.css: { minified: false }
    state:      
      demo/css/state.css: { minified: false }      
    theme:
      demo/css/theme.css: { minified: false }

This would require a one liner patch in LibraryDiscoveryParser::buildByExtension() monster function:

core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php:181

// Add category for CSS layers.
$options['layer'] = $category;

Project information

Releases