openeuropa / bootstrap-component-library

Openeuropa Bootstrap Component Library
https://oelibrary.netlify.app/
MIT License
14 stars 9 forks source link

[BCL builder] Make postcss prefixer option more flexible #591

Open vever001 opened 2 months ago

vever001 commented 2 months ago

Problem

BCL builder allows passing the prefix option when compiling sass files, but it is not flexible enough as it only passes the prefix and not the entire postcss-prefix-selector config which we would need.

Also, the plugin gets run with an empty prefix when no prefix are specified, which I believe is slowing down the compilation for no reason. And the current transform callback is not necessary and optional.

Context:

We would need such feature/flexibility for ckeditor5 stylesheets which expects all CSS to be prefixed with ".ck-content", but we need to specify the transform callback to deal with ":root". Also relates to https://github.com/openeuropa/oe_bootstrap_theme/issues/404 To be:

{
  entry: path.resolve(baseDir, "resources/sass/style.scss"),
  dest: path.resolve(baseDir, "assets/css/ckeditor5-style.css"),
  options: {
    ...
    prefixer: {
      prefix: ".ck-content",
      // Replace ":root" with prefix.
      transform: (prefix, selector, prefixedSelector) => {
        if (selector.includes(":root")) {
          return selector.replace(/:root/g, prefix);
        }
        return prefixedSelector;
      }
    }
  }
}

Proposed resolution

Deprecate the prefix option in favor of prefixer which holds the entire prefixer config. Run the plugin only when one of these options is passed.