We would like to have a tool that can convert single CSS files to surimi files. The first version should be quite simple and should only look at the AST of a CSS file and replace selectors, at-rules and properties with the surimi counterpart.
I think there are many open questions about this yet:
- How to handle imports (
@import url(...))
- How to deal with unsupported syntax / rules like
@charset at-rules
- What do do when encountering invalid syntax or unknown rules / selectors Abandon?
- For example, a pseudo selector we don't know about, or a property name that doesn't exist
- How to compile unknown CSS custom properties (some
var(---something) statement)
Things this conversion tool should support
- Re-using selectors (if
.my-button appears multiple times, re-use the SelectorBuilder)
- Re-using styles
- Using selector builder methods instead of raw selectors
- do
select('.my-button').hover() instead of select('.my-button:hover') even though both are valid
- Convert at-rules to the proper builder
- Convert
@property rules to the property function, and it's uses (like var(--something)) to using the returned builder
We would like to have a tool that can convert single CSS files to surimi files. The first version should be quite simple and should only look at the AST of a CSS file and replace selectors, at-rules and properties with the surimi counterpart.
I think there are many open questions about this yet:
@import url(...))@charsetat-rulesvar(---something)statement)Things this conversion tool should support
.my-buttonappears multiple times, re-use theSelectorBuilder)select('.my-button').hover()instead ofselect('.my-button:hover')even though both are valid@propertyrules to thepropertyfunction, and it's uses (likevar(--something)) to using the returned builder