chore: format

docs/styling/bundling.md

@@ -6,11 +6,11 @@ title: CSS Bundling
 
 Some CSS features in Remix bundle styles into a single file that you load manually into the application including:
 
-- [CSS Side Effect Imports](./css-imports)
-- [CSS Modules](./css-modules)
-- [Vanilla Extract](./vanilla-extract)
+- [CSS Side Effect Imports][css-side-effect-imports]
+- [CSS Modules][css-modules]
+- [Vanilla Extract][vanilla-extract]
 
-Note that any [regular stylesheet imports](./css) will remain as separate files.
+Note that any [regular stylesheet imports][regular-stylesheet-imports] will remain as separate files.
 
 ## Usage
 
@@ -39,3 +39,7 @@ With this link tag inserted into the page, you're now ready to start using the v
 Avoid using `export *` due to an [issue with esbuild's CSS tree shaking][esbuild-css-tree-shaking-issue].
 
 [esbuild-css-tree-shaking-issue]: https://github.com/evanw/esbuild/issues/1370
+[css-side-effect-imports]: ./css-imports
+[css-modules]: ./css-modules
+[vanilla-extract]: ./vanilla-extract
+[regular-stylesheet-imports]: ./css

docs/styling/css-imports.md

@@ -4,7 +4,7 @@ title: CSS Imports
 
 # CSS Side Effect Imports
 
-Some NPM packages use side effect imports of plain CSS files (e.g. `import "./styles.css"`) to declare the CSS dependencies of JavaScript files. If you want to consume one of these packages, first ensure you've set up [CSS bundling][css-bundling] in your application.
+Some NPM packages use side effect imports of plain CSS files (e.g. `import "./styles.css"`) to declare the CSS dependencies of JavaScript files. If you want to consume one of these packages, first ensure you've set up \[CSS bundling]\[css-bundling] in your application.
 
 For example, a module may have source code like this:
 

docs/styling/css-in-js.md

@@ -4,9 +4,9 @@ title: CSS in JS
 
 # CSS in JS libraries
 
-Most CSS-in-JS approaches aren't recommended to be use in Remix because they require your app to render completely before you know what the styles are. This is a performance issue and prevents streaming features like [`defer`](../utils/defer).
+Most CSS-in-JS approaches aren't recommended to be use in Remix because they require your app to render completely before you know what the styles are. This is a performance issue and prevents streaming features like [`defer`][defer].
 
-Here's some sample code to show how you might use Styled Components with Remix (you can also [find a runnable example in the Remix examples repository][styled-components-example]):
+Here's some sample code to show how you might use Styled Components with Remix (you can also \[find a runnable example in the Remix examples repository]\[styled-components-example]):
 
 1. First you'll need to put a placeholder in your root component to control where the styles are inserted.
 
@@ -86,6 +86,8 @@ Here's some sample code to show how you might use Styled Components with Remix (
    }
    ```
 
-Other CSS-in-JS libraries will have a similar setup. If you've got a CSS framework working well with Remix, please [contribute an example][examples]!
+Other CSS-in-JS libraries will have a similar setup. If you've got a CSS framework working well with Remix, please \[contribute an example]\[examples]!
 
-NOTE: You may run into hydration warnings when using Styled Components. Hopefully [this issue][styled-components-issue] will be fixed soon.
+NOTE: You may run into hydration warnings when using Styled Components. Hopefully \[this issue]\[styled-components-issue] will be fixed soon.
+
+[defer]: ../utils/defer

docs/styling/css.md

@@ -58,7 +58,7 @@ Websites large and small usually have a set of shared components used throughout
 
 #### Shared stylesheet
 
-The first approach is very simple. Put them all in a `shared.css` file included in `app/root.tsx`. That makes it easy for the components themselves to share CSS code (and your editor to provide intellisense for things like [custom properties][custom-properties]), and each component already needs a unique module name in JavaScript anyway, so you can scope the styles to a unique class name or data attribute:
+The first approach is very simple. Put them all in a `shared.css` file included in `app/root.tsx`. That makes it easy for the components themselves to share CSS code (and your editor to provide intellisense for things like \[custom properties]\[custom-properties]), and each component already needs a unique module name in JavaScript anyway, so you can scope the styles to a unique class name or data attribute:
 
 ```css filename=app/styles/shared.css
 /* scope with class names */
@@ -244,7 +244,7 @@ While that's a bit of boilerplate it enables a lot:
 - Co-located styles with your components
 - The only CSS ever loaded is the CSS that's used on the current page
 - When your components aren't used by a route, their CSS is unloaded from the page
