chore: provide proper public type for `parseCss` result (#17654)

Currently, the [newly introduced `parseCss` from
`svelte/compiler`](https://github.com/sveltejs/svelte/pull/17496)
returns `Omit<AST.CSS.StyleSheet, 'attributes' | 'content'>`. If you try
to work with this in external tooling, everywhere where you pass around
the result of this method, you need to use that type as well, which is
quite cumbersome. (I'm trying to integrate this into `sv` to get rid of
a workaround)

This creates a new type in the CSS AST to differentiate between one
stylesheet only having the roles, and one beeing the full one that is
used in `parse` itself. Im 100% open on the name of the new type or any
better ideas.

### Before submitting the PR, please make sure you do the following

- [ ] It's really useful if your PR references an issue where it is
discussed ahead of time. In many cases, features are absent for a
reason. For large changes, please create an RFC:
https://github.com/sveltejs/rfcs
- [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- [x] This message body should clearly illustrate what problems it
solves.
- [ ] Ideally, include a test that fails without this PR but passes with
it.
- [x] If this PR changes code within `packages/svelte/src`, add a
changeset (`npx changeset`).

### Tests and linting

- [x] Run the tests with `pnpm test` and lint the project with `pnpm
lint`

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/17668/head
Manuel 3 days ago committed by GitHub
parent b0ca0b84de
commit 3c6bb6faba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
chore: provide proper public type for `parseCss` result

@ -123,7 +123,7 @@ export function parse(source, { modern, loose } = {}) {
* The parseCss function parses a CSS stylesheet, returning its abstract syntax tree.
*
* @param {string} source The CSS source code
* @returns {Omit<AST.CSS.StyleSheet, 'attributes' | 'content'>}
* @returns {AST.CSS.StyleSheetFile}
*/
export function parseCss(source) {
source = remove_bom(source);
@ -135,7 +135,7 @@ export function parseCss(source) {
const children = parse_stylesheet(parser);
return {
type: 'StyleSheet',
type: 'StyleSheetFile',
start: 0,
end: source.length,
children

@ -6,10 +6,17 @@ export namespace _CSS {
end: number;
}
export interface StyleSheet extends BaseNode {
export interface StyleSheetBase extends BaseNode {
children: Array<Atrule | Rule>;
}
export interface StyleSheetFile extends StyleSheetBase {
type: 'StyleSheetFile';
}
export interface StyleSheet extends StyleSheetBase {
type: 'StyleSheet';
attributes: any[]; // TODO
children: Array<Atrule | Rule>;
content: {
start: number;
end: number;

@ -4,7 +4,7 @@ import { parseCss } from 'svelte/compiler';
describe('parseCss', () => {
it('parses a simple rule', () => {
const ast = parseCss('div { color: red; }');
assert.equal(ast.type, 'StyleSheet');
assert.equal(ast.type, 'StyleSheetFile');
assert.equal(ast.children.length, 1);
assert.equal(ast.children[0].type, 'Rule');
});
@ -57,7 +57,7 @@ describe('parseCss', () => {
it('parses empty stylesheet', () => {
const ast = parseCss('');
assert.equal(ast.type, 'StyleSheet');
assert.equal(ast.type, 'StyleSheetFile');
assert.equal(ast.children.length, 0);
assert.equal(ast.start, 0);
assert.equal(ast.end, 0);
@ -138,7 +138,7 @@ describe('parseCss', () => {
it('parses escaped characters', () => {
const ast = parseCss("div { background: url('./example.png?\\''); }");
assert.equal(ast.type, 'StyleSheet');
assert.equal(ast.type, 'StyleSheetFile');
assert.equal(ast.children.length, 1);
const rule = ast.children[0];
assert.equal(rule.type, 'Rule');

@ -889,7 +889,7 @@ declare module 'svelte/compiler' {
*
* @param source The CSS source code
* */
export function parseCss(source: string): Omit<AST.CSS.StyleSheet, "attributes" | "content">;
export function parseCss(source: string): AST.CSS.StyleSheetFile;
/**
* @deprecated Replace this with `import { walk } from 'estree-walker'`
* */
@ -1673,10 +1673,17 @@ declare module 'svelte/compiler' {
end: number;
}
export interface StyleSheet extends BaseNode {
export interface StyleSheetBase extends BaseNode {
children: Array<Atrule | Rule>;
}
export interface StyleSheetFile extends StyleSheetBase {
type: 'StyleSheetFile';
}
export interface StyleSheet extends StyleSheetBase {
type: 'StyleSheet';
attributes: any[]; // TODO
children: Array<Atrule | Rule>;
content: {
start: number;
end: number;

Loading…
Cancel
Save