Parameters typed on CSS rules ?

[PhiSyX]

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?

css-proposal.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.

/* 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).

/* 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 :

/* 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

/* 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

/* 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?

/* 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)

[SebastianZ]

If I unterstand your proposal correctly, then the attr() function might already cover your use case.

It keeps the selectors untouched but references the values defined in element attributes.

Here are some examples:

.selector {
  opacity: attr(data-opacity number); /* numeric value */
  font-size: attr(data-font-size length); /* length value */
  background-color: attr(data-bgcolor color, white); /* color value with white as fallback */
  background-image: url(attr(data-bgimage url)); /* url value */
}

Though note that this function is still under discussion due to security concerns among other things.

Happy New Year! 🥳 🍾

Sebastian

[PhiSyX]

Oh yes, indeed, it is exactly the same principle as the attr() function that I want!

Except that instead of having the values in different attributes, having them directly in the class names directly in the "class" attribute. I find it more convenient for certain values (like numbers, keywords colors, lengths) but I can also understand the data separation of selectors.

Thank you for your response and happy new year 🎊

[Crissov]

[data-attr=val]

#354