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

Add option to also generate type-per-line #84

Open
bartveneman opened this issue Aug 12, 2024 · 1 comment
Open

Add option to also generate type-per-line #84

bartveneman opened this issue Aug 12, 2024 · 1 comment

Comments

@bartveneman
Copy link
Member

For syntax highlighting purposes in a diff I want to know what sort of thing we're rendering in each line. So apart from returning the CSS as a string I also want an array if types:

import { format_with_types ] from '@projectwallace/format-css'

let { css, types } = format_with_types('a { color: red; }')

// => css
`a {
  color: red;
}`

// => types
[
  1, // selector
  2, // declaration
  3, // bracket
]

The following types are needed:

  • selector (a)
  • declaration (color: red;)
  • bracket ({, })
  • atrule (@media all)

This is sufficient for highlighting purposes because the formatting rules dictate that every atrule or selector prelude line end with a { and every declaration ends with a ;.

We don't need to support this for minified CSS because that's just madness.

@bartveneman
Copy link
Member Author

Thinking out loud:

could it also be enough to check if:

  • line starts with @ and ends with { => atrule
  • line ends with , or { => selector
  • line ends with ; => declaration
  • line ends with } => bracket
  • empty line => whatev

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

No branches or pull requests

1 participant