extending from functional selectors in imported files

[aoberoi]

I'd like to import my functional selectors from another CSS file and allow the @extend syntax add the rules from those selectors without inlining the entire file. I'm willing to help implement this if its something you'd like to see too, and accept in a PR.

for illustration:

/* base.css */
%thick-border {
  border: thick dotted red;
}

.some-other-declaration { color: rebeccapurple; }

/* modal.css */
@import './base.css';

.modal {
  @extend %thick-border;
  color: red;
}

/* becomes */

/* base.css */

.some-other-declaration { color: rebeccapurple; }

/* modal.css */
@import './base.css';

.modal {
  border: thick dotted red;
  color: red;
}

[jonathantneal]

Yea, this is a great idea. I think the plugin needs to be rewritten. I’ve made a few minor changes to keep it compatible with the current release of PostCSS and PostCSS Nesting, but otherwise it needs to be rewritten.

[educarneiro]

@jonathantneal

I bumped onto a similar scenario but in my case, the @extend source and use were both in an imported file. This plugin does not currently account for imported files...that being said, I'm using PreCSS, which includes this one.

I was debating where to post this but seems more pertinent here although a potential fix (for those using PreCSS) would be to update that plugin.

PreCSS loads the plugins in this order: const plugins = [postcssExtendRule, postcssAdvancedVariables, postcssPresetEnv, postcssAtroot, postcssPropertyLookup, postcssNested];

Maybe moving extend later in the chain (second here for example) would help address @import references. const plugins = [postcssAdvancedVariables, postcssExtendRule, postcssPresetEnv, postcssAtroot, postcssPropertyLookup, postcssNested];

[wesleyboar]

I want this to work, also. I did some debugging. I did not succeed, but I learned:

what does not work.

1. ❌ I placed `postcss-extend-rule` at the end of `.postcssrc.yml`, but imported functional selector was **not** extended. 2. ℹ️ I set option `onFunctionalSelector` to "ignore" and confirmed functional selector is loaded, but **not** extended. 3. 🙁 Lines [21–22 of `src/index.js`](https://github.com/csstools/postcss-extend-rule/blob/main/src/index.js#L21-L22) and [`root` API definition](https://postcss.org/api/#root) suggest* only the current file is parsed, not others.† 4. 💡 Plugin `postcss-custom-media` [supports using its "variable content"](https://github.com/postcss/postcss-custom-media/blob/8.0.0/index.js#L16-L26)‡ from [any manner of file imports](https://github.com/postcss/postcss-custom-media/blob/8.0.0/lib/get-custom-media-from-imports.js). 5. ❌ **But** plugin `postcss-custom-media` relies on [`exportTo`](https://github.com/postcss/postcss-custom-media/blob/8.0.0/index.js#L27) provided [by `postcss-preset-env`](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env#importfrom). \* To me, who is unfamiliar with plugin development. † I.e. no reading content from `@import`'ed files. ‡ I naïvely liken custom media to `postcss-extend-rule`'s "variable content": functional selector.

[romainmenke]

You can inject other CSS with @csstools/postcss-global-data

It injects and later removes CSS which might make it possible to do what you want here.