A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Import aliases & `@private`

Zambonifofex
2017-09-18

Currently, in CSS, everything is global; there is no way to make something file-private, nor to have two different keyframes with the same name in different files.

I propose a new syntax to imports, that’ll allow them to alias imported declarations:

/* https://example.net/monica.css */

@keyframes zomg
{
	0%, 100% { color: #7ccdea; }
	16%      { color: #0074D9; }
	32%      { color: #2ECC40; }
	48%      { color: #FFDC00; }
	64%      { color: #B10DC9; }
	80%      { color: #FF4136; }
}

@keyframes avatarzomg
{
	0%, 100% { filter: invert(0) saturate(100%) hue-rotate(0deg); }
	25%      { filter: invert(10%) saturate(500%) hue-rotate(180deg); }
	50%      { filter: invert(10%) saturate(300%) hue-rotate(300deg); }
	75%      { filter: invert(10%) saturate(500%) hue-rotate(90deg); }
}
@import url("https://example.net/monica.css") {zomg, avatarzomg}

Such an import would only actually import the zomg and avatarzomg identifiers from url("https://example.net/monica.css"); if there were any others, they would not be imported.

Importable statements could include @keyframess, @custom-selectors, and @mixins; other statements (e.g. rulesets) would be always imported, as they normally are.


Another problem that needs to be solved is name collision from different files. If there are multiple files with a zomg @keyframes, one would need to alias the import of at least one of those identifiers:

@import url("https://example.net/monica.css") {zomg as meownica-zomg, avatarzomg}
@import url("https://example.com/style.css") {zomg}

However, there is still one problem: one might not want to expose their identifiers. The @private rule would hide importable statements from being imported. It would also allow imported identifiers to not be exported:

@private import  url("https://example.net/monica.css") {zomg as meownica-zomg, avatarzomg}

@private keyframes blackwhite
{
	0%
	{
		color: black;
	}
	
	100%
	{
		color: white;
	}
}

One thing that remains to be done: one might want to make a statement be accessible only by certain URLs, or by certain domains. How would one be able to specify which resources can access the statement?