Skip to content

Commit 460ea2f

Browse files
fiskerlydell
fisker
authored and
lydell
committed
Format style[lang="css"] (prettier#6875)
1 parent 597dae8 commit 460ea2f

File tree

4 files changed

+399
-1
lines changed

4 files changed

+399
-1
lines changed

‎CHANGELOG.unreleased.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1434,6 +1434,33 @@ Invalid configuration file `.invalid-config`: ...
14341434
@FoO: bar;
14351435
```
14361436

1437+
#### Vue: Format `style[lang="css"]` ([#6875] by [@fisker])
1438+
1439+
Previously, `<style>` element with attribute `lang` equals to `css` is not formatted.
1440+
1441+
<!-- prettier-ignore -->
1442+
```html
1443+
<!-- Input -->
1444+
<style lang="css">
1445+
a {
1446+
color: #F00
1447+
}</style>
1448+
1449+
<!-- Output (Prettier stable) -->
1450+
<style lang="css">
1451+
a {
1452+
color: #F00
1453+
}
1454+
</style>
1455+
1456+
<!-- Output (Prettier master) -->
1457+
<style lang="css">
1458+
a {
1459+
color: #f00;
1460+
}
1461+
</style>
1462+
```
1463+
14371464
[#5682]: https://github.com/prettier/prettier/pull/5682
14381465
[#6657]: https://github.com/prettier/prettier/pull/6657
14391466
[#5910]: https://github.com/prettier/prettier/pull/5910
@@ -1486,6 +1513,7 @@ Invalid configuration file `.invalid-config`: ...
14861513
[#6848]: https://github.com/prettier/prettier/pull/6848
14871514
[#6856]: https://github.com/prettier/prettier/pull/6856
14881515
[#6865]: https://github.com/prettier/prettier/pull/6865
1516+
[#6875]: https://github.com/prettier/prettier/pull/6875
14891517
[#6863]: https://github.com/prettier/prettier/pull/6863
14901518
[@brainkim]: https://github.com/brainkim
14911519
[@duailibe]: https://github.com/duailibe

‎src/language-html/utils.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,11 @@ function inferScriptParser(node) {
385385
}
386386

387387
if (node.name === "style") {
388-
if (!node.attrMap.lang || node.attrMap.lang === "postcss") {
388+
if (
389+
!node.attrMap.lang ||
390+
node.attrMap.lang === "postcss" ||
391+
node.attrMap.lang === "css"
392+
) {
389393
return "css";
390394
}
391395

‎tests/html_vue/__snapshots__/jsfmt.spec.js.snap‎

Lines changed: 320 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2102,6 +2102,326 @@ semi: false
21022102
================================================================================
21032103
`;
21042104
2105+
exports[`style.vue 1`] = `
2106+
====================================options=====================================
2107+
parsers: ["vue"]
2108+
printWidth: 80
2109+
| printWidth
2110+
=====================================input======================================
2111+
<script>
2112+
</script>
2113+
2114+
<style>
2115+
#foo1{ color: #f00;
2116+
}
2117+
</style>
2118+
<style scoped>
2119+
#foo2{ color: #f00;
2120+
}
2121+
</style>
2122+
2123+
<style lang="css">
2124+
#foo3{ color: #f00;
2125+
}
2126+
</style>
2127+
<style lang="css" scoped>
2128+
#foo4{ color: #f00;
2129+
}
2130+
</style>
2131+
2132+
<style lang="less">
2133+
#foo5{ color: #f00;
2134+
}
2135+
</style>
2136+
<style lang="less" scoped>
2137+
#foo6{
2138+
@color: #f00;
2139+
color: @color;
2140+
}
2141+
</style>
2142+
2143+
2144+
<style lang="scss">
2145+
#foo8{
2146+
$color: #f00;
2147+
color: $color;
2148+
}
2149+
</style>
2150+
<style lang="scss" scoped>
2151+
#foo8{
2152+
$color: #f00;
2153+
color: $color;
2154+
}
2155+
</style>
2156+
2157+
2158+
=====================================output=====================================
2159+
<script></script>
2160+
2161+
<style>
2162+
#foo1 {
2163+
color: #f00;
2164+
}
2165+
</style>
2166+
<style scoped>
2167+
#foo2 {
2168+
color: #f00;
2169+
}
2170+
</style>
2171+
2172+
<style lang="css">
2173+
#foo3 {
2174+
color: #f00;
2175+
}
2176+
</style>
2177+
<style lang="css" scoped>
2178+
#foo4 {
2179+
color: #f00;
2180+
}
2181+
</style>
2182+
2183+
<style lang="less">
2184+
#foo5 {
2185+
color: #f00;
2186+
}
2187+
</style>
2188+
<style lang="less" scoped>
2189+
#foo6 {
2190+
@color: #f00;
2191+
color: @color;
2192+
}
2193+
</style>
2194+
2195+
<style lang="scss">
2196+
#foo8 {
2197+
$color: #f00;
2198+
color: $color;
2199+
}
2200+
</style>
2201+
<style lang="scss" scoped>
2202+
#foo8 {
2203+
$color: #f00;
2204+
color: $color;
2205+
}
2206+
</style>
2207+
2208+
================================================================================
2209+
`;
2210+
2211+
exports[`style.vue 2`] = `
2212+
====================================options=====================================
2213+
parsers: ["vue"]
2214+
printWidth: 80
2215+
trailingComma: "es5"
2216+
| printWidth
2217+
=====================================input======================================
2218+
<script>
2219+
</script>
2220+
2221+
<style>
2222+
#foo1{ color: #f00;
2223+
}
2224+
</style>
2225+
<style scoped>
2226+
#foo2{ color: #f00;
2227+
}
2228+
</style>
2229+
2230+
<style lang="css">
2231+
#foo3{ color: #f00;
2232+
}
2233+
</style>
2234+
<style lang="css" scoped>
2235+
#foo4{ color: #f00;
2236+
}
2237+
</style>
2238+
2239+
<style lang="less">
2240+
#foo5{ color: #f00;
2241+
}
2242+
</style>
2243+
<style lang="less" scoped>
2244+
#foo6{
2245+
@color: #f00;
2246+
color: @color;
2247+
}
2248+
</style>
2249+
2250+
2251+
<style lang="scss">
2252+
#foo8{
2253+
$color: #f00;
2254+
color: $color;
2255+
}
2256+
</style>
2257+
<style lang="scss" scoped>
2258+
#foo8{
2259+
$color: #f00;
2260+
color: $color;
2261+
}
2262+
</style>
2263+
2264+
2265+
=====================================output=====================================
2266+
<script></script>
2267+
2268+
<style>
2269+
#foo1 {
2270+
color: #f00;
2271+
}
2272+
</style>
2273+
<style scoped>
2274+
#foo2 {
2275+
color: #f00;
2276+
}
2277+
</style>
2278+
2279+
<style lang="css">
2280+
#foo3 {
2281+
color: #f00;
2282+
}
2283+
</style>
2284+
<style lang="css" scoped>
2285+
#foo4 {
2286+
color: #f00;
2287+
}
2288+
</style>
2289+
2290+
<style lang="less">
2291+
#foo5 {
2292+
color: #f00;
2293+
}
2294+
</style>
2295+
<style lang="less" scoped>
2296+
#foo6 {
2297+
@color: #f00;
2298+
color: @color;
2299+
}
2300+
</style>
2301+
2302+
<style lang="scss">
2303+
#foo8 {
2304+
$color: #f00;
2305+
color: $color;
2306+
}
2307+
</style>
2308+
<style lang="scss" scoped>
2309+
#foo8 {
2310+
$color: #f00;
2311+
color: $color;
2312+
}
2313+
</style>
2314+
2315+
================================================================================
2316+
`;
2317+
2318+
exports[`style.vue 3`] = `
2319+
====================================options=====================================
2320+
parsers: ["vue"]
2321+
printWidth: 80
2322+
semi: false
2323+
| printWidth
2324+
=====================================input======================================
2325+
<script>
2326+
</script>
2327+
2328+
<style>
2329+
#foo1{ color: #f00;
2330+
}
2331+
</style>
2332+
<style scoped>
2333+
#foo2{ color: #f00;
2334+
}
2335+
</style>
2336+
2337+
<style lang="css">
2338+
#foo3{ color: #f00;
2339+
}
2340+
</style>
2341+
<style lang="css" scoped>
2342+
#foo4{ color: #f00;
2343+
}
2344+
</style>
2345+
2346+
<style lang="less">
2347+
#foo5{ color: #f00;
2348+
}
2349+
</style>
2350+
<style lang="less" scoped>
2351+
#foo6{
2352+
@color: #f00;
2353+
color: @color;
2354+
}
2355+
</style>
2356+
2357+
2358+
<style lang="scss">
2359+
#foo8{
2360+
$color: #f00;
2361+
color: $color;
2362+
}
2363+
</style>
2364+
<style lang="scss" scoped>
2365+
#foo8{
2366+
$color: #f00;
2367+
color: $color;
2368+
}
2369+
</style>
2370+
2371+
2372+
=====================================output=====================================
2373+
<script></script>
2374+
2375+
<style>
2376+
#foo1 {
2377+
color: #f00;
2378+
}
2379+
</style>
2380+
<style scoped>
2381+
#foo2 {
2382+
color: #f00;
2383+
}
2384+
</style>
2385+
2386+
<style lang="css">
2387+
#foo3 {
2388+
color: #f00;
2389+
}
2390+
</style>
2391+
<style lang="css" scoped>
2392+
#foo4 {
2393+
color: #f00;
2394+
}
2395+
</style>
2396+
2397+
<style lang="less">
2398+
#foo5 {
2399+
color: #f00;
2400+
}
2401+
</style>
2402+
<style lang="less" scoped>
2403+
#foo6 {
2404+
@color: #f00;
2405+
color: @color;
2406+
}
2407+
</style>
2408+
2409+
<style lang="scss">
2410+
#foo8 {
2411+
$color: #f00;
2412+
color: $color;
2413+
}
2414+
</style>
2415+
<style lang="scss" scoped>
2416+
#foo8 {
2417+
$color: #f00;
2418+
color: $color;
2419+
}
2420+
</style>
2421+
2422+
================================================================================
2423+
`;
2424+
21052425
exports[`tag-name.vue 1`] = `
21062426
====================================options=====================================
21072427
parsers: ["vue"]

0 commit comments

Comments
 (0)