+
Skip to content

Conversation

togami2864
Copy link
Contributor

@togami2864 togami2864 commented Jul 30, 2024

Summary

This PR introduces the semantic model for css. The first usecase might be these linter rules.

I'll try to supprt more cases and integrate the analyzer in another PR later.

Example

Playground

.parent {
  color: blue;

  .child {
    color: red;
  }
}
// output
SemanticModel {
    data: SemanticModelData {
        root: CssRoot {...},
        node_by_range: {...},
        rules: [
            Rule {
                selectors: [
                    Selector {
                        name: ".parent",
                        range: 0..7,
                        specificity: Specificity(
                            0,
                            0,
                            0,
                        ),
                    },
                ],
                declarations: [
                    Declaration {
                        property: "color",
                        value: "blue",
                        property_range: 9..17,
                        value_range: 19..23,
                    },
                ],
                children: [
                    Rule {
                        selectors: [
                            Selector {
                                name: ".child",
                                range: 28..34,
                                specificity: Specificity(
                                    0,
                                    0,
                                    0,
                                ),
                            },
                        ],
                        declarations: [
                            Declaration {
                                property: "color",
                                value: "red",
                                property_range: 36..46,
                                value_range: 48..51,
                            },
                        ],
                        children: [],
                        range: 24..56,
                    },
                ],
                range: 0..58,
            },
        ],
    },
}

Test Plan

CI should pass

@togami2864 togami2864 self-assigned this Jul 30, 2024
@github-actions github-actions bot added the L-CSS Language: CSS label Jul 30, 2024
Copy link

codspeed-hq bot commented Jul 30, 2024

CodSpeed Performance Report

Merging #3546 will not alter performance

Comparing togami2864:feat/css-semantic-model (a3c2f86) with main (7a8a1cc)

Summary

✅ 104 untouched benchmarks

@togami2864 togami2864 force-pushed the feat/css-semantic-model branch 2 times, most recently from f21a2fe to 96c9fc3 Compare August 3, 2024 09:26
@togami2864 togami2864 marked this pull request as ready for review August 3, 2024 09:30
@togami2864 togami2864 requested a review from a team August 3, 2024 09:41
}

#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Default)]
pub struct Specificity(pub u32, pub u32, pub u32);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should document what are these tree numbers and how they affect the specificity

Comment on lines 33 to 86
pub(crate) struct SemanticModelData {
pub(crate) root: CssRoot,
// Map to each by its range
pub(crate) node_by_range: FxHashMap<TextRange, CssSyntaxNode>,
pub(crate) rules: Vec<Rule>,
}

#[derive(Debug)]
pub struct Rule {
pub selectors: Vec<Selector>,
pub declarations: Vec<Declaration>,
pub children: Vec<Rule>,
pub range: TextRange,
}

#[derive(Debug, Clone)]
pub struct Declaration {
pub property: String,
pub value: String,
pub property_range: TextRange,
pub value_range: TextRange,
}

#[derive(Debug, Clone)]
pub struct Selector {
pub name: String,
pub range: TextRange,
pub specificity: Specificity,
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should document all these types

Comment on lines 51 to 53
if let Some(property) = node.first_child() {
if let Some(property_name) = property.first_child() {
if let Some(value) = property_name.next_sibling() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can reduce these three Some into one:

if let Some(value) = node.first_child()
	.and_then(|p| p.first_child())
	.and_then(|p| p.next_sibling()) {
}

[package]
authors.workspace = true
categories.workspace = true
description = "<DESCRIPTION>"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Description missing

@togami2864 togami2864 force-pushed the feat/css-semantic-model branch from 1161edb to 40425e8 Compare August 7, 2024 01:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

L-CSS Language: CSS

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载