mirror of https://github.com/webpack/webpack.git
140 lines
2.5 KiB
CSS
140 lines
2.5 KiB
CSS
:root {
|
|
--main-bg-color: brown;
|
|
--my-var: red;
|
|
--my-background: blue;
|
|
--my-global: yellow;
|
|
--: "reserved";
|
|
--a: green;
|
|
}
|
|
|
|
.class {
|
|
color: var(--main-bg-color);
|
|
}
|
|
|
|
@property --logo-color {
|
|
syntax: "<color>";
|
|
inherits: false;
|
|
initial-value: #c0ffee;
|
|
}
|
|
|
|
@property -- {
|
|
syntax: "<color>";
|
|
inherits: false;
|
|
initial-value: #c0ffee;
|
|
}
|
|
|
|
.class {
|
|
color: var(--logo-color);
|
|
}
|
|
|
|
div {
|
|
background-color: var(--box-color);
|
|
}
|
|
|
|
.two {
|
|
--box-color: cornflowerblue;
|
|
}
|
|
|
|
.three {
|
|
--box-color: aquamarine;
|
|
}
|
|
|
|
|
|
.one {
|
|
/* Red if --my-var is not defined */
|
|
color: var(--my-var, red);
|
|
}
|
|
|
|
.two {
|
|
/* pink if --my-var and --my-background are not defined */
|
|
color: var(--my-var, var(--my-background, pink));
|
|
}
|
|
|
|
.reserved {
|
|
color: var(--);
|
|
}
|
|
|
|
.green {
|
|
color: var(--a);
|
|
}
|
|
|
|
.global {
|
|
color: var(--my-global from global);
|
|
}
|
|
|
|
.global-and-default {
|
|
color: var(--my-global from global, pink);
|
|
}
|
|
|
|
.global-and-default-1 {
|
|
color: var(--my-global from global, var(--my-global-background from global));
|
|
}
|
|
|
|
.global-and-default-2 {
|
|
color: var(--my-global from global, var(--my-global-background from global, pink));
|
|
}
|
|
|
|
.global-and-default-3 {
|
|
color: var(--my-global from global, var(--my-background, pink));
|
|
}
|
|
|
|
.global-and-default-5 {
|
|
color: var( --my-global from global,var(--my-background,pink));
|
|
}
|
|
|
|
.global-and-default-6 {
|
|
background: var( --main-bg-color , var( --my-background , pink ) ) , var(--my-global from global);
|
|
}
|
|
|
|
.global-and-default-7 {
|
|
background: var(--main-bg-color,var(--my-background,pink)),var(--my-global from global);
|
|
}
|
|
|
|
.from {
|
|
color: var(--my-var-u1 from "./var-function-export.modules.css");
|
|
}
|
|
|
|
.from-1 {
|
|
color: var(--main-bg-color, var(--my-var-u1 from "./var-function-export.modules.css"));
|
|
}
|
|
|
|
.from-2 {
|
|
color: var(--my-var-u1 from "./var-function-export.modules.css", var(--main-bg-color));
|
|
}
|
|
|
|
.from-3 {
|
|
color: var(--my-var-u1 from "./var-function-export.modules.css", var(--my-var-u2 from "./var-function-export.modules.css"));
|
|
}
|
|
|
|
.from-4 {
|
|
color: var(--1 from "./var-function-export.modules.css");
|
|
}
|
|
|
|
.from-5 {
|
|
color: var(----a from "./var-function-export.modules.css");
|
|
}
|
|
|
|
.from-6 {
|
|
color: var(--main-bg-color from "./var-function-export.modules.css");
|
|
}
|
|
|
|
.mixed {
|
|
color: var(--my-var-u1 from "./var-function-export.modules.css", var(--my-global from global, var(--main-bg-color, red)));
|
|
}
|
|
|
|
.broken {
|
|
color: var(--my-global from);
|
|
}
|
|
|
|
.broken-1 {
|
|
color: var(--my-global from 1);
|
|
}
|
|
|
|
:root {
|
|
--not-override-class: red;
|
|
}
|
|
|
|
.not-override-class {
|
|
color: var(--not-override-class from "./var-function-export.modules.css")
|
|
}
|