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

css global selector + css parser fixes

Browse Source
pull/9723/head
Simon Holthausen 3 years ago
parent 43a5e0cc52
commit 5548332268
29 changed files with 66 additions and 77 deletions
Show Stats Download Patch File Download Diff File

4
packages/svelte/src/compiler/errors.js
Unescape View File

@ -435,10 +435,6 @@ const errors = {
// code: 'illegal-variable-declaration',
// message: 'Cannot declare same variable name which is imported inside <script context="module">'
// },
// css_invalid_global: {
// code: 'css-invalid-global',
// message: ':global(...) can be at the start or end of a selector sequence, but not in the middle'
// },
// css_invalid_global_selector: {
// code: 'css-invalid-global-selector',
// message: ':global(...) must contain a single selector'

8
packages/svelte/src/compiler/phases/1-parse/index.js
Unescape View File

@ -156,7 +156,13 @@ export class Parser {
/** @param {string} str */
match(str) {
return this.template.slice(this.index, this.index + str.length) === str;
const length = str.length;
if (length === 1) {
// more performant than slicing
return this.template[this.index] === str;
}
return this.template.slice(this.index, this.index + length) === str;
}
/**

35
packages/svelte/src/compiler/phases/1-parse/read/style.js
Unescape View File

@ -1,7 +1,7 @@
import { error } from '../../../errors.js';
const REGEX_MATCHER = /^[~^$*|]?=/;
const REGEX_CLOSING_PAREN = /\)/;
const REGEX_CLOSING_PAREN = /(?<!\\)\)/; // \) is a way of escaping a closing paren, so we need to exclude it
const REGEX_CLOSING_BRACKET = /[\s\]]/;
const REGEX_ATTRIBUTE_FLAGS = /^[a-zA-Z]+/; // only `i` and `s` are valid today, but make it future-proof
const REGEX_COMBINATOR_WHITESPACE = /^\s*(\+|~|>|\|\|)\s*/;
@ -145,22 +145,23 @@ function read_rule(parser) {
/**
* @param {import('../index.js').Parser} parser
* @param {boolean} [inside_pseudo_class]
* @returns {import('#compiler').Css.SelectorList}
*/
function read_selector_list(parser) {
function read_selector_list(parser, inside_pseudo_class = false) {
/** @type {import('#compiler').Css.Selector[]} */
const children = [];
const start = parser.index;
while (parser.index < parser.template.length) {
children.push(read_selector(parser));
children.push(read_selector(parser, inside_pseudo_class));
const end = parser.index;
parser.allow_whitespace();
if (parser.match('{')) {
if (parser.match('{') || (inside_pseudo_class && parser.match(')'))) {
return {
type: 'SelectorList',
start,
@ -178,9 +179,10 @@ function read_selector_list(parser) {
/**
* @param {import('../index.js').Parser} parser
* @param {boolean} [inside_pseudo_class]
* @returns {import('#compiler').Css.Selector}
*/
function read_selector(parser) {
function read_selector(parser, inside_pseudo_class = false) {
const list_start = parser.index;
/** @type {Array<import('#compiler').Css.SimpleSelector | import('#compiler').Css.Combinator>} */
@ -190,9 +192,16 @@ function read_selector(parser) {
const start = parser.index;
if (parser.eat('*')) {
let name = '*';
if (parser.match('|')) {
// * is the namespace (which we ignore)
parser.index++;
name = read_identifier(parser);
}
children.push({
type: 'TypeSelector',
name: '*',
name,
start,
end: parser.index
});
@ -220,11 +229,11 @@ function read_selector(parser) {
} else if (parser.eat(':')) {
const name = read_identifier(parser);
/** @type {string | null} */
/** @type {null | import('#compiler').Css.SelectorList} */
let args = null;
if (parser.eat('(')) {
args = parser.read_until(REGEX_CLOSING_PAREN);
args = read_selector_list(parser, true);
parser.eat(')', true);
}
@ -284,9 +293,15 @@ function read_selector(parser) {
end: parser.index
});
} else {
let name = read_identifier(parser);
if (parser.match('|')) {
// we ignore the namespace when trying to find matching element classes
parser.index++;
name = read_identifier(parser);
}
children.push({
type: 'TypeSelector',
name: read_identifier(parser),
name,
start,
end: parser.index
});
@ -295,7 +310,7 @@ function read_selector(parser) {
const index = parser.index;
parser.allow_whitespace();
if (parser.match('{') || parser.match(',')) {
if (parser.match('{') || parser.match(',') || (inside_pseudo_class && parser.match(')'))) {
parser.index = index;
return {

15
packages/svelte/src/compiler/phases/2-analyze/css/Selector.js
Unescape View File

@ -17,7 +17,6 @@ const whitelist_attribute_selector = new Map([
['details', new Set(['open'])],
['dialog', new Set(['open'])]
]);
const regex_is_single_css_selector = /[^\\],(?!([^([]+[^\\]|[^([\\])[)\]])/;
export default class Selector {
/** @type {import('#compiler').Css.Selector} */
@ -157,11 +156,10 @@ export default class Selector {
if (
selector.type === 'PseudoClassSelector' &&
selector.name === 'global' &&
selector.args !== null
selector.args !== null &&
selector.args.children.length > 1
) {
if (regex_is_single_css_selector.test(selector.args)) {
error(selector, 'invalid-css-global-selector');
}
error(selector, 'invalid-css-global-selector');
}
}
}
@ -179,11 +177,14 @@ export default class Selector {
validate_global_compound_selector() {
for (const block of this.blocks) {
for (const selector of block.selectors) {
for (let i = 0; i < block.selectors.length; i++) {
const selector = block.selectors[i];
if (
selector.type === 'PseudoClassSelector' &&
selector.name === 'global' &&
block.selectors.length !== 1
block.selectors.length !== 1 &&
(i === block.selectors.length - 1 ||
block.selectors.slice(i + 1).some((s) => s.type !== 'PseudoElementSelector'))
) {
error(selector, 'invalid-css-global-selector-list');
}

2
packages/svelte/src/compiler/types/css.d.ts vendored
Unescape View File

@ -59,7 +59,7 @@ export interface PseudoElementSelector extends BaseNode {
export interface PseudoClassSelector extends BaseNode {
type: 'PseudoClassSelector';
name: string;
args: string | null;
args: SelectorList | null;
}
export interface Percentage extends BaseNode {

3
packages/svelte/tests/validator/samples/css-invalid-global-placement-2/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

2
packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json
Unescape View File

@ -1,6 +1,6 @@
[
{
"code": "css-invalid-global",
"code": "invalid-css-global-placement",
"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
"start": {
"line": 2,

3
packages/svelte/tests/validator/samples/css-invalid-global-placement-3/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

2
packages/svelte/tests/validator/samples/css-invalid-global-placement-3/errors.json
Unescape View File

@ -1,6 +1,6 @@
[
{
"code": "css-invalid-global",
"code": "invalid-css-global-placement",
"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
"start": {
"line": 5,

3
packages/svelte/tests/validator/samples/css-invalid-global-placement-4/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

4
packages/svelte/tests/validator/samples/css-invalid-global-placement-4/errors.json
Unescape View File

@ -1,7 +1,7 @@
[
{
"code": "css-invalid-global-selector-position",
"message": ":global(...) not at the start of a selector sequence should not contain type or universal selectors",
"code": "invalid-css-global-selector-list",
"message": ":global(...) cannot be used to modify a selector, or be modified by another selector",
"start": {
"line": 2,
"column": 5

3
packages/svelte/tests/validator/samples/css-invalid-global-placement-5/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

4
packages/svelte/tests/validator/samples/css-invalid-global-placement-5/errors.json
Unescape View File

@ -1,7 +1,7 @@
[
{
"code": "css-invalid-global-selector-position",
"message": ":global(...) not at the start of a selector sequence should not contain type or universal selectors",
"code": "invalid-css-global-selector-list",
"message": ":global(...) cannot be used to modify a selector, or be modified by another selector",
"start": {
"line": 2,
"column": 5

3
packages/svelte/tests/validator/samples/css-invalid-global-placement/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

2
packages/svelte/tests/validator/samples/css-invalid-global-placement/errors.json
Unescape View File

@ -1,6 +1,6 @@
[
{
"code": "css-invalid-global",
"code": "invalid-css-global-placement",
"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
"start": {
"line": 2,

3
packages/svelte/tests/validator/samples/css-invalid-global-selector-2/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

4
packages/svelte/tests/validator/samples/css-invalid-global-selector-2/errors.json
Unescape View File

@ -1,7 +1,7 @@
[
{
"code": "css-invalid-global-selector",
"message": ":global(...) must contain a single selector",
"code": "invalid-css-global-selector",
"message": ":global(...) must contain exactly one selector",
"start": {
"line": 11,
"column": 5

3
packages/svelte/tests/validator/samples/css-invalid-global-selector-3/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

4
packages/svelte/tests/validator/samples/css-invalid-global-selector-3/errors.json
Unescape View File

@ -1,7 +1,7 @@
[
{
"code": "css-invalid-global-selector",
"message": ":global(...) must contain a single selector",
"code": "invalid-css-global-selector",
"message": ":global(...) must contain exactly one selector",
"start": {
"line": 5,
"column": 5

3
packages/svelte/tests/validator/samples/css-invalid-global-selector-4/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

4
packages/svelte/tests/validator/samples/css-invalid-global-selector-4/errors.json
Unescape View File

@ -1,7 +1,7 @@
[
{
"code": "css-invalid-global-selector",
"message": ":global(...) must contain a single selector",
"code": "invalid-css-global-selector",
"message": ":global(...) must contain exactly one selector",
"start": {
"line": 2,
"column": 5

3
packages/svelte/tests/validator/samples/css-invalid-global-selector-5/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

4
packages/svelte/tests/validator/samples/css-invalid-global-selector-5/errors.json
Unescape View File

@ -1,7 +1,7 @@
[
{
"code": "css-invalid-global-selector",
"message": ":global(...) must contain a single selector",
"code": "invalid-css-global-selector",
"message": ":global(...) must contain exactly one selector",
"start": {
"line": 5,
"column": 1

3
packages/svelte/tests/validator/samples/css-invalid-global-selector-6/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

4
packages/svelte/tests/validator/samples/css-invalid-global-selector-6/errors.json
Unescape View File

@ -1,7 +1,7 @@
[
{
"code": "css-invalid-global-selector",
"message": ":global(...) must contain a single selector",
"code": "invalid-css-global-selector",
"message": ":global(...) must contain exactly one selector",
"start": {
"line": 5,
"column": 1

4
packages/svelte/tests/validator/samples/css-invalid-global-selector-6/input.svelte
Unescape View File

@ -1,8 +1,8 @@
<style>
:global(.h1\,h2\,h3).foo {
:global(.h1\,h2\,h3)::foo {
color: red;
}
:global(h1, h2, h3).foo {
:global(h1, h2, h3)::foo {
color: red;
}
</style>

3
packages/svelte/tests/validator/samples/css-invalid-global-selector/_config.js
Unescape View File

@ -1,3 +0,0 @@
import { test } from '../../test';
export default test({ skip: true });

4
packages/svelte/tests/validator/samples/css-invalid-global-selector/errors.json
Unescape View File

@ -1,7 +1,7 @@
[
{
"code": "css-invalid-global-selector",
"message": ":global(...) must contain a single selector",
"code": "invalid-css-global-selector",
"message": ":global(...) must contain exactly one selector",
"start": {
"line": 11,
"column": 5

4
sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
Unescape View File

@ -74,6 +74,10 @@ Content inside component tags becomes a [snippet prop](/docs/snippets) called `c
Assignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.
### Stricter CSS `:global` selector validation
Previously, a selector like `.foo :global(bar).baz` was valid. In Svelte 5, this is a validation error instead. The reason is that in this selector the resulting CSS would be equivalent to one without `:global` - in other words, `:global` is ignored in this case.
### CSS hash position no longer deterministic
Previously Svelte would always insert the CSS hash last. This is no longer guaranteed in Svelte 5. This is only breaking if you [have very weird css selectors](https://stackoverflow.com/questions/15670631/does-the-order-of-classes-listed-on-an-item-affect-the-css).

Write Preview
Loading…
Cancel
Save