search

csstools / postcss-normalize

Use the parts of normalize.css (or sanitize.css) you need from your browserslist
Creative Commons Zero v1.0 Universal
816 stars 40 forks source link

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

Open marcofugaro opened 4 years ago

marcofugaro commented 4 years ago

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 commented 4 years ago

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

image

Dan503 commented 3 years ago

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

marcofugaro commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

Dan503 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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?