-- Remix will prefetch the CSS for the next page with [`<Link prefetch>`][link]
+- Remix will prefetch the CSS for the next page with \[`<Link prefetch>`]\[link]
 - When one component's styles change, browser and CDN caches for the other components won't break because they are all have their own URLs.
 - When a component's JavaScript changes but its styles don't, the cache is not broken for the styles
 
@@ -283,7 +283,7 @@ export const CopyToClipboard = React.forwardRef(
 CopyToClipboard.displayName = "CopyToClipboard";
 ```
 
-Not only will this make the asset high priority in the network tab, but Remix will turn that `preload` into a `prefetch` when you link to the page with [`<Link prefetch>`][link], so the SVG background is prefetched, in parallel, with the next route's data, modules, stylesheets, and any other preloads.
+Not only will this make the asset high priority in the network tab, but Remix will turn that `preload` into a `prefetch` when you link to the page with \[`<Link prefetch>`]\[link], so the SVG background is prefetched, in parallel, with the next route's data, modules, stylesheets, and any other preloads.
 
 ### Link Media Queries
 

docs/styling/postcss.md

@@ -42,7 +42,7 @@ module.exports = (ctx) => {
 
 You can use CSS preprocessors like LESS and SASS. Doing so requires running an additional build process to convert these files to CSS files. This can be done via the command line tools provided by the preprocessor or any equivalent tool.
 
-Once converted to CSS by the preprocessor, the generated CSS files can be imported into your components via the [Route Module `links` export][route-module-links] function, or included via [side effect imports][css-side-effect-imports] when using [CSS bundling][css-bundling], just like any other CSS file in Remix.
+Once converted to CSS by the preprocessor, the generated CSS files can be imported into your components via the \[Route Module `links` export]\[route-module-links] function, or included via \[side effect imports]\[css-side-effect-imports] when using \[CSS bundling]\[css-bundling], just like any other CSS file in Remix.
 
 To ease development with CSS preprocessors you can add npm scripts to your `package.json` that generate CSS files from your SASS or LESS files. These scripts can be run in parallel alongside any other npm scripts that you run for developing a Remix application.
 

docs/styling/tailwind.md

@@ -6,7 +6,7 @@ title: Tailwind
 
 Perhaps the most popular way to style a Remix application in the community is to use [Tailwind CSS][tailwind].
 
-Remix supports tailwind automatically if `tailwind.config.js` is present in the root of your project. You can disable it in [Remix Config](../file-conventions/remix-config#tailwind)
+Remix supports tailwind automatically if `tailwind.config.js` is present in the root of your project. You can disable it in [Remix Config][remix-config]
 
 Tailwind has the benefits of inline-style co-location for developer ergonomics and is able to generate a CSS file for Remix to import. The generated CSS file generally caps out to a reasonable size, even for large applications. Load that file into the `root.tsx` links and be done with it.
 
@@ -62,7 +62,7 @@ export const links: LinksFunction = () => [
 
 With this setup in place, you can also use [Tailwind's functions and directives][tailwind-functions-and-directives] anywhere in your CSS. Note that Tailwind will warn that no utility classes were detected in your source files if you never used it before.
 
-Tailwind doesn't compile CSS for older browsers by default, so if you'd like to achieve this using a PostCSS-based tool like [Autoprefixer][autoprefixer], you'll need to leverage Remix's [built-in PostCSS support][built-in-post-css-support]. When using both PostCSS and Tailwind, the Tailwind plugin will be automatically included if it's missing, but you can also choose to manually include the Tailwind plugin in your PostCSS config instead if you prefer.
+Tailwind doesn't compile CSS for older browsers by default, so if you'd like to achieve this using a PostCSS-based tool like \[Autoprefixer]\[autoprefixer], you'll need to leverage Remix's [built-in PostCSS support][built-in-post-css-support]. When using both PostCSS and Tailwind, the Tailwind plugin will be automatically included if it's missing, but you can also choose to manually include the Tailwind plugin in your PostCSS config instead if you prefer.
 
 If you're using VS Code, it's recommended you install the [Tailwind IntelliSense extension][tailwind-intelli-sense-extension] for the best developer experience.
 
@@ -79,3 +79,4 @@ Alternatively, you can use [PostCSS][built-in-post-css-support] with the [postcs
 [tailwind-intelli-sense-extension]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
 [built-in-post-css-support]: ./postcss
 [postcss-import]: https://github.com/postcss/postcss-import
+[remix-config]: ../file-conventions/remix-config#tailwind