(docs) add more docs about relative path issue in monorepo (#1594)

docs/preprocessors/other-css-preprocessors.md

@@ -13,6 +13,24 @@ export default { preprocess: sveltePreprocess({ postcss: true }) };
 
 Note that this assumes that you have a ESM-style project, which means there's `"type": "module"` in your project's `package.json`. If not, you need to use CommonJS in your `svelte.config.js`, things like `import ...` or `export const ...` are not allowed. You then also switch the `postcss.config` `cjs` file ending to `js`.
 
+If your `svelte.config.js` is not in the workspace root (for example your `svelte.config.js` is within `/frontend`), you'll have to pass in the `configFilePath` config. This is because the relative path is resolved relative to the working directory of the node process.
+
+```js
+import sveltePreprocess from 'svelte-preprocess';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default {
+    preprocess: sveltePreprocess({
+        postcss: {
+            configFilePath: join(__dirname, 'postcss.config.cjs')
+        }
+    })
+};
+```
+
 2. Either add `lang="postcss"` to each of your `<style>` tags where you plan on using PostCSS, or disable CSS diagnostics completely by adding `"svelte.plugin.css.diagnostics.enable": false` within your settings. If you still want diagnostics, install the [Stylelint VSCode extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint). If you want better syntax highlighting, install the [PostCSS VSCode extension](https://marketplace.visualstudio.com/items?itemName=csstools.postcss).
 
 ## TailwindCSS
@@ -24,6 +42,16 @@ To use TailwindCSS with the VSCode extension:
 1. Setup the `svelte.config.js` the same way you would for PostCSS - see the section above (first point) for more details
 2. Install the [Tailwind CSS VSCode extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
 3. Either add `lang="postcss"` to each of your `<style>` tags where you plan on using the Tailwind CSS directives such as `@apply`, or disable CSS diagnostics completely by adding `"svelte.plugin.css.diagnostics.enable": false` within your settings. If you still want diagnostics, install the [Stylelint VSCode extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) and [configure it accordingly](https://scottspence.com/2021/03/15/stylelint-configuration-for-tailwindcss/). Note that within your config files you can only use node-syntax, things like `import ...` or `export const ...` are not allowed. To disable css checks for `svelte-check`, use the option `--diagnostic-sources "js,svelte"`.
+4. If your `tailwind.config.js` is not in the workspace root. Or if your project is not in the workspace root. Make sure you pass in the path to your tailwind config file in your `postcss` [config file](https://github.com/postcss/postcss-load-config#postcssrcjs-or-postcssconfigjs).
+
+```js
+const path = require('path');
+const tailwindcss = require('tailwindcss');
+
+module.exports = {
+    plugins: [tailwindcss(path.resolve(__dirname, './tailwind.config.cjs'))]
+};
+```
 
 ## SASS
 

docs/preprocessors/scss-less.md

@@ -81,7 +81,23 @@ The `node-sass` package is very sensitive to node versions. It may be possible t
 
 ### SCSS: Using `includePaths` does not work
 
-If you use `includePaths` with relative paths, those paths will be resolved relative to the node process, not relative to the config file. So if you `svelte.config.js` is within `frontend`, the path `theme` will _NOT_ resolve to `frontend/theme` but to `<node process root>/theme` (which might be the same as `frontend`). To ensure it always resolves relative to the config file, do this (assuming a CJS-style config):
+If you use `includePaths` with relative paths, those paths will be resolved relative to the node process, not relative to the config file. So if you `svelte.config.js` is within `frontend`, the path `theme` will _NOT_ resolve to `frontend/theme` but to `<node process root>/theme` (which might be the same as `frontend`). To ensure it always resolves relative to the config file, do this:
+
+ESM-style:
+
+```js
+import sveltePreprocess from 'svelte-preprocess';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath());
+
+export default {
+    preprocess: sveltePreprocess({ includePaths: [join(__dirname, 'relative/path')] })
+};
+```
+
+CJS-style:
 
 ```js
 const sveltePreprocess = require('svelte-preprocess');
@@ -91,3 +107,36 @@ module.exports = {
     preprocess: sveltePreprocess({ includePaths: [path.join(__dirname, 'relative/path')] })
 };
 ```
+
+### SCSS: Can't find stylesheet when using `prependData`
+
+Same as the problem with the `includePaths`, the file path in the prependData option also has to be resolved relative to the node process.
+
+ESM-style:
+
+```js
+import sveltePreprocess from 'svelte-preprocess';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath());
+
+export default {
+    preprocess: sveltePreprocess({
+        prependData: `@import '${join(__dirname, 'src/to/variable.scss').replace(/\\/g, '/')}';`
+    })
+};
+```
+
+CJS-style:
+
+```js
+const sveltePreprocess = require('svelte-preprocess');
+const path = require('path');
+
+module.exports = {
+    preprocess: sveltePreprocess({
+        prependData: `@import '${join(__dirname, 'src/to/variable.scss').replace(/\\/g, '/')}';`
+    })
+};
+```