Single/double quote bug in sass/stylesheet Webpack loader? - sass

I've run into an issue with a chain of webpack loaders for scss files, where sometimes using single quotes for a string (legal in Sass, as I understant) causes a compile fail. I have an example that can be run, here, based on small changes from the AngularClass angular starter app:
https://github.com/karptonite/angular2-webpack-starter
You can see the relevant Webpack rule here.
This commit shows the only changes from the vanilla starter from AngularClass necessary to reproduce the bug. Instructions to reproduce the compile failure are in the README of the repo.
I'd like to report this as a bug, but I'm having trouble determining which loader to blame. possible culprits include sass-loader, resolve-url-loader, css-loader, and the ExtractTextPlugin.
I know for a fact that the error does not occur when I remove the resolve-url-loader, but it also doesn't seem to occur when I don't use the ExtractTextPlugin.
I spent hours tracking down why the build wasn't working before discovering it was the single/double quote issue; I'd like to save other people that time by reporting it to the correct repo, if I can figure out what package is at fault, but I don't know enough about how these loaders work to track it down. Can someone who understands Webpack and/or Sass take a look at this, and tell me if I've found a legitimate bug, and, if so, which loader should be fixing it?

Related

startup MAUI app loads packed with errors

I'm trying to start a dotnet MAUI app following the tutorial of MS in their official docs
I'm just opening the startup MAUI project(the built-in default one) and VS22 just won't have it. I get 40+ errors most of them about reference missing and duplication of classes/functions
glimps from the errors I get
now I have already seen a post here having somewhat of the same problem but the solutions(restarting and downloading workloads from the CLI using - dotnet workload intall) just didn't work for me.
I haven't done any changes to the code whatsoever so I really don't get what is the problem here.
any help would be appreciated.
Edit 1:
The app do seems to be working when I run the android simulator… which makes it even weirder
This is a bug in the tooling at the moment it seems. If you look at the errors, especially the ones in your screenshot you can see that these talk about Android. If you expand the Project column for a little you will see the list of target platforms that it's talking about.
Because everything is in 1 project now, it gives errors about platform-specific stuff because it is only looking at that one target that it's building. In this case, maybe you were building iOS and it gives errors about not being able to find Android types. This makes sense, however, we shouldn't see these errors in this case.
It's a bit hard to explain like this, I hope it makes any sense.
Long story short, it's a bug, it's being worked on. And you should be able to ignore them and it would still run as you've already discovered yourself. It gives a lot of noise however and if there is an actual error, you will have to find that in this list and fix that.

NativeScript markingMode: none errors

I'm part of a team that's using NativeScript and angular and we keep getting errors that look like:
Error: com.tns.NativeScriptException: Attempt to use cleared object reference id=<some-object-id-number>
From some research it's because we use markingMode: none in order to speed up our application. We want to keep using this so we need to find the source of the errors. From the documentation, it comes from creating a native object then wrapping it in a JS method so the garbage collector removes the native object in the method but since it's still being referenced an error is thrown. The documentation also indicated that this most likely stems from using plugins that haven't adapted to markingMode: none. The plugin I believe that's causing this is the nstudio nativescript-checkbox plugin. So I looked through the source code to try to find the native options that fit the criteria and my issues are the following:
I'm not sure if I'm finding all the native objects.
I don't know where to release them in the code.
I'm not sure if this plugin is the only one that's causing issues (we use a lot of plugins and all of them are pretty integral to our code).
I scoured our code base and couldn't find any instances where this may be a problem, but I could be wrong.
If anyone has experienced this markingMode: none issue, specifically with plugins, I would love to hear how you dealt with it and if you had any tips/suggestions moving forward. Here's the documentation detailing this issue:
https://docs.nativescript.org/core-concepts/android-runtime/advanced-topics/marking-mode-none
The NativeScript developers said it was fixed in this bug fix with an update, but I haven't noticed a change:
https://github.com/NativeScript/NativeScript/issues/7125
UPDATE: I commented out the checkbox plugin and no error, this is definitely being caused by the plugin
Removed all instances of the checkbox component and the side navigation bar and made our own custom components for them.

