Search code examples
csspostcss

Import file into nested selector

Is there a postcss solution for importing a file into / nesting inside a selector? I can't get postcss-import or postcss-nested to do what I'm after.

.some-selector {
    @import 'some.css';
}

Given a file e.g. import-me.css containing

div {
    color: red;
}

I'd like to process entry.css

.some-class {
  @import 'import-me.css';
}

And see the output

.some-class div {
   color: red;
}

Thanks!

UPDATE: for the trivial example, you can bodge it by using postcss-nested-import AND postcss-nested but this has a couple of drawbacks because (a) postcss-nested-import paths are relative to the script running it, whereas css convention is that imports should be relative to the calling file (b) the maintainer has abandoned it https://github.com/eriklharper/postcss-nested-import/issues/2 <--- this issue in turn references https://github.com/postcss/postcss-import/issues/214 which is a dead thread :-(

Solution

  • postcss-partial-import seems to do the trick.

    https://github.com/jonathantneal/postcss-partial-import