koluch / esbuild-plugin-css-modules Goto Github PK

View Code? Open in Web Editor NEW

13.0 13.0 3.0 201 KB

Plugin for esbuild to support CSS-modules

TypeScript 97.68% CSS 0.42% JavaScript 1.90%

esbuild-plugin-css-modules's People

Contributors

Stargazers

Watchers

Forkers

atomicpages thelonelyadventurer srpatx

esbuild-plugin-css-modules's Issues

Does not work on Windows

This plugin fails on Windows because of backslashes in paths.

This is my case:

esbuild.build({
  entryPoints: [ './src/index.js' ],
  bundle: true,
  outfile: './dist/bundle.js',
  plugins:
    [ esbuild_sass()
    , esbuild_css_modules(
    { localIdentName: "[local]--[hash:8:md5:hex]"
    , extension: '.module.css'
    }
    )
    ],
  minify: !isDev(),
  minifyIdentifiers: !isDev(),
  minifySyntax: !isDev(),
  minifyWhitespace: !isDev(),
  sourcemap: isDev() ? 'external' : false,
  platform: 'browser'
})

Which currently produces this result:

Error: Build failed with 1 error:
../../../AppData/Local/Temp/tmp-5848-66jQXSM4BQce/nuts/src/index.module.css:2:15: error: Could not resolve "C:Users\rmancAppDataAppDataLocalTemp\tmp-5848-66jQXSM4BQce\nutssrcindex.css" (mark it as external to exclude it from the bundle)
    at failureErrorWithLog (C:\Users\rmanc\Documents\projs\nuts\node_modules\esbuild\lib\main.js:1449:15)
    at C:\Users\rmanc\Documents\projs\nuts\node_modules\esbuild\lib\main.js:1131:28
    at runOnEndCallbacks (C:\Users\rmanc\Documents\projs\nuts\node_modules\esbuild\lib\main.js:921:63)
    at buildResponseToResult (C:\Users\rmanc\Documents\projs\nuts\node_modules\esbuild\lib\main.js:1129:7)
    at C:\Users\rmanc\Documents\projs\nuts\node_modules\esbuild\lib\main.js:1236:14
    at handleIncomingPacket (C:\Users\rmanc\Documents\projs\nuts\node_modules\esbuild\lib\main.js:706:9)
    at Socket.readFromStdout (C:\Users\rmanc\Documents\projs\nuts\node_modules\esbuild\lib\main.js:576:7)
    at Socket.emit (events.js:376:20)
    at addChunk (internal/streams/readable.js:309:12)
error Command failed with exit code 1.

I noticed the path C:Users\rmancAppDataAppDataLocalTemp\tmp-5848-66jQXSM4BQce\nutssrcindex.css and looked at the source:

esbuild-plugin-css-modules/index.ts

Lines 128 to 132 in 1f97e22

 let contents = ` 

  import "${tmpFilePath}"; 

  const result = ${JSON.stringify(classMap)}; 

  export default result; 

  `;

The generated code looks like this:

import "C:\Users\rmanc\AppData\AppData\Local\Temp\tmp-5848-66jQXSM4BQce\nuts\src\index.css";
const result = {"test":"test--h0aba64c6"};
export default result;

which obviously doesn't work.

I've managed to make it work by wrapping tmpFilePath with https://github.com/sindresorhus/slash.

I'm writing a PR addressing this issue.

I'm trying this out with the latest esbuild 0.12.5, via a hacked-together version of snowpack, so I could have broken something there, but I'm finding that the output is mapping the wrong thing, I get values like:

var result3 = { "_Input_12syk_1": "h420205b8d955473ee51fd9760bbe0f66", "_Input___error_12syk_51": "hcc1aea921f960ec121be40adeeaf789b" };
var Input_module_default = result3;

Where I thought the keys should be something like just Input and the value should be _Input_12syk_1.

[ERROR] Could not resolve (... some temp file)

I am sporadically getting these messages when I try to chain esbuild-plugin-sass followed by esbuild-plugin-css-modules.

The error is not happening consistently, so I assume it's some sort of race condition.

❯ ./build.js
✘ [ERROR] Could not resolve "/var/folders/tg/vwvky4sd66vgvjkl0njrkl000000gn/T/tmp-87375-BNfLN4lwtij1/scrapbook-browser/lib/style/login.css"

    ../../../../../../var/folders/tg/vwvky4sd66vgvjkl0njrkl000000gn/T/tmp-87375-BNfLN4lwtij1/scrapbook-browser/lib/style/login.module.css:2:15:
      2 │         import "/var/folders/tg/vwvky4sd66vgvjkl0njrkl000000gn/T/tmp-87375-BNfLN4lwtij1/scrapbook-browser/lib/style/login.css";
        ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not resolve "/var/folders/tg/vwvky4sd66vgvjkl0njrkl000000gn/T/tmp-87375-bqafdvagfR2x/scrapbook-browser/lib/style/login.css"

    ../../../../../../var/folders/tg/vwvky4sd66vgvjkl0njrkl000000gn/T/tmp-87375-bqafdvagfR2x/scrapbook-browser/lib/style/login.module.css:2:15:
      2 │         import "/var/folders/tg/vwvky4sd66vgvjkl0njrkl000000gn/T/tmp-87375-bqafdvagfR2x/scrapbook-browser/lib/style/login.css";
        ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

koluch / esbuild-plugin-css-modules Goto Github PK

esbuild-plugin-css-modules's People

Contributors

Stargazers

Watchers

Forkers

esbuild-plugin-css-modules's Issues

Does not work on Windows

Result map is incorrect

[ERROR] Could not resolve (... some temp file)

Could this plugin handle .module.scss

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	let contents = `
	import "${tmpFilePath}";
	const result = ${JSON.stringify(classMap)};
	export default result;
	`;