elm-brunch watch is missing some of my Elm file changes

I'm uncertain if this is an issue with Brunch or elm-brunch or some configuration detail I've screwed up. Frequently, when I change an Elm file in my project, the compilation will appear to run, but the result will show elm compiler errors that were fixed on the last save. The errors disappear if I quit and rerun the watch command. I'm not sure why this is happening or even how to narrow down the possibilities.
For setup details, I'm running it using brunch-with-elm-and-electron as boilerplate. My brunch version is 2.9.1.
Your configuration is ok. This is both brunch and elm-brunch issue. Brunch plugins are designed to compile each file separately on change. elm-brunch, however, runs elm-make for elm modules instead. That's why brunch cache is not being updated properly, causing redundant error messages.
Unfortunately, there is no quick fix, but we are looking into the problem. Here's the GitHub issue to track a progress. Thanks a lot, this is a good catch!
UPD: Here's the pull request that should fix the issue.

sass-lint in Atom throws 'Unexpected Parse Error'

I have several simple .scss (SAAS) files and for each one I get a sass-lint error.
Unexpected Parse Error
To the best of my knowledge, I have the most current sass-lint plugin for Atom. It doesn't seem to affect anything and is more of a annoyance, however I would also love to know if I am doing something incorrectly.
Example code that generates the error:
$primaryFont: 'Lora';
$secondaryFont: 'Roboto';
$primaryHeader: 'Montserrat';
Don't worry it's not you it's sass-lint!
It is because you are indenting with spaces, there is a bug in one of sass-lint's dependencies that causes Unexpected parse error in file to be logged when you indent with tabs rather than spaces. It looks like they are planning to have it resolved in the next release, at which point the maintainer of the Atom plugin will need to update the dependencies of the Atom Package and publish a new version.
I figured this out by taking a look at the package.json for sass-lint and specifically at the dependencies on line 21, there is a direct dependency upon the sass-lint NPM package. From there you can go back to the GitHub Repository which has all of the issues including #560 which describes the exact issue you are experiencing.
I have created GitHub Issue on the sass-lint Atom Package for this, it is externally blocked by Issue #62 on sasstools/sass-lint, i.e. the NPM package, which was updated a couple of days ago by Dan Purdy who stated:
We're at a bit of a crossroads at the moment, while running through our tests on all platforms we've found the latest version of the AST fixes a lot of our issues but also breaks a few things. Specifically Sass format on windows mainly. There's also some pretty annoying windows bugs left over so we're currently debating and looking into what our best course of action is. I hope to have 1.6 out soon though... I just can't say when.
You can always try validating your .sass-lint.yml here online YAML lint tool

Debugging bundled javascript in WebStorm

Is there a way to debug a bundled javascript in WebStorm setting breakpoints in the files that are source for bundling, instead of the bundle itself?
I use browserify as bundling package, but I can consider using other ones. The only limitation is that I use grunt as a task runner. Seems there is something that could be a solution here, but it us for gulp. There mentioned vinyl-source-stream as a part of the solution, but I am not sure if it is worth trying with grunt.
What I tried is
using browserify: { options: { debug: true; } }
using mold-source-map and some other related things found here on SO
using uglify as source map generator
some other things that are not worth mentioning
Any one- or two-step things I tried just did not work.
Seems it is too sophisticated to search the way consciously, only try-and-error would work, but I don't have enough time for it.
What I hope to find is a working example of the web storm project where I can set a breakpoint in source js before debugging. But any hint or direction would be appreciated.
Well, if nobody helps me and I find the solution later, I'll surely blog it out as step-by-step instruction. But I am not sure that this is possible due to people who understand more than me in browser debugging told that source map cannot be generated so as to point to the files other that actually executing in browser js engine. So the answer with more detailed explanation why it is not possible can also be accepted.

Resources