fix(eleventy-plugin-styles): resolved compiler choice based on file type

test(eleventy-plugin-styles): updated tests, added sass test
Halo-Lab · Sep 27, 2023 · cb82ca0 · cb82ca0
1 parent 87c52b5
commit cb82ca0
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 52 deletions.
diff --git a/packages/eleventy-plugin-styles/src/bundle.ts b/packages/eleventy-plugin-styles/src/bundle.ts
@@ -1,3 +1,4 @@
+import { extname } from 'path';
 import { writeFile } from 'fs/promises';
 
 import { not, awaitedTap } from '@fluss/core';
@@ -21,9 +22,11 @@ export const createFileBundler = ({
 	file,
 	options,
 }: LinkerResult<
-	Omit<NormalizeStepOptions, 'url' | 'css' | 'html'> & GetCompilerOptions
+	Omit<NormalizeStepOptions, 'url' | 'css' | 'html'> &
+		Omit<GetCompilerOptions, 'extension'>
 >) => {
 	const compile = getCompiler({
+		extension: extname(file.sourcePath).substring(1),
 		sassOptions: options.sassOptions,
 		lessOptions: options.lessOptions,
 	});

diff --git a/packages/eleventy-plugin-styles/src/compile.ts b/packages/eleventy-plugin-styles/src/compile.ts
@@ -1,5 +1,5 @@
 import { readFile } from 'fs/promises';
-import { resolve as resolvePath, normalize, sep } from 'path';
+import { normalize, resolve as resolvePath, sep } from 'path';
 
 import { render } from 'less';
 import { pipe } from '@fluss/core';
@@ -11,6 +11,7 @@ import { PluginState } from './types';
 export enum Language {
 	CSS = 'css',
 	SASS = 'sass',
+	SCSS = 'scss',
 	LESS = 'less',
 }
 
@@ -89,16 +90,19 @@ const LanguageHandler = {
 } as const;
 
 export interface GetCompilerOptions {
+	readonly extension: string;
 	readonly lessOptions: Less.Options | PluginState.Off;
 	readonly sassOptions: Options<'sync'> | PluginState.Off;
 }
 
 export const getCompiler = ({
+	extension,
 	sassOptions,
 	lessOptions,
 }: GetCompilerOptions): ReturnType<Compiler> =>
+	(extension === Language.SASS || extension === Language.SCSS) &&
 	sassOptions !== PluginState.Off
 		? LanguageHandler[Language.SASS](sassOptions)
-		: lessOptions !== PluginState.Off
+		: extension === Language.LESS && lessOptions !== PluginState.Off
 		? LanguageHandler[Language.LESS](lessOptions)
 		: LanguageHandler[Language.CSS]({});
diff --git a/packages/eleventy-plugin-styles/src/index.ts b/packages/eleventy-plugin-styles/src/index.ts
@@ -1,4 +1,4 @@
-import { join, normalize, resolve } from 'path';
+import { join, normalize, resolve as resolvePath } from 'path';
 
 import { isJust, pipe, tap } from '@fluss/core';
 import {
@@ -36,8 +36,8 @@ definePluginName('Styles');
 export const styles = (
 	config: Record<string, Function>,
 	{
-		sassOptions = PluginState.Off,
-		lessOptions = PluginState.Off,
+		sassOptions = {},
+		lessOptions = {},
 		inputDirectory = join(DEFAULT_SOURCE_DIRECTORY, DEFAULT_STYLES_DIRECTORY),
 		cssnanoOptions = {},
 		addWatchTarget = true,
@@ -152,7 +152,7 @@ export const styles = (
 			.filter((relativePath) => /(sc|sa|le|c)ss$/.test(relativePath))
 			.map(
 				pipe(
-					(mainURL: string) => resolve(mainURL),
+					(mainURL: string) => resolvePath(mainURL),
 					(mainURL: string) =>
 						cache
 							.entries()

diff --git a/packages/eleventy-plugin-styles/test/bundle.spec.ts b/packages/eleventy-plugin-styles/test/bundle.spec.ts
@@ -4,7 +4,6 @@ import mockFs from 'mock-fs';
 
 import { linker } from '@eleventy-packages/common';
 
-import { PluginState } from '../src/types';
 import {
 	findStyles,
 	writeStyleFile,
@@ -36,11 +35,6 @@ const mockDataStylesResultArr = [
 		    color: red;
 		  }`,
 		extension: 'css',
-		linkerOptions: {
-			...mockDataLinkerOptions,
-			sassOptions: PluginState.Off,
-			lessOptions: PluginState.Off,
-		},
 	},
 	{
 		style: `
@@ -50,10 +44,14 @@ const mockDataStylesResultArr = [
 			  color: $variable;
 			}`,
 		extension: 'scss',
-		linkerOptions: {
-			...mockDataLinkerOptions,
-			lessOptions: PluginState.Off,
-		},
+	},
+	{
+		style: `
+$variable: red
+
+a
+  color: $variable`,
+		extension: 'sass',
 	},
 	{
 		style: `
@@ -64,10 +62,6 @@ const mockDataStylesResultArr = [
 			}
 		`,
 		extension: 'less',
-		linkerOptions: {
-			...mockDataLinkerOptions,
-			sassOptions: PluginState.Off,
-		},
 	},
 ];
 
@@ -118,18 +112,19 @@ describe('createPublicUrlInjector', () => {
 });
 
 describe('createFileBundler', () => {
-	// Test with 3 extensions css, scss, less
+	// Test with 4 extensions css, scss, sass, less
 	for (const mockDataStylesResult of mockDataStylesResultArr) {
-		const { style, extension, linkerOptions } = mockDataStylesResult;
+		const { style, extension } = mockDataStylesResult;
 
 		it(`should compile file, return object with urls path, css data and other properties (${extension})`, async () => {
 			mockFs({
 				node_modules: mockFs.load(resolve('node_modules')),
-				[`${linkerOptions.baseDirectory}${sep}main.${extension}`]: style,
+				[`${mockDataLinkerOptions.baseDirectory}${sep}main.${extension}`]:
+					style,
 			});
 
 			const newMockDataHtmlFile = mockDataHtmlFile.replace('scss', extension);
-			const linkerResult = bindLinkerWithStyles(linker(linkerOptions))(
+			const linkerResult = bindLinkerWithStyles(linker(mockDataLinkerOptions))(
 				findStyles(newMockDataHtmlFile),
 			)[0];
 
@@ -138,7 +133,7 @@ describe('createFileBundler', () => {
 			if (extension === 'scss') {
 				expect(result.urls).toHaveLength(1);
 				expect(normalize(result.urls[0])).toBe(
-					`${linkerOptions.baseDirectory}${sep}main.${extension}`,
+					`${mockDataLinkerOptions.baseDirectory}${sep}main.${extension}`,
 				);
 			}
 			expect(result.data).toBe('a{color:red}');

diff --git a/packages/eleventy-plugin-styles/test/compile.spec.ts b/packages/eleventy-plugin-styles/test/compile.spec.ts
@@ -1,10 +1,9 @@
-import { normalize as normalizePath, resolve, sep } from 'path';
+import { extname, normalize as normalizePath, resolve, sep } from 'path';
 
 import mockFs from 'mock-fs';
 
 import { linker } from '@eleventy-packages/common';
 
-import { PluginState } from '../src/types';
 import { getCompiler } from '../src/compile';
 import { normalize } from '../src/normalize';
 import { bindLinkerWithStyles, findStyles } from '../src/bundle';
@@ -32,11 +31,6 @@ const mockDataStylesResultArr = [
 		    color: red;
 		  }`,
 		extension: 'css',
-		linkerOptions: {
-			...mockDataLinkerOptions,
-			sassOptions: PluginState.Off,
-			lessOptions: PluginState.Off,
-		},
 	},
 	{
 		style: `
@@ -46,10 +40,14 @@ const mockDataStylesResultArr = [
 			  color: $variable;
 			}`,
 		extension: 'scss',
-		linkerOptions: {
-			...mockDataLinkerOptions,
-			lessOptions: PluginState.Off,
-		},
+	},
+	{
+		style: `
+$variable: red
+
+a 
+  color: $variable`,
+		extension: 'sass',
 	},
 	{
 		style: `
@@ -60,16 +58,12 @@ const mockDataStylesResultArr = [
 			}
 		`,
 		extension: 'less',
-		linkerOptions: {
-			...mockDataLinkerOptions,
-			sassOptions: PluginState.Off,
-		},
 	},
 ];
 
 describe('getCompiler', () => {
 	for (const mockDataStylesResult of mockDataStylesResultArr) {
-		const { style, extension, linkerOptions } = mockDataStylesResult;
+		const { style, extension } = mockDataStylesResult;
 
 		it(`should compile file, return object with urls path, css data and other properties (${extension})`, async () => {
 			mockFs({
@@ -78,17 +72,18 @@ describe('getCompiler', () => {
 			});
 
 			const newMockDataHtmlFile = mockDataHtmlFile.replace('scss', extension);
-			const linkerResult = bindLinkerWithStyles(linker(linkerOptions))(
+			const linkerResult = bindLinkerWithStyles(linker(mockDataLinkerOptions))(
 				findStyles(newMockDataHtmlFile),
 			)[0];
 
 			const { css, urls } = await getCompiler({
-				lessOptions: linkerOptions.lessOptions,
-				sassOptions: linkerOptions.sassOptions,
+				extension: extname(linkerResult.file.sourcePath).substring(1),
+				lessOptions: mockDataLinkerOptions.lessOptions,
+				sassOptions: mockDataLinkerOptions.sassOptions,
 			})(linkerResult.file.sourcePath);
 
 			const result = await normalize({
-				...linkerOptions,
+				...mockDataLinkerOptions,
 				css,
 				url: linkerResult.file.sourcePath,
 				html: newMockDataHtmlFile,

diff --git a/packages/eleventy-plugin-styles/test/normalize.spec.ts b/packages/eleventy-plugin-styles/test/normalize.spec.ts
@@ -1,10 +1,9 @@
-import { normalize as normalizePath, resolve, sep } from 'path';
+import { extname, normalize as normalizePath, resolve, sep } from 'path';
 
 import mockFs from 'mock-fs';
 
 import { linker } from '@eleventy-packages/common';
 
-import { PluginState } from '../src/types';
 import { normalize } from '../src/normalize';
 import { getCompiler } from '../src/compile';
 import { bindLinkerWithStyles, findStyles } from '../src/bundle';
@@ -38,8 +37,6 @@ const mockDataStylesResultArr = [
 		extension: 'css',
 		linkerOptions: {
 			...mockDataLinkerOptions,
-			sassOptions: PluginState.Off,
-			lessOptions: PluginState.Off,
 			purgeCSSOptions: {},
 		},
 	},
@@ -53,7 +50,17 @@ const mockDataStylesResultArr = [
 		extension: 'scss',
 		linkerOptions: {
 			...mockDataLinkerOptions,
-			lessOptions: PluginState.Off,
+		},
+	},
+	{
+		style: `
+$variable: red
+
+div 
+  color: $variable`,
+		extension: 'sass',
+		linkerOptions: {
+			...mockDataLinkerOptions,
 		},
 	},
 	{
@@ -70,7 +77,6 @@ const mockDataStylesResultArr = [
 		extension: 'less',
 		linkerOptions: {
 			...mockDataLinkerOptions,
-			sassOptions: PluginState.Off,
 			purgeCSSOptions: {
 				safelist: {
 					deep: [/^__/],
@@ -99,6 +105,7 @@ describe('normalize', () => {
 			const { options, file } = linkerResult;
 
 			const compile = getCompiler({
+				extension: extname(linkerResult.file.sourcePath).substring(1),
 				sassOptions: options.sassOptions,
 				lessOptions: options.lessOptions,
 			});
@@ -127,6 +134,11 @@ describe('normalize', () => {
 
 					break;
 				}
+				case 'sass': {
+					expect(result.css).toBe('div{color:red}');
+
+					break;
+				}
 				case 'less': {
 					expect(result.css).toBe('__test{color:red}');