chore: CSS tidy up (#10480)

* move files

* move types

* rename Selector -> ComplexSelector

* ditto

* rename block -> relative_selector

* tidy

* tidy

* unused file

* tweak

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

packages/svelte/src/compiler/phases/2-analyze/css/Selector.js renamed to packages/svelte/src/compiler/css/Selector.js

@@ -1,11 +1,10 @@
 import MagicString from 'magic-string';
 import { walk } from 'zimmerframe';
-import Selector from './Selector.js';
-import hash from '../utils/hash.js';
+import { ComplexSelector } from './Selector.js';
+import { hash } from './utils.js';
 // import compiler_warnings from '../compiler_warnings.js';
 // import { extract_ignores_above_position } from '../utils/extract_svelte_ignore.js';
-import { push_array } from '../utils/push_array.js';
-import { create_attribute } from '../../nodes.js';
+import { create_attribute } from '../phases/nodes.js'; // TODO move this
 
 const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/;
 const regex_name_boundary = /^[\s,;}]$/;
@@ -49,7 +48,7 @@ function escape_comment_close(node, code) {
 }
 
 class Rule {
-	/** @type {import('./Selector.js').default[]} */
+	/** @type {ComplexSelector[]} */
 	selectors;
 
 	/** @type {import('#compiler').Css.Rule} */
@@ -69,7 +68,7 @@ class Rule {
 	constructor(node, stylesheet, parent) {
 		this.node = node;
 		this.parent = parent;
-		this.selectors = node.prelude.children.map((node) => new Selector(node, stylesheet));
+		this.selectors = node.prelude.children.map((node) => new ComplexSelector(node, stylesheet));
 
 		this.declarations = /** @type {import('#compiler').Css.Declaration[]} */ (
 			node.block.children
@@ -116,14 +115,14 @@ class Rule {
 		this.declarations.forEach((declaration) => declaration.transform(code, keyframes));
 	}
 
-	/** @param {import('../../types.js').ComponentAnalysis} analysis */
+	/** @param {import('../phases/types.js').ComponentAnalysis} analysis */
 	validate(analysis) {
 		this.selectors.forEach((selector) => {
 			selector.validate(analysis);
 		});
 	}
 
-	/** @param {(selector: import('./Selector.js').default) => void} handler */
+	/** @param {(selector: ComplexSelector) => void} handler */
 	warn_on_unused_selector(handler) {
 		this.selectors.forEach((selector) => {
 			if (!selector.used) handler(selector);
@@ -310,14 +309,14 @@ class Atrule {
 		});
 	}
 
-	/** @param {import('../../types.js').ComponentAnalysis} analysis */
+	/** @param {import('../phases/types.js').ComponentAnalysis} analysis */
 	validate(analysis) {
 		this.children.forEach((child) => {
 			child.validate(analysis);
 		});
 	}
 
-	/** @param {(selector: import('./Selector.js').default) => void} handler */
+	/** @param {(selector: ComplexSelector) => void} handler */
 	warn_on_unused_selector(handler) {
 		if (this.node.name !== 'media') return;
 		this.children.forEach((child) => {
@@ -511,14 +510,14 @@ export class Stylesheet {
 		};
 	}
 
-	/** @param {import('../../types.js').ComponentAnalysis} analysis */
+	/** @param {import('../phases/types.js').ComponentAnalysis} analysis */
 	validate(analysis) {
 		this.children.forEach((child) => {
 			child.validate(analysis);
 		});
 	}
 
-	/** @param {import('../../types.js').ComponentAnalysis} analysis */
+	/** @param {import('../phases/types.js').ComponentAnalysis} analysis */
 	warn_on_unused_selectors(analysis) {
 		// const ignores = !this.ast
 		// 	? []

packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js renamed to packages/svelte/src/compiler/css/Stylesheet.js

@@ -1,4 +1,4 @@
-import type { Style } from './template';
+import type { Style } from '../types/template';
 
 export interface BaseNode {
 	start: number;
@@ -20,10 +20,10 @@ export interface Rule extends BaseNode {
 
 export interface SelectorList extends BaseNode {
 	type: 'SelectorList';
-	children: Selector[];
+	children: ComplexSelector[];
 }
 
-export interface Selector extends BaseNode {
+export interface ComplexSelector extends BaseNode {
 	type: 'Selector';
 	children: Array<SimpleSelector | Combinator>;
 }

packages/svelte/src/compiler/types/css.d.ts renamed to packages/svelte/src/compiler/css/types.d.ts

@@ -1,3 +1,18 @@
+const regex_return_characters = /\r/g;
+
+/**
+ * @param {string} str
+ * @returns {string}
+ */
+export function hash(str) {
+	str = str.replace(regex_return_characters, '');
+	let hash = 5381;
+	let i = str.length;
+
+	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
+	return (hash >>> 0).toString(36);
+}
+
 const UNKNOWN = {};
 
 /**

packages/svelte/src/compiler/phases/2-analyze/css/gather_possible_values.js renamed to packages/svelte/src/compiler/css/utils.js

@@ -149,7 +149,7 @@ function read_rule(parser) {
  * @returns {import('#compiler').Css.SelectorList}
  */
 function read_selector_list(parser, inside_pseudo_class = false) {
-	/** @type {import('#compiler').Css.Selector[]} */
+	/** @type {import('#compiler').Css.ComplexSelector[]} */
 	const children = [];
 
 	allow_comment_or_whitespace(parser);
@@ -182,7 +182,7 @@ function read_selector_list(parser, inside_pseudo_class = false) {
 /**
  * @param {import('../index.js').Parser} parser
  * @param {boolean} [inside_pseudo_class]
- * @returns {import('#compiler').Css.Selector}
+ * @returns {import('#compiler').Css.ComplexSelector}
  */
 function read_selector(parser, inside_pseudo_class = false) {
 	const list_start = parser.index;

packages/svelte/src/compiler/phases/1-parse/read/style.js

@@ -13,7 +13,7 @@ import * as b from '../../utils/builders.js';
 import { ReservedKeywords, Runes, SVGElements } from '../constants.js';
 import { Scope, ScopeRoot, create_scopes, get_rune, set_scope } from '../scope.js';
 import { merge } from '../visitors.js';
-import { Stylesheet } from './css/Stylesheet.js';
+import { Stylesheet } from '../../css/Stylesheet.js';
 import { validation_legacy, validation_runes, validation_runes_js } from './validation.js';
 import { warn } from '../../warnings.js';
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -7,7 +7,7 @@ import type {
 	SvelteOptions
 } from '#compiler';
 import type { Identifier, LabeledStatement, Program } from 'estree';
-import { Stylesheet } from './2-analyze/css/Stylesheet.js';
+import { Stylesheet } from '../css/Stylesheet.js';
 import type { Scope, ScopeRoot } from './scope.js';
 
 export interface Js {

packages/svelte/src/compiler/phases/2-analyze/utils/hash.js

@@ -10,7 +10,7 @@ import type { Location } from 'locate-character';
 import type { SourceMap } from 'magic-string';
 import type { Context } from 'zimmerframe';
 import type { Scope } from '../phases/scope.js';
-import * as Css from './css.js';
+import * as Css from '../css/types.js';
 import type { EachBlock, Namespace, SvelteNode } from './template.js';
 
 /** The return value of `compile` from `svelte/compiler` */