We Keep Coding

VS Code emmet custom snippets in .vue file

I'm loving the power of Emmet snippets in VS Code as I am new to this IDE. I have a question that I can't seem to google to get an answer. So I figured out how to add emmet snippets into my .vue files by adding the following into my VS code settings.json:
"emmet.syntaxProfiles": {
"vue-html":"html",
"vue":"html",
}
And that works well, but I wanted to add a couple custom snippets, so I added this entry as well:
"emmet.extensionsPath": [
"C:\\CodeSnippets"
],
The relevant code in one of those snippet files is the following:
{
"html": {
"snippets": {
"ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
"oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
"vgc": "{ Wrap plain text in curly braces }",
"ig": "{import ${1} from './${2:components}/${1}.vue'}"
}
},
"css": {
"snippets": {
}
}
}
Now when I'm inside of a '.html' file I can type oll and it will add the snippet as seen in screenshot .
But when inside of the .vue file I type the same thing and nothing happens. Now I know Emmet is working in my .vue file because I can do other emmet stuff in there as seen in screen shot below:
I'm sure I'm missing some type of configuration but can't figure it out. Any ideas?

What you're looking for is probably
> Snippets: Configure User Snippets
Then selecting
vue-html.json
With this example JSON
{
"test snippet": {
"prefix": "vvtest",
"body": [
"some ${1:test}"
],
"description": "some random test snippet for the template part of Vue"
}
}
Press tab and you'll get the following
PS: note that the ${1:test} part will make that test is highlighted so that it can be quickly overridden. You can also cycle towards a number 2, 3, etc...with other $2 ... with tab.
Here is the official page for this feature.

How can I fix my postcss config so that the ":has" plugin works?

I am using postcss with vue 3 (vite). Here is my config:
package.json
"postcss-preset-env": "^7.8.3",
postcss.config.js
const postcssPresetEnv = require("postcss-preset-env");
module.exports = {
plugins: [
postcssPresetEnv({
features: {
"nesting-rules": true,
"has-pseudo-class": true,
},
}),
],
};
Nesting is working as expected, so I guess my config is correct
has-pseudo-class is doing nothing on Firefox 107
I know that this isn't working because the following code produces a purple border on Chromium (which natively supports :has), but nothing on Firefox 107:
.draggable:has(div) {
border: 1px solid purple !important;
}
What am I doing wrong? Have I misunderstood what the plugin does or how to use it?

This was not working because I needed to import and bootstrap the browser polyfill.
To solve the issue I added the following code to my HTML head
<script src="https://unpkg.com/css-has-pseudo#4.0.1/dist/browser-global.js"></script>
<script>cssHasPseudo(document, { hover: true })</script>
Note that you need to match the browser polyfill to the version of postcss-preset-env that you are using.
Thanks a bunch to the very helpful folks on the postcss discord chan for helping me troubleshoot this.

Firefox doesn't support the :has pseudo-class, so it won't polyfill it.
The Mozilla CSS Docs State
"From version 103: this feature is behind thelayout.css.has-selector.enabled preferences (needs to be set to true). To change preferences in Firefox, visit about:config."
See browser specifications here

VS code snippets for salesforce

I am trying to create some vs code snippets for aura and LWC(Salesforce specific languages) so I created one snippet file for javascript now it works in both the languages but is there a way I can restrict JS and html snippets to LWC only or also can someone please confirm how to create snippets for .cmp and .app files to be used on aura HTML, below is my js snippet which works in all sorts of js files and I and trying to restrict it to just lwc
"Print to console": {
"scope": "javascript",
"prefix": "gss",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
I tried using when
"when": "editorTextFocus && !editorReadonly && resourceExtname =~ /\\.cmp/"
But it says
Property when is not allowed.

SCRIPT5005: String expected - Rxjs crashes on IE 11 symbol polyfill

At work we have (sigh!) to support IE 11 for the current project I'm working on.
The project uses RxJS 6.
To support most of the features we've included, we used Webpack with Babel and core-js (as suggested by Babel itself) as polyfiller.
If we try to import RxJS, our application loading get stuck on a specific line:
Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]] = function () {
return this;
};
with the error SCRIPT5005: String Expected.
We are using the es5 transpiled version of RxJS. So the code original typescript code should be this one.
I know symbols are not supported in IE 11, as per Kangax's Ecmascript compatibility table and that core-js includes a polyfill for Symbols, and we are importing all the polyfills.
In fact, if I try to run this with the polyfill after the error through the console, it works perfectly.
var obj = {};
Object.defineProperty(obj, Symbol.for("test"), {
value: 5
});
What's weird is that if I try to set a breakpoint on the line that give us the error, I can access singularly to these components without problems.
Observable.prototype
_symbol_observable__WEBPACK_IMPORTED_MODULE_2__
_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]
The second and the third lines returns me an object.
If I do manually Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]] it still returns me the error.
Accessing to Object.prototype through an Object is not allowed (as using an object as index makes the container object automatically call .toString() on the key). Therefore IE returns me that error. Or, at least, I think that might be the reason.
What's more weird is that Symbol.for("test") returns an object that is the same as _symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"] (with description: test instead of observable). And if I do obj[Symbol.for("test")] it works perfectly.
Also, it seems like I'm unable to create variables or such while I'm stopped on a breakpoint in IE 11 console, so I cannot even export that symbol to test that later (it allows me to do var x = {}; or var x = 5, but if I call 'x', it throws me 'x' is undefined).
Any clues about this problem and how we might solve this?
Might this be a problem of the polyfill?
I'm attaching here below my webpack config and my .babelrc
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react', '#babel/preset-flow'],
},
},
exclude: /node_modules\/(core-js|(react.+)|(rxjs.+))/,
},
...
]
}
}
{
"presets": [
"#babel/preset-react",
"#babel/preset-flow",
["#babel/preset-env", {
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7",
"Explorer 11"
]
},
"useBuiltIns": true
}]
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-runtime"
],
"env": {
"test": {
"presets": ["#babel/preset-env", "#babel/preset-react", "#babel/preset-flow"]
}
}
}
Thank you.

