fix(editor): Migrate from @import to @use for SCSS files to address deprecation warnings (#17858)

packages/@n8n/stylelint-config/package.json

@@ -0,0 +1,36 @@
+{
+  "private": true,
+  "name": "@n8n/stylelint-config",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    "./base": {
+      "default": "./dist/configs/base.js",
+      "types": "./dist/configs/base.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rimraf dist .turbo",
+    "dev": "pnpm watch",
+    "format": "biome format --write .",
+    "format:check": "biome ci .",
+    "typecheck": "tsc --noEmit",
+    "watch": "tsc --watch"
+  },
+  "dependencies": {
+    "stylelint": "^16.23.0",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-scss": "^6.12.1",
+    "postcss-html": "^1.8.0",
+    "postcss-scss": "^4.0.9"
+  },
+  "devDependencies": {
+    "@n8n/typescript-config": "workspace:*",
+    "typescript": "catalog:",
+    "rimraf": "catalog:"
+  },
+  "peerDependencies": {
+    "stylelint": ">= 16"
+  }
+}

packages/@n8n/stylelint-config/src/configs/base.ts

@@ -0,0 +1,93 @@
+import type { Config } from 'stylelint';
+
+export const baseConfig: Config = {
+	// TODO: Extending with standard config requires a lot of manual fixes but would be great to have
+	// extends: 'stylelint-config-standard-scss',
+	// Basic SCSS support with essential rules
+	plugins: ['stylelint-scss'],
+	rules: {
+		'no-empty-source': true,
+
+		// Basic syntax and consistency rules
+		'color-hex-length': 'short',
+		'comment-no-empty': true,
+		// 'declaration-block-no-duplicate-properties': disabled due to vendor prefixes
+		'no-duplicate-selectors': true,
+		'no-invalid-double-slash-comments': true,
+
+		// Quality rules (keep only the working ones)
+		'length-zero-no-unit': true,
+		// 'no-descending-specificity': disabled - too many existing issues (would require major refactoring) but this would be a must have
+		'no-duplicate-at-import-rules': true,
+		'shorthand-property-no-redundant-values': true,
+		// 'declaration-block-no-shorthand-property-overrides': disabled - conflicts with intentional CSS patterns
+		'at-rule-no-unknown': [
+			true,
+			{
+				ignoreAtRules: [
+					'tailwind',
+					'apply',
+					'variants',
+					'responsive',
+					'screen',
+					'use',
+					'forward',
+					'include',
+					'mixin',
+					'function',
+					'return',
+					'if',
+					'else',
+					'for',
+					'each',
+					'while',
+					'extend',
+					'at-root',
+					'warn',
+					'error',
+				],
+			},
+		],
+		'at-rule-disallowed-list': [
+			['import'],
+			{
+				message:
+					'@import is deprecated! Use @use for local SCSS files. For third-party libraries that need scoping: use @use "sass:meta"; and @include meta.load-css("library") inside a CSS selector.',
+			},
+		],
+
+		// SCSS specific rules
+		'scss/dollar-variable-colon-space-after': 'always-single-line',
+		'scss/dollar-variable-colon-space-before': 'never',
+		'scss/dollar-variable-no-missing-interpolation': true,
+		'scss/double-slash-comment-whitespace-inside': 'always',
+		'scss/operator-no-unspaced': true,
+		'scss/property-no-unknown': [
+			true,
+			{
+				ignoreProperties: ['composes'],
+			},
+		],
+		'scss/at-import-partial-extension-disallowed-list': ['scss'],
+		// 'scss/selector-no-redundant-nesting-selector': disabled - would require manual fixes across many files
+	},
+	ignoreFiles: [
+		'**/node_modules/**/*',
+		'**/dist/**/*',
+		'**/build/**/*',
+		'**/.turbo/**/*',
+		'**/coverage/**/*',
+	],
+	overrides: [
+		{
+			files: ['**/*.vue'],
+			customSyntax: 'postcss-html',
+		},
+		{
+			files: ['**/*.scss', '**/*.sass'],
+			customSyntax: 'postcss-scss',
+		},
+	],
+};
+
+export default baseConfig;

packages/@n8n/stylelint-config/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"target": "ES2015",
+		"module": "ESNext",
+		"moduleResolution": "node",
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": false,
+		"outDir": "dist",
+		"rootDir": "src",
+		"declaration": true,
+		"declarationMap": true,
+		"downlevelIteration": true,
+		"skipLibCheck": true
+	},
+	"include": ["src/**/*"],
+	"exclude": ["dist", "node_modules", "**/*.test.ts"]
+}