Add support for postcss, babel, scss, sass, less, and stylus to rules that use compilation. (#141)

* Supports lang="postcss"

* update

* update

* update

* update

* update

* update

* Support babel

* update

* update

* support sass

* support less

* Support stylus

* fix

* update

Author: ota-meshi

.eslintignore

@@ -10,6 +10,7 @@
 /tests/fixtures/rules/indent/invalid/ts
 /tests/fixtures/rules/indent/invalid/ts-v5
 /tests/fixtures/rules/valid-compile/invalid/ts
+/tests/fixtures/rules/valid-compile/valid/babel
 /tests/fixtures/rules/valid-compile/valid/ts
 /tests/fixtures/rules/prefer-style-directive
 /.svelte-kit

README.md

@@ -179,6 +179,9 @@ You can change the behavior of this plugin with some settings.
 
 - `ignoreWarnings` (optional) ... Specifies an array of rules that ignore reports in the template.  
   For example, set rules on the template that cannot avoid false positives.
+- `compileOptions` (optional) ... Specifies options for Svelte compile. Effects rules that use Svelte compile. The target rules are [@ota-meshi/svelte/valid-compile](https://ota-meshi.github.io/eslint-plugin-svelte/rules/valid-compile/) and [@ota-meshi/svelte/no-unused-svelte-ignore](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/). **Note that it has no effect on ESLint's custom parser**.
+  - `postcss` (optional) ... Specifies options related to PostCSS. You can disable the PostCSS process by specifying `false`.
+    - `configFilePath` (optional) ... Specifies the path of the directory containing the PostCSS configuration.
 
 e.g.
 
@@ -191,6 +194,11 @@ module.exports = {
         "@typescript-eslint/no-unsafe-assignment",
         "@typescript-eslint/no-unsafe-member-access",
       ],
+      compileOptions: {
+        postcss: {
+          configFilePath: "./path/to/my/postcss.config.js",
+        },
+      },
     },
   },
   // ...

babel.config.js

@@ -0,0 +1,6 @@
+"use strict"
+
+// for test
+module.exports = {
+  plugins: ["@babel/plugin-proposal-function-bind"],
+}

docs-svelte-kit/build-system/build.js

@@ -30,13 +30,15 @@ function bundle(entryPoint, externals) {
     bundle: true,
     external: externals,
     write: false,
+    inject: [require.resolve("./src/process-shim.mjs")],
   })
 
   return `${result.outputFiles[0].text}`
 }
 
 /** transform code */
 function transform(code, injects) {
+  const newCode = code.replace(/"[a-z]+" = "[a-z]+";/, "")
   // const newCode = babelCore.transformSync(code, {
   //   babelrc: false,
   //   plugins: [
@@ -57,18 +59,17 @@ function transform(code, injects) {
   // })
   return `
 ${injects
-  .map((inject) => `import $inject_${inject}$ from '${inject}';`)
+  .map(
+    (inject) =>
+      `import $inject_${inject.replace(/-/g, "_")}$ from '${inject}';`,
+  )
   .join("\n")}
 const $_injects_$ = {${injects
-    .map((inject) => `${inject}:$inject_${inject}$`)
+    .map((inject) => `${inject.replace(/-/g, "_")}:$inject_${inject}$`)
     .join(",\n")}};
-const process = {
-  env: {},
-  cwd: () => undefined,
-}
 function require(module, ...args) {
   return $_injects_$[module] || {}
 }
-${code}
+${newCode}
 `
 }

docs-svelte-kit/build-system/src/process-shim.mjs

@@ -0,0 +1,4 @@
+export let process = {
+  env: {},
+  cwd: () => "",
+}

docs-svelte-kit/shim/path.mjs

@@ -8,7 +8,17 @@ function extname(p) {
   return /\.[\w$-]+$/iu.exec(p)[0]
 }
 
-const posix = { dirname, extname }
+function relative(s) {
+  return s
+}
+
+function resolve(s) {
+  return s
+}
+
+const sep = "/"
+
+const posix = { dirname, extname, resolve, relative, sep }
 posix.posix = posix
-export { dirname, extname, posix }
+export { dirname, extname, posix, resolve, relative, sep }
 export default posix

docs-svelte-kit/shim/postcss-load-config.mjs

@@ -0,0 +1,17 @@
+/* eslint require-jsdoc:0 -- shim */
+import nested from "postcss-nested"
+
+function loadConfig() {
+  // noop
+}
+
+export function sync(options) {
+  return {
+    plugins: [nested],
+    options,
+  }
+}
+
+loadConfig.sync = sync
+
+export default loadConfig

docs/user-guide.md

@@ -141,6 +141,9 @@ You can change the behavior of this plugin with some settings.
 
 - `ignoreWarnings` (optional) ... Specifies an array of rules that ignore reports in the template.  
   For example, set rules on the template that cannot avoid false positives.
+- `compileOptions` (optional) ... Specifies options for Svelte compile. Effects rules that use Svelte compile. The target rules are [@ota-meshi/svelte/valid-compile](./rules/valid-compile.md) and [@ota-meshi/svelte/no-unused-svelte-ignore](./rules/no-unused-svelte-ignore.md). **Note that it has no effect on ESLint's custom parser**.
+  - `postcss` (optional) ... Specifies options related to PostCSS. You can disable the PostCSS process by specifying `false`.
+    - `configFilePath` (optional) ... Specifies the path of the directory containing the PostCSS configuration.
 
 e.g.
 
@@ -153,6 +156,11 @@ module.exports = {
         "@typescript-eslint/no-unsafe-assignment",
         "@typescript-eslint/no-unsafe-member-access",
       ],
+      compileOptions: {
+        postcss: {
+          configFilePath: "./path/to/my/postcss.config.js",
+        },
+      },
     },
   },
   // ...

