Angular 2 has this special selector to reference its own component like:
:host
display: block
height: 100% !important
width: 100%
text-align: center
position: relative
But Intellij do not present me any way to supress this warnign. It confuses me when I am looking for actual errors on the Project folders
There is nothing wrong with Intellij. It is using Sass default escaping characther.
The problem I was having is due to an issue with Libsass, which Gulp-sass uses under the hood to compile sass, instead of the original ruby implementation. Libsass does not need the escaping character, so when I escape to avoid Intellij error, it compiles the escape character as well.
I am using Gulp-ruby-sass now and everything works just fine, meaning I can escape the :host selector the way Intellij provides
Related
In my react app, I have a big piece of generated code (110k lines) to show on screen (an openapi json spec). I wrapped it in a <pre> tag with:
overflow-y: scroll;
word-wrap: break-word;
white-space: pre-wrap;
font-family: monospace;
height: 100%;
This <pre> has a parent <div> which set the height to something like 800px so it can scroll.
This used to work well, but recently chrome hang completely when displaying it. It works on Brave and Firefox without any issues. Strangely, the code is shared on server, if I type the url of the server and display the code directly (no react, just basic code display), chrome behave normally. It automatically wrap the code in a <pre> just like I do, with the same css style, except for the height:100%; I wonder what the hang in my application all of a sudden.
Thanks for any help.
Used react-virtualized list with chunks of data. Not ideal, but good enough for our purpose.
How can I style my React component using Sass and CSS modules based on the existence of a GLOBAL parent selector (in this case isOpen)?
Rendered HTML:
<div class="isOpen">
<div class="MyContainer__MyStyle___u9dTa">
My react component
</div>
</div>
My Sass file:
.MyStyle
margin-left: 100px
color: black
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.MyStyle
:global(.isOpen) &
margin-left: 0
color: red
The code above gives error: Property "global" must be followed by a ':'
Though it's a little late for me to answer, I think I found the answer and I'll post it for those who may encounter this problem in the future.
The problem is in Sass you have to escape the :global keyword with \:global in order to make CSS module works as you expected.
The discussion can be found at https://github.com/webpack-contrib/sass-loader/issues/448.
It looks like you have a few issues here.
"MyContainer__MyStyle___u9dTa" is one big class name. You cannot reference one part by using the period syntax. however you can reference a partial class like this..
*[class=*"MyStyle"]{}
It also looks like you are using LESS syntax instead of sass. here is how i would write the code with sass and partial class references
*[class=*"MyStyle"]{
margin-left: 100px;
color: black;
}
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.isOpen{
*[class=*"MyStyle"]{
margin-left: 0
color: red
}
}
good luck. and its worth noting that you can use vanilla CSS within a sass file if that is easier for you. Here are some resources for CSS and SASS
http://www.w3schools.com/css/css_syntax.asp
http://sass-lang.com/documentation/
I have just started to use Atom editor these days. Before that, I have used python IDLE. IDLE highlight the contents of parenthesis for us when we just created parenthesis. But, Atom does not.
Do you know any themes or packages to make it possible in Atom?
You can use this selector: atom-text-editor .bracket-matcher .region, :host .bracket-matcher .region to highlight the brackets any way you want.
For example:
atom-text-editor .bracket-matcher .region,
:host .bracket-matcher .region {
border-bottom: none;
background: red;
}
This will make the brackets have a bright red highlight.
You can try Material Theme, I'm using it and parenthesis is auto-created. Another choice is to install a package named BracketHighlighter.
I am using Stylus version 0.44.0...
I have simplified this example, but here is my issue:
color-all-the-things()
div
{block}
body
+color-all-the-things()
background: red
Is being compiled to:
body +color-all-the-things(){background:#f00}
It is essentially treating the block mixin like a selector.
The expected output is:
body div {
background: red
}
According to the examples on the front page of the stylus project (http://learnboost.github.io/stylus/docs/mixins.html#block-mixins) the syntax is as follows:
Mix-in definition
foo()
.bar
{block}
Mix-in use
+foo()
width: 10px
Result
=> .bar {
width: 10px;
}
So in your case I guess it would be as you wrote it:
color-all-the-things()
div
{block}
...
body
+color-all-the-things()
background: red
Since that also produces the expected output in the online editor (http://learnboost.github.io/stylus/try.html) we can assume you got it right ;)
All I can think of it check your toolchain. Make sure you have the latest stable release, or downgrade to one. Or if you do try upgrading to the latest development release. It specifically says that this feature is in a "rough state" in the docs so it's fair to assume there might be some problems with it in recent versions.
If the problem persists open an issue: https://github.com/LearnBoost/stylus/issues
#font-face seems quote straightforward to setup in my CSS, and yet, my defined font is not being used. This is in a CakePHP 2.2 webapp, and despite trying all sorts of CSS URL path combinations, external CSS -v- inline CSS and single quotes/no quotes/double quotes in the CSS; nothing's working.
Here's the CSS:
<style>
#font-face {
font-family:TerminatorTwo;
src: url(../files/TerminatorTwo.ttf) format('truetype');
}
div {font-family: TerminatorTwo}
</style>
My app has the default CakePHP folder structure, so the CSS is in app/webroot/css and the font (just the .ttf) is in app/webroot/files
Instead of the div part in the CSS, I've tried inline style definition on a specific div. Didn't work. the code as seen doesn't work, and it doesn't work wherever I try adding quotes in the CSS, as I've seen in other examples elsewhere. All this has been trie din the latest versions of IE8 (yes, 8, yuck), Firefox and Chrome. Oh, and Chrome for Android.
I've messesd around with the path too, but to no avail.
Utterly frustrated. It's inherently so simple!
The font file is probably not loaded due to an invalid path. It's better to use the HtmlHelper for in these cases, as relative paths are bound to get messed up in a Cake install. Use the url() method to point to the files directory.
#font-face {
font-family:TerminatorTwo;
src: url(<?php echo $this->Html->url('/files/TerminatorTwo.ttf'); ?>) format('truetype');
}
Cake will make sure the URL points to the files directory in /app/webroot at all times.
Alternatively you could ditch the inline CSS and use an external stylesheet to avoid the issue with correct paths in Cake. In that case, if the CSS file is in the app/webroot/css directory, you could use the ../files/TerminatorTwo.ttf notation.