Skip to content

Commit

Permalink
Css -> AST.CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@xeho91
xeho91 committed Dec 10, 2024
1 parent 3b42438 commit e185e1a
Show file tree
Hide file tree
Showing 13 changed files with 107 additions and 104 deletions.
38 changes: 19 additions & 19 deletions packages/svelte/src/compiler/phases/1-parse/read/style.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/** @import { AST, Css } from '#compiler' */
/** @import { AST } from '#compiler' */
/** @import { Parser } from '../index.js' */
import * as e from '../../../errors.js';

Expand All @@ -19,7 +19,7 @@ const REGEX_HTML_COMMENT_CLOSE = /-->/;
* @param {Parser} parser
* @param {number} start
* @param {Array<AST.Attribute | AST.SpreadAttribute | AST.Directive>} attributes
* @returns {Css.StyleSheet}
* @returns {AST.CSS.StyleSheet}
*/
export default function read_style(parser, start, attributes) {
const content_start = parser.index;
Expand Down Expand Up @@ -49,7 +49,7 @@ export default function read_style(parser, start, attributes) {
* @returns {any[]}
*/
function read_body(parser, close) {
/** @type {Array<Css.Rule | Css.Atrule>} */
/** @type {Array<AST.CSS.Rule | AST.CSS.Atrule>} */
const children = [];

while (parser.index < parser.template.length) {
Expand All @@ -71,7 +71,7 @@ function read_body(parser, close) {

/**
* @param {Parser} parser
* @returns {Css.Atrule}
* @returns {AST.CSS.Atrule}
*/
function read_at_rule(parser) {
const start = parser.index;
Expand All @@ -81,7 +81,7 @@ function read_at_rule(parser) {

const prelude = read_value(parser);

/** @type {Css.Block | null} */
/** @type {AST.CSS.Block | null} */
let block = null;

if (parser.match('{')) {
Expand All @@ -104,7 +104,7 @@ function read_at_rule(parser) {

/**
* @param {Parser} parser
* @returns {Css.Rule}
* @returns {AST.CSS.Rule}
*/
function read_rule(parser) {
const start = parser.index;
Expand All @@ -126,10 +126,10 @@ function read_rule(parser) {
/**
* @param {Parser} parser
* @param {boolean} [inside_pseudo_class]
* @returns {Css.SelectorList}
* @returns {AST.CSS.SelectorList}
*/
function read_selector_list(parser, inside_pseudo_class = false) {
/** @type {Css.ComplexSelector[]} */
/** @type {AST.CSS.ComplexSelector[]} */
const children = [];

allow_comment_or_whitespace(parser);
Expand Down Expand Up @@ -162,18 +162,18 @@ function read_selector_list(parser, inside_pseudo_class = false) {
/**
* @param {Parser} parser
* @param {boolean} [inside_pseudo_class]
* @returns {Css.ComplexSelector}
* @returns {AST.CSS.ComplexSelector}
*/
function read_selector(parser, inside_pseudo_class = false) {
const list_start = parser.index;

/** @type {Css.RelativeSelector[]} */
/** @type {AST.CSS.RelativeSelector[]} */
const children = [];

/**
* @param {Css.Combinator | null} combinator
* @param {AST.CSS.Combinator | null} combinator
* @param {number} start
* @returns {Css.RelativeSelector}
* @returns {AST.CSS.RelativeSelector}
*/
function create_selector(combinator, start) {
return {
Expand All @@ -190,7 +190,7 @@ function read_selector(parser, inside_pseudo_class = false) {
};
}

/** @type {Css.RelativeSelector} */
/** @type {AST.CSS.RelativeSelector} */
let relative_selector = create_selector(null, parser.index);

while (parser.index < parser.template.length) {
Expand Down Expand Up @@ -247,7 +247,7 @@ function read_selector(parser, inside_pseudo_class = false) {
} else if (parser.eat(':')) {
const name = read_identifier(parser);

/** @type {null | Css.SelectorList} */
/** @type {null | AST.CSS.SelectorList} */
let args = null;

if (parser.eat('(')) {
Expand Down Expand Up @@ -372,7 +372,7 @@ function read_selector(parser, inside_pseudo_class = false) {

/**
* @param {Parser} parser
* @returns {Css.Combinator | null}
* @returns {AST.CSS.Combinator | null}
*/
function read_combinator(parser) {
const start = parser.index;
Expand Down Expand Up @@ -407,14 +407,14 @@ function read_combinator(parser) {

/**
* @param {Parser} parser
* @returns {Css.Block}
* @returns {AST.CSS.Block}
*/
function read_block(parser) {
const start = parser.index;

parser.eat('{', true);

/** @type {Array<Css.Declaration | Css.Rule | Css.Atrule>} */
/** @type {Array<AST.CSS.Declaration | AST.CSS.Rule | AST.CSS.Atrule>} */
const children = [];

while (parser.index < parser.template.length) {
Expand All @@ -441,7 +441,7 @@ function read_block(parser) {
* Reads a declaration, rule or at-rule
*
* @param {Parser} parser
* @returns {Css.Declaration | Css.Rule | Css.Atrule}
* @returns {AST.CSS.Declaration | AST.CSS.Rule | AST.CSS.Atrule}
*/
function read_block_item(parser) {
if (parser.match('@')) {
Expand All @@ -460,7 +460,7 @@ function read_block_item(parser) {

/**
* @param {Parser} parser
* @returns {Css.Declaration}
* @returns {AST.CSS.Declaration}
*/
function read_declaration(parser) {
const start = parser.index;
Expand Down
18 changes: 9 additions & 9 deletions packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/** @import { ComponentAnalysis } from '../../types.js' */
/** @import { Css } from '#compiler' */
/** @import { AST } from '#compiler' */
/** @import { Visitors } from 'zimmerframe' */
import { walk } from 'zimmerframe';
import * as e from '../../../errors.js';
Expand All @@ -8,17 +8,17 @@ import { is_global, is_unscoped_pseudo_class } from './utils.js';

/**
* @typedef {Visitors<
* Css.Node,
* AST.CSS.Node,
* {
* keyframes: string[];
* rule: Css.Rule | null;
* rule: AST.CSS.Rule | null;
* }
* >} CssVisitors
*/

/**
* True if is `:global`
* @param {Css.SimpleSelector} simple_selector
* @param {AST.CSS.SimpleSelector} simple_selector
*/
function is_global_block_selector(simple_selector) {
return (
Expand Down Expand Up @@ -112,7 +112,7 @@ const css_visitors = {
}
},
RelativeSelector(node, context) {
const parent = /** @type {Css.ComplexSelector} */ (context.path.at(-1));
const parent = /** @type {AST.CSS.ComplexSelector} */ (context.path.at(-1));

if (
node.combinator != null &&
Expand Down Expand Up @@ -149,7 +149,7 @@ const css_visitors = {
if (node.metadata.is_global_like || node.metadata.is_global) {
// So that nested selectors like `:root:not(.x)` are not marked as unused
for (const child of node.selectors) {
walk(/** @type {Css.Node} */ (child), null, {
walk(/** @type {AST.CSS.Node} */ (child), null, {
ComplexSelector(node, context) {
node.metadata.used = true;
context.next();
Expand Down Expand Up @@ -177,7 +177,7 @@ const css_visitors = {
if (idx !== -1) {
is_global_block = true;
for (let i = idx + 1; i < child.selectors.length; i++) {
walk(/** @type {Css.Node} */ (child.selectors[i]), null, {
walk(/** @type {AST.CSS.Node} */ (child.selectors[i]), null, {
ComplexSelector(node) {
node.metadata.used = true;
}
Expand Down Expand Up @@ -240,7 +240,7 @@ const css_visitors = {
});
},
NestingSelector(node, context) {
const rule = /** @type {Css.Rule} */ (context.state.rule);
const rule = /** @type {AST.CSS.Rule} */ (context.state.rule);
const parent_rule = rule.metadata.parent_rule;

if (!parent_rule) {
Expand Down Expand Up @@ -271,7 +271,7 @@ const css_visitors = {
};

/**
* @param {Css.StyleSheet} stylesheet
* @param {AST.CSS.StyleSheet} stylesheet
* @param {ComponentAnalysis} analysis
*/
export function analyze_css(stylesheet, analysis) {
Expand Down
40 changes: 20 additions & 20 deletions packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ const whitelist_attribute_selector = new Map([
['dialog', ['open']]
]);

/** @type {Compiler.Css.Combinator} */
/** @type {Compiler.AST.CSS.Combinator} */
const descendant_combinator = {
type: 'Combinator',
name: ' ',
start: -1,
end: -1
};

/** @type {Compiler.Css.RelativeSelector} */
/** @type {Compiler.AST.CSS.RelativeSelector} */
const nesting_selector = {
type: 'RelativeSelector',
start: -1,
Expand Down Expand Up @@ -51,11 +51,11 @@ const seen = new Set();

/**
*
* @param {Compiler.Css.StyleSheet} stylesheet
* @param {Compiler.AST.CSS.StyleSheet} stylesheet
* @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
*/
export function prune(stylesheet, element) {
walk(/** @type {Compiler.Css.Node} */ (stylesheet), null, {
walk(/** @type {Compiler.AST.CSS.Node} */ (stylesheet), null, {
Rule(node, context) {
if (node.metadata.is_global_block) {
context.visit(node.prelude);
Expand All @@ -69,7 +69,7 @@ export function prune(stylesheet, element) {
seen.clear();

if (
apply_selector(selectors, /** @type {Compiler.Css.Rule} */ (node.metadata.rule), element)
apply_selector(selectors, /** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule), element)
) {
node.metadata.used = true;
}
Expand All @@ -86,7 +86,7 @@ export function prune(stylesheet, element) {
* Also searches them for any existing `&` selectors and adds one if none are found.
* This ensures we traverse up to the parent rule when the inner selectors match and we're
* trying to see if the parent rule also matches.
* @param {Compiler.Css.ComplexSelector} node
* @param {Compiler.AST.CSS.ComplexSelector} node
*/
function get_relative_selectors(node) {
const selectors = truncate(node);
Expand Down Expand Up @@ -124,7 +124,7 @@ function get_relative_selectors(node) {

/**
* Discard trailing `:global(...)` selectors, these are unused for scoping purposes
* @param {Compiler.Css.ComplexSelector} node
* @param {Compiler.AST.CSS.ComplexSelector} node
*/
function truncate(node) {
const i = node.children.findLastIndex(({ metadata, selectors }) => {
Expand Down Expand Up @@ -152,8 +152,8 @@ function truncate(node) {
}

/**
* @param {Compiler.Css.RelativeSelector[]} relative_selectors
* @param {Compiler.Css.Rule} rule
* @param {Compiler.AST.CSS.RelativeSelector[]} relative_selectors
* @param {Compiler.AST.CSS.Rule} rule
* @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
* @returns {boolean}
*/
Expand All @@ -178,9 +178,9 @@ function apply_selector(relative_selectors, rule, element) {
}

/**
* @param {Compiler.Css.RelativeSelector} relative_selector
* @param {Compiler.Css.RelativeSelector[]} parent_selectors
* @param {Compiler.Css.Rule} rule
* @param {Compiler.AST.CSS.RelativeSelector} relative_selector
* @param {Compiler.AST.CSS.RelativeSelector[]} parent_selectors
* @param {Compiler.AST.CSS.Rule} rule
* @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
* @returns {boolean}
*/
Expand Down Expand Up @@ -263,16 +263,16 @@ function apply_combinator(relative_selector, parent_selectors, rule, node) {
* it's a `:global(...)` or unscopeable selector, or
* is an `:is(...)` or `:where(...)` selector that contains
* a global selector
* @param {Compiler.Css.RelativeSelector} selector
* @param {Compiler.Css.Rule} rule
* @param {Compiler.AST.CSS.RelativeSelector} selector
* @param {Compiler.AST.CSS.Rule} rule
*/
function is_global(selector, rule) {
if (selector.metadata.is_global || selector.metadata.is_global_like) {
return true;
}

for (const s of selector.selectors) {
/** @type {Compiler.Css.SelectorList | null} */
/** @type {Compiler.AST.CSS.SelectorList | null} */
let selector_list = null;
let owner = rule;

Expand All @@ -283,7 +283,7 @@ function is_global(selector, rule) {
}

if (s.type === 'NestingSelector') {
owner = /** @type {Compiler.Css.Rule} */ (rule.metadata.parent_rule);
owner = /** @type {Compiler.AST.CSS.Rule} */ (rule.metadata.parent_rule);
selector_list = owner.prelude;
}

Expand All @@ -306,8 +306,8 @@ const regex_backslash_and_following_character = /\\(.)/g;
/**
* Ensure that `element` satisfies each simple selector in `relative_selector`
*
* @param {Compiler.Css.RelativeSelector} relative_selector
* @param {Compiler.Css.Rule} rule
* @param {Compiler.AST.CSS.RelativeSelector} relative_selector
* @param {Compiler.AST.CSS.Rule} rule
* @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
* @returns {boolean}
*/
Expand Down Expand Up @@ -389,7 +389,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
// upwards and back-to-front, we need to first check the selectors inside :has(...), then check the rest of the
// selector in a way that is similar to ancestor matching. In a sense, we're treating `.x:has(.y)` as `.x .y`.
for (const has_selector of has_selectors) {
const complex_selectors = /** @type {Compiler.Css.SelectorList} */ (has_selector.args)
const complex_selectors = /** @type {Compiler.AST.CSS.SelectorList} */ (has_selector.args)
.children;
let matched = false;

Expand Down Expand Up @@ -578,7 +578,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
case 'NestingSelector': {
let matched = false;

const parent = /** @type {Compiler.Css.Rule} */ (rule.metadata.parent_rule);
const parent = /** @type {Compiler.AST.CSS.Rule} */ (rule.metadata.parent_rule);

for (const complex_selector of parent.prelude.children) {
if (
Expand Down
Loading

0 comments on commit e185e1a

Please sign in to comment.