Develop Reference

postcss-preset-env: end value has mixed support, consider using flex-end instead

Any suggestion how to resolve this warning? I checked the whole project no where i used anything like
justify-conten: end or align-items: end and etc.
Still not sure why this warning showing everytime.
Using the following versions in Angular 13
"postcss": "^8.3.11",
"tailwindcss": "^2.2.19",
EDIT/UPDATE:
It turns out it was the issue the package I am using. It was not in my code.

If you're using (S)CSS or SASS, you have to write flex-start or flex-end instead of start or end respectively.
Like this:
justify-content: flex-end;
align-items: flex-end;
Similar issue on github for mozilla: https://github.com/mozilla/addons-frontend/issues/7312

(257:3) autoprefixer: end value has mixed support, consider using flex-end instead

add id prefix to css rule generated from Emotion 11

I am using Emotion 11 as css-in-js lib for a React project.
My goal is to generate styles with a given prefix to the selector in order to increase specifity (the pages also include legacy css).
.c50id {
color: pink;
}
to
#my-chosen-id .c50id {
color: pink;
}
I found questions suggesting to use stylis-plugin-extra-scope but it does not seem to work anymore due to the upgrade to stylis 4.
Any suggestion is welcomed,
thank you!

How to style css of ionic2-calendar?

I'm working on an app with Ionic 5.0.0, Angular 8 and using the ionic2-calendar plugin. Although the plugin demo works fine, I can't seem to modify the styling of the calendar.
The documentation lists a couple of classes that seem to be used for each element, but adding them to my own scss file and adding !important (or not) doesn't really work. I tried adding them to the global scss, as well as to the main app one.
Aside from that, I've tried using the browser inspector to check which css selector is actually styling the elements in question, but the attribute selector seems to be random somehow. Current day for example is:
.monthview-current[_ngcontent-ljn-c3]
And after reloading, it is
.monthview-current[_ngcontent-igq-c4]
So clearly that method won't work either... I've also tried adding td.monthview-current, which also didn't work... Those were the suggestions and sample codes I've found from looking up this plugin online and looking around the plugin files. If anyone has any ideas whatsoever I'd be super thankful.
EDIT: I've found a way to change it, but ONLY through the source files for the plugin, which I have to assume is not the right way to do it... There's JSON files, JS files, and I have to manually change all of them.

If the styles are present inside the angular component's file it will not be applied due to view encapsulation. You need to specify the styles in the global stylesheet, and also in most you need to add important to the styles.
To elaborate further,
-src
-assets
-calendar.css (add styles here)
-app
-my-calendar
-my-calendar.page.html
-my-calendar.page.ts
-my-calendar.page.css (and not here)
Some commonly needed customizations: (assets/calendar.css)
Apply styles to the selected date:
.monthview-selected{
font-weight: bold;
background-color: #F1F1F1 !important;
color: #333 !important;
}
Apply styles to the date that has an event:
.monthview-primary-with-event, .calendar-event-inner{
background-color: #1a92d0!important;
}
Disable all the borders in the calendar:
td, th {
border: 0 !important;
}
Final calendar after applying the styles:
HTML
<calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)" (onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)" step="30" (showEventDetail)="true" formatDayHeader="EEEEE"
allDayLabel="All Day" startHour="9" endHour="20">
</calendar>

I had the same issue and a solution is related to encapsulation as stated in other answer.
Styling not applying to child component
try update your component:
#Component({
...
encapsulation: ViewEncapsulation.None // <------
})
export class xxComponent{
You can then apply the style based on the child class, eg.
.scss:
.monthview-container {
...;
}

The best way is to use Template Customization given in the plugin.
https://github.com/twinssbc/Ionic2-Calendar/blob/v6/README.md#Template Customization
If that is diffcult in your case. Then add a class to calender tag in html. And get all the child elements in css using Child or descendent combinator. Css Combinator

Although I'm not sure about the reason for this, the solution in my case seems to be using the global stylesheet (without any attribute selector in brackets) instead of the module specific one. It's not ideal, but it works I guess!

With depp
::ng-deep {
.monthview-selected {
background-color: blue !important;
color: white !important;
border-radius: 50%;
}
}

Using ng-style to edit the attribute of one class on a multi-class div AngularJS

This is AngularJS 1.5 (not 2)
I have a <div> tag that has a default classes and a class that is only applied on a variable value. I'm using ng-class to toggle the latter class mentioned.
Based on the same variable value, I'd like to toggle one of the attributes in the default class. I'm using ng-style to try and toggle this.
How do I know, or can I set, which class the ng-style interacts with? Or is there a different/better way to do this? I would like to keep the logic inline in the HTML, and not resort to editing classes in the Controller.
My HTML:
<div class="default-class"
ng-style="{flex-direction: Controller.isMobile() ? 'column-reverse' : 'row'}"
ng-class="{'sometimes-class': !Controller.isMobile()}">
...
</div>
CSS:
.default-class{
display: flex;
flex-direction: row; /*A default value that I expect to toggle*/
}
.sometimes-class{
...
}
I am trying to edit the flex-direction value found in the default-class.

Just remove flex-direction from default class.
.default-class{
display: flex;
}

I believe you can't used that operator on ng-style but don't quote me on that, anyway, you can use this instead:
ng-style="Controller.isMobile() && {'flex-direction':'column-reverse'} || {'flex-direction': 'row'}"
That should do the trick, I made a js fiddle with a simple boolean and text color to illustrate:
http://jsfiddle.net/Itsca/ADukg/16270/
Also you can check this question:
Angular ng-style with a conditional expression
Hope it helps.

According to this Stack Overflow question, my syntax is correct for Angular 1.1.5+.
While I'm still not sure if it's possible to toggle a CSS attribute with ng-show when there's other classes within the same scope, I was able to solve my problem with using media queries in the CSS.
In my problem, I was specifically looking to toggle when the setup was run in mobile resolution (Controller.isMobile()). Therefore, I just applied the attribute directly.
(Example in Sass)
.default-class{
display: inline-flex;
flex-direction: row;
#include respond-to(mobile) {
flex-direction: column-reverse;
}
}
In my case specifically, the Controller.isMobile() is actually a simplification, where the code in question is passed through the controller via an injected factory, whose job is to determine screen resolution. In this case, this factory is not something I have access to. Could it be the case that this injection is stopping ng-show from toggling appropriately? (This injected method is used throughout the HTML seemingly successfully, however, albeit without ng-show.)
My specific problem has been resolved with media queries in CSS, but the overall question of using ng-show with multiple classes on a single div still stands.