package.json

@@ -58,6 +58,7 @@
     "eslint-utils": "^3.0.0",
     "known-css-properties": "^0.25.0",
     "postcss": "^8.4.5",
+    "postcss-load-config": "^3.1.4",
     "postcss-safe-parser": "^6.0.0",
     "sourcemap-codec": "^1.4.8",
     "svelte-eslint-parser": "^0.16.0"
@@ -73,20 +74,25 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-proposal-function-bind": "^7.16.7",
     "@babel/types": "^7.16.0",
     "@fontsource/fira-mono": "^4.5.0",
     "@ota-meshi/eslint-plugin": "^0.10.0",
     "@ota-meshi/eslint-plugin-svelte": "^0.33.0",
     "@sindresorhus/slugify": "^2.1.0",
     "@sveltejs/adapter-static": "^1.0.0-next.26",
     "@sveltejs/kit": "^1.0.0-next.240",
+    "@types/babel__core": "^7.1.19",
     "@types/eslint": "^8.0.0",
     "@types/eslint-scope": "^3.7.0",
     "@types/eslint-visitor-keys": "^1.0.0",
     "@types/estree": "^0.0.51",
+    "@types/less": "^3.0.3",
     "@types/mocha": "^9.0.0",
     "@types/node": "^16.0.0",
     "@types/postcss-safe-parser": "^5.0.1",
+    "@types/stylus": "^0.48.38",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.1-0",
     "@typescript-eslint/parser-v4": "npm:@typescript-eslint/parser@4",
@@ -108,6 +114,7 @@
     "eslint-plugin-vue": "^8.0.0",
     "eslint-plugin-yml": "^0.14.0",
     "estree-walker": "^3.0.0",
+    "less": "^4.1.2",
     "locate-character": "^2.0.5",
     "magic-string": "^0.26.0",
     "markdown-it-anchor": "^8.4.1",
@@ -117,13 +124,16 @@
     "nyc": "^15.1.0",
     "pako": "^2.0.3",
     "pirates": "^4.0.1",
+    "postcss-nested": "^5.0.6",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^2.6.0",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.25.0",
+    "sass": "^1.51.0",
     "semver": "^7.3.5",
     "stylelint": "^14.0.0",
     "stylelint-config-standard": "^25.0.0",
+    "stylus": "^0.57.0",
     "svelte": "^3.46.1",
     "svelte-adapter-ghpages": "0.0.2",
     "ts-node": "^10.0.0",

postcss.config.js

@@ -0,0 +1,6 @@
+"use strict"
+
+// for test
+module.exports = {
+  plugins: [require("postcss-nested")],
+}