From 2ee206c526e3c816d6d990d89ad916b2c1d4e60d Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Fri, 10 Dec 2021 11:25:58 +0100 Subject: [PATCH 1/2] (fix) adjust store regex MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Don't match in the case of $° or $§ or $\, these are not store variables Fixes #433 --- src/transformers/typescript.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts index f9591ab7..fc5c11a3 100644 --- a/src/transformers/typescript.ts +++ b/src/transformers/typescript.ts @@ -150,7 +150,7 @@ function injectVarsToCode({ // TODO investigate if it's possible to achieve this with a // TS transformer (previous attemps have failed) const codestores = Array.from( - contentForCodestores.match(/\$[^\s();:,[\]{}.?!+-=*/~|&%<>^`"']+/g) || [], + contentForCodestores.match(/\$[^\s();:,[\]{}.?!+-=*/\\~|&%<>^`"'°§]+/g) || [], (name) => name.slice(1), ).filter((name) => !JAVASCRIPT_RESERVED_KEYWORD_SET.has(name)); From 7602098272054a07785c5f199697e9cd41d38451 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 16 Dec 2021 12:53:19 +0100 Subject: [PATCH 2/2] add test, bump prettier --- package.json | 2 +- src/autoProcess.ts | 83 ++++++++++++-------------- src/processors/coffeescript.ts | 9 +-- src/processors/less.ts | 9 +-- src/processors/scss.ts | 10 +--- src/processors/stylus.ts | 9 +-- src/processors/typescript.ts | 10 +--- src/transformers/typescript.ts | 3 +- test/fixtures/TypeScriptImports.svelte | 5 ++ test/utils.ts | 3 +- yarn.lock | 8 +-- 11 files changed, 63 insertions(+), 88 deletions(-) diff --git a/package.json b/package.json index c6f1d622..dd3937bf 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "postcss": "^8", "postcss-easy-import": "^3.0.0", "postcss-load-config": "^3.0.0", - "prettier": "^2.2.1", + "prettier": "^2.5.1", "pug": "^3.0.0", "sass": "^1.26.8", "stylus": "^0.54.7", diff --git a/src/autoProcess.ts b/src/autoProcess.ts index 2f44cdb3..e4ca434c 100644 --- a/src/autoProcess.ts +++ b/src/autoProcess.ts @@ -122,59 +122,54 @@ export function sveltePreprocess( return resolveLanguageArgs(lang, alias); } - const getTransformerTo = ( - type: 'markup' | 'script' | 'style', - targetLanguage: string, - ): Preprocessor => async (svelteFile) => { - let { - content, - markup, - filename, - lang, - alias, - dependencies, - attributes, - } = await getTagInfo(svelteFile); + const getTransformerTo = + ( + type: 'markup' | 'script' | 'style', + targetLanguage: string, + ): Preprocessor => + async (svelteFile) => { + let { content, markup, filename, lang, alias, dependencies, attributes } = + await getTagInfo(svelteFile); + + if (lang == null || alias == null) { + alias = defaultLanguages[type]; + lang = getLanguageFromAlias(alias); + } - if (lang == null || alias == null) { - alias = defaultLanguages[type]; - lang = getLanguageFromAlias(alias); - } + if ((lang && preserve.includes(lang)) || preserve.includes(alias)) { + return { code: content }; + } - if ((lang && preserve.includes(lang)) || preserve.includes(alias)) { - return { code: content }; - } + const transformerOptions = getTransformerOptions(lang, alias); - const transformerOptions = getTransformerOptions(lang, alias); + content = prepareContent({ + options: transformerOptions, + content, + }); - content = prepareContent({ - options: transformerOptions, - content, - }); + if (lang === targetLanguage) { + // has override method for alias + // example: sugarss override should work apart from postcss + if (typeof transformerOptions === 'function' && alias !== lang) { + return transformerOptions({ content, filename, attributes }); + } - if (lang === targetLanguage) { - // has override method for alias - // example: sugarss override should work apart from postcss - if (typeof transformerOptions === 'function' && alias !== lang) { - return transformerOptions({ content, filename, attributes }); + // otherwise, we're done here + return { code: content, dependencies }; } - // otherwise, we're done here - return { code: content, dependencies }; - } - - const transformed = await transform(lang, transformerOptions, { - content, - markup, - filename, - attributes, - }); + const transformed = await transform(lang, transformerOptions, { + content, + markup, + filename, + attributes, + }); - return { - ...transformed, - dependencies: concat(dependencies, transformed.dependencies), + return { + ...transformed, + dependencies: concat(dependencies, transformed.dependencies), + }; }; - }; const scriptTransformer = getTransformerTo('script', 'javascript'); const cssTransformer = getTransformerTo('style', 'css'); diff --git a/src/processors/coffeescript.ts b/src/processors/coffeescript.ts index 9d936d8d..3f8e87db 100644 --- a/src/processors/coffeescript.ts +++ b/src/processors/coffeescript.ts @@ -7,13 +7,8 @@ export default (options?: Options.Coffeescript): PreprocessorGroup => ({ async script(svelteFile) { const { transformer } = await import('../transformers/coffeescript'); - let { - content, - filename, - attributes, - lang, - dependencies, - } = await getTagInfo(svelteFile); + let { content, filename, attributes, lang, dependencies } = + await getTagInfo(svelteFile); if (lang !== 'coffeescript') { return { code: content }; diff --git a/src/processors/less.ts b/src/processors/less.ts index 15020b06..2a3cbd60 100644 --- a/src/processors/less.ts +++ b/src/processors/less.ts @@ -6,13 +6,8 @@ import { prepareContent } from '../modules/prepareContent'; export default (options?: Options.Less): PreprocessorGroup => ({ async style(svelteFile) { const { transformer } = await import('../transformers/less'); - let { - content, - filename, - attributes, - lang, - dependencies, - } = await getTagInfo(svelteFile); + let { content, filename, attributes, lang, dependencies } = + await getTagInfo(svelteFile); if (lang !== 'less') { return { code: content }; diff --git a/src/processors/scss.ts b/src/processors/scss.ts index 1421c79f..c2dc2628 100644 --- a/src/processors/scss.ts +++ b/src/processors/scss.ts @@ -6,14 +6,8 @@ import { prepareContent } from '../modules/prepareContent'; export default (options?: Options.Sass): PreprocessorGroup => ({ async style(svelteFile) { const { transformer } = await import('../transformers/scss'); - let { - content, - filename, - attributes, - lang, - alias, - dependencies, - } = await getTagInfo(svelteFile); + let { content, filename, attributes, lang, alias, dependencies } = + await getTagInfo(svelteFile); if (alias === 'sass') { options = { diff --git a/src/processors/stylus.ts b/src/processors/stylus.ts index 3fe12bc8..d31c5e4f 100644 --- a/src/processors/stylus.ts +++ b/src/processors/stylus.ts @@ -6,13 +6,8 @@ import { prepareContent } from '../modules/prepareContent'; export default (options?: Options.Stylus): PreprocessorGroup => ({ async style(svelteFile) { const { transformer } = await import('../transformers/stylus'); - let { - content, - filename, - attributes, - lang, - dependencies, - } = await getTagInfo(svelteFile); + let { content, filename, attributes, lang, dependencies } = + await getTagInfo(svelteFile); if (lang !== 'stylus') { return { code: content }; diff --git a/src/processors/typescript.ts b/src/processors/typescript.ts index 1f27a25c..04cb6994 100644 --- a/src/processors/typescript.ts +++ b/src/processors/typescript.ts @@ -6,14 +6,8 @@ import { prepareContent } from '../modules/prepareContent'; export default (options?: Options.Typescript): PreprocessorGroup => ({ async script(svelteFile) { const { transformer } = await import('../transformers/typescript'); - let { - content, - markup, - filename, - attributes, - lang, - dependencies, - } = await getTagInfo(svelteFile); + let { content, markup, filename, attributes, lang, dependencies } = + await getTagInfo(svelteFile); if (lang !== 'typescript') { return { code: content }; diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts index fc5c11a3..0c1abde4 100644 --- a/src/transformers/typescript.ts +++ b/src/transformers/typescript.ts @@ -150,7 +150,8 @@ function injectVarsToCode({ // TODO investigate if it's possible to achieve this with a // TS transformer (previous attemps have failed) const codestores = Array.from( - contentForCodestores.match(/\$[^\s();:,[\]{}.?!+-=*/\\~|&%<>^`"'°§]+/g) || [], + contentForCodestores.match(/\$[^\s();:,[\]{}.?!+-=*/\\~|&%<>^`"'°§]+/g) || + [], (name) => name.slice(1), ).filter((name) => !JAVASCRIPT_RESERVED_KEYWORD_SET.has(name)); diff --git a/test/fixtures/TypeScriptImports.svelte b/test/fixtures/TypeScriptImports.svelte index 2a6abcde..72e5ca81 100644 --- a/test/fixtures/TypeScriptImports.svelte +++ b/test/fixtures/TypeScriptImports.svelte @@ -39,6 +39,11 @@ } $storeScriptOnly; $storeModuleScriptOnly; + + // These shouldn't count as store values: + // $\\; $$; $§; $%; $°; $(; $); $[; $]; $<; $>; $ ; $^; $`; $"; $'; + // These don't need to be tested explicitly, the test will throw and error + // at the TypeScript parsing stage if they are part of the false positives