I am running into multiple warnings related to an inline style background image. Using React-static I had no issues but now with Gatsby I am getting this error:
warning Unexpected string concatenation of literals
If I only wanted to use an inline style how would I go about coding this? Any suggestion helps.
Right now I am importing my background image and using an inline style. I would rather import the image and use an inline style instead of creating multiple css styles.
Code:
import Background from '../img/background.gif';
<div id="hero" className="header-banner" style={{background: 'url(' + `${Background}` + ')'}}></div>
It looks like you've got it figured out in the comments, this is just a FYI: the message you're seeing is from eslint, specifically this rule.
This rule aims to flag the concatenation of 2 literals when they could be combined into a single literal. Literals can be strings or template literals.
So your code is valid, it's either Gatsby's default eslint setting or your own setting being picky about it. If you don't care for the rule, you can remove it by setting up your own eslint setting.
Related
So I have an array of colors
let colors=["red-500","blue-500","green-500","yellow-500","cyan-500","white-500","orange-500"]
and i wanna use a specific color depending on a number
<h1 className={`bg-${colors[index]}`}></h1>
the colors are not always applied as intended for example sometimes it always be red or white
has anyone encountered similar issues with tailwind css + react ?
Tailwind will only build styles for classes that it detects in your code—but it does not actually run your source code and won’t detect dynamically constructed class names. Therefore, you must include the complete class name in your strings.
The styles that are working (like red and white) are probably included elsewhere in your code, and make it into the build, while the others are not.
Don't construct class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
Always use complete class names
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Source: Dynamic class names - Tailwind CSS
While the answer from #quartzic is a perfectly acceptable, I'd like to present an alternative.
The missing styles is most likely caused by Tailwind purging all styles that it doesn't detect being used anywhere in your code. This purge functionality can be configured by defining a safelist - a list of classes that shouldn't be purged under any circumstances.
In your case, I'd add the background color classes you want to use, to the safelist and you wont have to change anything in your React component. This is done in the tailwind.config.js file:
module.exports = {
// ...
safelist: [
'bg-red-500',
'bg-blue-500',
'bg-green-500',
'bg-yellow-500',
'bg-cyan-500',
]
// ...
}
The downside is that it might increase your style bundle size, if your safelist includes classes that turned out to not be used anyways. In you case, this doesn't seem to be an issue though.
This safelist can even use regular expressions (although, I'd be vary of using that, as it might increase bundle size unexpectedly).
You can read more in the Tailwind documentation
My goal: To style a link, that comes from a sanitized text, with a css variable. Im using a vue framework and want to use a computed style(or similar) to style it. The color of the link comes from an api.
My issue: Since the text is sanitized, no inline style will come through. I can still access the link like this:
.sub-link-style >>> a {
color: var(--color);
}
But I can't use the variable because I cannot add inline stlye.
My question: Is there a way to add a custom value(for example from vue) to a css variable without inline style?
The solution to this issue became using the sanitizers custom handler to create an exception for the attribute i needed specifically.
However, it only left me with a new problem. When the text gets into the code the computed variables are already resolved. Given up on it for now. Perhaps I'll look more at it later.
Using Stylus preprocessor, I'm looking to embed inline SVG code (not external files) in background-image properties in a manner that will allow me to set the fill attribute of the SVG in the CSS via a Stylus variable.
I've looked into Stylus' url and embedurl methods, but it seems to me that they only work on external files, and I don't know how I'd integrate my need to set the fill attribute with them.
Current (Working but Nasty) Attempt
I have a working solution, but it is ugly and I'm convinced there is an easier and cleaner way that I haven't been able to find.
My current efforts follow with the irrelevant parts of the encoded SVG removed.
myColorVariable = #FF0000
...
background-image 'url("[...]fill%3D%22%23%s%22[...]")' % unquote(slice(unquote(""+myColorVariable),1))
With a full SVG:
myColorVariable = #FF0000
...
background-image 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20data-icon%3D%22thumb-up%22%20width%3D%2232%22%20height%3D%2232%22%20data-container-transform%3D%22scale%281%201%20%29%20translate%280%20%29%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23%s%22%3E%3Cpath%20d%3D%22M17.688%200c-.4%200-.688.313-.688.813v2.78c0%203-2.912%206.32-4.813%208.22C11.287%2012.513%2010.2%2013%209%2013v17s2%201%205%201h11.187c.9%200%201.725-.605%202.125-1.405%200%200%203.8-10.494%204.5-13.594.1-.4.094-.61.094-.81.1-1.2-.92-2.19-2.22-2.19H22.5c-1.2%200-2.19-1.112-2.19-2.312C20.31%209.488%2022%207%2022%204V2.5C22%201.1%2020.9%200%2019.5%200h-1.814zM0%2013l2%2019h5V13H0zm5%2016c.6%200%201%20.4%201%201s-.4%201-1%201-1-.4-1-1%20.4-1%201-1z%22/%3E%3C/svg%3E")' % unquote(slice(unquote(""+myColorVariable),1))
Issues:
It only seems to work with latest versions of Stylus. For example, it doesn't work on Codepen, but it works in my setup with Grunt, and typing the following into the "Try Stylus Online" section of the Stylus website shows it outputting what is expected.
c = #FF0000
cString = "" + #FF0000
cMinusHash = slice(cString, 1)
cWithEncodedHash = "%23" + cMinusHash
unquote(cWithEncodedHash);
I have to have a series of string manipulation methods on my variable to try and cast it to a string and remove the hash tag of the hex color. I have to remove the hash tag of the hex color because the hash tag needs to be encoded and is thus included in the SVG string. The necessity for both of the unquote methods doesn't make sense to me, but it's what works. Also, the concatenation of an empty string with the color variable seems like a very hacky way to cast the color to a string, but I was unable to find a better way.
The SVG code has to have its quotes (double or single) encoded for the Stylus string interpolation to work, which is added hassle on top of the encoding that cross-browser compatibility requires.
In case it's helpful, here is my Codepen I made attempting to demonstrate my solution that works in my setup but not on Codepen.
Please forgive me if I omit necessary information or do something wrong; this is only my second question here. I'm happy to fix whatever I need to.
Thanks!
I'm testing stylus and I'm surprised that the compiler transforms almost everything I type like:
mivar = blackredgrenn
body
margin 0f
background-color #323242342332423123
werewers
color red
&:first-child
color mivar
whatever assa hj
into
body{margin:0 f;}
body background-color #323242342332423123 werewers{color:#f00;whatever:assa hj}
body background-color #323242342332423123 werewers:first-child{color:blackredgrenn}
Is this the way it should work? is there any option to make the compiler to stop and show error like in less? I'm compiling with grunt, is the common practice to run afterwards csslint to spot there the errors? what alternative do we have?
No, there is no option to show errors, as this code is not an error as Stylus sees it.
Stylus' syntax is very flexible now, and it is based on indents, this way you can't write some properties after other ones with an increased indent, as Stylus would interpret then the first part with lesser indent as a selector (that's what happens in your example), and as CSS could always get new properties, there is no list of “known” properies, so whatever is also printed as is.
If you're not sure you're writing a proper indented code, then the best option is either to use a linter to check CSS validity, or to write everything in CSS syntax using curly braces and semicolons.
When I write CSS in Notepad++, the color coding sometimes seems inconsistent. Normally, selectors are shown in light purple but sometimes they are black for 1 or more lines consecutively. I don't see anything wrong with such lines. Why are they black? What am I missing here?
i'm not sure why that happened to you!?
but you can add keywords to notepad++ :
Setting => Style Configurator ..
Select your language and Style.
Add your keyword like color and etc , separated by space :
Usually, that sort of coloring indicates that the CSS rule immediately preceding the affected one hasn't been closed. Here's an example where I remove the closing brace from a rule in normalize.css, which affects the one that immediately follows in exactly the same way (ignoring the comment and the lack of bold type, of course):
Presumably then, the reason why the "first" declaration after that selector is affected but the subsequent ones are not is because the semicolon from the first declaration tells the syntax coloring parser to terminate the nonsensical statement which is formed by the selector. But I'm just blindly guessing.
If you're sure that the preceding rule has been closed properly, then the syntax coloring parser may have been confused. Try simply highlighting the rule, deleting it, and undoing; that usually works for me.
Since Notepad++ recognizes color of codes based on the language type, you can't able to view multiple languages with color codes in a same file. Even though CSS is a part of web designing, it is still a unique language. If you want to display the CSS codings inside the HTML to color, just change the language type to CSS (only for temporarily purpose). But, don't forget to revert the language conversion back to HTML before saving the file.
Steps: Language -> C -> CSS