withastro / prettier-plugin-astro Goto Github PK
View Code? Open in Web Editor NEWPrettier plugin for Astro
License: Other
Prettier plugin for Astro
License: Other
Hi everyone, thanks for this plugin !
Using the basic index.astro from yarn create astro
, this plugin returns an error when using the HTML comments :
<!--
- You can also use imported framework components directly in your markup!
-
- Note: by default, these components are NOT interactive on the client.
- The `:visible` directive tells Astro to make it interactive.
-
- See https://docs.astro.build/core-concepts/component-hydration/
-->
I have this error in the prettier log :
["ERROR" - 12:11:59] Error formatting document.
["ERROR" - 12:11:59] Cannot read property 'comments' of undefined
TypeError: Cannot read property 'comments' of undefined
at addCommentHelper (g:\PROJECTS\Testing\ASTRO\astro_v0.21\node_modules\prettier\index.js:5972:25)
at Object.addLeadingComment$3 [as addLeadingComment] (g:\PROJECTS\Testing\ASTRO\astro_v0.21\node_modules\prettier\index.js:5981:3)
at attachCommentsHTML (g:\PROJECTS\Testing\ASTRO\astro_v0.21\node_modules\prettier-plugin-astro\dist\index.js:365:27)
at Object.print (g:\PROJECTS\Testing\ASTRO\astro_v0.21\node_modules\prettier-plugin-astro\dist\index.js:501:9)
When you remove the comment, everything works fine.
Hope it helps ! Thanks !
npm create astro
using the basic template.yarn add --dev prettier-plugin-astro
to add the plugin.When multiple <style/>
tags are present in a .astro
component, the plugin elides whitespace between then and smashes them together, e.g.
<style>
/* some scoped styles here */
</style>
<style global>
/* some global styles here */
</styles>
becomes
<style>
/* some scoped styles here */
</style><style global>
/* some global styles here */
</styles>
A quick look at the code suggests a fix might need need something in @astrojs/parser
? Or might it be acceptable to something post-hoc here?
prettier-plugin-astro/src/printer.ts
Lines 71 to 74 in 74ff74f
npm init astro
using template .astro
component with two or more <style/>
elementsAttribute names are removed from component usage in .astro files:
Original code:
<BaseHead title={title} description={description} permalink={permalink} />
Formatted to:
<BaseHead {title} {description} {permalink} />
Expected:
<BaseHead title={title} description={description} permalink={permalink} />
This shorter syntax seems to work but there are two problems with it:
See code formatting examples above
When an imported component has a tag reference name that collides with one of the standard tag names in HTML - like for instance <Footer /> - the plugin resets it to <footer />. Thus being lowercase then it won't get rendered by astro and the component is missing in the output.
I don't like the clunkiness of having to keep a complete nomenclature in mind to avoid collisions like these.
Also the compiler doesn't complain - how could it be aware? - so the then missing component gets dropped silently.
Prettier changes <Component {attribute} />
to <Component attribute="attribute">
when shorthand attributes are not allowed whereas it should actually be <Component attribute={attribute}>
npm init astro
using template Vue (template does not matter probably)npm i -D prettier-plugin-astro
//prettierrc.json:
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"astroAllowShorthand": true,
"printWidth": 120,
"plugins": [
"./node_modules/prettier-plugin-astro"
],
"overrides": [
{
"files": "*.astro",
"options": {
"parser": "astro"
}
}
]
}
//settings.json
{
"prettier.documentSelectors": ["**/*.astro"],
"prettier.configPath": "./.prettierrc.json"
}
//Layout.astro:
---
import HeadLayout from './HeadLayout.astro'
const { title } = Astro.props
const { metaDesc } = Astro.props
---
const
<HeadLayout {title} {metaDesc} />
//Layout.astro:
---
import HeadLayout from './HeadLayout.astro'
const { title } = Astro.props
const { metaDesc } = Astro.props
---
const
<HeadLayout title="title" metaDesc="metaDesc" />
I want to make sure our tests pass on all supported OS's as discussed in #48
Copy the test action from the main Astro repo
No response
Error processing a file with an attribute spread:
$ ./node_modules/.bin/prettier --loglevel debug --no-editorconfig --parser astro test.astro
[debug] normalized argv: {"_":["test.astro"],"color":true,"editorconfig":false,"loglevel":"debug","parser":"astro","config-precedence":"cli-override","debug-repeat":0,"ignore-path":".prettierignore","plugin":[],"plugin-search-dir":[]}
[debug] resolve config from 'test.astro'
[debug] loaded options `{"tabWidth":2,"useTabs":false,"printWidth":160}`
[debug] applied config-precedence (cli-override): {"parser":"astro","printWidth":160,"tabWidth":2,"useTabs":false}
test.astro[error] test.astro: Error: Unhandled node type "Spread"!
[error] at Object.print (/[redacted]/node_modules/prettier-plugin-astro/dist/index.js:712:19)
[error] at callPluginPrintFunction (/[redacted]/node_modules/prettier/index.js:13787:21)
[error] at mainPrintInternal (/[redacted]/node_modules/prettier/index.js:13725:17)
[error] at mainPrint (/[redacted]/node_modules/prettier/index.js:13707:14)
[error] at /[redacted]/node_modules/prettier/index.js:13495:23
[error] at AstPath.each (/[redacted]/node_modules/prettier/index.js:13482:7)
[error] at AstPath.map (/[redacted]/node_modules/prettier/index.js:13494:10)
[error] at Object.print (/[redacted]/node_modules/prettier-plugin-astro/dist/index.js:565:37)
[error] at callPluginPrintFunction (/[redacted]/node_modules/prettier/index.js:13787:21)
[error] at mainPrintInternal (/[redacted]/node_modules/prettier/index.js:13725:17)
with test.astro
as follows:
<div {...Astro.props}><div /></div>
โโโ [email protected]
โโโ [email protected]
See above
Input:
{foo ?? (
<Markdown>
Test. [^1]
[^1]: Test.
</Markdown>
)}
Output:
{foo ?? <Markdown>Test. [^1] [^1]: Test.</Markdown>}
Compare with
Input
<Markdown>
Test. [^1]
[^1]: Test.
</Markdown>
Output: unchanged.
The issue is that correct rendering of a footnote requires it to be on a separate line, so this reformatting breaks the footnote.
See above
The formatting process hangs without any error message if I import Code or Debug from 'astro/components'.
code.astro:
---
import { Code } from 'astro/components';
---
<h1>Test
</h1>
But it works if I import Markdown.
markdown.astro:
---
import { Markdown } from 'astro/components';
---
<h1>Test
</h1>
npx prettier code.astro
npx prettier markdown.astro
I am using
Currently, the plugin doesn't format markdown files we leave that to Prettier. But we need to take over the default markdown formatter from Prettier to be able to format expressions.
Input:
{frontmatter.value * 2}
Output:
{frontmatter.value \* 2}
Expected output:
{frontmatter.value * 2}
Apologies if this is not a bug, but:
In components/layouts with ..., component/layout styles written outside the main html are moved by the plugin to inside the ... structure.
example
I expect the following code to remain as is:
<body>
<div>
bla bla bla
</div>
</body>
<style>
div {
border: 1px solid red;
}
</style>
but instead, the prettier plugin changes it to:
<body>
<div>bla bla bla</div>
<style>
div {
border: 1px solid red;
}
</style>
</body>
Astro prettier plugin breaks markdown inside Markdown
component when it's nested in another element
Install astro prettier plugin
Open attached file
Format document
Expected: indentation preserved
Seen: Second paragraph indented (which then results in <pre>
markup)
Before format document:
---
---
<div>
<Markdown>
Test Test
Test
</Markdown>
</div>
After format document:
---
---
<div>
<Markdown>
Test Test
Test
</Markdown>
</div>
To be specific, in the examples below next
is 0.1.0-next.3 and latest
is 0.0.12.
I'm currently converting a project from Astro 0.20 to Astro 0.25 and also upgrading prettier at the same time to the next
version, and I'm running into an issue where formatting on save in VSCode noticeably hangs the editor for several seconds.
On my project:
npm install -D prettier-plugin-astro@latest
npm run format
[...]
Done in 1.44s.
npm install -D prettier-plugin-astro@next
npm run format
[...]
Done in 13.61s.
If I run the yarn prettier -w .
several times in a row with the next
version, they'll all be around 13 seconds, even though the subsequent runs wouldn't require writing any new changes.
I tried reproducing this with entire folders from the example projects but unfortunately latest
would often fail on files so it wasn't easy to show a complete comparison but for the projects below running yarn prettier -w .
was noticeably slower on next
:
For a VSCode demonstration:
npm init astro -- --template blog-multiple-authors
npm install -D prettier-plugin-astro@next
code .
open src/pages/posts/[...page].astro
make no changes and save
This will result in VSCode hanging for about 6-7 seconds every time I save.
Let me know if you need any details about my VSCode setup (though this is happening at the command line too of course).
The parser is outputting a weird error code that is incomprehensible to me. Also the code on which this error is occurring works fine in the Astro compiler.
Here's the code on which this is failing:
<aside>
{tags && tags.length > 0 && (
<p>
<span>Tags: </span>
{tags.map((tag, i) => (
<a href={`/tags/${tag}`}><code>#{tag}</code></a>
<span>{i < tags.length - 1 && ', '}</span>
))}
</p>
)}
{categories && categories.length > 0 && (
<p>
<span>Categories: </span>
{categories.map((category, i) => (
<a href={`/categories/${category}`}><code>{category}</code></a>
<span>{i < categories.length - 1 && ', '}</span>
))}
</p>
)}
</aside>
npm init astro
using template minimalHere's the stack trace:
[error] src/layouts/PostLayout.astro: ParseError: Expected =
[error] at error (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/parser/dist/utils/error.js:46:15)
[error] at Parser.error (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/parser/dist/parse/index.js:97:30)
[error] at Parser.acorn_error (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/parser/dist/parse/index.js:91:10)
[error] at read_expression (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/parser/dist/parse/read/expression.js:225:12)
[error] at mustache (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/parser/dist/parse/state/mustache.js:316:54)
[error] at new Parser (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/parser/dist/parse/index.js:57:15)
[error] at Object.parse (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/parser/dist/parse/index.js:187:18)
[error] at Object.parse (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/[email protected]/node_modules/prettier-plugin-astro/dist/index.js:14:32)
[error] at Object.parse$d [as parse] (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:12975:19)
[error] at coreFormat (/home/pranav/Programming/Projects/personal-website/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:14525:16)
When trying to format / check an .astro
file, it does not seem to be able to recognize the formatter when using pnpm.
It does work with yarn
.
npm init astro
using template blogpnpm install
pnpm i --save-dev prettier-plugin-astro
pnpm prettier src/components/Author.astro -c
Checking formatting...
src/components/Author.astro[error] No parser could be inferred for file: src/components/Author.astro
All matched files use Prettier code style!
I want to get a clearer output from this plugin when it is fed:
---
const {label, name, class, ...htmlProps} = Astro.props;
---
<style lang="scss">
.label-text {
font-size: 14px;
margin-bottom: 8px;
};
input {
display: block;
box-sizing: border-box;
height: 48px;
border: none;
outline: none;
border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--theme-input-border);
background-color: transparent;
padding: 16px;
font-weight: 600;
font-size: 16px;
color: var(--color-input-text);
margin-bottom: 24px;
&:focus {
/* Visible in Windows high-contrast themes */
outline-color: transparent;
outline-width: 2px;
outline-style: dotted;
box-shadow: inset 0 0 0 2px var(--theme-accent);
}
&::placeholder {
color: var(--theme-text-disabled);
font-weight: 500;
}
&:disabled {
background-color: var(--theme-button-dim);
color: var(--theme-text-disabled);
&::placeholder {
color: var(--theme-text-disabled);
}
}
/*
* HACK: color-scheme dark wreaks havoc, so we have to try to override the styles
*/
&:-webkit-autofill {
box-shadow: 0 0 0 100px var(--theme-bg) inset;
border: 2px solid var(--theme-input-border);
padding: 14px; /* Since we are changing from inset box-shadow to border, change padding to prevent layout shifts */
-webkit-text-fill-color: var(--theme-text) !important;
&:focus {
box-shadow: 0 0 0 100px var(--theme-bg) inset;
border: 2px solid var(--theme-accent);
padding: 14px;
}
}
}
</style>
<label>
<div class='label-text'>{label}</div>
<input class="width-100" name={name} {...htmlProps}/>
</label>
in v0.1.0-next.4
I get the output:
[error] src/components/atoms/Input.astro: Error: Unhandled node type "frontmatter"!
[error] at Object.print (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier-plugin-astro/dist/index.js:448:19)
[error] at callPluginPrintFunction (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8447:26)
[error] at mainPrintInternal (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8396:22)
[error] at mainPrint (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8383:18)
[error] at /Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8238:27
[error] at AstPath.each (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8230:11)
[error] at AstPath.map (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8237:14)
[error] at Object.print (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier-plugin-astro/dist/index.js:275:48)
[error] at callPluginPrintFunction (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8447:26)
[error] at mainPrintInternal (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8396:22)
similar to 0.1.0-next.0
in #165.
The bug here discovered by @antonyfaris is that I'm trying to bind to class
which is a reserved name, so parsing fails.
I would prefer there was a clearer error message such as "error: variable cannot be bound to class
which is a reserved name" similar to how the TS parser works: prettier playground link from @antonyfaris
Pass through error messages from child parsers of the plugin
No response
After running the plugin, <!DOCTYPE html>
is formatted as <!DOCTYPE html></!DOCTYPE>
Minimal test case:
---
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{foo}</title>
</head>
<body></body>
</html>
This is only reproduced if unempty mustache expression is present.
When I run yarn prettier -w ./src
, Prettier remove HTML Attributes name from components :
Before running Prettier :
<BaseLayout title={title}>
After running Prettier :
<BaseLayout {title}>
screen records : https://i.ibb.co/4MqymdK/Enregistrement-de-l-e-cran-2021-10-18-a-11-37-40.gif
npm init astro
using template Starting projecttitle
has props---
const { title } = Astro.props;
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>My site Title : {title}</title>
<!-- ... HEAD CONTENT -->
</head>
<body>
<slot />
</body>
</html>
prettier-plugin-astro
index.astro
, call your Layout and pass title
has props---
// Layouts
import BaseLayout from "../layouts/BaseLayout.astro";
let title = "My Astro Site";
---
<BaseLayout title={title}>
<main>
<!-- ... BODY_CONTENT -->
</main>
</BaseLayout>
yarn prettier -w ./src
index.astro
I have "prettier-plugin-astro" installed only globally (via "npm install -g prettier-plugin-astro") instead of within the local package.
VSCode doesn't seem to format files if it's only installed globally. If I install "prettier-plugin-astro" locally into the current npm project, then it works.
npm install -g prettier-plugin-astro
If you install the plugin locally, then formatting works.
A reduced example of code that triggers the bug is:
{true && <div {...{ style: 'color:red;'}}>hello</div>}
which result in this error message:
["ERROR" - 4:44:37 PM] Unhandled node type "expression"!
Error: Unhandled node type "expression"!
Format the above code snippet w/ prettier plugin version 0.1.0-next.4
Components inside <Markdown>
are deleted by formatting the document
Astro prettier plugin deletes components inside a Markdown
component
Install astro prettier plugin
Copy-and-paste below input into a new .astro
file
Format document
Expected: Inner component remains
Seen: Inner component deleted
Input document:
---
---
<div>
<Markdown>
<Fragment>test</Fragment>
</Markdown>
</div>
After format document:
---
---
<div>
<Markdown></Markdown>
</div>
My component takes attributes that can have values that are really long, especially arrays. The problem isn't exclusive to arrays but, for other types there's not much solutions outside of putting it on its own line.
Currently, the plugin generate the following formatting which is not really pleasant to read:
<SocialImage
texts={[{ content: "Princesseuh", attributes: { x: "55", y: "105", "font-size": "70px", fill: "#fefffe" } }, { content: "Introducing Astro: Ship Less JavaScript", attributes: { x: "50", y: "325", "font-size": "40px", fill: "#fefffe" } }]} />
I think it would be better to generate something that looks maybe like this:
<SocialImage
texts={[
{ content: "Princesseuh", attributes: { x: "55", y: "105", "font-size": "70px", fill: "#fefffe" } },
{ content: "Introducing Astro: Ship Less JavaScript", attributes: { x: "50", y: "325", "font-size": "40px", fill: "#fefffe" } }
]} />
Where the arrays elements get splitted at least on their own lines if they're too long (longer than printWidth perhaps? Or close to)
For context, Prettier produce the following result in Javascript:
const arrayTest = [
{
content: "Princesseuh",
attributes: { x: "55", y: "105", "font-size": "70px", fill: "#fefffe" },
},
{
content: "Introducing Astro: Ship Less JavaScript",
attributes: { x: "50", y: "325", "font-size": "40px", fill: "#fefffe" },
},
]
Which, in my opinion, is even better than what I'm suggesting, but either would definitely be an improvement over the current result
A way to workaround this at the moment is to manually format it and add a prettier-ignore comment before the array, like this:
<SocialImage
texts={// prettier-ignore
[
{ content: "Princesseuh", attributes: { x: "55", y: "105", "font-size": "70px", fill: "#fefffe" } },
{ content: "Introducing Astro: Ship Less JavaScript", attributes: { x: "50", y: "325", "font-size": "40px", fill: "#fefffe" } }
]} />
I want to format <style lang="sass">
blocks in astro components
Prettier adds quotes before template literals.
x-data=`{ count: ${initialCount} }`
becomes:
x-data="" `{ count: ${initialCount} }`
npm i -D prettier prettier-plugin-astro
May be related to withastro/compiler#437
Currently [email protected]
fails to format for me. Maybe it need to have a minimum supported astro version documented per version?
Is the astro parser as a dependent of this plugin pinned? Or will it interact w/ the astro version you have open?
the error I was seeing:
src/pages/nebula/[slug].astro[error] src/pages/nebula/[slug].astro: ParseError: (0 , import__2.default) is not a function
[email protected]
formats for me w/o error
When I use a component <Header />
or <Footer />
(maybe happens with more components, but I'm not aware of that) they are converted to <header />
and <footer />
HTML elements when they shouldn't
npm init astro
using template minimal
prettier
and prettier-plugin-astro
Header.astro
and Footer.astro
index.astro
with this:---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---
<html lang="en">
<body>
<Header />
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
<Footer />
</body>
</html>
prettier -w .
(maybe you'll have to run it twice)<Header />
to be <header />
(and the same with Footer)prettier-plugin-tailwindcss doesn't work in .astro
files.
npm i -D prettier prettier-plugin-astro prettier-plugin-tailwindcss
.With the singleQuote
option set to true
in .prettierrc
, HTML attributes are given single quotes rather than double. This is not the default behaviour of Prettier for HTML. The jsxSingleQuote
attribute appears to be the setting that controls this (within JSX files, unsure about other languages).
component.astro
before running Prettier:
<h1 class="site-title"></h1>
component.astro
after running Prettier:
<h1 class='site-title'></h1>
I've done some digging into the source, and it seems switching line 401 of printer.ts
from:
const quote = opts.singleQuote ? "'" : '"';
to
const quote = '"';
is enough to handle it, however it's not something I've thoroughly tested, and I've been unable to get the option-single-quote-true
and option-single-quote-false
tests re-enabled and working so far.
I did also notice here that the (currently disabled) option-jsx-single-quote-true
and option-jsx-single-quote
tests aren't testing the right thing. At the moment they're written to check if Prettier will change the quotes inside JSX expressions, whereas when I investigated on a test repo, the jsxSingleQuote
option actually controls whether or not attributes on elements in JSX are wrapped in double or single quotes.
Another related issue I noticed is that the attribute quotes issues above doesn't apply to templates nested inside JSX/JSX-like expressions, for example with this code, the class="list"
will be modified, but class="list-item"
won't be
<ul class="list">
{[1, 2, 3].map(value => <li class="list-item">{value}</li>)}
</ul>
I've not investigated enough to know if this plugin just doesn't run at all on nested expressions or if the issue is specific to the singleQuote
rule.
Part 1:
npm init astro
using any template and yarn
to install dependenciesyarn add --dev prettier prettier-plugin-astro@next
.prettierrc
with the following options:
{
"singleQuote": true
}
yarn prettier --write .
<html lang="en">
tag in src/pages/index.astro
will now be <html lang='en'>
.Part 2:
</main>
tag in index.astro
:
<ul class="list">
{[1, 2, 3].map(value => <li class="list-item">{value}</li>)}
</ul>
yarn prettier --write .
<ul class='list'>
{[1, 2, 3].map(value => <li class="list-item">{value}</li>)}
</ul>
Using a shorthand attribute with JSX in a conditional expression will result in an error.
---
const content = {};
const enable = true
---
{enable && <MyHeader {content} />}
https://stackblitz.com/edit/github-prettier-plugin-astro-demo-klsxqv?file=src%2Fpages%2Findex.astro
No error will occur if the shorthand is not used.
---
const content = {};
const enable = true
---
{enable && <MyHeader content={content} />}
I made it possible to check with stackblitz.
In the demo, if there is no error, the formatted code will be displayed.
https://stackblitz.com/edit/github-prettier-plugin-astro-demo-klsxqv?file=src%2Fpages%2Findex.astro
The plugin error out when trying to format an expression returning multiple roots, example:
Works
{["Astro"].map((hello) => (
<>
<div>Hello {hello}</div>
<div>Wow {hello}</div>
</>
))}
Doesn't work
{["Astro"].map((hello) => (
<div>Hello {hello}</div>
<div>Wow {hello}</div>
))}
See code example in description
Prettier/this plugin will add an unwanted semicolon at the end of methods with typed parameters.
(Just can't figure out how else to describe this)
Original:
<ul>
{items.map((item: any) => <li>{item}</li>)}
</ul>
Formatted:
<ul>
{items.map((item: any) => <li>{item}</li>);}
</ul>
This unwanted semicolon results in ts errors:
'}' expected.ts(1005)
Unexpected token. Did you mean `{'}'}` or `}`?ts(1381)
Error is not occurring in v0.4.0 nor when the explicitly set types of the method are omitted.
npm run format
When saving in a file, this plugin removes all line breaks in the style
tag when not top level:
Here is a picture of the same Astro code when with the style
tag top level:
style
tag (with or without lang prop) and put some styles in itlang
attribute in style tags is strippedWhen formating without a codefence it outputs the last tag incorrectly.
Input:
<style>
p {
color: red;
}
</style>
<p>lorem</p>
Output:
<p>lorem</p>
<style>
p {
color: red;
}
</p>
Expected output:
<p>lorem</p>
<style>
p {
color: red;
}
</style>
If there is a codefence it formats correctly. Like this:
---
---
<style>
p {
color: red;
}
</style>
<p>lorem</p>
I want to setup https://github.com/snowpackjs/astro/blob/main/.github/workflows/release.yml on the repo + sort out how to actually publish the package as well, but only in a very very beta form.
Just copy https://github.com/snowpackjs/astro/blob/main/.github/workflows/release.yml wholly into the project
I guess @snowpackjs/maintainers-core has the perms to setup the npm package?
No response
Found while running the plugin on the docs, the following:
{
// For best cross-browser support of sticky or fixed elements, they must not be nested
// inside elements that hide any overflow axis. The article content hides `overflow-x`,
// so we must place the mobile TOC here.
headers && (
<nav class="mobile-toc">
<TableOfContents
client:media="(max-width: 72em)"
headers={headers}
labels={{ onThisPage: t('rightSidebar.onThisPage'), overview: t('rightSidebar.overview') }}
isMobile={true}
/>
</nav>
)
}
gets transformed to:
{For best cross-browser support of sticky or fixed elements, they must not be nested
/
inside elements that hide any overflow axis. The article content hides `overflow-x`,
/
so we must place the mobile TOC here.
h
headers && (
<nav class="mobile-toc">
<TableOfContents
client:media="(max-width: 72em)"
headers={headers}
labels={{ onThisPage: t('rightSidebar.onThisPage'), overview: t('rightSidebar.overview') }}
isMobile={true}
/>
</nav>
)}
This kills the component.
{
// For best cross-browser support of sticky or fixed elements, they must not be nested
// inside elements that hide any overflow axis. The article content hides `overflow-x`,
// so we must place the mobile TOC here.
headers && (
<nav class="mobile-toc">
<TableOfContents
client:media="(max-width: 72em)"
headers={headers}
labels={{
onThisPage: t("rightSidebar.onThisPage"),
overview: t("rightSidebar.overview"),
}}
isMobile={true}
/>
</nav>
)
}
Some instances of <label> are incorrectly formated with the closing %gt; being placed on a nerw line
---
---
<label
>Text:
<span>ss</span>
</label>
Astro file as follows and run npx prettier -w .
as described in the README
---
---
<label>Text:
<span>ss</span>
</label>
This is a list of all the options that are missing from the plugin. We should probably add support for some.
This one I think should be supported. And it may already be supported but I was having problems testing it.
These ones I'm gonna need feedback:
These are the ones that I think shouldn't be supported:
No response
I want it to be clear how to get setup contributing to the project, and a more thorough guide would be helpful, which would list:
Add CONTRIBUTING.md
or contributing.md
to the repo
Just expand the section in the README
No response
When formatting with [email protected]
I run into this error:
src/components/atoms/Input.astro: Error: Unhandled node type "Script"!
โฏ npx prettier --parser astro src/components/atoms/Input.astro
src/components/atoms/Input.astro[error] src/components/atoms/Input.astro: Error: Unhandled node type "Script"!
[error] at Object.print (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier-plugin-astro/dist/index.js:706:19)
[error] at callPluginPrintFunction (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8447:26)
[error] at mainPrintInternal (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8396:22)
[error] at mainPrint (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8383:18)
[error] at AstPath.call (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8205:24)
[error] at printTopLevelParts (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier-plugin-astro/dist/index.js:445:39)
[error] at Object.print (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier-plugin-astro/dist/index.js:498:16)
[error] at callPluginPrintFunction (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8447:26)
[error] at mainPrintInternal (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8396:22)
[error] at mainPrint (/Users/calebjasik-defined/Github/defined.net/www/node_modules/prettier/index.js:8383:18)
over Input.astro
:
---
const {label, name, class, ...htmlProps} = Astro.props;
---
<style lang="scss">
.label-text {
font-size: 14px;
margin-bottom: 8px;
};
input {
display: block;
box-sizing: border-box;
height: 48px;
border: none;
outline: none;
border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--theme-input-border);
background-color: transparent;
padding: 16px;
font-weight: 600;
font-size: 16px;
color: var(--color-input-text);
margin-bottom: 24px;
&:focus {
/* Visible in Windows high-contrast themes */
outline-color: transparent;
outline-width: 2px;
outline-style: dotted;
box-shadow: inset 0 0 0 2px var(--theme-accent);
}
&::placeholder {
color: var(--theme-text-disabled);
font-weight: 500;
}
&:disabled {
background-color: var(--theme-button-dim);
color: var(--theme-text-disabled);
&::placeholder {
color: var(--theme-text-disabled);
}
}
/*
* HACK: color-scheme dark wreaks havoc, so we have to try to override the styles
*/
&:-webkit-autofill {
box-shadow: 0 0 0 100px var(--theme-bg) inset;
border: 2px solid var(--theme-input-border);
padding: 14px; /* Since we are changing from inset box-shadow to border, change padding to prevent layout shifts */
-webkit-text-fill-color: var(--theme-text) !important;
&:focus {
box-shadow: 0 0 0 100px var(--theme-bg) inset;
border: 2px solid var(--theme-accent);
padding: 14px;
}
}
}
</style>
<label>
<div class='label-text'>{label}</div>
<input class="width-100" name={name} {...htmlProps}/>
</label>
The prettier plugin is generating weird outputs for code blocks that are a bit longer writing in a single line.
<Image src="https://picsum.photos/200/300" alt="A random image" brightness={0.5} />
<Image
src="https://picsum.photos/200/300"
alt="A random image"
brightness={0.5}
/>
<!-- The prettier plugin is formatting the above two code blocks to the below code block -->
<Image src="https://picsum.photos/200/300" alt="A random image" brightness={0.5}
/>
I am not very familiar with how prettier plugins work but I think this plugin first minifies the code and then starts formatting it. I think that's why the multi-line code block is also getting formatted in the same way.
The prettier plugin should break the single-line code block into multiple lines and keep the multi-line code block as it is.
Input
<Markdown>
<Fragment>
<div>
<div/>
</div>
</Fragment>
</Markdown>
Output: unchanged
Expected
<Markdown>
<Fragment>
<div>
<div/>
</div>
</Fragment>
</Markdown>
See above. Plugin 0.0.11.
When you add any JavaScript expression like map
, forEach
in an .astro
file, the formatter plugin throws an error ParseError: (0 , import__2.default) is not a function
.
For example, when you add
const items = ["Dog", "Cat", "Platipus"];
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>
you get this error.
The above example come https://docs.astro.build/en/core-concepts/astro-components/#dynamic-jsx-expressions.
npm run format
and check the console outputUnder some conditions, all newlines are removed from style written in scss. This happens to the whole <style>
block (including any other rules) when something like the snippet below is included anywhere in it. The rest of the astro file isn't affected
test.astro
with the following content:---
---
<style lang="scss">
tag {
$foo: bar;
.class {
func($var);
}
}
</style>
[email protected]
---
---
<style lang="scss"> tag { $foo: bar; .class { func($var); } }</style>
With this .pretierrc
config file
{
"singleAttributePerLine": true
}
when formated the attribs should all be on own line
---
---
<h1 id="id" class="class">Astro</h1>
This is not listed as unimplemented in #54
slots
in astro components should be self-closing:
<slot></slot>
---> <slot />
For now Prettier/prettier-plugin-astro keep transforming <slot />
to <slot></slot>
which does not mirror slots
examples from the docs.
Opts out of default prettier behavior
Prettier is transforming
{/*
into {/\*
Also, JSX comments aren't taken into account by the AST / Syntax highlighter, still in Markdown.
They just behave as plain text (but that's another issue)
Using v0.1.0-next.4
I get this formatted code:
---
import ConfigOption from "./ConfigOption.astro";
const DEFAULT_LOCALE = "en";
const [options] = Astro.fetchContent<FetchContentResultBase>(
"../../nebula-docs/src/data/config-reference.md"
);
const { locale = DEFAULT_LOCALE } = Astro.props;
// Default locale options, for use as fallback if localization is not available
const fallbackOptions = options[DEFAULT_LOCALE].options;
// config options for locale
const configOptions = options[locale] ? options[locale].options : fallbackOptions;
---
<style lang="scss">
.config-block {
margin-bottom: 1.5rem;
}
</style>
{configOptions.map((option, optionIndex) => {
const fallbackOption = fallbackOptions[optionIndex]
return (
<div class="config-block">
<ConfigOption
isRequired={option.required}
description={option.description ?? fallbackOption.description}
example={option.example ?? fallbackOption.example}
>
<h2 id={option.name}>
{option.name}
<a
aria-hidden="true"
tabindex={-1}
class="heading-link no-underline"
href={`#${option.name}`}
>
<span class="fas fa-link" />
</a>
</h2>
</ConfigOption>
{option.suboptions &&
option.suboptions.map((suboption, subIndex) => {
const fallbackSuboption = fallbackOption.suboptions[subIndex]
return (
<ConfigOption
isRequired={suboption.required}
description={suboption.description ?? fallbackSuboption.description}
example={suboption.example ?? fallbackSuboption.example}
>
<h3 id={`${option.name}-${suboption.name}`.replace(new RegExp(", ", "g"), "-")}>
{option.name}.{suboption.name}
<a
aria-hidden="true"
tabindex={-1}
class="heading-link no-underline"
href={`#${option.name}-${suboption.name}`.replace(new RegExp(", ", "g"), "-")}
>
<span class="fas fa-link" />
</a>
</h3>
</ConfigOption>
)
})}
</div>
)
})}
The important part is that const fallbackOption = fallbackOptions[optionIndex]
gets formatted sans semicolon for some reason? Presumably b/c of different config defaults or a different parser/printer?
It seems like lines of code in a block in the body like the map(() => {})
will be formatted w/o semicolon v.s. the frontmatter will have semicolons by default
Format the above file; see that nothing changes
Input:
<div>
<a ></a>
<!-- test -->
</div>
Output: unchanged
Works fine if a
is after comment.
In 0.9, 0.10.
See above.
When using spread properties on astro components, the formatter ignores the file because of the Error: Unhandled node type "Spread"
.
const meta = { title: "My Title", lang: "en" }
<BaseLayout {...meta}>Foo</BaseLayout>
Error: Unhandled node type "Spread"
.A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.