test/configCases/css/css-modules/var-function.module.css - main - githubmirror/webpack

test/configCases/css/css-modules/var-function.module.css
295 строк6 KB
Alexander Akait
feat(css): class wins the JS export on cross-kind conflicts in CSS modules (#21538)
29 июл 2026, 12:29
29 июл 2026, 12:29605cf7d
: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-cls {
	color: var(--not-override-class from "./var-function-export.modules.css")
}

.theme-dark {
	--text-color: #fff;
	--bg-color: #333;

	.button {
		--button-color: var(--text-color);
		--button-bg: var(--bg-color);
		color: var(--button-color);
		background-color: var(--button-bg);
	}
}

.parent {
	--parent-padding: 20px;
	padding: var(--parent-padding);

	.child {
		--child-margin: 10px;
		margin-top: var(--child-margin);
		padding-left: var(--parent-padding); /* Accessing parent's variable */
	}
}

@media (min-width: 768px) {
	:root {
		--base-padding: 1.5rem;
		--font-scale: 1.2;
	}
}

.container {
	padding: var(--base-padding); /* This will be 1rem or 1.5rem based on screen size */
}

.item-title {
	/* Dynamic font size based on screen size using the variable */
	font-size: calc(1.2rem * var(--font-scale));
	margin-bottom: calc(var(--base-padding) / 2);
}

.item-details {
	/* Using calc() to create a flexible layout */
	width: calc(100% - (var(--base-padding) * 2));
}

.banner {
	/* Locally scoped variables (pseudo-private) */
	--banner-bg: #e0f7fa; /* Default info color */
	--banner-text: #00796b;
	--banner-icon: "ℹ️";

	padding: 1em;
	background-color: var(--banner-bg);
	color: var(--banner-text);
	border-left: 5px solid var(--banner-text);
}

:root {
	--accordion-bg: #fff;
	--accordion-border: #ddd;
	--accordion-text: #333;
	--accordion-accent: royalblue;
}

.accordion-container {
	border: 1px solid var(--accordion-border);
	border-radius: 4px;
	width: 100%;
	max-width: 400px;

	/* CSS Nesting starts here */
	& .accordion-item {
		background: var(--accordion-bg);
		color: var(--accordion-text);
		border-bottom: 1px solid var(--accordion-border);

		&:last-child {
			border-bottom: none;
		}

		& .accordion-header {
			padding: 1rem;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:hover {
				background: color-mix(in srgb, var(--accordion-bg) 90%, gray);
			}
		}

		/* Override variables locally for a specific state (e.g., active item) */
		&.is-active {
			--accordion-bg: var(--accordion-accent); /* Nested override */
			--accordion-text: #fff; /* Nested override */

			& .accordion-header {
				font-weight: bold;
			}
		}
	}

	/* Define a complete alternate theme nested inside the container */
	&.is-dark-theme {
		/* These variables are scoped only to elements within this specific container */
		--accordion-bg: #333;
		--accordion-border: #555;
		--accordion-text: #eee;
		--accordion-accent: #2ecc71; /* A new accent color for the dark theme */
	}
}

.media-object {
	/* Establish a container context for cqw units */
	container-type: inline-size;
	display: flex;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid #ccc;

	/* Define default mobile variables */
	--avatar-size: 48px;
	--text-size: 1rem;

	& .avatar {
		width: var(--avatar-size);
		height: var(--avatar-size);
		border-radius: 50%;
		background: lightgray;
	}

	& .content {
		font-size: var(--text-size);
	}

	/* Nested Container Query (Responsive override of variables) */
	@container (min-width: 400px) {
		/* Redefine variables when container is wide enough */
		--avatar-size: 10cqw; /* Dynamic size based on container width (10% of container) */
		--text-size: 1.2rem;
		gap: 1.5rem;
	}
}

:root {
	--primary-color: #007bff;
	--text-color: var(--primary-color); /* --text-color now uses the value of --primary-color */
	--highlight-background: linear-gradient(to right, var(--primary-color), #6c757d);
}

.element {
	color: var(--text-color);
	background: var(--highlight-background);
}