# CSS

<link>: This should be blue

@import in <link>: This should be red

import from js: This should be green

@import in import from js: This should be purple

@import from file with space: This should be green and have a background image

Imported css string:

PostCSS nesting plugin: this should be pink

PostCSS plugin: this should have a background image

SASS: This should be orange

@import from SASS _index: This should be olive and have bg image

@import from SASS _index: This should be olive and have bg image which url contains alias

@import from SASS _partial: This should be orchid

url starts with variable

url starts with function call

Imported SASS string:

@import dependency w/ no scss entrypoint: this should be lavender

@import "file:///xxx/absolute-path.scss" should be orange

@import "./dir" should be orange

@import "/nested/root-relative.scss" should be orange

Less: This should be blue

@import from Less: This should be darkslateblue and have bg image

@import from Less: This should be darkslateblue and have bg image which url contains alias

@import url() from Less: This should be darkorange

url starts with variable

tests Less's `data-uri()` function with relative image paths
url in Less's JS plugin: This should have a blue square below

Stylus: This should be blue

Stylus additionalData: This should be orange

@import from Stylus: This should be darkslateblue

@import from Stylus: This should be darkslateblue and have bg image which url contains alias

Stylus import (relative path) via vite config preprocessor options: This should be green

Stylus import (absolute path) via vite config preprocessor options: This should be red

Stylus define variable via vite config preprocessor options: This should be rgb(51, 197, 255)

Stylus define function via vite config preprocessor options: This should be rgb(255, 0, 98)

SugarSS: This should be blue

@import from SugarSS: This should be darkslateblue and have bg image

@import from SugarSS: This should be darkslateblue and have bg image which url contains alias

CSS modules: this should be turquoise

Imported CSS module:

CSS modules w/ SASS: this should be orangered

Imported SASS module:

CSS modules should treeshake in build

Imported compose/from CSS/SASS module:

CSS modules composes path resolving: this should be turquoise

CSS modules composes path resolving: this should be orangered

CSS modules composes path resolving: this should be blue

Inline CSS module:

CSS with @charset:

@import with layers: blue green

@import dependency w/ style entrypoints: this should be purple

@import dependency w/ sass entrypoints: this should be orange

@import dependency w/ style export mapping: this should be purple

@import dependency w/ sass export mapping: this should be orange

@import dependency that @import another dependency: this should be purple

@import dependency that has @import with a css extension pointing to another dependency: this should be purple

PostCSS dir-dependency: this should be grey

PostCSS dir-dependency (file 2): this should be grey too

PostCSS dir-dependency (file 3): this should be grey too

import dependency includes 'import "./foo.css"': this should be green

import dependency includes 'import "./bar.module.css"': this should be green

URL separation preservation: should have valid background-image

Inlined import - this should NOT be red.

test import css in less, this color will be yellow
test for import less in less, this color will be blue
test import css in scss, this color will be orange

URL Support

Raw Support

PostCSS source.input.from. Should include query

Import from jsfile.css.js without the extension

Aliased

import '#alias': this should be blue

import '#alias-module': this should be blue

Imports field

import '#imports': this should be red

@import scss: this should be red