mirror of
https://github.com/less/less.js.git
synced 2026-01-13 01:08:11 -05:00
432286970a
* Migrate Less to use valid CSS * Re-organize test structure * Lots of test refactoring * More test updates * Add restructured tests * WIP Signed-off-by: Matthew Dean <matthew-dean@users.noreply.github.com> * More fixes to tests * More test fixes * All tests passing * WIP fix tests * Finished fixing browser tests * Improve test coverage * Add debug tests * Add back debug tests to show equal test coverage * Fix browser tests * More test coverage * Fix sourcemap absolute path for CI * More source map normalization for Windows * Fix source map normalization * Another attempted fix for Windows --------- Signed-off-by: Matthew Dean <matthew-dean@users.noreply.github.com>
94 lines
1.5 KiB
CSS
94 lines
1.5 KiB
CSS
@import url("/import/layer-import-2.css") layer(foo);
|
|
@import url("/import/layer-import-3.css") layer(responsive) supports(display: flex) screen and (max-width: 768px);
|
|
@import url("/import/layer-import-4.css") layer(print) print;
|
|
@import url("/import/layer-import-4.css") layer(print) print, (max-width: 600px);
|
|
@import url("/import/layer-import-5.css") layer(features) supports(display: grid);
|
|
@layer {
|
|
.main::before {
|
|
color: #f00;
|
|
}
|
|
}
|
|
@layer legacy {
|
|
.sub-rule ul {
|
|
color: white;
|
|
}
|
|
}
|
|
@layer primevue {
|
|
.test {
|
|
foo: bar;
|
|
}
|
|
}
|
|
@layer reset, base, components, utilities;
|
|
@layer reset {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
@layer base {
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, sans-serif;
|
|
}
|
|
body header {
|
|
background-color: #f0f0f0;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
@layer components {
|
|
.button {
|
|
display: inline-block;
|
|
padding: 0.5rem 1rem;
|
|
background-color: blue;
|
|
color: white;
|
|
}
|
|
.button:hover {
|
|
background-color: darkblue;
|
|
}
|
|
}
|
|
@layer utilities {
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.responsive {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.responsive {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
.parent {
|
|
color: black;
|
|
}
|
|
.parent .child {
|
|
color: red;
|
|
}
|
|
.parent:hover {
|
|
background: lightgray;
|
|
}
|
|
@layer foo.baz {
|
|
.bar {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
@layer framework {
|
|
@layer layout {
|
|
.container {
|
|
display: grid;
|
|
gap: 2rem;
|
|
}
|
|
}
|
|
}
|
|
@layer framework.layout {
|
|
main {
|
|
padding: 2rem;
|
|
}
|
|
p {
|
|
margin-block: 1rem;
|
|
color: #555;
|
|
}
|
|
}
|