Use postcss with esbuild
License: MIT License
I'm Marton, a 20 years old web developer from Hungary.
🦔 Founder of ArConnect Arweave Wallet
👨💻 Working at Community Labs (We raised $30M!)
👥 Core team member at @nestdotland
Hi, thanks for this plugin! I'm wondering if this allows using esbuild with the tailwind CSS processor?
The project setup I am working with at the moment requires that I set the "includePaths" option when rendering the sass contents to correctly resolve imports.
However this isn't possible with the current plugin options API.
I have "patched" this plugin locally in my node_modules to include a sassOptions option that just gets passed to the sass render call.
If this solution is fine, I am happy to make a PR to add sassOptions, lessOptions, and stylusOptions as plugin options that will each get passed to their respective render call.
Problem with escaping backslash from args.path
All the examples in the README seem broken:
const postCssPlugin = require("esbuild-plugin-postcss2");
// ...
postCssPlugin()
// ...
$ node
Welcome to Node.js v14.17.6.
Type ".help" for more information.
> const postCssPlugin = require("esbuild-plugin-postcss2");
undefined
> postCssPlugin()
Uncaught TypeError: postCssPlugin is not a function
> typeof postCssPlugin
'object'
> postCssPlugin
{ default: [Getter] }
>
(This is with "esbuild-plugin-postcss2": "^0.1.0")
Right now there is no way to control how the plugin decides if a file should be treated as a module, cause regexp for that is hard-coded as /\.module/.
If I want to use any of my css/sass files as a module, I have to name them all as *.module.css.
Do you think we can make this configurable?
I was working on a project on a Windows machine, with the source code stored under C:\d\project, and upon trying to use this plugin, found that it was generating bad temp file paths along the lines of C:\Users\d\project\date-filename.css
To explore this a bit further, I then moved the project code to be located in C:\Users\username\d\project, which then started working - albeit with a still incorrect temp file location of C:\Users\username\AppData\d\project\date-filename.css (the temp path for Windows is C:\Users\username\AppData\Local\Temp)
I hadn't set the rootDir property in the plugin, so it was using process.cwd() with... Interesting results 🤦♂️
As part of playing around with this, I also found that Windows does not automatically clean up temp files, and the developer is expected to clean these files up themselves (ref: https://superuser.com/a/296827)
I'm trying to use this with Sass's math.div method for division, but am getting
error: [plugin: postcss2] There is no module with the namespace "math"
npm install -D esbuild esbuild-plugin-postcss2
create build.js
const esbuild = require('esbuild')
const postCssPlugin = require('esbuild-plugin-postcss2')
// Build CSS
esbuild.build({
entryPoints: ['src/css/app.css'],
plugins: [
postCssPlugin()
],
outfile: 'dist/css/app.css'
})
run node build.js
Error: postCssPlugin() is not a function
Hi,
i sincerely didn't understand how to use this with sass. Can you explain that to me?
Thanks!
This plugin is working if I import css from a JS file. However, I'd like to use a CSS file as an entrypoint to allow watch mode to work when making CSS changes. Is this possible using the esbuild plugin system?
From #16 (comment)
Just so we don't lose track of it.
Possible reasons:
Init an near-empty react project from template: https://github.com/baurine/esbuild-react-app-ts-template/tree/refine_builder
Currently, it has only esbuild self, no any plugins.
Install bulma-css by following https://www.npmjs.com/package/bulma
$ yarn add bulma
import "bulma/css/bulma.css" in src/App.tsx or @import "bulma/css/bulma.css"; in src/style.css, both work fine, esbuild can compile CSS by itself.
// src/App.tsx
import "bulma/css/bulma.css"Or
/* src/style.css */
@import "bulma/css/bulma.css";Demo code: miscs-test/esbuild-demo@fce2e09
Install esbuild-plugin-postcss2 to handle CSS files.
$ yarn add esbuild-plugin-postcss2 -D
If I import bulma.css in the App.tsx, running yarn build reports following errors:
$ NODE_ENV=production node builder.js
> src/App.tsx:6:7: error: [plugin: postcss2] ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'
6 │ import 'bulma/css/bulma.css'
╵ ~~~~~~~~~~~~~~~~~~~~~
node_modules/esbuild-plugin-postcss2/dist/index.js:65:10: note: This error came from the "onResolve" callback registered here
65 │ build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
╵ ~~~~~~~~~
at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)
at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)
at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17
at new Promise (<anonymous>)
at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)
at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25
at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)
/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1478
let error = new Error(`${text}${summary}`);
^
Error: Build failed with 1 error:
src/App.tsx:6:7: error: [plugin: postcss2] ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'
at failureErrorWithLog (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1478:15)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1136:28
at runOnEndCallbacks (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:926:63)
at buildResponseToResult (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1134:7)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1243:14
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:614:9
at handleIncomingPacket (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:711:9)
at Socket.readFromStdout (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:581:7)
at Socket.emit (node:events:390:28)
at addChunk (node:internal/streams/readable:315:12) {
errors: [
{
detail: [Error: ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'
},
location: {
column: 7,
file: 'src/App.tsx',
length: 21,
line: 6,
lineText: "import 'bulma/css/bulma.css'",
namespace: '',
suggestion: ''
},
notes: [
{
location: {
column: 10,
file: 'node_modules/esbuild-plugin-postcss2/dist/index.js',
length: 9,
line: 65,
lineText: ' build.onResolve({filter: /.\\.(css|sass|scss|less|styl)$/}, async (args) => {\n' +
' at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)\n' +
' at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)\n' +
' at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)\n' +
' at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17\n' +
' at new Promise (<anonymous>)\n' +
' at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)\n' +
' at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)\n' +
' at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25\n' +
' at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)',
namespace: 'file',
suggestion: ''
},
text: 'This error came from the "onResolve" callback registered here'
}
],
pluginName: 'postcss2',
text: "ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'"
}
],
warnings: []
}
error Command failed with exit code 1.
If I import the bulma.css in the style.css, it reports the following errors:
$ NODE_ENV=production node builder.js
> ../../../../../../tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/style.css:3:8: error: [plugin: postcss2] ENOENT: no such file or directory, open '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'
3 │ @import 'bulma/css/bulma.css';
╵ ~~~~~~~~~~~~~~~~~~~~~
node_modules/esbuild-plugin-postcss2/dist/index.js:65:10: note: This error came from the "onResolve" callback registered here
65 │ build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
╵ ~~~~~~~~~
at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)
at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)
at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17
at new Promise (<anonymous>)
at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)
at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25
at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)
/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1478
let error = new Error(`${text}${summary}`);
^
Error: Build failed with 1 error:
../../../../../../tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/style.css:3:8: error: [plugin: postcss2] ENOENT: no such file or directory, open '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'
at failureErrorWithLog (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1478:15)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1136:28
at runOnEndCallbacks (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:926:63)
at buildResponseToResult (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1134:7)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1243:14
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:614:9
at handleIncomingPacket (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:711:9)
at Socket.readFromStdout (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:581:7)
at Socket.emit (node:events:390:28)
at addChunk (node:internal/streams/readable:315:12) {
errors: [
{
detail: [Error: ENOENT: no such file or directory, open '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'
},
location: {
column: 8,
file: '../../../../../../tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/style.css',
length: 21,
line: 3,
lineText: "@import 'bulma/css/bulma.css';",
namespace: '',
suggestion: ''
},
notes: [
{
location: {
column: 10,
file: 'node_modules/esbuild-plugin-postcss2/dist/index.js',
length: 9,
line: 65,
lineText: ' build.onResolve({filter: /.\\.(css|sass|scss|less|styl)$/}, async (args) => {\n' +
' at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)\n' +
' at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)\n' +
' at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)\n' +
' at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17\n' +
' at new Promise (<anonymous>)\n' +
' at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)\n' +
' at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)\n' +
' at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25\n' +
' at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)',
namespace: 'file',
suggestion: ''
},
text: 'This error came from the "onResolve" callback registered here'
}
],
pluginName: 'postcss2',
text: "ENOENT: no such file or directory, open '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'"
}
],
warnings: []
}
error Command failed with exit code 1.
Demo code: miscs-test/esbuild-demo@3c7dac6
I found the reason is that the below line code doesn't work as expect:
esbuild-plugin-postcss2/src/index.ts
Line 88 in b631aa4
let sourceFullPath = resolveFile(args.path);When args.path is bulma/css/bulma.css, it returns null.
I also report the issue to resolve-file lib: doowb/resolve-file#2 (comment)
I can workaround this bug by following 3 methods:
hack the node_modules/resolve-file/index.js, modify the following code:
if (!utils.exists(file.path)) {
try {
if (/[\\\/]/.test(name)) {
file.basename = path.basename(name);
var dirname = path.dirname(name);
file.name = path.basename(dirname);
- file.main = require.resolve(dirname);
+ // file.main = require.resolve(dirname);
+ file.main = require.resolve(name);
file.path = path.resolve(path.dirname(file.main), file.basename);
}hack the node_modules/esbuild-plugin-postcss2/dist/index.js, remove the css| from the onResolve filters, so esbuild-plugin-postcss2 won't parse the css, and esbuild self will parse it.
hack the node_modules/esbuild-plugin-postcss2/dist/index.js, add following logic:
// hack
let exist = await import_fs_extra.exists(sourceFullPath)
if (!exist) {
sourceFullPath = import_path.default.resolve(
process.cwd(),
'node_modules',
args.path
)
}Unlike 0.1.1, 0.1.2 doesn't write a .css file when compiling.
I'm not sure what the problem is but it's not just for me, and in Github Actions the tests failed.
Hey there! I was trying this out today and everything seems to work great.
The only thing I noticed was that if we were to run esbuild and watch, if we introduce a typo in the CSS, the watcher hangs forever will no longer rebuild.
Here's logs from a successful first build, introducnig an invalid line of CSS, the build error, and no further rebuilds.
± yarn run build --watch
yarn run v1.22.11
$ node ./esbuild.config.js --watch
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
[watch] build finished
> app/javascript/application.js:5:7: error: [plugin: postcss2] expected "}".
╷
10 │ }
│ ^
╵
app/javascript/stylesheets/application.scss 10:4 root stylesheet
5 │ import "./stylesheets/application.scss"
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/esbuild-plugin-postcss2/dist/index.js:64:10: note: This error came from the "onResolve" callback registered here
64 │ build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
╵ ~~~~~~~~~
at setup (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild-plugin-postcss2/dist/index.js:64:11)
at handlePlugins (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:736:23)
at Object.buildOrServe (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1024:7)
at /Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1756:17
at new Promise (<anonymous>)
at Object.build (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1755:14)
at Object.build (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1631:51)
at Object.<anonymous> (/Users/chris/code/tailwind-jsbuilding-example/esbuild.config.js:35:9)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
[watch] build failed Error: Build failed with 1 error:
app/javascript/application.js:5:7: error: [plugin: postcss2] expected "}".
╷
10 │ }
│ ^
╵
app/javascript/stylesheets/application.scss 10:4 root stylesheet
at failureErrorWithLog (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1451:15)
at /Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1192:39
at runOnEndCallbacks (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:921:63)
at /Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1189:17
at handleRequest (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:673:15)
at handleIncomingPacket (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:699:7)
at Socket.readFromStdout (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:576:7)
at Socket.emit (events.js:315:20)
at addChunk (_stream_readable.js:309:12)
at readableAddChunk (_stream_readable.js:284:9) {
errors: [
{
detail: [Error],
location: [Object],
notes: [Array],
pluginName: 'postcss2',
text: 'expected "}".\n' +
' ╷\n' +
'10 │ }\n' +
' │ ^\n' +
' ╵\n' +
' app/javascript/stylesheets/application.scss 10:4 root stylesheet'
}
],
warnings: []
}I use @fluentui/react components in my react project, it works fine if I don't install esbuild-plugin-postcss2. After installing this plugin, it will report errors when compiling the @fluentui/react.
$ NODE_ENV=production node builder.js
> node_modules/@fluentui/react/lib/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.js:2:7: error: [plugin: postcss2] ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/@fluentui/react/lib/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.scss'
2 │ import './ExtendedPeoplePicker.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/esbuild-plugin-postcss2/dist/index.js:65:10: note: This error came from the "onResolve" callback registered here
65 │ build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
╵ ~~~~~~~~~
at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)
at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)
at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17
at new Promise (<anonymous>)
at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)
at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)
at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25
at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)
> node_modules/@fluentui/react/lib/components/ExtendedPicker/BaseExtendedPicker.js:5:30: error: [plugin: postcss2] ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/@fluentui/react/lib/components/ExtendedPicker/BaseExtendedPicker.scss'
5 │ import * as stylesImport from './BaseExtendedPicker.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/esbuild-plugin-postcss2/dist/index.js:65:10: note: This error came from the "onResolve" callback registered here
65 │ build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
╵ ~~~~~~~~~
at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)
But I think the root reason is caused by esbuild self, so I report the issue to esbuild as well:
Hi,
I think you should remove this from package.json
"pre-commit": "prettier --write . && git add -A"
It is a dangerous option, that can silently delete changes made by the developer and will also screw git softwares using changelists, as well as a simple selective commit in git cli.
It can safely be replaced with an integration of prettier in your IDE that would fix cs on save.
With that said I leave it up to you the decision to remove it or not.
I just switch from postcss standalone usage to this esbuild plugin.
I've got a error while building assets when esbuild sourcemap option is activated. Not really sure what is the exact issue.
I did a small add to reproduce my issue https://github.com/nicolas-brousse/esbuild-plugin-postcss2-sourcemap-example
% yarn build:js
yarn run v1.22.10
$ node esbuild.config.js
> ../../../../../tmp/tmp-9410-w6LlF5dL3Txt/esbuild/src/vendors.css:1091:21: debug: Failed to read file "../../../../../tmp/tmp-9410-w6LlF5dL3Txt/esbuild/src/vendors.css.map": open /tmp/tmp-9410-w6LlF5dL3Txt/esbuild/src/vendors.css.map: no such file or directory
1091 │ /*# sourceMappingURL=vendors.css.map */
╵ ~~~~~~~~~~~~~~~
build/vendors.css 24.0kb
build/vendors.css.map 31.3kb
Done in 0.66s.I'm trying to compile my style which has references to font files via src: url("../path/some-font.ttf")
I'm getting the following error :
> ../../../../var/folders/5l/br5w2k5d4f32hmcysvmf0gjh0000gn/T/tmp-22896-OBMEyq54PUj8/17babdb14690/application.css:2281:11: error: Could not resolve "../path/some-font.ttf"
2281 │ src: url('../path/some-font.ttf');
╵ ~~~~~~~~~~~~~~~~~~~~
at failureErrorWithLog (homepath/node_modules/esbuild/lib/main.js:1451:15)
at homepath/node_modules/esbuild/lib/main.js:1131:28
at runOnEndCallbacks (homepath/node_modules/esbuild/lib/main.js:921:63)
at buildResponseToResult (homepath/node_modules/esbuild/lib/main.js:1129:7)
at homepath/node_modules/esbuild/lib/main.js:1238:14
at homepath/node_modules/esbuild/lib/main.js:609:9
at handleIncomingPacket (homepath/node_modules/esbuild/lib/main.js:706:9)
at Socket.readFromStdout (homepath/node_modules/esbuild/lib/main.js:576:7)
at Socket.emit (events.js:315:20)
at addChunk (internal/streams/readable.js:309:12)
Am I missing something ?
Thanks !
Hello, here i am again.
I'm trying to run some postcss plugins without luck.
I'm parsing a sass file and then i use autoprefixer, and it works like a charm.
Now i'm trying to minify the output, with cssnano.
const esbuild = require('esbuild');
const postCSSPlugin = require('esbuild-plugin-postcss2');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
esbuild.build({
entryPoints: ['index.js'],
bundle: true,
outfile: 'dist/bundle.js',
plugins: [
postCSSPlugin.default({
plugins: [
autoprefixer,
cssnano,
],
}),
],
}).catch((e) => console.error(e.message))
It doesn't give me any error, but it's not minifying anything.
Can you help me? thanks :)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.