Add scss syntax support in fix-nesting-at-rule (#14)

Author: Leroy Korterink

.tape.js

@@ -63,6 +63,8 @@ module.exports = {
 			warnings: 0,
 			args: ['always', { only: /^html$/i }]
 		},
+
+		// Proposal nesting syntax
 		{
 			source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
 			expect: '.foo { color: blue; @nest body & { color: rebeccapurple; } @nest html & { color: red; } }',
@@ -89,6 +91,33 @@ module.exports = {
 			args: ['always', { only: 'body' }]
 		},
 
+		// SCSS nesting syntax
+		{
+			source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
+			expect: '.foo { color: blue; body & { color: rebeccapurple; } html & { color: red; } }',
+			args: ['always', { syntax: 'scss' }]
+		},
+		{
+			source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
+			expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
+			args: ['always', { syntax: 'scss', except: /^html$/i }]
+		},
+		{
+			source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
+			expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
+			args: ['always', { syntax: 'scss', except: 'html' }]
+		},
+		{
+			source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
+			expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
+			args: ['always', { syntax: 'scss', only: /^body$/i }]
+		},
+		{
+			source: '.foo { color: blue; } body .foo { color: rebeccapurple; } html .foo { color: red; }',
+			expect: '.foo { color: blue; body & { color: rebeccapurple; } } html .foo { color: red; }',
+			args: ['always', { syntax: 'scss', only: 'body' }]
+		},
+
 		/* Test Nesting Media Rules */
 		{
 			source: '.foo { color: blue; } @media (min-width: 960px) { .foo { color: rebeccapurple; } }',

README.md

@@ -115,6 +115,18 @@ or regular expression.
 }
 ```
 
+### syntax
+
+The `syntax` option allows you to specify the syntax of the source files being processed. For SCSS syntax set the value to `scss`.
+
+```js
+{
+  "rules": {
+    "csstools/use-nesting": ["always", { "syntax": "scss" }]
+  }
+}
+```
+
 [cli-img]: https://img.shields.io/travis/csstools/stylelint-use-nesting/main.svg
 [cli-url]: https://travis-ci.org/csstools/stylelint-use-nesting
 [git-img]: https://img.shields.io/badge/support-chat-blue.svg

src/index.js

@@ -57,7 +57,7 @@ export default stylelint.createPlugin(ruleName, (action, opts, context) => {
 							} else if (areRulesPotentialNestingAtRule(rule, prev, opts)) {
 								// fix or report the current rule if it could be nested inside the previous rule
 								if (shouldFix) {
-									fixNestingAtRule(rule, prev);
+									fixNestingAtRule(rule, prev, opts);
 
 									isProcessing = true;
 								} else {
@@ -66,7 +66,7 @@ export default stylelint.createPlugin(ruleName, (action, opts, context) => {
 							} else if (areRulesPotentialNestingAtRule(prev, rule, opts)) {
 								// fix or report the previous rule if it could be nested inside the current rule
 								if (shouldFix) {
-									fixNestingAtRule(prev, rule);
+									fixNestingAtRule(prev, rule, opts);
 
 									isProcessing = true;
 								} else {

src/lib/fix-nesting-at-rule.js

@@ -1,17 +1,33 @@
 import postcss from 'postcss';
 
-export default function fixNestingAtRule(rule1, rule2) {
+export default function fixNestingAtRule(rule1, rule2, opts) {
+	const syntax = Object(opts).syntax;
+
 	rule1.remove();
 
 	rule1.selectors = rule1.selectors.map(
 		selector => `${selector.slice(0, -rule2.selector.length - 1)} &`
 	);
 
-	const atrule = Object.assign(
-		postcss.atRule({
-			name: 'nest',
-			params: String(rule1.selector)
-		}),
+	let ruleOrAtRule;
+	switch (syntax) {
+		case "scss": {
+			ruleOrAtRule = postcss.rule({
+				selector: String(rule1.selector),
+			});
+			break;
+		}
+
+		default: {
+			ruleOrAtRule = postcss.atRule({
+				name: "nest",
+				params: String(rule1.selector),
+			});
+		}
+	}
+
+	const rule = Object.assign(
+		ruleOrAtRule,
 		{
 			raws: Object.assign(rule1.raws, {
 				afterName: ' '
@@ -20,7 +36,7 @@ export default function fixNestingAtRule(rule1, rule2) {
 		}
 	);
 
-	atrule.append(...rule1.nodes);
+	rule.append(...rule1.nodes);
 
-	rule2.append(atrule);
+	rule2.append(rule);
 }