TL;DR
Since we have a monorepo with multiple projects (a "sample app" that loads another project on its inside), I was including the core-js polyfill both on the sample app and in that project.
They were somehow conflicting, I'm still not sure why and how. This wasn't concerning rxjs but affecting it.
Also, I wrote a wrong regex on the webpack.config.js on babel-loader, but I'm not sure this was really affecting all.
It was: /node_modules\/(core-js|(react.+)|(rxjs.+))/
It should have been: /node_modules\/(core-js|rxjs|react[^\s+]*)/
Since I had to target the packages, not the files as I was thinking. I added a more complex regex on react to match also react-dom or other react-things (if any).
I was able to create a sample application that could work without problems.
I discovered RxJS has somehow its own polyfill for symbols.
In fact, running that sample with React, webpack, babel, rxjs but not core-js, wasn't giving any problem. (Note: the sample has core-js installed).
Setting a breaking point on
Observable.prototype[_symbol_observable__WEBPACK_IMPORTED_MODULE_2__["observable"]], reveals this:
While using core-js, it reveals this:
Although this difference, both with and without the sample, it works perfectly on that sample. So I thought how it was possible and thought that I read somewhere that the polyfill should have been loaded only once in the most global object.
Since we are developing a project in a mono-repo that has React-based Website and another complex React component that gets imported on runtime, and that website seemed to need also polyfills, I added core-js import on both the projects.
By removing the one on the website, the error changed (it got stuck on another point not concerning this one).
Moreover, as said in the TL;DR, I think there was a problem with the regex applied on babel-loader.

Kartograph: Map Creation fails

Recently I started using Kartograph. I am inexperienced in SVG, so the map creation is creating headaches for me. After initial trouble creating a world map that outlines country borders - similar to this - and a few other things(city regions and some decorating elements), my problem boils down to a undocumented - or at least I haven't found it in the docs - error. I guess it is related with my ignorance towards the kartograph.py framework.
The json file I provide Kartograph looks like that:
{
"proj": {
"id": "lonlat",
"lon0": 20,
"lat0": 0
},
"layers": {
"background": {
"special": "sea",
"charset": "latin-1",
"simplify": false
},
"graticule": {
"special": "graticule",
"charset": "latin-1",
"simplify": false,
"latitudes": 1,
"longitudes": 1,
"styles":{
"stroke-width": "0.3px"
}
},
"world":{
"src": "ne_50m_admin_0_countries.shp",
"charset": "latin-1",
"simplify": false
},
"lakes":{
"src": "Lakes.shp",
"charset": "latin-1",
"simplify": false
},
"trees":{
"src": "Trees.shp",
"charset": "latin-1",
"simplify": false
},
"depth":{
"src": "DepthContours.shp",
"charset": "latin-1",
"simplify": false
},
"cities":{
"src": "CityAreas.shp",
"charset": "latin-1",
"simplify": false
}
}
}
I know the output file will be huge and the generation will take ages, but it is just a test. I will experiment with the "simplify" option later. Much of the code in the file is based on this tutorial. Also, the empty simplify clause might not be necessary, but kartograph complained about the lack of the option, so I added it.
The command I use is this one:
kartograph world.json -o world.svg
It runs for some time(I guess, parsing all the input files etc.) before aborting. Now, the error I am facing is this one:
cli.py, in render_map()
71: K.generate(cfg, args.output, preview=args.preview, format=format, stylesheet=css) kartograph.py, in generate()
46: _map = Map(opts, self.layerCache, format=format) map.py, in __init__()
50: me.bounds_poly = me._init_bounds() map.py, in _init_bounds()
192: features = self._get_bounding_geometry() map.py, in _get_bounding_geometry()
257: charset=layer.options['charset']
get_features() got an unexpected keyword argument 'filter'
I tried looking at the file which throws the error(map.py), but I realized quickly that there's just too much interaction in the files for me to grasp things quickly.
I hope the data I provided is sufficient for someone more familiar with kartograph than me to track the error down.
UPDATE: The error is still valid. I tested it on both a MacBook Pro and an Asus Netbook now(Arch and Bodhi Linux, respectively).
Thanks in advance,
Carson

As far as I know, you can solve that problem by including a 'bounds' parameter. It is in deed very tricky, because according to the documentation (is it valid to call it 'documentation') this error should not appear, since the only required parameter is 'layers'. Also, how the bounds are defined depend apparently from the chosen projection. For your example I would use a simple polygon bounds.

I also had problems with that error. But, after many trials to set up everything, I noticed that apparently it only appears in the command-line version of Kartograph, and not when using Kartograph as a Python module in a script. I.e., try to include the json dictionary into a Python script where you import kartograph, like in the example here below.
I also put an example of filtering, for the record, because it was another thing that failed to work when using the command-line version of Kartograph.
# file: makeMap.py
from kartograph import Kartograph
K = Kartograph()
def myfilter(record):
return record['iso_a3'] in ["FRA","ITA","DEU"]
config = {
"layers": {
"mylayer": {
"src": "ne_50m_admin_0_countries.shp",
"filter": myfilter,
"attributes": {"iso_a3":"iso_a3", "name":"name", "id":"iso_a3"}
}
},
}
K.generate(config, outfile='world.svg')
Then, run the script as a Python script:
python makeMap.py