@import-normalize "opinionated.css"; doesn't actually work

[marcofugaro]

Hey, I've tried in my css

@import-normalize "opinionated.css";

However, it is not recognized, and the output remains

@import-normalize "opinionated.css";

This should be supported since it's in the README and also a test is needed for this feature.

[ghost]

It doesn't seem to be working with Create React App (3.4.1) either:

[Dan503]

This one issue basically makes this otherwise really cool tool completely impossible to use in most modern day projects :(

[marcofugaro]

@Dan503 in the meantime, you can import it like this:

@import 'normalize/opinionated';

and have the import plugin ignore that line:

postcssImport({
  filter(importPath) {
    return !importPath.includes('normalize')
  },
}),

[Dan503]

My problem is that Sass tries to import a file that doesn't exist.

And i tried using a basic css file instead of an scss file but I'm using a Gatsby project and I think Gatsby tries to bundle all the CSS up into one thing so when i tried to add the import statement it complained about not being able to find the file.

[marcofugaro]

@Dan503 you have to tell Sass to ignore that import, don't know if there is a way though.

[Dan503]

I was able to get around Sass by importing a plain .css file. Sass doesn't try to do anything with plain css files.

I still had a problem though because Gatsby still tried to import the css before compiling.

It doesn't add that much bloat so I'm just importing the whole file and not using postcss-normalize.

[jonathantneal]

I’m interested in knowing the cause of this.

The entire point of this library is so that exactly your kind of usage should work.

[adamwathan]

Here's a minimum reproduction:

https://github.com/adamwathan/postcss-normalize-bug

@import-normalize "opinionated.css"; is just ignored. Going to see if I can fix as I'd like to move Tailwind to this but we need to be able to do it without having to explain to people the tweaks they need to make to any of their postcss-import configuration or we're going to get a lot of issues.

[adamwathan]

Okay so after a bit of source-diving, you can make this work currently using the following syntax:

@import-normalize "normalize/opinionated.css";

Perhaps we just need to update the README here and not any actual code?