1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
//! vue/no-preprocessor-lang
//!
//! Discourage use of CSS preprocessors (sass, scss, less, stylus) in Vue SFCs.
//!
//! Modern CSS has many features that previously required preprocessors:
//! - CSS Custom Properties (variables)
//! - CSS Nesting (native)
//! - CSS Color Mix
//! - CSS Container Queries
//!
//! Using plain CSS with modern features:
//! - Reduces build complexity
//! - Improves build performance
//! - Enables better tooling support (lightning-css, etc.)
//! - Makes styles more portable
use crate::context::LintContext;
use crate::diagnostic::{Fix, LintDiagnostic, Severity, TextEdit};
use crate::rule::{Rule, RuleCategory, RuleMeta};
use vize_relief::ast::RootNode;
static META: RuleMeta = RuleMeta {
name: "vue/no-preprocessor-lang",
description: "Discourage CSS preprocessor usage in favor of modern CSS",
category: RuleCategory::Recommended,
fixable: true,
default_severity: Severity::Warning,
};
/// No preprocessor lang rule
#[derive(Default)]
pub struct NoPreprocessorLang;
impl Rule for NoPreprocessorLang {
fn meta(&self) -> &'static RuleMeta {
&META
}
fn run_on_template<'a>(&self, ctx: &mut LintContext<'a>, _root: &RootNode<'a>) {
let source = ctx.source;
// Find all <style tags
let mut pos = 0;
while let Some(style_start) = source[pos..].find("<style") {
let abs_pos = pos + style_start;
pos = abs_pos + 6;
// Find the closing >
if let Some(tag_end) = source[abs_pos..].find('>') {
let tag_content = &source[abs_pos..abs_pos + tag_end + 1];
// Check for preprocessor langs
let preprocessor = if tag_content.contains("lang=\"sass\"")
|| tag_content.contains("lang='sass'")
{
Some(("sass", "lang=\"sass\""))
} else if tag_content.contains("lang=\"scss\"")
|| tag_content.contains("lang='scss'")
{
Some(("scss", "lang=\"scss\""))
} else if tag_content.contains("lang=\"less\"")
|| tag_content.contains("lang='less'")
{
Some(("less", "lang=\"less\""))
} else if tag_content.contains("lang=\"stylus\"")
|| tag_content.contains("lang='stylus'")
{
Some(("stylus", "lang=\"stylus\""))
} else if tag_content.contains("lang=\"styl\"")
|| tag_content.contains("lang='styl'")
{
Some(("styl", "lang=\"styl\""))
} else {
None
};
if let Some((_preprocessor_name, lang_attr)) = preprocessor {
// Find position of lang attribute for fix
let lang_pos = tag_content.find(lang_attr).unwrap_or(0);
let lang_start = abs_pos + lang_pos;
let lang_end = lang_start + lang_attr.len();
// Create fix to remove the lang attribute
let fix = Fix::new(
"Remove CSS preprocessor",
TextEdit::delete(lang_start as u32, (lang_end + 1) as u32), // +1 for trailing space
);
ctx.report(
LintDiagnostic::warn(
META.name,
"Consider using modern CSS instead of preprocessor",
abs_pos as u32,
(abs_pos + tag_end + 1) as u32,
)
.with_help(
"Modern CSS supports nesting, variables, and more. Consider migrating to plain CSS.",
)
.with_fix(fix),
);
}
}
}
}
}
#[cfg(test)]
mod tests {
// Tests would need SFC-level testing infrastructure
}