@layer normalize about panda

[anubra266]

@jeffscottward Preflights are generally opinionated. If you'd like something different, you can disable preflight in your config, and apply your normalize styles through globalCss in your config

[jeffscottward]

Is full reset not an opinion?

Normalize is pretty industry standard. Of any preflight choices I would say it's the least opinionated and attempts to take the average of what just is already there.

If you're gonna have reset as an option, normalize should be the only other logical option.

Having only a nuclear option feels lob-sided.

Also I'm not even aware of any other "opinionated" reset options, it's generally just been one of these two. It's been around since the days of Moderinzr and jQuery.

I don't see any reason not to have it.

EDIT: Sanitize is built on top of Normalize which I suppose falls into the opinion box. I think Normalize fits a common archetype of solutions though.

https://github.com/csstools/sanitize.css

[anubra266]

@jeffscottward By opinionated, what I mean is that the styles applied by reset css differs by developer or design system.
As for your first question, full reset is definitely an opinion, that's why reset can be removed by setting preflight to false in your config.
And like I suggested before, adding your normalize styles to globalCSS, puts them in the base layer. That way you're not exactly nuking things, it results exactly as you expect.

In summary, an additional normalize layer is not necessary for this purpose. Unless I'm misunderstanding your question

[jeffscottward]

Ok that makes but there is still an issue.

You can't simply npm install and include a normalize or reset stylesheet. You must convert it to a style object.

There is obviously a good tool to do this
https://github.com/postcss/postcss-js

But I bring it up because now you're augmenting the config and bridging between source and target. Is this more optimal than providing at least one suggested (but easily dismissible) native solution?

It's may be ok but should be called out or an example provided in docs then. Otherwise anyone who does "have an opinion" has to go searching for which transform tool among the many will work, is maintained, etc

[anubra266]

@jeffscottward If I understand your question correctly, you want to use raw css.
You can send css to layers in your global css file this way.

@import url("normalize.css") layer(base)

[anubra266]

To better understand all the requirements you wish for @jeffscottward Could you give a sample of what you hope it'll be like if there was the normalize layer.
Where would you plugin your custom normalize?
Would it be raw css, or a style object?
Would it be in the config or css file?

This way I can give you a picture of the equivalent, and add to documentation where neccessary.

[jeffscottward]

@jeffscottward If I understand your question correctly, you want to use raw css.

You can send css to layers in your global css file this way.

@import url("normalize.css") layer(base)

Oh I didn't realize you could import to a layer with that syntax.

Huge feature, tiny explainer on mdn.

What I was after was, how do I go from npm install normalize.css sanitize.css which both have a regular old .css file, to including them as layers in my project.

The globalCSS you suggested according to the docs is a style object, which would have required conversion. This just felt like a weird place to put it besides needing the conversion, and also the preflight option seems more appropriate.

My suggestion is one of these two.

The simple import you suggested.

Or
{"preflight": ['reset','normalize','sanitize']}
instead of being only true false.

Unsure why a general term of preflight would only allow you to apply a reset. Wouldn't it just be called "reset"?

[anubra266]

Well @jeffscottward I'd say preflight is the popular term inclusive of resets or `normalize. Even in libraries like Chakra UI, or Tailwind.

As for using existing libraries like normalize.css or sanitize.css, I suppose the import layer syntax is the best option.
For resets in style object, It's really not weird to be in global css 😁 And you don't exactly have to define it bare there, it could come from a preset. E.g. pform-reset