preflight is not passed to lightningcss

[sdavids]

What version of Tailwind CSS are you using?

3.3.6

What build tool (or framework if it abstracts the build tool) are you using?

tailwindcss-cli

What version of Node.js are you using?

v20.9.0

What browser are you using?

N/A

What operating system are you using?

N/A

Reproduction URL

$ mkdir /tmp/test && cd "$_"
$ npm init --yes
$ npm i -D tailwindcss lightningcss-cli
$ npx tailwindcss init
$ printf '@tailwind base;' > test.src.css
$ npx tailwindcss -c ./tailwind.config.js -i ./test.src.css -o ./test.css
$ npx tailwindcss -c ./tailwind.config.js -i ./test.src.css -o ./test.css.min.tw -m
$ npx lightningcss --minify test.css > test.css.min.lcss
$ diff test.css.min.tw test.css.min.lcss

Describe your issue

lightningcss-cli will order the selectors alphabetically.
tailwindcss-cli does not.

*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}

vs.

*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}

I suspect that the preflight is not passed into lighningcss.

[adamwathan]

Hey! Preflight is definitely being passed to lightningcss, you can open test.css.min.lcss and see all the Preflight styles right there in the file — here it is pretty printed and truncated so as not to be a huge wall of code:

*,
:before,
:after {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
:before,
:after {
  --tw-content: "";
}
html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  line-height: 1.5;
}
body {
  line-height: inherit;
  margin: 0;
}
hr {
  color: inherit;
  border-top-width: 1px;
  height: 0;
}
abbr:where([title]) {
  text-decoration: underline dotted;
}
/* ... */

There's nothing really Tailwind-specific happening here, you are just processing a CSS file with Lightning CSS that happens to have been generated by Tailwind, so whatever input goes in is what goes.

Tailwind CLI uses cssnano to minify, which seems to sort the ::after and ::before, whereas Lightning CSS is its own minifier, so the minified output they produce is different.

https://cssnano.co/playground/#eyJpbnB1dCI6IiosXG46OmJlZm9yZSxcbjo6YWZ0ZXIge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAvKiAxICovXG4gIGJvcmRlci13aWR0aDogMDtcbiAgLyogMiAqL1xuICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICAvKiAyICovXG4gIGJvcmRlci1jb2xvcjogI2U1ZTdlYjtcbiAgLyogMiAqL1xufVxuXG46OmJlZm9yZSxcbjo6YWZ0ZXIge1xuICAtLXR3LWNvbnRlbnQ6ICcnO1xufSIsImNvbmZpZyI6ImNzc25hbm8tcHJlc2V0LWRlZmF1bHQifQ==

In the future Tailwind will use Lightning CSS for minification instead of cssnano but either way I don't see any actual bug here, you're just seeing two different minifiers produce different output which is expected — one of the goals of Lightning CSS is to minify CSS better than cssnano does so the output will definitely be different in a lot of ways.

[sdavids]

I was maybe confused by #11402.