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.
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:
The following types are needed:
a)color: red;){,})@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.