From ce06e42748c5b900dae1293ff67aab8775e1a83d Mon Sep 17 00:00:00 2001 From: shadowtime2000 <66655515+shadowtime2000@users.noreply.github.com> Date: Wed, 18 Nov 2020 12:02:39 -0800 Subject: [PATCH 1/6] feat: sass support for sass plugin --- plugins/sass.ts | 32 +++++++++++++++++++++++--------- plugins/sass_test.ts | 18 ++++++++++++++++-- 2 files changed, 39 insertions(+), 11 deletions(-) diff --git a/plugins/sass.ts b/plugins/sass.ts index 5d689e438..cc577ce24 100644 --- a/plugins/sass.ts +++ b/plugins/sass.ts @@ -5,15 +5,29 @@ export default { test: /.(sass|scss)$/, acceptHMR: true, transform(content: Uint8Array, path: string) { - const ret = renderSync({ - file: path, - data: (new TextDecoder).decode(content), - sourceMap: true - }) - return { - code: (new TextDecoder).decode(ret.css), - map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, - loader: 'css' + if (path.endsWith('.sass')) { + const ret = renderSync({ + file: path, + data: (new TextDecoder).decode(content), + sourceMap: true, + indentedSyntax: true + }) + return { + code: (new TextDecoder).decode(ret.css), + map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, + loader: 'css' + } + } else { + const ret = renderSync({ + file: path, + data: (new TextDecoder).decode(content), + sourceMap: true + }) + return { + code: (new TextDecoder).decode(ret.css), + map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, + loader: 'css' + } } } } diff --git a/plugins/sass_test.ts b/plugins/sass_test.ts index 6fdeb2056..02f171c22 100644 --- a/plugins/sass_test.ts +++ b/plugins/sass_test.ts @@ -1,7 +1,7 @@ import { assertEquals } from 'https://deno.land/std/testing/asserts.ts'; import plugin from './sass.ts'; -Deno.test('project sass loader plugin', () => { +Deno.test('project scss loader plugin', () => { Object.assign(window, { location: { href: 'https://localhost/' @@ -9,7 +9,7 @@ Deno.test('project sass loader plugin', () => { }) const { code, loader } = plugin.transform( (new TextEncoder).encode('$someVar: 123px; .some-selector { width: $someVar; }'), - 'test.sass' + 'test.scss' ) assertEquals(plugin.test.test('test.sass'), true) assertEquals(plugin.test.test('test.scss'), true) @@ -17,3 +17,17 @@ Deno.test('project sass loader plugin', () => { assertEquals(code, '.some-selector {\n width: 123px;\n}') assertEquals(loader, 'css') }) + +Deno.test('project sass loader plugin', () => { + Object.assign(window, { + location: { + href: 'https://localhost/' + } + }) + const { code, loader } = plugin.transform( + (new TextEncoder).encode('$someVar: 123px\n.some-selector\n width: 123px'), + 'test.sass' + ) + assertEquals(code, '.some-selector {\n width: 123px;\n}') + assertEquals(loader, 'css') +}) \ No newline at end of file From 77571e3fab2fee39486ad8c455614619f5232d98 Mon Sep 17 00:00:00 2001 From: shadowtime2000 <66655515+shadowtime2000@users.noreply.github.com> Date: Wed, 18 Nov 2020 12:17:19 -0800 Subject: [PATCH 2/6] feat: you can also customize rendering settings --- plugins/sass.ts | 42 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/plugins/sass.ts b/plugins/sass.ts index cc577ce24..666eb90fb 100644 --- a/plugins/sass.ts +++ b/plugins/sass.ts @@ -1,6 +1,6 @@ -import { renderSync } from 'https://esm.sh/sass@1.29.0' +import { Options, renderSync } from 'https://esm.sh/sass@1.29.0' -export default { +const defaultOptions = { name: 'sass-loader', test: /.(sass|scss)$/, acceptHMR: true, @@ -31,3 +31,41 @@ export default { } } } + +let plugin: any = (opts: Options) => ({ + name: 'sass-loader', + test: /.(sass|scss)$/, + acceptHMR: true, + transform(content: Uint8Array, path: string) { + if (path.endsWith('.sass')) { + const ret = renderSync({ + ...opts, + file: path, + data: (new TextDecoder).decode(content), + sourceMap: true, + indentedSyntax: true + }) + return { + code: (new TextDecoder).decode(ret.css), + map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, + loader: 'css' + } + } else { + const ret = renderSync({ + ...opts, + file: path, + data: (new TextDecoder).decode(content), + sourceMap: true + }) + return { + code: (new TextDecoder).decode(ret.css), + map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, + loader: 'css' + } + } + } +}) + +plugin = { ...plugin, ...defaultOptions } + +export default plugin; \ No newline at end of file From 4610fae1991ccd3a41cc913c2f8eb3aa7c271bb1 Mon Sep 17 00:00:00 2001 From: X Date: Thu, 19 Nov 2020 12:14:07 +0800 Subject: [PATCH 3/6] refactor: simplify --- plugins/sass.ts | 79 ++++++++++++++++--------------------------------- 1 file changed, 25 insertions(+), 54 deletions(-) diff --git a/plugins/sass.ts b/plugins/sass.ts index 666eb90fb..f3ca31be7 100644 --- a/plugins/sass.ts +++ b/plugins/sass.ts @@ -1,71 +1,42 @@ import { Options, renderSync } from 'https://esm.sh/sass@1.29.0' -const defaultOptions = { +const defaultPlugin = { name: 'sass-loader', test: /.(sass|scss)$/, acceptHMR: true, transform(content: Uint8Array, path: string) { - if (path.endsWith('.sass')) { - const ret = renderSync({ - file: path, - data: (new TextDecoder).decode(content), - sourceMap: true, - indentedSyntax: true - }) - return { - code: (new TextDecoder).decode(ret.css), - map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, - loader: 'css' - } - } else { - const ret = renderSync({ - file: path, - data: (new TextDecoder).decode(content), - sourceMap: true - }) - return { - code: (new TextDecoder).decode(ret.css), - map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, - loader: 'css' - } + const ret = renderSync({ + file: path, + data: (new TextDecoder).decode(content), + sourceMap: true, + indentedSyntax: path.endsWith('.sass') + }) + return { + code: (new TextDecoder).decode(ret.css), + map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, + loader: 'css' } } } let plugin: any = (opts: Options) => ({ - name: 'sass-loader', - test: /.(sass|scss)$/, - acceptHMR: true, + ...defaultPlugin, transform(content: Uint8Array, path: string) { - if (path.endsWith('.sass')) { - const ret = renderSync({ - ...opts, - file: path, - data: (new TextDecoder).decode(content), - sourceMap: true, - indentedSyntax: true - }) - return { - code: (new TextDecoder).decode(ret.css), - map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, - loader: 'css' - } - } else { - const ret = renderSync({ - ...opts, - file: path, - data: (new TextDecoder).decode(content), - sourceMap: true - }) - return { - code: (new TextDecoder).decode(ret.css), - map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, - loader: 'css' - } + const ret = renderSync({ + indentedSyntax: path.endsWith('.sass'), + ...opts, + file: path, + data: (new TextDecoder).decode(content), + sourceMap: true + }) + return { + code: (new TextDecoder).decode(ret.css), + map: ret.map ? (new TextDecoder).decode(ret.map) : undefined, + loader: 'css' } } }) -plugin = { ...plugin, ...defaultOptions } +plugin = { ...plugin, ...defaultPlugin } -export default plugin; \ No newline at end of file +export default plugin; From eeb558de4b2c81870d1ba11df11cb6ca232bef01 Mon Sep 17 00:00:00 2001 From: X Date: Thu, 19 Nov 2020 14:16:05 +0800 Subject: [PATCH 4/6] refactor: reserve pluginFactory types --- plugins/sass.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/sass.ts b/plugins/sass.ts index f3ca31be7..0b914830f 100644 --- a/plugins/sass.ts +++ b/plugins/sass.ts @@ -19,7 +19,7 @@ const defaultPlugin = { } } -let plugin: any = (opts: Options) => ({ +const pluginFactory = (opts: Options) => ({ ...defaultPlugin, transform(content: Uint8Array, path: string) { const ret = renderSync({ @@ -37,6 +37,6 @@ let plugin: any = (opts: Options) => ({ } }) -plugin = { ...plugin, ...defaultPlugin } +Object.assign(pluginFactory, defaultPlugin) -export default plugin; +export default pluginFactory; From cd8a59336f79a04408919e1a0b8c6066f68beecf Mon Sep 17 00:00:00 2001 From: X Date: Thu, 19 Nov 2020 14:35:40 +0800 Subject: [PATCH 5/6] refactor: extends pluginFactory types --- plugins/sass.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/plugins/sass.ts b/plugins/sass.ts index 0b914830f..632afde61 100644 --- a/plugins/sass.ts +++ b/plugins/sass.ts @@ -37,6 +37,9 @@ const pluginFactory = (opts: Options) => ({ } }) -Object.assign(pluginFactory, defaultPlugin) +pluginFactory.displayName = defaultPlugin.name +pluginFactory.test = defaultPlugin.test +pluginFactory.acceptHMR = defaultPlugin.acceptHMR +pluginFactory.transform = defaultPlugin.transform -export default pluginFactory; +export default pluginFactory From b645f94f256ec8e3dcd7479df77cdf30fe28d86b Mon Sep 17 00:00:00 2001 From: X Date: Thu, 19 Nov 2020 14:36:29 +0800 Subject: [PATCH 6/6] chore: update sass-loader plugin tests --- plugins/sass_test.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/plugins/sass_test.ts b/plugins/sass_test.ts index 02f171c22..e6c2e3847 100644 --- a/plugins/sass_test.ts +++ b/plugins/sass_test.ts @@ -24,10 +24,14 @@ Deno.test('project sass loader plugin', () => { href: 'https://localhost/' } }) - const { code, loader } = plugin.transform( + let ret = plugin.transform( (new TextEncoder).encode('$someVar: 123px\n.some-selector\n width: 123px'), 'test.sass' ) - assertEquals(code, '.some-selector {\n width: 123px;\n}') - assertEquals(loader, 'css') -}) \ No newline at end of file + assertEquals(ret.code, '.some-selector {\n width: 123px;\n}') + ret = plugin({ indentType: 'tab', indentWidth: 2 }).transform( + (new TextEncoder).encode('$someVar: 123px\n.some-selector\n width: 123px'), + 'test.sass' + ) + assertEquals(ret.code, '.some-selector {\n\t\twidth: 123px;\n}') +})