Twitter Bootstrap isn't working with less.js

I have broken it down to it simplest form but still cannot find out why this is not working. All files resolve and the imports in Bootstrap are loaded yet, the styles aren't loaded.
bootstrap 1.4.0
less 1.1.3
<html>
<head>
<title>ahhhhhh...</title>
<link rel="stylesheet/less" href="/less/bootstrap/1.4.0/bootstrap.less">
<script src="/less/less-1.1.3.min.js"></script>
</head>
<body>
<h1>WTF!!!</h1>
</body>
</html>
I made a simple style.less which works fine! Am I missing something glaringly obvious ?
Update:
style.less as requested by Todd :
#primary_color: green;
h1 {
color: #primary_color;
}

Update 3/5/2012: The Bootstrap guys have fixed this problem in version 2.0.2 of Bootstrap (not yet released). See this commit.
The underlying bug is that the present version of less.js doesn't allow you to use a variable for for the url() value directly (e.g. url(#iconWhiteSpritePath)) -- instead you have to use string interpolation (e.g. url("#{iconWhiteSpritePath}")), which accomplishes the same thing. The bootstrap guys just updated their syntax to take this quirk into account.
Original Answer
I ran into the exact problem today and figured out the cause of it. Since your stack is a few versions before mine (I'm using Bootstrap 2.0 and less.js 1.2.2) I can't be sure it's the same issue, but it's possibly related.
Anyhow, the problem for me was that Twitter Bootstrap is defining some variables:
#iconSpritePath: "../img/glyphicons-halflings.png";
#iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
And then using them directly in the url() value for a background-image in sprites.less:
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url(#iconSpritePath);
background-position: 14px 14px;
background-repeat: no-repeat;
.ie7-restore-right-whitespace();
}
.icon-white {
background-image: url(#iconWhiteSpritePath);
}
Per the discussion in this Github issue that's causing a major problem. When less.js chokes on this value, the whole compilation fails.
The good news is there is a fix in that issue, provided by csnover. Just change this line in tree.URL:
if (typeof(window) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {
to
if (typeof(window) !== 'undefined' && typeof(val.value) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {
and you should be set. In other words, we just ensure that val.value is set so that that charAt() doesn't choke on an undefined.
Hopefully this fix will be committed to the project soon and Bootstrap will work with less.js in the browser environment out of the box.

If you are developing this locally, make sure that the browser is using the correct protocol. It should display http: in the address bar, not file:.
On my Windows 7 machine using Chrome (with a XAMPP setup), I was having the same CSS problem using less.js with Bootstrap when accessing the .html file at:
file:///C:/xampp/htdocs/index.html
However, it did render properly via http at:
http://localhost/index.html
Not certain why, but I imagine that less.js relies on HTTP headers.

for me worked
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
.ie7-restore-right-whitespace();
}
.icon-white {
background-image: url(../img/glyphicons-halflings-white.png);
}
so replace
url(#iconSpritePath);
with
url(../img/glyphicons-halflings.png);
on less.js v1.2.1 and Bootstrap v2.0.1

Is it the problem with your file structure?
/less/bootstrap/1.4.0/bootstrap.less will point to the root of your domain regardless of your html file.
If you are hosting with apache and you have the following project structure:
www/
your project/
less/
index.html
another project/
others/
When you access index.html from http://localhost, it will look up the less file from the domain root which is www/. Thus as no less folder is under this root directory, it will returned as 404 (not found).
So, the solution is to use relative url for your less files. If you have the above structure, remove the '/' and use less/bootstrap/1.4.0/bootstrap.less instead.