msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Convert src/compiler/compile/css/Stylesheet.ts to JavaScript

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 819ca97402
commit d3a410913d
2 changed files with 548 additions and 507 deletions
Show Stats Download Patch File Download Diff File

73
src/compiler/compile/css/Selector.js
Unescape View File

@ -1,22 +1,26 @@
import { gather_possible_values, UNKNOWN } from './gather_possible_values.js'; import { gather_possible_values, UNKNOWN } from './gather_possible_values.js';
import compiler_errors from '../compiler_errors.js'; import compiler_errors from '../compiler_errors.js';
import { regex_starts_with_whitespace, regex_ends_with_whitespace } from '../../utils/patterns.js'; import { regex_starts_with_whitespace, regex_ends_with_whitespace } from '../../utils/patterns.js';
let BlockAppliesToNode;
(function (BlockAppliesToNode) { const BlockAppliesToNode = /** @type {const} */ ({
BlockAppliesToNode[(BlockAppliesToNode['NotPossible'] = 0)] = 'NotPossible'; NotPossible: 0,
BlockAppliesToNode[(BlockAppliesToNode['Possible'] = 1)] = 'Possible'; Possible: 1,
BlockAppliesToNode[(BlockAppliesToNode['UnknownSelectorType'] = 2)] = 'UnknownSelectorType'; UnknownSelectorType: 2
})(BlockAppliesToNode || (BlockAppliesToNode = {})); });
let NodeExist;
(function (NodeExist) { const NodeExist = /** @type {const} */ ({
NodeExist[(NodeExist['Probably'] = 1)] = 'Probably'; Probably: 0,
NodeExist[(NodeExist['Definitely'] = 2)] = 'Definitely'; Definitely: 1
})(NodeExist || (NodeExist = {})); });
/** @typedef {typeof NodeExist[keyof typeof NodeExist]} NodeExistsValue */
const whitelist_attribute_selector = new Map([ const whitelist_attribute_selector = new Map([
['details', new Set(['open'])], ['details', new Set(['open'])],
['dialog', new Set(['open'])] ['dialog', new Set(['open'])]
]); ]);
const regex_is_single_css_selector = /[^\\],(?!([^([]+[^\\]|[^([\\])[)\]])/; const regex_is_single_css_selector = /[^\\],(?!([^([]+[^\\]|[^([\\])[)\]])/;
export default class Selector { export default class Selector {
/** @type {import('./private.js').CssNode} */ /** @type {import('./private.js').CssNode} */
node; node;
@ -217,6 +221,7 @@ export default class Selector {
} }
} }
} }
get_amount_class_specificity_increased() { get_amount_class_specificity_increased() {
let count = 0; let count = 0;
for (const block of this.blocks) { for (const block of this.blocks) {
@ -314,12 +319,13 @@ function apply_selector(blocks, node, to_encapsulate) {
to_encapsulate.push({ node, block }); to_encapsulate.push({ node, block });
return true; return true;
} }
const regex_backslash_and_following_character = /\\(.)/g; const regex_backslash_and_following_character = /\\(.)/g;
/** /**
* @param {Block} block * @param {Block} block
* @param {import('../nodes/Element.js').default} node * @param {import('../nodes/Element.js').default} node
* @returns {BlockAppliesToNode} * @returns {typeof BlockAppliesToNode[keyof typeof BlockAppliesToNode]}
*/ */
function block_might_apply_to_node(block, node) { function block_might_apply_to_node(block, node) {
let i = block.selectors.length; let i = block.selectors.length;
@ -519,6 +525,7 @@ function get_element_parent(node) {
while ((parent = parent.parent) && parent.type !== 'Element'); while ((parent = parent.parent) && parent.type !== 'Element');
return /** @type {import('../nodes/Element.js').default | null} */ (parent); return /** @type {import('../nodes/Element.js').default | null} */ (parent);
} }
/** /**
* Finds the given node's previous sibling in the DOM * Finds the given node's previous sibling in the DOM
* *
@ -559,10 +566,10 @@ function find_previous_sibling(node) {
/** /**
* @param {import('../nodes/interfaces.js').INode} node * @param {import('../nodes/interfaces.js').INode} node
* @param {boolean} adjacent_only * @param {boolean} adjacent_only
* @returns {Map<import('../nodes/Element.js').default, NodeExist>} * @returns {Map<import('../nodes/Element.js').default, NodeExistsValue>}
*/ */
function get_possible_element_siblings(node, adjacent_only) { function get_possible_element_siblings(node, adjacent_only) {
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @type {Map<import('../nodes/Element.js').default, NodeExistsValue>} */
const result = new Map(); const result = new Map();
/** @type {import('../nodes/interfaces.js').INode} */ /** @type {import('../nodes/interfaces.js').INode} */
@ -622,16 +629,18 @@ function get_possible_element_siblings(node, adjacent_only) {
/** /**
* @param {import('../nodes/EachBlock.js').default | import('../nodes/IfBlock.js').default | import('../nodes/AwaitBlock.js').default} block * @param {import('../nodes/EachBlock.js').default | import('../nodes/IfBlock.js').default | import('../nodes/AwaitBlock.js').default} block
* @param {boolean} adjacent_only * @param {boolean} adjacent_only
* @returns {Map<import('../nodes/Element.js').default, NodeExist>} * @returns {Map<import('../nodes/Element.js').default, NodeExistsValue>}
*/ */
function get_possible_last_child(block, adjacent_only) { function get_possible_last_child(block, adjacent_only) {
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @typedef {Map<import('../nodes/Element.js').default, NodeExistsValue>} NodeMap */
/** @type {NodeMap} */
const result = new Map(); const result = new Map();
if (block.type === 'EachBlock') { if (block.type === 'EachBlock') {
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @type {NodeMap} */
const each_result = loop_child(block.children, adjacent_only); const each_result = loop_child(block.children, adjacent_only);
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @type {NodeMap} */
const else_result = block.else ? loop_child(block.else.children, adjacent_only) : new Map(); const else_result = block.else ? loop_child(block.else.children, adjacent_only) : new Map();
const not_exhaustive = !has_definite_elements(else_result); const not_exhaustive = !has_definite_elements(else_result);
if (not_exhaustive) { if (not_exhaustive) {
@ -641,10 +650,10 @@ function get_possible_last_child(block, adjacent_only) {
add_to_map(each_result, result); add_to_map(each_result, result);
add_to_map(else_result, result); add_to_map(else_result, result);
} else if (block.type === 'IfBlock') { } else if (block.type === 'IfBlock') {
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @type {NodeMap} */
const if_result = loop_child(block.children, adjacent_only); const if_result = loop_child(block.children, adjacent_only);
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @type {NodeMap} */
const else_result = block.else ? loop_child(block.else.children, adjacent_only) : new Map(); const else_result = block.else ? loop_child(block.else.children, adjacent_only) : new Map();
const not_exhaustive = !has_definite_elements(if_result) || !has_definite_elements(else_result); const not_exhaustive = !has_definite_elements(if_result) || !has_definite_elements(else_result);
if (not_exhaustive) { if (not_exhaustive) {
@ -654,15 +663,15 @@ function get_possible_last_child(block, adjacent_only) {
add_to_map(if_result, result); add_to_map(if_result, result);
add_to_map(else_result, result); add_to_map(else_result, result);
} else if (block.type === 'AwaitBlock') { } else if (block.type === 'AwaitBlock') {
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @type {NodeMap} */
const pending_result = block.pending const pending_result = block.pending
? loop_child(block.pending.children, adjacent_only) ? loop_child(block.pending.children, adjacent_only)
: new Map(); : new Map();
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @type {NodeMap} */
const then_result = block.then ? loop_child(block.then.children, adjacent_only) : new Map(); const then_result = block.then ? loop_child(block.then.children, adjacent_only) : new Map();
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @type {NodeMap} */
const catch_result = block.catch ? loop_child(block.catch.children, adjacent_only) : new Map(); const catch_result = block.catch ? loop_child(block.catch.children, adjacent_only) : new Map();
const not_exhaustive = const not_exhaustive =
!has_definite_elements(pending_result) || !has_definite_elements(pending_result) ||
@ -681,7 +690,7 @@ function get_possible_last_child(block, adjacent_only) {
} }
/** /**
* @param {Map<import('../nodes/Element.js').default, NodeExist>} result * @param {Map<import('../nodes/Element.js').default, NodeExistsValue>} result
* @returns {boolean} * @returns {boolean}
*/ */
function has_definite_elements(result) { function has_definite_elements(result) {
@ -695,8 +704,9 @@ function has_definite_elements(result) {
} }
/** /**
* @param {Map<import('../nodes/Element.js').default, NodeExist>} from * @param {Map<import('../nodes/Element.js').default, NodeExistsValue>} from
* @param {Map<import('../nodes/Element.js').default, NodeExist>} to * @param {Map<import('../nodes/Element.js').default, NodeExistsValue>} to
* @returns {void}
*/ */
function add_to_map(from, to) { function add_to_map(from, to) {
from.forEach((exist, element) => { from.forEach((exist, element) => {
@ -705,16 +715,16 @@ function add_to_map(from, to) {
} }
/** /**
* @param {NodeExist | null} exist1 * @param {NodeExistsValue | null} exist1
* @param {NodeExist | null} exist2 * @param {NodeExistsValue | null} exist2
* @returns {NodeExist} * @returns {NodeExistsValue}
*/ */
function higher_existence(exist1, exist2) { function higher_existence(exist1, exist2) {
if (exist1 === undefined || exist2 === undefined) return exist1 || exist2; if (exist1 === undefined || exist2 === undefined) return exist1 || exist2;
return exist1 > exist2 ? exist1 : exist2; return exist1 > exist2 ? exist1 : exist2;
} }
/** @param {Map<import('../nodes/Element.js').default, NodeExist>} result */ /** @param {Map<import('../nodes/Element.js').default, NodeExistsValue>} result */
function mark_as_probably(result) { function mark_as_probably(result) {
for (const key of result.keys()) { for (const key of result.keys()) {
result.set(key, NodeExist.Probably); result.set(key, NodeExist.Probably);
@ -726,7 +736,7 @@ function mark_as_probably(result) {
* @param {boolean} adjacent_only * @param {boolean} adjacent_only
*/ */
function loop_child(children, adjacent_only) { function loop_child(children, adjacent_only) {
/** @type {Map<import('../nodes/Element.js').default, NodeExist>} */ /** @type {Map<import('../nodes/Element.js').default, NodeExistsValue>} */
const result = new Map(); const result = new Map();
for (let i = children.length - 1; i >= 0; i--) { for (let i = children.length - 1; i >= 0; i--) {
const child = children[i]; const child = children[i];
@ -749,6 +759,7 @@ function loop_child(children, adjacent_only) {
} }
return result; return result;
} }
class Block { class Block {
/** @type {boolean} */ /** @type {boolean} */
host; host;

410
src/compiler/compile/css/Stylesheet.ts
Unescape View File

@ -1,34 +1,38 @@
import MagicString from 'magic-string'; import MagicString from 'magic-string';
import { walk } from 'estree-walker'; import { walk } from 'estree-walker';
import Selector from './Selector'; import Selector from './Selector.js';
import Element from '../nodes/Element'; import hash from '../utils/hash.js';
import { Ast, CssHashGetter } from '../../interfaces'; import compiler_warnings from '../compiler_warnings.js';
import Component from '../Component'; import { extract_ignores_above_position } from '../../utils/extract_svelte_ignore.js';
import { CssNode } from './private'; import { push_array } from '../../utils/push_array.js';
import hash from '../utils/hash'; import { regex_only_whitespaces, regex_whitespace } from '../../utils/patterns.js';
import compiler_warnings from '../compiler_warnings';
import { extract_ignores_above_position } from '../../utils/extract_svelte_ignore';
import { push_array } from '../../utils/push_array';
import { regex_only_whitespaces, regex_whitespace } from '../../utils/patterns';
const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/; const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/;
function remove_css_prefix(name: string): string { /**
* @param {string} name
* @returns {string}
*/
function remove_css_prefix(name) {
return name.replace(regex_css_browser_prefix, ''); return name.replace(regex_css_browser_prefix, '');
} }
const is_keyframes_node = (node: CssNode) => remove_css_prefix(node.name) === 'keyframes'; /** @param {import('./private.js').CssNode} node */
const is_keyframes_node = (node) => remove_css_prefix(node.name) === 'keyframes';
const at_rule_has_declaration = ({ block }: CssNode): true => /**
block && block.children && block.children.find((node: CssNode) => node.type === 'Declaration'); * @param {import('./private.js').CssNode}
* @returns {true}
*/
const at_rule_has_declaration = ({ block }) => block && block.children && block.children.find((node) => node.type === 'Declaration');
function minify_declarations( /**
code: MagicString, * @param {import('magic-string').default} code
start: number, * @param {number} start
declarations: Declaration[] * @param {Declaration[]} declarations
): number { * @returns {number}
*/
function minify_declarations(code, start, declarations) {
let c = start; let c = start;
declarations.forEach((declaration, i) => { declarations.forEach((declaration, i) => {
const separator = i > 0 ? ';' : ''; const separator = i > 0 ? ';' : '';
if (declaration.node.start - c > separator.length) { if (declaration.node.start - c > separator.length) {
@ -37,107 +41,122 @@ function minify_declarations(
declaration.minify(code); declaration.minify(code);
c = declaration.node.end; c = declaration.node.end;
}); });
return c; return c;
} }
class Rule { class Rule {
selectors: Selector[];
declarations: Declaration[];
node: CssNode;
parent: Atrule;
constructor(node: CssNode, stylesheet, parent?: Atrule) { /** @type {import('./Selector.js').default[]} */
selectors;
/** @type {Declaration[]} */
declarations;
/** @type {import('./private.js').CssNode} */
node;
/** @type {Atrule} */
parent;
/**
* @param {import('./private.js').CssNode} node
* @param {any} stylesheet
* @param {Atrule} [parent]
*/
constructor(node, stylesheet, parent) {
this.node = node; this.node = node;
this.parent = parent; this.parent = parent;
this.selectors = node.prelude.children.map((node: CssNode) => new Selector(node, stylesheet)); this.selectors = node.prelude.children.map((node) => new Selector(node, stylesheet));
this.declarations = node.block.children.map((node: CssNode) => new Declaration(node)); this.declarations = node.block.children.map((node) => new Declaration(node));
} }
apply(node: Element) { /** @param {import('../nodes/Element.js').default} node */
apply(node) {
this.selectors.forEach((selector) => selector.apply(node)); // TODO move the logic in here? this.selectors.forEach((selector) => selector.apply(node)); // TODO move the logic in here?
} }
is_used(dev: boolean) { /** @param {boolean} dev */
is_used(dev) {
if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node)) if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node))
return true; return true;
if (this.declarations.length === 0) return dev; if (this.declarations.length === 0)
return dev;
return this.selectors.some((s) => s.used); return this.selectors.some((s) => s.used);
} }
minify(code: MagicString, _dev: boolean) { /**
* @param {import('magic-string').default} code
* @param {boolean} _dev
*/
minify(code, _dev) {
let c = this.node.start; let c = this.node.start;
let started = false; let started = false;
this.selectors.forEach((selector) => { this.selectors.forEach((selector) => {
if (selector.used) { if (selector.used) {
const separator = started ? ',' : ''; const separator = started ? ',' : '';
if (selector.node.start - c > separator.length) { if (selector.node.start - c > separator.length) {
code.update(c, selector.node.start, separator); code.update(c, selector.node.start, separator);
} }
selector.minify(code); selector.minify(code);
c = selector.node.end; c = selector.node.end;
started = true; started = true;
} }
}); });
code.remove(c, this.node.block.start); code.remove(c, this.node.block.start);
c = this.node.block.start + 1; c = this.node.block.start + 1;
c = minify_declarations(code, c, this.declarations); c = minify_declarations(code, c, this.declarations);
code.remove(c, this.node.block.end - 1); code.remove(c, this.node.block.end - 1);
} }
transform( /**
code: MagicString, * @param {import('magic-string').default} code
id: string, * @param {string} id
keyframes: Map<string, string>, * @param {Map<string, string>} keyframes
max_amount_class_specificity_increased: number * @param {number} max_amount_class_specificity_increased
) { */
transform(code, id, keyframes, max_amount_class_specificity_increased) {
if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node)) if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node))
return true; return true;
const attr = `.${id}`; const attr = `.${id}`;
this.selectors.forEach((selector) => selector.transform(code, attr, max_amount_class_specificity_increased));
this.selectors.forEach((selector) =>
selector.transform(code, attr, max_amount_class_specificity_increased)
);
this.declarations.forEach((declaration) => declaration.transform(code, keyframes)); this.declarations.forEach((declaration) => declaration.transform(code, keyframes));
} }
validate(component: Component) { /** @param {import('../Component.js').default} component */
validate(component) {
this.selectors.forEach((selector) => { this.selectors.forEach((selector) => {
selector.validate(component); selector.validate(component);
}); });
} }
warn_on_unused_selector(handler: (selector: Selector) => void) { /** @param {(selector: import('./Selector.js').default) => void} handler */
warn_on_unused_selector(handler) {
this.selectors.forEach((selector) => { this.selectors.forEach((selector) => {
if (!selector.used) handler(selector); if (!selector.used)
handler(selector);
}); });
} }
get_max_amount_class_specificity_increased() { get_max_amount_class_specificity_increased() {
return Math.max( return Math.max(...this.selectors.map((selector) => selector.get_amount_class_specificity_increased()));
...this.selectors.map((selector) => selector.get_amount_class_specificity_increased())
);
} }
} }
class Declaration { class Declaration {
node: CssNode;
constructor(node: CssNode) { /** @type {import('./private.js').CssNode} */
node;
/** @param {import('./private.js').CssNode} node */
constructor(node) {
this.node = node; this.node = node;
} }
transform(code: MagicString, keyframes: Map<string, string>) { /**
* @param {import('magic-string').default} code
* @param {Map<string, string>} keyframes
*/
transform(code, keyframes) {
const property = this.node.property && remove_css_prefix(this.node.property.toLowerCase()); const property = this.node.property && remove_css_prefix(this.node.property.toLowerCase());
if (property === 'animation' || property === 'animation-name') { if (property === 'animation' || property === 'animation-name') {
this.node.value.children.forEach((block: CssNode) => { this.node.value.children.forEach((block) => {
if (block.type === 'Identifier') { if (block.type === 'Identifier') {
const name = block.name; const name = block.name;
if (keyframes.has(name)) { if (keyframes.has(name)) {
@ -148,48 +167,54 @@ class Declaration {
} }
} }
minify(code: MagicString) { /** @param {import('magic-string').default} code */
if (!this.node.property) return; // @apply, and possibly other weird cases? minify(code) {
if (!this.node.property)
return; // @apply, and possibly other weird cases?
const c = this.node.start + this.node.property.length; const c = this.node.start + this.node.property.length;
const first = this.node.value.children ? this.node.value.children[0] : this.node.value; const first = this.node.value.children ? this.node.value.children[0] : this.node.value;
// Don't minify whitespace in custom properties, since some browsers (Chromium < 99) // Don't minify whitespace in custom properties, since some browsers (Chromium < 99)
// treat --foo: ; and --foo:; differently // treat --foo: ; and --foo:; differently
if (first.type === 'Raw' && regex_only_whitespaces.test(first.value)) return; if (first.type === 'Raw' && regex_only_whitespaces.test(first.value))
return;
let start = first.start; let start = first.start;
while (regex_whitespace.test(code.original[start])) start += 1; while (regex_whitespace.test(code.original[start]))
start += 1;
if (start - c > 1) { if (start - c > 1) {
code.update(c, start, ':'); code.update(c, start, ':');
} }
} }
} }
class Atrule { class Atrule {
node: CssNode;
children: Array<Atrule | Rule>;
declarations: Declaration[];
constructor(node: CssNode) { /** @type {import('./private.js').CssNode} */
node;
/** @type {Array<Atrule | Rule>} */
children;
/** @type {Declaration[]} */
declarations;
/** @param {import('./private.js').CssNode} node */
constructor(node) {
this.node = node; this.node = node;
this.children = []; this.children = [];
this.declarations = []; this.declarations = [];
} }
apply(node: Element) { /** @param {import('../nodes/Element.js').default} node */
if ( apply(node) {
this.node.name === 'container' || if (this.node.name === 'container' ||
this.node.name === 'media' || this.node.name === 'media' ||
this.node.name === 'supports' || this.node.name === 'supports' ||
this.node.name === 'layer' this.node.name === 'layer') {
) {
this.children.forEach((child) => { this.children.forEach((child) => {
child.apply(node); child.apply(node);
}); });
} else if (is_keyframes_node(this.node)) { }
this.children.forEach((rule: Rule) => { else if (is_keyframes_node(this.node)) {
this.children.forEach((rule) => {
rule.selectors.forEach((selector) => { rule.selectors.forEach((selector) => {
selector.used = true; selector.used = true;
}); });
@ -197,51 +222,57 @@ class Atrule {
} }
} }
is_used(_dev: boolean) { /** @param {boolean} _dev */
is_used(_dev) {
return true; // TODO return true; // TODO
} }
minify(code: MagicString, dev: boolean) { /**
* @param {import('magic-string').default} code
* @param {boolean} dev
*/
minify(code, dev) {
if (this.node.name === 'media') { if (this.node.name === 'media') {
const expression_char = code.original[this.node.prelude.start]; const expression_char = code.original[this.node.prelude.start];
let c = this.node.start + (expression_char === '(' ? 6 : 7); let c = this.node.start + (expression_char === '(' ? 6 : 7);
if (this.node.prelude.start > c) code.remove(c, this.node.prelude.start); if (this.node.prelude.start > c)
code.remove(c, this.node.prelude.start);
this.node.prelude.children.forEach((query: CssNode) => { this.node.prelude.children.forEach((query) => {
// TODO minify queries // TODO minify queries
c = query.end; c = query.end;
}); });
code.remove(c, this.node.block.start); code.remove(c, this.node.block.start);
} else if (this.node.name === 'supports') { }
else if (this.node.name === 'supports') {
let c = this.node.start + 9; let c = this.node.start + 9;
if (this.node.prelude.start - c > 1) code.update(c, this.node.prelude.start, ' '); if (this.node.prelude.start - c > 1)
this.node.prelude.children.forEach((query: CssNode) => { code.update(c, this.node.prelude.start, ' ');
this.node.prelude.children.forEach((query) => {
// TODO minify queries // TODO minify queries
c = query.end; c = query.end;
}); });
code.remove(c, this.node.block.start); code.remove(c, this.node.block.start);
} else { }
else {
let c = this.node.start + this.node.name.length + 1; let c = this.node.start + this.node.name.length + 1;
if (this.node.prelude) { if (this.node.prelude) {
if (this.node.prelude.start - c > 1) code.update(c, this.node.prelude.start, ' '); if (this.node.prelude.start - c > 1)
code.update(c, this.node.prelude.start, ' ');
c = this.node.prelude.end; c = this.node.prelude.end;
} }
if (this.node.block && this.node.block.start - c > 0) { if (this.node.block && this.node.block.start - c > 0) {
code.remove(c, this.node.block.start); code.remove(c, this.node.block.start);
} }
} }
// TODO other atrules // TODO other atrules
if (this.node.block) { if (this.node.block) {
let c = this.node.block.start + 1; let c = this.node.block.start + 1;
if (this.declarations.length) { if (this.declarations.length) {
c = minify_declarations(code, c, this.declarations); c = minify_declarations(code, c, this.declarations);
// if the atrule has children, leave the last declaration semicolon alone // if the atrule has children, leave the last declaration semicolon alone
if (this.children.length) c++; if (this.children.length)
c++;
} }
this.children.forEach((child) => { this.children.forEach((child) => {
if (child.is_used(dev)) { if (child.is_used(dev)) {
code.remove(c, child.node.start); code.remove(c, child.node.start);
@ -249,98 +280,106 @@ class Atrule {
c = child.node.end; c = child.node.end;
} }
}); });
code.remove(c, this.node.block.end - 1); code.remove(c, this.node.block.end - 1);
} }
} }
transform( /**
code: MagicString, * @param {import('magic-string').default} code
id: string, * @param {string} id
keyframes: Map<string, string>, * @param {Map<string, string>} keyframes
max_amount_class_specificity_increased: number * @param {number} max_amount_class_specificity_increased
) { */
transform(code, id, keyframes, max_amount_class_specificity_increased) {
if (is_keyframes_node(this.node)) { if (is_keyframes_node(this.node)) {
this.node.prelude.children.forEach(({ type, name, start, end }: CssNode) => { this.node.prelude.children.forEach(({ type, name, start, end }) => {
if (type === 'Identifier') { if (type === 'Identifier') {
if (name.startsWith('-global-')) { if (name.startsWith('-global-')) {
code.remove(start, start + 8); code.remove(start, start + 8);
this.children.forEach((rule: Rule) => { this.children.forEach((rule) => {
rule.selectors.forEach((selector) => { rule.selectors.forEach((selector) => {
selector.used = true; selector.used = true;
}); });
}); });
} else { }
else {
code.update(start, end, keyframes.get(name)); code.update(start, end, keyframes.get(name));
} }
} }
}); });
} }
this.children.forEach((child) => { this.children.forEach((child) => {
child.transform(code, id, keyframes, max_amount_class_specificity_increased); child.transform(code, id, keyframes, max_amount_class_specificity_increased);
}); });
} }
validate(component: Component) { /** @param {import('../Component.js').default} component */
validate(component) {
this.children.forEach((child) => { this.children.forEach((child) => {
child.validate(component); child.validate(component);
}); });
} }
warn_on_unused_selector(handler: (selector: Selector) => void) { /** @param {(selector: import('./Selector.js').default) => void} handler */
if (this.node.name !== 'media') return; warn_on_unused_selector(handler) {
if (this.node.name !== 'media')
return;
this.children.forEach((child) => { this.children.forEach((child) => {
child.warn_on_unused_selector(handler); child.warn_on_unused_selector(handler);
}); });
} }
get_max_amount_class_specificity_increased() { get_max_amount_class_specificity_increased() {
return Math.max( return Math.max(...this.children.map((rule) => rule.get_max_amount_class_specificity_increased()));
...this.children.map((rule) => rule.get_max_amount_class_specificity_increased())
);
} }
} }
const get_default_css_hash: CssHashGetter = ({ css, hash }) => { /** @param {any} */
const get_default_css_hash = ({ css, hash }) => {
return `svelte-${hash(css)}`; return `svelte-${hash(css)}`;
}; };
export default class Stylesheet { export default class Stylesheet {
source: string;
ast: Ast;
filename: string;
dev: boolean;
has_styles: boolean; /** @type {string} */
id: string; source;
children: Array<Rule | Atrule> = []; /** @type {import('../../interfaces.js').Ast} */
keyframes: Map<string, string> = new Map(); ast;
nodes_with_css_class: Set<CssNode> = new Set(); /** @type {string} */
filename;
constructor({ /** @type {boolean} */
source, dev;
ast,
component_name, /** @type {boolean} */
filename, has_styles;
dev,
get_css_hash = get_default_css_hash /** @type {string} */
}: { id;
source: string;
ast: Ast; /** @type {Array<Rule | Atrule>} */
filename: string | undefined; children = [];
component_name: string | undefined;
dev: boolean; /** @type {Map<string, string>} */
get_css_hash: CssHashGetter; keyframes = new Map();
}) {
/** @type {Set<import('./private.js').CssNode>} */
nodes_with_css_class = new Set();
/**
* @param {{
* source: string;
* ast: import('../../interfaces.js').Ast;
* filename: string | undefined;
* component_name: string | undefined;
* dev: boolean;
* get_css_hash: import('../../interfaces.js').CssHashGetter;
* }}
*/
constructor({ source, ast, component_name, filename, dev, get_css_hash = get_default_css_hash }) {
this.source = source; this.source = source;
this.ast = ast; this.ast = ast;
this.filename = filename; this.filename = filename;
this.dev = dev; this.dev = dev;
if (ast.css && ast.css.children.length) { if (ast.css && ast.css.children.length) {
this.id = get_css_hash({ this.id = get_css_hash({
filename, filename,
@ -348,104 +387,96 @@ export default class Stylesheet {
css: ast.css.content.styles, css: ast.css.content.styles,
hash hash
}); });
this.has_styles = true; this.has_styles = true;
const stack: Atrule[] = []; /** @type {Atrule[]} */
const stack = [];
let depth = 0; let depth = 0;
let current_atrule: Atrule = null;
walk(ast.css as any, { /** @type {Atrule} */
enter: (node: any) => { let current_atrule = null;
walk(/** @type {any} */ (ast.css), {
enter: (node) => {
if (node.type === 'Atrule') { if (node.type === 'Atrule') {
const atrule = new Atrule(node); const atrule = new Atrule(node);
stack.push(atrule); stack.push(atrule);
if (current_atrule) { if (current_atrule) {
current_atrule.children.push(atrule); current_atrule.children.push(atrule);
} else if (depth <= 1) { }
else if (depth <= 1) {
this.children.push(atrule); this.children.push(atrule);
} }
if (is_keyframes_node(node)) { if (is_keyframes_node(node)) {
node.prelude.children.forEach((expression: CssNode) => { node.prelude.children.forEach((expression) => {
if (expression.type === 'Identifier' && !expression.name.startsWith('-global-')) { if (expression.type === 'Identifier' && !expression.name.startsWith('-global-')) {
this.keyframes.set(expression.name, `${this.id}-${expression.name}`); this.keyframes.set(expression.name, `${this.id}-${expression.name}`);
} }
}); });
} else if (at_rule_has_declaration(node)) { }
else if (at_rule_has_declaration(node)) {
const at_rule_declarations = node.block.children const at_rule_declarations = node.block.children
.filter((node) => node.type === 'Declaration') .filter((node) => node.type === 'Declaration')
.map((node) => new Declaration(node)); .map((node) => new Declaration(node));
push_array(atrule.declarations, at_rule_declarations); push_array(atrule.declarations, at_rule_declarations);
} }
current_atrule = atrule; current_atrule = atrule;
} }
if (node.type === 'Rule') { if (node.type === 'Rule') {
const rule = new Rule(node, this, current_atrule); const rule = new Rule(node, this, current_atrule);
if (current_atrule) { if (current_atrule) {
current_atrule.children.push(rule); current_atrule.children.push(rule);
} else if (depth <= 1) { }
else if (depth <= 1) {
this.children.push(rule); this.children.push(rule);
} }
} }
depth += 1; depth += 1;
}, },
leave: (node) => {
leave: (node: any) => {
if (node.type === 'Atrule') { if (node.type === 'Atrule') {
stack.pop(); stack.pop();
current_atrule = stack[stack.length - 1]; current_atrule = stack[stack.length - 1];
} }
depth -= 1; depth -= 1;
} }
}); });
} else { }
else {
this.has_styles = false; this.has_styles = false;
} }
} }
apply(node: Element) { /** @param {import('../nodes/Element.js').default} node */
if (!this.has_styles) return; apply(node) {
if (!this.has_styles)
return;
for (let i = 0; i < this.children.length; i += 1) { for (let i = 0; i < this.children.length; i += 1) {
const child = this.children[i]; const child = this.children[i];
child.apply(node); child.apply(node);
} }
} }
reify() { reify() {
this.nodes_with_css_class.forEach((node: Element) => { this.nodes_with_css_class.forEach((node) => {
node.add_css_class(); node.add_css_class();
}); });
} }
render(file: string) { /** @param {string} file */
render(file) {
if (!this.has_styles) { if (!this.has_styles) {
return { code: null, map: null }; return { code: null, map: null };
} }
const code = new MagicString(this.source); const code = new MagicString(this.source);
walk(/** @type {any} */ (this.ast.css), {
walk(this.ast.css as any, { enter: (node) => {
enter: (node: any) => {
code.addSourcemapLocation(node.start); code.addSourcemapLocation(node.start);
code.addSourcemapLocation(node.end); code.addSourcemapLocation(node.end);
} }
}); });
const max = Math.max(...this.children.map((rule) => rule.get_max_amount_class_specificity_increased()));
const max = Math.max( this.children.forEach((child) => {
...this.children.map((rule) => rule.get_max_amount_class_specificity_increased())
);
this.children.forEach((child: Atrule | Rule) => {
child.transform(code, this.id, this.keyframes, max); child.transform(code, this.id, this.keyframes, max);
}); });
let c = 0; let c = 0;
this.children.forEach((child) => { this.children.forEach((child) => {
if (child.is_used(this.dev)) { if (child.is_used(this.dev)) {
@ -454,9 +485,7 @@ export default class Stylesheet {
c = child.node.end; c = child.node.end;
} }
}); });
code.remove(c, this.source.length); code.remove(c, this.source.length);
return { return {
code: code.toString(), code: code.toString(),
map: code.generateMap({ map: code.generateMap({
@ -467,27 +496,28 @@ export default class Stylesheet {
}; };
} }
validate(component: Component) { /** @param {import('../Component.js').default} component */
validate(component) {
this.children.forEach((child) => { this.children.forEach((child) => {
child.validate(component); child.validate(component);
}); });
} }
warn_on_unused_selectors(component: Component) { /** @param {import('../Component.js').default} component */
warn_on_unused_selectors(component) {
const ignores = !this.ast.css const ignores = !this.ast.css
? [] ? []
: extract_ignores_above_position(this.ast.css.start, this.ast.html.children); : extract_ignores_above_position(this.ast.css.start, this.ast.html.children);
component.push_ignores(ignores); component.push_ignores(ignores);
this.children.forEach((child) => { this.children.forEach((child) => {
child.warn_on_unused_selector((selector: Selector) => { child.warn_on_unused_selector((selector) => {
component.warn( component.warn(selector.node, compiler_warnings.css_unused_selector(this.source.slice(selector.node.start, selector.node.end)));
selector.node,
compiler_warnings.css_unused_selector(
this.source.slice(selector.node.start, selector.node.end)
)
);
}); });
}); });
component.pop_ignores(); component.pop_ignores();
} }
} }

Write Preview
Loading…
Cancel
Save