Authoring CSS for Olivero

Olivero uses PostCSS Preset ENV to transpile “modern” CSS into syntax that Drupal 9’s supported browsers (which includes IE11) can understand.

PostCSS Present ENV is a “wrapper” PostCSS plugin that includes various other plugins which enable syntax that will hopefully become standard in native CSS. This includes things like custom media query variables, nesting, and transpilation of CSS variables, and logical properties.

You can see the full list of plugins at https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js

Note that Olivero specifically disables plugins that require accompanying JavaScript polyfills.

The following PostCSS Preset ENV plugins are disabled:

• blank-pseudo-class
• focus-visible-pseudo-class
• focus-within-pseudo-class
• has-pseudo-class
• image-set-function
• prefers-color-scheme-query
  

  Use of CSS Nesting.

PostCSS Preset ENV uses PostCSS Nesting to convert nesting syntax to standard CSS. Documentation is available at https://github.com/jonathantneal/postcss-nesting#readme.

There are several important differences between PostCSS nesting and Sass nesting:

1. Nested selectors require an ampersand &

Within Sass, you can do something like

.parent { .child { margin: 0; } } 

and it will output

.parent .child { margin: 0; } 

This will no longer work. We need to insert an ampersand before the nested selector. The following code snippet will work as expected.

.parent { & .child { margin: 0; } } 

The same rule applies for all nested selectors including direct descendent, sibling, et al.

.parent { & > .direct-child { margin: 0; } } 

2. We are no longer able to include parent selectors (&) at the end of nested selectors (or in the middle).

Within Sass, we can do the following:

.selector { [dir="rtl"] & { transform-origin: left; } } 

and it will output

[dir="rtl"] .selector { transform-origin: left; } 

This no longer works. The correct syntax is

[dir="rtl"] .selector { transform-origin: left; } 

Use of CSS Logical Operators

CSS logical operators are additional properties that work well with right-to-left (RTL) languages, such as Arabic. Some of these are supported in modern browsers, while some are not.

PostCSS Present ENV includes the following plugins that will convert them into a standard syntax.

• postcss-logical

• postcss-dir-pseudo-class

These plugins will convert the following modern syntax

.selector { margin-inline-end: 10px; } 

into something that all supported browsers can understand.

[dir="ltr"] .selector { margin-right: 10px; } [dir="rtl"] .selector { margin-left: 10px; } 

Gotchas

There are several “gotchas” that you need to be aware of.

1. Additional specificity - When adding the [dir="rtl"] attribute onto the selector, the plugin introduces additional specificity into the selector, which may cause unexpected bugs. Example:

.selector { padding-inline-end: 10px; } .selector { padding: 0; } 

We expect the padding: 0 to override the padding-inline-end: 10px because it appears after the first rule. However, PostCSS will add dir attributes to the first selector, but not the second, which overrides this specificity.

[dir="ltr"] .selector {padding-right: 10px; } [dir="rtl"] .selector {padding-left: 10px; } .selector { padding: 0; } 

To work around this, we need to be explicit with the inline logical properties.

Instead of writing

padding: 0; 

Write the following:

padding-block: 0; padding-inline-start: 0; padding-inline-end: 0; 

2. Non support of border-*-*-radius - PostCSS Present ENV currently does not support logical border-radius properties such as border-start-start-radius. The latest version of PostCSS Logical does support these, and the issue to update this within PostCSS Preset ENV is at https://github.com/csstools/postcss-preset-env/issues/179