Skip to content

Instantly share code, notes, and snippets.

@geelen geelen/1_locals.css
Created May 26, 2015

Embed
What would you like to do?
/* equivalent to postcss-local-scope. INPUT: */
.outer {
color: papayawhip;
box-shadow: 0 0 10px;
}
/* OUTPUT: */
@export .outer ".outer-abcs12r3adudas";
.outer-abcs12r3adudas {
color: papayawhip;
box-shadow: 0 0 10px;
}
/* equivalent to css-loader modules now. INPUT: */
/* traits.css */
.trait-colors--papaya {
color: papayawhip;
}
/* component.css */
.outer {
extends: .trait-colors--papaya from "./traits.css";
box-shadow: 0 0 10px;
}
/* INTERMEDIATE (both files compiled separately): */
/* traits.css */
@export .trait-colors--papaya ".trait-colors--papaya-zxcv12r3adudas";
.trait-colors--papaya-zxcv12r3adudas {
color: papayawhip;
}
/* component.css */
@import "./traits.css" .trait-colors--papaya:".tmp-class-bvc4543shf";
@export .outer ".outer-abcs12r3adudas .tmp-class-bvc4543shf";
.outer-abcs12r3adudas {
box-shadow: 0 0 10px;
}
/* OUTPUT: */
/* traits.css unchanged */
/* component.css has imports resolved */
@export .outer ".outer-abcs12r3adudas .trait-colors--papaya-zxcv12r3adudas";
.outer-abcs12r3adudas {
box-shadow: 0 0 10px;
}
/* INPUT (probably output of your POSTCSS plugin) */
/* vars.css */
@export --papaya "--papaya-gfhjs43672fghfds";
:root {
--papaya-gfhjs43672fghfds: #ffefd5;
}
/* component.css */
@import "./vars.css" --papaya:"--tmp-var-tyuy3246ads";
.outer {
color: var(--tmp-var-tyuy3246ads);
box-shadow: 0 0 10px;
}
/* OUTER */
/* vars.css unchanged */
/* component.css has imports resolved */
@export .outer ".outer-abcs12r3adudas";
.outer-abcs12r3adudas {
color: var(--papaya-gfhjs43672fghfds);
box-shadow: 0 0 10px;
}
@geelen

This comment has been minimized.

Copy link
Owner Author

commented May 26, 2015

Syntax for @import and @export totally up for grabs, but hopefully this shows how making a low-level import/export syntax supports lots of use-cases, just like a good module format should!

For the record, here's the current grammar I came up with:

import: @import path tmp-alias [tmp-alias ...];
path: "path/to/file-name.css"
tmp-alias: exported-name:"local-name"

export: @export exported-name "local-name";
@geelen

This comment has been minimized.

Copy link
Owner Author

commented May 26, 2015

Syntax change & proper issue submitted here: webpack-contrib/css-loader#60

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.