From 15186953bedf10b2fd256f77d6db63b322af4ed9 Mon Sep 17 00:00:00 2001 From: "keisuke.karino" Date: Wed, 10 Nov 2021 13:46:33 +0900 Subject: [PATCH 1/2] Bump version to 1.0.11 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8203472..67c6be2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ts-css-modules-vite-plugin", - "version": "1.0.10", + "version": "1.0.11", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index db947ee..5ae175e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ts-css-modules-vite-plugin", - "version": "1.0.10", + "version": "1.0.11", "description": "Read the definition of'vite.config.ts' and resolve the CSS Modules type.", "main": "dist/index.js", "scripts": { From fe571fa2fb9b0d386d74293ebf0171fa90366e5c Mon Sep 17 00:00:00 2001 From: "keisuke.karino" Date: Wed, 10 Nov 2021 14:12:23 +0900 Subject: [PATCH 2/2] Resolve __dirname --- src/css.ts | 37 +++++++++++++++++++++++--------- src/index.ts | 60 +++++++++++++++++++--------------------------------- src/util.ts | 5 ----- 3 files changed, 49 insertions(+), 53 deletions(-) diff --git a/src/css.ts b/src/css.ts index d3211df..3deed90 100644 --- a/src/css.ts +++ b/src/css.ts @@ -7,36 +7,42 @@ export const parseCss = ( log: Log, file: string, fileName: string, - config: ResolvedConfig + config: ResolvedConfig, + dirName: string ): string => { const options = getPreprocessorOptions(config); - const finalImporter = []; + const finalImporters = []; if (options.importer) { - Array.isArray(options.importer) - ? finalImporter.push(...options.importer) - : finalImporter.push(options.importer); + const tempImporters = Array.isArray(options.importer) + ? [...options.importer] + : [options.importer]; + + finalImporters.push( + ...tempImporters.map((tempImporter) => + replaceDirNameInFunc(log, tempImporter, dirName) + ) + ); } log( - `getData(file, fileName, options.additionalData):${getData( + `getData(file, fileName, options.additionalData): ${getData( file, fileName, options.additionalData )}` ); - log(`finalImporter:${finalImporter}`); - log(`finalImporter:${typeof finalImporter[0]}`); + log(`finalImporter:${finalImporters}`); const result = sass.renderSync({ ...options, data: getData(file, fileName, options.additionalData), file: fileName, includePaths: options.includePaths, - importer: finalImporter, + importer: finalImporters, }); - log(`result.css.toString():${result.css.toString()}`); + log(`result.css.toString(): ${result.css.toString()}`); return result.css.toString(); }; @@ -52,3 +58,14 @@ const getData = ( } return `${additionalData}\n${data}`; }; + +export const replaceDirNameInFunc = ( + log: Log, + importer: Function, + currDirName: string +) => { + const replacedFunc = importer.toString().replace("__dirname", currDirName); + log(`replacedFunc: ${replacedFunc}`); + const func = new Function(`return function ${replacedFunc}`); + return func(); +}; diff --git a/src/index.ts b/src/index.ts index 02ed8cc..3f51765 100644 --- a/src/index.ts +++ b/src/index.ts @@ -19,9 +19,9 @@ const factory: ts.server.PluginModuleFactory = (mod: { info.project.projectService.logger.info( `[ts-css-modules-vite-plugin] "${logText}"` ); + log(`dirName: ${dirName}`); // resolve vite.config.ts - log(`${dirName}`); const config: ResolvedConfig | undefined = getViteConfig(log, dirName); const { languageService: ls, languageServiceHost: lsh } = info; @@ -40,22 +40,18 @@ const factory: ts.server.PluginModuleFactory = (mod: { resolveModuleNames: lsh.resolveModuleNames, }; - mod.typescript.createLanguageServiceSourceFile = ( - fileName, - scriptSnapshot, - scriptTarget, - version, - setNodeParents, - scriptKind - ): ts.SourceFile => { + const generateScriptSnapshot = ( + scriptSnapshot: ts.IScriptSnapshot, + fileName: any + ) => { if (isCSSFile(fileName)) { if (config) { let css = scriptSnapshot.getText(0, scriptSnapshot.getLength()); if (fileName.endsWith(".css")) { } else { try { - css = parseCss(log, css, fileName, config); - log(`css${css}`); + css = parseCss(log, css, fileName, config, dirName); + log(`css: ${css}`); } catch (e) { log(`${e}`); } @@ -65,16 +61,28 @@ const factory: ts.server.PluginModuleFactory = (mod: { ); for (const classNameKey of classNameKeys) { - log(`classNameKey${classNameKey}`); + log(`classNameKey: ${classNameKey}`); } scriptSnapshot = ts.ScriptSnapshot.fromString( formatClassNames(classNameKeys) ); } } + + return scriptSnapshot; + }; + + mod.typescript.createLanguageServiceSourceFile = ( + fileName, + scriptSnapshot, + scriptTarget, + version, + setNodeParents, + scriptKind + ): ts.SourceFile => { return delegate.createLanguageServiceSourceFile( fileName, - scriptSnapshot, + generateScriptSnapshot(scriptSnapshot, fileName), scriptTarget, version, setNodeParents, @@ -90,34 +98,10 @@ const factory: ts.server.PluginModuleFactory = (mod: { aggressiveChecks ): ts.SourceFile => { const fileName = sourceFile.fileName; - if (isCSSFile(fileName)) { - if (config) { - let css = scriptSnapshot.getText(0, scriptSnapshot.getLength()); - if (fileName.endsWith(".css")) { - } else { - try { - css = parseCss(log, css, fileName, config); - log(`css${css}`); - } catch (e) { - log(`${e}`); - } - } - const classNameKeys = extractClassNameKeys( - postcssJs.objectify(postcss.parse(css)) - ); - - for (const classNameKey of classNameKeys) { - log(`classNameKey${classNameKey}`); - } - scriptSnapshot = ts.ScriptSnapshot.fromString( - formatClassNames(classNameKeys) - ); - } - } return delegate.updateLanguageServiceSourceFile( sourceFile, - scriptSnapshot, + generateScriptSnapshot(scriptSnapshot, fileName), version, textChangeRange, aggressiveChecks diff --git a/src/util.ts b/src/util.ts index 9aaa09a..1f59068 100644 --- a/src/util.ts +++ b/src/util.ts @@ -2,8 +2,3 @@ export const cssLangs = `\\.(css|sass|scss)($|\\?)`; export const cssLangReg = new RegExp(cssLangs); export const isCSSFile = (request: string): boolean => cssLangReg.test(request); - -// export const getRelativePath = ( -// from: string | undefined, -// to: string | undefined -// ) => path.relative(path.dirname(from || ""), path.dirname(to || "")) || "./";