W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2020

[csswg-drafts] Parameters typed on CSS rules ? (#5824)

From: Mike 'PhiSyX' S. via GitHub <sysbot+gh@w3.org>
Date: Fri, 25 Dec 2020 01:11:14 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-774592389-1608858673-sysbot+gh@w3.org>
PhiSyX has just created a new issue for https://github.com/w3c/csswg-drafts:

== Parameters typed on CSS rules ? ==
Hello. I'm not a pro about Git but I guess I have to post here, these kind of specific questions and proposals about CSS.

My question is :
**Would it be possible that one day we might have the possibility to have parameters typed on CSS rules (in an official way)?**

---

Video :
I recorded a video to better understand my question. (It's something I did in JavaScript, it's not ideal.)
The idea would be to have this behavior natively, possible?

https://user-images.githubusercontent.com/738010/103111426-24dfb980-464d-11eb-84ab-e36743e01e0a.mp4

---

More explanations ?
First of all, the "types" are these : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types (to think about the authorized types)
We can imagine that to be able to "type" a value of a selector, a ":pseudo-class" would be mandatory.
```css
/* the following syntax naming is just a personal preference, and is there to illustrate my idea */
selector-*:param(type1) {}
selector-*-*:param(type1, type2) {}
```

And we could imagine that we could retrieve the value with a function, here we will call it `param(type)`.
```css
/* the following syntax naming is just a personal preference, and is there to illustrate my idea */
selector-*:param(type1) { prop: param(type1, defaultValue); }
selector-*-*:param(type1, type2) { prop: param(type1, defaultValue) param(type2, defaultValue); }
```

Examples with a numeric type :
```css
/* type number */
/**
 * this rule matches : <div class="my=1 my=10 my=30 my=-2  etc..." />
 */
.my\=*:param(number) {
  margin-right: calc(.5rem * param(number));   /* multiple of .5rem */
  margin-left:  calc(8px * param(number));     /* multiple of 8px */
}

/* type number :: float */
/**
 * this rule matches : <div class="opacity=.25 opacity:hover=1 etc..." />
 */
.opacity\=*:param(number),
.opacity\:hover\=*:hover:param(number) {
  opacity: param(number);
}
```

Example with a length, percentage types
```css
/* type length */
/**
 * this rule matches : <div class="f-size=12px f-size=10rem f-size=10ch etc..." />
 */
.f-size\=*:param(length) { font-size: param(length); }

/* type percentage */
/**
 * this rule matches : <div class="f-size=12% f-size=100% f-size=1000% etc..." />
 */
.f-size\=*:param(percentage) { font-size: param(percentage); }
```

Example with a color type
```css
/* type color (keywords only?) */

:root {
  --color-red-400: #ffa07a; 
  --color-red-500: #f00; 
}

/**
 * this rule matches : .bg:red-500 (color: red,  number: 500) ;
 *                     .bg-blue-1  (color: blue, number: 1)   ;
 *                     .bg-lime-22 (color: lime, number: 22)
 *
 * this rule matches : .bg:red-400:hover (color: red, number: 400)
 */
.bg\:*-*:param(color, number),
.bg\:*-*\:hover:hover:param(color, number) {
  /* exemple of situations */
  /* 1 */
  background-color: param(color);
  /* 2                      example --color-red-500 */
  background-color: /!\resolve-var("--color", "-", param(color), "-", param(number));/!\
  /* 3 */
  background-color: param(color);
  background-image: url(...);
  background-size: param(number);
  /* etc... */
}
```

and finally, types are equal?
```css
/* type number */
/**
 * this rule matches : <div class="grid-span-1-4" />
 */
.grid-span-*-*:param(number l, number r) {
    grid-colum: span param(number(l)) / span param(number(r));
 /* grid-colum: span param(l) / span param(r); ?? */
}
```

Et voilà.

---

This idea came to me when compiling my (S)CSS sources with some tools took more than 30 seconds. So I tried to find a solution, and it looks good to me. 

What do you think about it? I am curious to hear your opinion on it. Thank you for reading, and Merry Christmas. 🎅 

Sorry if my English is bad, I'm not used to communicate every day in English. (french)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5824 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 25 December 2020 01:11:16 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:24 UTC