Escape hatch for "Unknown at rule: X" #227
Description
🐛 bug report
I spend some time working with CSS primitives in my work and this often means syntax that isn't widely used yet or that is changing. I've bumped into this issue a couple of times. But, where there are primitives that are in use, transformer-css doesn't have a documented way to get around them if they aren't supported by the transformer. For example, CSS @scroll-timeline.
If I put this in my CSS
@scroll-timeline yourFirstTimeline {
source: auto;
orientation: vertical;
scroll-offsets: 0px, var(--distance);
}Which is valid CSS and works in Chrome Canary behind the experimental features flag
I'll get Unknown at rule: @scroll-timeline and I'm not sure how to bypass trying to "transform" it. It's like I need an eslint-ignore but for transforming new things.
🎛 Configuration (.babelrc, package.json, cli command)
Default set up with no configurations.
🤔 Expected Behavior
Should either compile and not complain or perhaps warn about it. Or provide users some way to get around it.
For example:
/* @parcel/transformer-css <start-ignore> */
@scroll-timeline yourFirstTimeline {
source: auto;
orientation: vertical;
scroll-offsets: 0px, var(--distance);
}
/* @parcel/transformer-css <end-ignore> */😯 Current Behavior
Won't transform and compile.
💁 Possible Solution
Listed above.
🔦 Context
I'm unable to work with the tool as I wish. Instead I have to manually resort to injecting the CSS into the <head> myself.
const HEAD = document.querySelector('head')
const insertStyles = styles => {
const STYLE = document.createElement('style')
STYLE.setAttribute('type', 'text/css')
STYLE.innerHTML = styles
HEAD.appendChild(STYLE)
}
const STYLES_TO_INSERT = `
@scroll-timeline yourFirstTimeline {
source: auto;
orientation: vertical;
scroll-offsets: 0px, var(--distance);
}
`
insertStyles(STYLES_TO_INSERT)💻 Code Sample
Try this valid CSS in a Parcel CSS file.
@scroll-timeline yourFirstTimeline {
source: auto;
orientation: vertical;
scroll-offsets: 0px, var(--distance);
}🌍 Your Environment
| Software | Version(s) |
|---|---|
| Parcel | 2.6.2 |
| Node | 17.8.0 |
| npm/Yarn | bun |
| Operating System | MacOS |