Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Freshly generated app contains syntax errors in home.css #5546

Closed
angelikatyborska opened this issue Aug 10, 2023 · 4 comments · Fixed by #5547
Closed

Freshly generated app contains syntax errors in home.css #5546

angelikatyborska opened this issue Aug 10, 2023 · 4 comments · Fixed by #5547

Comments

@angelikatyborska
Copy link
Contributor

Environment

  • Elixir version (elixir -v): 1.15.0
  • Phoenix version (mix deps): phx_new-1.7.7
  • Operating system: macOS 13.5

Actual behavior

After generating a fresh Phoenix app (exact command: mix phx.new phoenix_app --no-dashboard --no-ecto --no-gettext --no-mailer --no-tailwind), I noticed that my IDE is unhappy about the home.css file (lots of red squiggles). I passed the file though the CSS validator. It contains roughly 50 identical syntax errors, all custom CSS properties without any value given like this:

--tw-pan-x:  ;
Screenshot 2023-08-10 at 19 27 21

Expected behavior

A freshly generated app has no syntax errors in any of its files.

Can I open a PR that will remove those properties without values, or is that going to break something in Tailwind (whose custom properties those are, I assume)?

I know this is a low priority problem because browsers are extremely forgiving about CSS syntax errors and the file is meant to be deleted, but I still think it's worth fixing because red squiggles in a fresh project might make newcomers to the framework think that they did something wrong.

@chrismccord
Copy link
Member

Does the browser complain about this file? It is a throwaway file for styling on the "welcome to phoenix" page and nothing else. I'm happy to address this if it's a real problem, but again this isn't supposed to be a file that you really customize so a css linter complaining really isn't an issue imo. If the browsers errors then we should definitely address it. Thanks!

@angelikatyborska
Copy link
Contributor Author

Browsers have no problems ignoring a single line of broken CSS, so it doesn't break anything in terms of rendering. Still, I think it should be fixed if a fix is easily achievable because it might be mistaken by beginners as something they did wrong (because IDEs tend to mark those invalid files in red). I'm also of the opinion that the default generated app, even though it's meant to be thrown away, is a sort of showcase of the framework, so it should still be of high quality, right?

@chrismccord
Copy link
Member

Yes please send a PR if this is an easy fix. Note that this only applies when you run the --no-tailwind flag, so it's not exactly the default generated app. Thanks!

@rhcarvalho
Copy link
Contributor

Hi! I was looking at the commit history while updating the home.css file to match the changes to the template in the last several months, and found this :)

Investigating further, turns out the empty properties are by design, see:

Removing the empty properties can have unintended effects:

The spec seems to agree with that odd-looking empty property syntax:
https://drafts.csswg.org/css-variables/#guaranteed-invalid

This value serializes as the empty string, but actually writing an empty value into a custom property, like --foo: ;, is a valid (empty) value, not the guaranteed-invalid value.

So I think the buggy part is the IDE linter?

In any case, I also noticed that a fresh new Phoenix app with Tailwind support generates those same "empty properties" in priv/static/assets/app.css.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants