postcss-reference icon indicating copy to clipboard operation
postcss-reference copied to clipboard

@references with @import doesn't appear to work

Open TomStrepsil opened this issue 2 years ago • 2 comments

Firstly, thanks for (what seems to be) a solution to a problem that's seemingly imperfectly solved elsewhere.

However, my use-case predicates styles held on disk in a separate css file, which I'd like to import and then reference.

The given example:

/* Input */
@reference {
    @import 'pure.css';
}

button {
    @references .pure-button, .pure-button-primary;
}

...doesn't seem to work, having copied pure.css (named pure.css in the local folder) - the output is always:

button {}

I notice that there are tests for this behaviour - and, in-fact, running the following:

(await require("postcss")([require("./index.js")]).process(require("fs").readFileSync("./test/at-import-support.css"), { from: "./test/at-import-support.css" })).css

...from the repo appears to work fine:

header {
    color: blue;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    display: block;
    margin: 1em;
}

However, if this is installed as an NPM package in node_modules, and the same test/ folder structure is created in a consumer, when attempting:

(await require("postcss")([require("postcss-reference")]).process(require("fs").readFileSync("./test/at-import-support.css"), { from: "./test/at-import-support.css" })).css

...produces:

header {
   display: block;
   margin: 1em;
}

...i.e. the imported rules appear not to have been found.

if npm link / yarn link is used to bring postcss-reference in instead, everything seems to work. So I assume something up with the directory structure when installed as a node module.

I will investigate and hopefully provide a fix! But thought I'd let you know what I'd found, in-case it's something you'd noticed before and I'm just doing something stupid.

TomStrepsil avatar Dec 12 '23 10:12 TomStrepsil

Hmm... I appear to have an invalid npm package - the CHANGELOG.md I have is for v2.0.0 yet the package.json talks of 2.1.0

Apologies if this is the ultimate cause - will try and purge the upstream package clone.

TomStrepsil avatar Dec 12 '23 12:12 TomStrepsil

I think what's been published to npmjs.com is incorrect - see: https://www.npmjs.com/package/postcss-reference?activeTab=code image ...this doesn't match the head of the repo.

I fear the package.json is still at 2.0.0 and 2.1.0 may not be published properly.

TomStrepsil avatar Dec 12 '23 13:12 TomStrepsil