I am writing a Meteor application where I use jstree in several pages and in some modals.
Jstree itself uses some images (32px.png, 40px.png and throbber.gif).
To let Meteor serve these files, I have copied the files in a /public/jstree directory, and patched accordingly the jstree standard stylesheet, and I import the patched css from my js. All fine.
So I have:
$ du -a public/
4 public/jstree/40px.png
8 public/jstree/32px.png
4 public/jstree/throbber.gif
20 public/jstree
24 public/
and
$ grep -E '32px.png|40px.png|throbber' imports/client/components/panel/jstree-style-abs-path.css
background-image: url("/jstree/32px.png");
background: url("/jstree/throbber.gif") center center no-repeat;
background: url("/jstree/32px.png") -100px -68px no-repeat;
background: url("/jstree/32px.png") -260px -4px no-repeat;
background-image: url("/jstree/32px.png");
background-image: url("/jstree/32px.png");
background: url("/jstree/throbber.gif") center center no-repeat;
background: url("/jstree/32px.png") -103px -71px no-repeat;
background: url("/jstree/32px.png") -263px -7px no-repeat;
background-image: url("/jstree/32px.png");
background-image: url("/jstree/32px.png");
background: url("/jstree/throbber.gif") center center no-repeat;
background: url("/jstree/32px.png") -96px -64px no-repeat;
background: url("/jstree/32px.png") -256px 0px no-repeat;
background-image: url("/jstree/32px.png");
background-image: url("/jstree/40px.png");
background-image: url("/jstree/40px.png");
background-image: url("/jstree/40px.png");
background-image: url("/jstree/40px.png");
background: url("/jstree/40px.png") 0 -160px no-repeat;
background: url("/jstree/40px.png") -40px -40px no-repeat;
and
import { jstree } from 'jstree';
import './jstree-style-abs-path.css';
import './panel.html';
That works fine as long I stay on / route or /onelevel route. I mean that I correctly see the images in the tree.
As soon I try to go to /a/b or /a/b/c route, I see in the Network pane of my Chromium browser that images are searched in /a/jstree/32px.png for a /a/b route, or in /a/b/jstree/32px.png for a /a/b/c route! As a consequence, images are no more displayed.
[Edit]
Versions:
Meteor 2.10.0
kadira:blaze-layout 2.0.1
ostrio:flow-router-extra 3.9.0
I have published a very small application to exhibit this behavior.
At the moment, I am a bit stuck here.
IMHO, I believed that using an absolute path in the url of the css would prevent me from this type of behavior.
Do I must copy the resources for each and every route I expect to use ?
Any idea please ?
Thanks in advance for your help
After many hours, I cannot do anything else than confirming the bug.
But, I publish here a server-side work-around:
WebApp.connectHandlers.use( function( req, res, next ){
const indexOf = req.url.indexOf( '/jstree/' );
if( indexOf > 0 ){
const newurl = req.url.substring( indexOf );
console.log( 'WebApp redirecting', req.url, 'with', newurl );
res.writeHead( 301, {
Location: newurl
});
res.end();
} else {
next();
}
});
Related
I am working with electron and reactjs and rendering the view with electron js, I am facing an Error: Illegal invocation: Function must be called on an object of type NativeImage after electron version upgrade. I can't downgrade the electron version as some functionality is not working in surface machines.
We have the functionality to capture screenshots but after the package upgrade facing an error while screenshot capture. I am using webview to render view in the electron application.
Here is the code how I am using to load view in webview.
const webview = <webview src="path" class="webview__3kBDE" style="width: 768px; height: 576px; margin-top: 0px; margin-left: auto; margin-right: auto;"></webview>
const rawImage = await webview.capturePage()
const URL = rawImage.toPNG()
When I am printing the rawImage I am getting blank object so while rawImage.toPNG() I am facing an error. If anyone has any idea how to fix this error that would be a great help. Thank you.
The Electron 10 release had major changes and if you are using the Electron 10 > the remote module is now disabled by default. To use the remote module, enableRemoteModule: true must be specified in WebPreferences:
const w = new BrowserWindow({
webPreferences: {
enableRemoteModule: true
}
})
For more details check here https://www.electronjs.org/docs/latest/breaking-changes#default-changed-enableremotemodule-defaults-to-false
I'm trying to add Stylelint to a brand new NextJS Typescript project with EmotionJS and almost no rules works on my styles files, the only error that I manage to see was Unknown word CssSyntaxError.
This Unknown word error happens because I'm using CSS in JS syntax and was fixed adding this line on .eslintrc as I figure out here
{
...
"customSyntax": "#stylelint/postcss-css-in-js",
...
}
But after this error no rules works on my style files, I've tried to extends other standards, remove the eslint and prettier, add a simple rule and also the blog post mentioned on this thread, but neither of these works.
Thats my EmotionJS test file:
Sim.styles.ts
import { css } from '#emotion/react';
export const container = (color: string) => css`
background-color: #000;
padding: 32px;
border-radius: 4px;
font-size: 24tz;
batata: sim;
content: 'sssm';
.umaCOi0-sim {
color: red;
}
&:holver {
color: ${color};
}
`;
As we can see there's a lot of errors on this styles but when I run npx stylelint "**/*.styles.ts" it returns no errors on console
Thats the .stylelintrc.json
{
"extends": ["stylelint-config-standard"],
"customSyntax": "#stylelint/postcss-css-in-js",
"rules": {
"string-quotes": "double"
}
}
I also notice that the config file is being read, if I remove the "customSyntax": "#stylelint/postcss-css-in-js" it start to throw the error previously mentioned.
So, how can I properly config this to work as expected?
Versions:
{
"#emotion/react": "^11.8.2"
"next": "12.1.0"
"react": "17.0.2"
"stylelint": "^14.6.0"
"typescript": "4.6.2"
"#stylelint/postcss-css-in-js": "^0.37.2"
"postcss-syntax": "^0.36.2"
}
I tried to reach the core projects of this questions.
Unfortunately for EmotionJS its needed to create a EmotionJS Stylelint Custom Syntax. For further information read the discussion: https://github.com/emotion-js/emotion/discussions/2694
I want to add an local font to the project.
I'm using next.js and globalStyles from styled-components.
Here is what I've done so far
import regularFont from "../public/fonts/IRANYekanRegular.ttf";
const GlobalStyle = createGlobalStyle<{ lang?: Languages_type | string }>`
#font-face {
font-family: "ir";
src: local("ir"), url(${regularFont}) format("truetype");
}
body,
html {
margin: 0;
font-family:"ir ";
}
`;
But with the above code it throws and error that says
./public/fonts/IRANYekanRegular.ttf Module parse failed: Unexpected
character '' (1:0) You may need an appropriate loader to handle this
file type, currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders (Source code omitted for
this binary file)
What am I missing?
In Next.js and React applications you can access public files with the absolute route.
So, in your CSS you can do something like:
const GlobalStyle = createGlobalStyle<{ lang?: Languages_type | string }>`
#font-face {
font-family: "ir";
src: local("ir"), url('/fonts/IRANYekanRegular.ttf') format("truetype");
}
body,
html {
margin: 0;
font-family:"ir";
}
`;
Notice 2 things:
I'm not importing the file
I'm using the route after public
Not sure if we can use codesanbox for next, so,
I created on Repo (you can check the commits): https://github.com/joseglego/font-test - The definition is: https://github.com/joseglego/font-test/blob/main/pages/index.js
Deploy on netlify: https://eager-ardinghelli-b3d680.netlify.app/
Everything was working fine and then all of the sudden a bunch of error appeared on the terminal, saying that I needed to install node-sass module. So that's what I did to fix all those errors, but now I get this error:
SassError: Undefined variable: "$text-weight".
I don't get why react is even detecting my sass files, I'm only importing the compiled vanilla css and sass is also compiled successfully with no errors.
_variables.scss is imported at the top using #import syntax.
index.scss file:
#import './variables';
body {
margin: 0;
}
:root {
font-family: acumin-pro, sans-serif;
font-style: normal;
box-sizing: border-box;
}
.App {
display: grid;
grid-template-columns: 0.1fr 10fr 0.1fr;
min-height: 100vh;
}
#import './navbar';
#import './carousel';
#import './user';
If you have defined your $text-weight variable in another file you should import it to the file that you are using it
You will have to use #import syntax to import the file where you define your variable $text-weight.
If you are importing .scss file or .sass file somewhere in your React app, it will require you to setup node-sass to compile sass syntax into vanilla css.
Normally, people will do that in index.js or App.js where the main react component resides.
Not only React, most of the framework such as Angular will also need to setup in the boilerplate for scss or sass support.
I'm building a projects using angular cli, how can I manipulate urls in css/scss files based on environment? i.e so that I can have something like this in development:
background-image: url(url1/foo.png);
#font-face { font-family: foo;
src: url(url1/foo.woff);
}
and have that translated to the following by running 'ng build --prod':
background-image: url(produrl/foo.png);
#font-face { font-family: foo;
src: url(produrl/foo.woff);
}