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 all 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>
219 changes: 219 additions & 0 deletions tests/vue/multiparser/unknown/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,219 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`unknown.vue - {"embeddedLanguageFormatting":"off"} format 1`] = `
====================================options=====================================
embeddedLanguageFormatting: "off"
parsers: ["vue"]
printWidth: 80
| 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[`unknown.vue - {"vueIndentScriptAndStyle":true} format 1`] = `
====================================options=====================================
parsers: ["vue"]
printWidth: 80
vueIndentScriptAndStyle: true
| 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[`unknown.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
printWidth: 80
| 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>

================================================================================
`;
3 changes: 3 additions & 0 deletions tests/vue/multiparser/unknown/jsfmt.spec.js
@@ -0,0 +1,3 @@
run_spec(__dirname, ["vue"]);
run_spec(__dirname, ["vue"], { vueIndentScriptAndStyle: true });
run_spec(__dirname, ["vue"], { embeddedLanguageFormatting: "off" });