style: run pretteier on web/css batch 1 #20691

nschonni · 2022-09-13T18:59:16Z

Discarded a few changes for thins like overlow where the formatting would have gone agains the example intent, and some mixed good/bad samples that fixed parts that were explicitly wrong

estelle

There are a few places where the original was better.

estelle · 2022-09-14T00:20:42Z

files/en-us/web/css/-webkit-text-security/index.md

@@ -41,8 +41,7 @@ Try typing in the field below. If your browser supports this property, the chara
 #### HTML

 ```html
-<label for="name">Name:</label>
-<input type="text" name="name" id="name" />
+<label for="name">Name:</label> <input type="text" name="name" id="name" />


Suggested change

<label for="name">Name:</label> <input type="text" name="name" id="name" />

<label for="name">Name:</label>

<input type="text" name="name" id="name" />

example code is more legible on two lines.

Yeah, I'm not sure how to make Prettier not do this. Maybe using label wrapping might make it more controlable

estelle · 2022-09-14T00:22:21Z

files/en-us/web/css/@font-face/src/index.md

-  src: local(Example Font),
-       url('examplefont.woff') format("woff"),
-       url('examplefont.otf') format("opentype");
+  src: local(Example Font), url("examplefont.woff") format("woff"), url("examplefont.otf")


The original is better. It's also what the page is teaching, so it should be in the most legible format.

In the PR series Run Prettier on CSS code fences, part 17 #20655, we skipped these as the blocks are not getting prettier.

It was decided to mark these with css-nolint later.

More precisely, it was decided to revisit them later. Once we have fixed all the non-controversial ones, or the ones that can be easily fixed, we can focus on the problematic ones and see how to fix them.

I don't want to put css-nolint everywhere.

Maybe we will not run Prettier automatically, but only locally, followed by manual correction.

Honestly, I don't know yet.

estelle · 2022-09-14T00:23:05Z

files/en-us/web/css/@font-face/src/index.md

-       local(Example Font-Bold), /* postscript name */
-       url('examplefont.woff') format("woff"),
-       url('examplefont.otf') format("opentype");
+  src: local(Example Font Bold), /* full font name */ local(Example Font-Bold), /* postscript name */


original is better. As it is what this page is teaching, it must be kept.

estelle · 2022-09-14T00:25:38Z

files/en-us/web/css/@import/index.md

-@import url supports( supports-query );
-@import url supports( supports-query ) list-of-media-queries;
+@import url supports(supports-query);
+@import url supports(supports-query) list-of-media-queries;


I find the original more legible.
supports-query is not the actual parameter, but, rather, a value type.

estelle · 2022-09-14T00:26:11Z

files/en-us/web/css/@import/index.md

-@import url layer( layer-name ) list-of-media-queries;
-@import url layer( layer-name ) supports( supports-query ) list-of-media-queries;
+@import url layer(layer-name);
+@import url layer(layer-name) list-of-media-queries;


estelle · 2022-09-14T00:27:04Z

files/en-us/web/css/@media/-moz-device-pixel-ratio/index.md

-   (min-resolution: 2dppx),
-   /* dppx fallback */
-   (min-resolution: 192dpi);
+  /* Older Firefox browsers (prior to firefox 16) */ (min--moz-device-pixel-ratio: 2),


original is better.
If we must go on one line, put comment after the code.

estelle · 2022-09-14T00:29:20Z

files/en-us/web/css/@media/pointer/index.md

@@ -34,8 +34,7 @@ This example creates a small checkbox for users with fine primary pointers and a
 ### HTML

 ```html
-<input id="test" type="checkbox" />
-<label for="test">Look at me!</label>
+<input id="test" type="checkbox" /> <label for="test">Look at me!</label>


more legible on two lines

estelle · 2022-09-14T00:50:21Z

files/en-us/web/css/@media/shape/index.md

+    media="screen and (shape: rect)"
+    rel="stylesheet"
+    href="rectangle.css" />
+  <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />


why are these two different?

Think it's do do with the first hitting a line length that caused it to break on the attributes instead of a single line. I think there is an option to force the previous style, but it doesn't seem like overrides are the way this repo wants to go for now

estelle

Gave official suggestions for the things i had issues with so they can either be approved or rejected and we can move forward with a merge sooner rather than later..

files/en-us/web/css/@font-face/src/index.md

files/en-us/web/css/@import/index.md

files/en-us/web/css/@media/-moz-device-pixel-ratio/index.md

files/en-us/web/css/@media/pointer/index.md

files/en-us/web/css/@media/shape/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* style: run pretteier on web/css * Apply suggestions from code review Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

A `format();` argument was accidentally doubled when applying suggested changes during review of mdn#20691.

@font-face

* CSS(src): Fix invalid example @font-face def A `format();` argument was accidentally doubled when applying suggested changes during review of #20691. * Update index.md * Update index.md * Update index.md * Update index.md --------- Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

nschonni requested a review from a team as a code owner September 13, 2022 18:59

nschonni requested review from estelle and removed request for a team September 13, 2022 18:59

github-actions bot added the Content:CSS Cascading Style Sheets docs label Sep 13, 2022

This comment was marked as resolved.

Sign in to view

estelle reviewed Sep 14, 2022

View reviewed changes

estelle reviewed Sep 20, 2022

View reviewed changes

nschonni and others added 2 commits September 20, 2022 18:30

style: run pretteier on web/css

9781ec5

Apply suggestions from code review

ca43c8a

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

nschonni force-pushed the prettier-web-css-1 branch from 4b22ab4 to ca43c8a Compare September 20, 2022 22:31

estelle approved these changes Sep 25, 2022

View reviewed changes

estelle merged commit c18a696 into mdn:main Sep 25, 2022

nschonni deleted the prettier-web-css-1 branch September 25, 2022 16:56

ferdnyc added a commit to ferdnyc/content-1 that referenced this pull request Jul 5, 2024

CSS(src): Fix invalid example @font-face def

11c0411

A `format();` argument was accidentally doubled when applying suggested changes during review of mdn#20691.

ferdnyc mentioned this pull request Jul 5, 2024

CSS(src): Fix invalid example @font-face def #34655

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style: run pretteier on web/css batch 1 #20691

style: run pretteier on web/css batch 1 #20691

nschonni commented Sep 13, 2022

This comment was marked as resolved.

estelle left a comment

estelle Sep 14, 2022

estelle Sep 14, 2022

nschonni Sep 14, 2022

estelle Sep 14, 2022

OnkarRuikar Sep 14, 2022

teoli2003 Sep 14, 2022 •

edited

Loading

estelle Sep 14, 2022

estelle Sep 14, 2022

estelle Sep 14, 2022

estelle Sep 14, 2022

estelle Sep 14, 2022

estelle Sep 14, 2022

nschonni Sep 14, 2022

estelle left a comment

	<label for="name">Name:</label> <input type="text" name="name" id="name" />
	<label for="name">Name:</label>
	<input type="text" name="name" id="name" />

style: run pretteier on web/css batch 1 #20691

style: run pretteier on web/css batch 1 #20691

Conversation

nschonni commented Sep 13, 2022

This comment was marked as resolved.

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

teoli2003 Sep 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

teoli2003 Sep 14, 2022 •

edited

Loading