Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML: Fix format on style[lang="sass"] #9051

Merged
merged 12 commits into from Aug 25, 2020
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion changelog_unreleased/TEMPLATE.md
Expand Up @@ -24,7 +24,7 @@

#### Title ([#XXXX](https://github.com/prettier/prettier/pull/XXXX) by [@user](https://github.com/user))

Optional description if it makes sense.
<!-- Optional description if it makes sense. -->

<!-- prettier-ignore -->
```jsx
Expand Down
21 changes: 21 additions & 0 deletions changelog_unreleased/html/pr-9051.md
@@ -0,0 +1,21 @@
#### Fix format on `style[lang="sass"]` ([#9051](https://github.com/prettier/prettier/pull/9051) by [@fisker](https://github.com/fisker))

<!-- prettier-ignore -->
```jsx
<!-- Input -->
<style lang="sass">
.hero
@include background-centered
</style>

<!-- Prettier stable -->
<style lang="sass">
.hero @include background-centered;
</style>

<!-- Prettier master -->
<style lang="sass">
.hero
@include background-centered
</style>
```
5 changes: 2 additions & 3 deletions src/language-html/utils.js
Expand Up @@ -399,7 +399,7 @@ function _inferScriptParser(node) {

function inferStyleParser(node) {
const { lang } = node.attrMap;
if (lang === "postcss" || lang === "css") {
if (!lang || lang === "postcss" || lang === "css") {
return "css";
}

Expand All @@ -421,13 +421,12 @@ function inferScriptParser(node, options) {
}

if (node.name === "style") {
return inferStyleParser(node) || "css";
return inferStyleParser(node);
}

if (options && isVueNonHtmlBlock(node, options)) {
return (
_inferScriptParser(node) ||
inferStyleParser(node) ||
(!("src" in node.attrMap) && getParserName(node.attrMap.lang, options))
);
}
Expand Down
81 changes: 81 additions & 0 deletions tests/html/multiparser/unknown/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`unknown-lang.html format 1`] = `
====================================options=====================================
parsers: ["html"]
printWidth: 80
| printWidth
=====================================input======================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style lang="unknown">
.prettier {
content:
"awesome"
}
</style>

<script lang="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown" lang="unknown">
prettier.is
.awesome(
)
</script>
</body>
</html>

=====================================output=====================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style lang="unknown">
.prettier {
content:
"awesome"
}
</style>

<script lang="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown" lang="unknown">
prettier.is
.awesome(
)
</script>
</body>
</html>

================================================================================
`;
1 change: 1 addition & 0 deletions tests/html/multiparser/unknown/jsfmt.spec.js
@@ -0,0 +1 @@
run_spec(__dirname, ["html"]);
34 changes: 34 additions & 0 deletions tests/html/multiparser/unknown/unknown-lang.html
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style lang="unknown">
.prettier {
content:
"awesome"
}
</style>

<script lang="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown" lang="unknown">
prettier.is
.awesome(
)
</script>
</body>
</html>
72 changes: 72 additions & 0 deletions tests/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
Expand Up @@ -164,6 +164,78 @@ printWidth: 80
================================================================================
`;

exports[`unknown.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
printWidth: 80
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add tests for the case --vue-indent-script-and-style is true?

Copy link
Sponsor Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

embeddedLanguageFormatting: "off" vueIndentScriptAndStyle: true tested

| printWidth
=====================================input======================================
<style lang="unknown">
.prettier {
content:
"awesome"
}
</style>

<script lang="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown" lang="unknown">
prettier.is
.awesome(
)
</script>

<template lang="unknown">
<prettier>
awesome
</prettier>
</template>

=====================================output=====================================
<style lang="unknown">
.prettier {
content:
"awesome"
}
</style>

<script lang="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown" lang="unknown">
prettier.is
.awesome(
)
</script>

<template lang="unknown">
<prettier>
awesome
</prettier>
</template>

================================================================================
`;

exports[`vue-component.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
Expand Down
30 changes: 30 additions & 0 deletions tests/vue/multiparser/unknown.vue
@@ -0,0 +1,30 @@
<style lang="unknown">
.prettier {
content:
"awesome"
}
</style>

<script lang="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown">
prettier.is
.awesome(
)
</script>

<script type="unknown" lang="unknown">
prettier.is
.awesome(
)
</script>

<template lang="unknown">
<prettier>
awesome
</prettier>
</template>
2 changes: 1 addition & 1 deletion tests_config/run_spec.js
Expand Up @@ -36,7 +36,7 @@ const unstableTests = new Map(
"js/comments-closure-typecast/iife.js",
"markdown/spec/example-234.md",
"markdown/spec/example-235.md",
"html/multiparser-js/script-tag-escaping.html",
"html/multiparser/js/script-tag-escaping.html",
[
"js/multiparser-markdown/codeblock.js",
(options) => options.proseWrap === "always",
Expand Down