Re: [csswg-drafts] [css-env] Adding custom env() variables (#2627)

> Here, an author would have to go through the entire stylesheet and imports to see why `--body-bg` isn’t red. If constants had a different syntax, it would be clear by just looking at it.

Looking at your feedback and comment, from what I said earlier it would make sense then to assume that this custom env() is then a "var" (since it can change the value) and not a "const" (because const cannot change the value)

My concern is similar to yours, how to import this, and whether or not there will be import like js does.

One of my concerns is that import doesn't allow special symbols in variables. Example:

filename: main.css
```css
@import "constants.css" constants, breakpoint-s, body-bg; 

/* error  breakpoint-s, body-bg 
symbol not allowed for import - 
*/

@media screen and (min-width: var(--breakpoint-s, 300px)) {   /* because constants are selector agnostic */
    body {
        --body-bg: red; /* no effect, because --body-bg is already a constant (then it's unalterable) */
        background-color: var(--body-bg, green); /* blue, because --body-bg is simply already defined */
    }
}
```

*vs*

filename: /constants.js
```js
export const body-bg = 'blue'; // 'green'
export const breakpoint-s = '640px'; // 'green'
```

filename: /main.js
```js
import { body-bg, breakpoint-s } from "/constants.js"; 

/* error  breakpoint-s, body-bg 
symbol not allowed for import - 
*/

console.log(bodyBg); // blue
console.log(breakpoints); // 640px
```


-- 
GitHub Notification of comment by daskpunk
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2627#issuecomment-1448085213 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 28 February 2023 12:17:51 UTC