gulp-sass missing some functionalities - npm

I'm starting to work on an ongoing development with gulp and sass.
The workflow was set up for someone not avaialable at the momment and it has been working for people on the team.
Sass compiles on other people machines but not on mine.
I do compile sass on my machine in dozens of other projects without problem but not on this particular one.
I think I did initialize the project correctly but I suspect there is some version or configuration problem involved.
If I npm install everything and run gulp I get the following error:
Error: src/sass/utilities/mixins/_vendor-prefixes.scss
Error: Invalid CSS after "::-webkit-": expected "{", was "&-placeholder"
"&-placeholder" may only be used at the beginning of a compound selector.
on line 116 of src/sass/utilities/mixins/_vendor-prefixes.scss
I tried commenting the offending lines and running gulp again just to stumble with another error:
Error: src/sass/base/_base.scss
Error: "ul" failed to #extend "%reset-list".
The selector "%reset-list" was not found.
Use "#extend %reset-list !optional" if the extend should be able to fail.
on line 142 of src/sass/base/_base.scss
And so on:
Error: src/sass/utilities/_placeholders.scss
Error: You may not #extend an outer selector from within #media.
You may only #extend selectors within the same directive.
From "#extend %clearfix" on line 38 of src/sass/modules/_calendar.scss
on line 9 of src/sass/utilities/_placeholders.scss
This code works on other machines and all that advanced selector are being used on the development.
If I google for the particular errors I can find errors about them and people suggesting alternate selectors but I suspect that there is something else going on that I should fix.
I have updated my gulp to 3.9.1 and gulp-sass to 3.1.0 but I get the same errors.
How should I debug this?
Thanks!
EDIT: The errors are clearly stating that the code is not valid but the strange thing is that the same code is working on other peoples machines.
I'll post some code arround some of the errors just for reference anyway:
_vendor-prefixes.scss:116
// Placeholder focus text
#mixin placeholder-focus($color: $input-color-placeholder) {
&:focus::-webkit-&-placeholder { color:$color; }
&:focus:-moz-placeholder { color:$color; } /* FF 4-18 */
&:focus::-moz-placeholder { color:$color; } /* FF 19+ */
&:focus:-ms-input-placeholder { color:$color; }
}
_base.scss:142
// Unordered and Ordered lists
ul,
ol {
#extend %reset-list;
}
and the include on _placeholders.scss
// Reset List
%reset-list {
padding:0;
margin:0;
li {
list-style:none;
}
}

This had nothing to do with functionalities or versions.
As #rac pointed out the code is invalid.
The other developer was skiping the errors somehow and the compiled .css did not have the faulty lines or the faulty extends.
Removing all the faulty lines resulted in the same .css and a clean compile.
Thanks!

Related

Bootstrap4 custom override - Expected !default flag for "$body-bg"

I have done a fresh install of bootstrap version 4.1.1
I created a custom.scss file and put the following in it (straight from bootstrap4 online docs)
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
When I run npm run dis, i'm receiving the following error:
scss/custom.scss
2:1 × Expected !default flag for "$body-bg" scss/dollar-variable-default
3:1 × Expected !default flag for "$body-color" scss/dollar-variable-default
According to bootstraps documentation you must remove the "!default" but the error specifies you must have the "!default".
I'm assuming I'm overlooking something but I can't seem to figure out what it is.
So, the default installation of bootstrap has a file called .stylelintrc. This is the configuration file for stylelint.
For some reason, the example given on bootstraps website is not in alignment to the default configuration of the .stylelintrc file.
You need to change the line
"scss/dollar-variable-default": [false, { "ignore": "local" }]
to
"scss/dollar-variable-default":null
In order to get their example working.

Webpack 2 with new AureliaPlugin can't find module at runtime

I am using the release candidate of the new Aurelia Webpack plugin designed to work with Webpack 2.
I got it up and working as far as building goes, but when I run, I am getting this error:
Unable to find module with ID: \"views/nav-bar/nav-bar-vm\"
Following the instructions for debugging this I ran webpack with --display-modules. That gave a long list of modules that had this in it:
[views/nav-bar/nav-bar-view.html] ./src/views/nav-bar/nav-bar-view.html 2.44 kB {0} [built]
[views/nav-bar/nav-bar-vm] ./src/views/nav-bar/nav-bar-vm.ts 1.36 kB {0} [built]
I have bolded the module name. It is a spot on match (unless it is supposed to have the quotes...)
All the debugging tips don't talk about what to do when I get this error and the value matches...
The only non-standard thing I am doing is changing how views are matched to view-models via this code:
ViewLocator.prototype.convertOriginToViewUrl = (origin) => {
let moduleId = origin.moduleId;
// see if the module ends in 'Vm'
if (moduleId.endsWith('-vm')) {
var coreName = moduleId.substring(0, moduleId.length - 3);
return coreName + '-view.html';
} else {
return moduleId + '.html';
}
};
I am stumped on how to get past this error. If anyone knows how I would love some help!
Update:
Here is a link to my webpack.config.js file incase it can be of help with this issue:
Turns out the issue was with my webpack.config.js file.
I had my html loader in there twice. The second one was causing an extra set of quotes to be placed around the Module ID.
When I removed the second one, this error went away.

How do you use data-uri in dotless?

I am using dotless (1.4.1 I think) and I have this in my .less file
#btnSearch { background-image: data-uri('/images/btnSearch.png'); }
It throws this error:
Data-uri function could not read file '/images/btnSearch.png' on line 140 in file '/css/less/site.less'
If I change data-uri with url it works (to prove the file exists).
I also tried relative path (../../images/btnSearch.png) as well as some other JPEG images.
The code for the data-uri function on GitHub has the following comments in the exception handling.
// this is more general than just a check to see whether the file exists
// it could fail for other reasons like security permissions
I would check that there are no permission problems, as Dotless needs to read to image to convert it to base64
After messing about with this for ages I did get it to work with a fully qualified local (file system) path.
e.g.
.less input
body {
#divTest {
background-image: data-uri('C:\Users\Ben\Source\Repos\ASPNET\ASPNET\Content\accept.png');
}
}
Output
.#divTest {
border: solid 1px blue;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKfSURBVDjLpZPrS1NhHMf9O3bOdmwDCWREIYKEUHsVJBI7mg3FvCxL09290jZj2EyLMnJexkgpLbPUanNOberU5taUMnHZUULMvelCtWF0sW/n7MVMEiN64AsPD8/n83uucQDi/id/DBT4Dolypw/qsz0pTMbj/WHpiDgsdSUyUmeiPt2+V7SrIM+bSss8ySGdR4abQQv6lrui6VxsRonrGCS9VEjSQ9E7CtiqdOZ4UuTqnBHO1X7YXl6Daa4yGq7vWO1D40wVDtj4kWQbn94myPGkCDPdSesczE2sCZShwl8CzcwZ6NiUs6n2nYX99T1cnKqA2EKui6+TwphA5k4yqMayopU5mANV3lNQTBdCMVUA9VQh3GuDMHiVcLCS3J4jSLhCGmKCjBEx0xlshjXYhApfMZRP5CyYD+UkG08+xt+4wLVQZA1tzxthm2tEfD3JxARH7QkbD1ZuozaggdZbxK5kAIsf5qGaKMTY2lAU/rH5HW3PLsEwUYy+YCcERmIjJpDcpzb6l7th9KtQ69fi09ePUej9l7cx2DJbD7UrG3r3afQHOyCo+V3QQzE35pvQvnAZukk5zL5qRL59jsKbPzdheXoBZc4saFhBS6AO7V4zqCpiawuptwQG+UAa7Ct3UT0hh9p9EnXT5Vh6t4C22QaUDh6HwnECOmcO7K+6kW49DKqS2DrEZCtfuI+9GrNHg4fMHVSO5kE7nAPVkAxKBxcOzsajpS4Yh4ohUPPWKTUh3PaQEptIOr6BiJjcZXCwktaAGfrRIpwblqOV3YKdhfXOIvBLeREWpnd8ynsaSJoyESFphwTtfjN6X1jRO2+FxWtCWksqBApeiFIR9K6fiTpPiigDoadqCEag5YUFKl6Yrciw0VOlhOivv/Ff8wtn0KzlebrUYwAAAABJRU5ErkJggg==");
}
Looking at the source in DataUriFunction it's clear the function does not want a fully qualified web address, and claims "Filename must be a local file", but this is confusing as lesscss.org give the following example in their docs
Example: data-uri('../data/image.jpg');
I'd say this was a bug, certainly doesn't seem optimal, but without stepping into the source of dotless.Core.Parser.Functions.DataUriFunction I can't be sure.

How to grab a dependency and make it work with IntelliJ project?

I am trying to start a GroovyFX project within IntelliJ 12.
However, I have not been able to get IntelliJ to compile and run the following simple script (for reproducing the problem in the simplest manner possible):
#Grab(group='org.codehaus.groovyfx', module='groovyfx', version='0.3.1')
import groovyx.javafx.GroovyFX
println GroovyFX.class.name
I used IntelliJ's support for Grape's Grab to add groovyfx as a dependency of my module (the jar is shown under "External Libraries" and the editor does not complain that the class is missing after that!) but still, when I run the script, it throws an error:
Groovyc: unable to resolve class groovyx.javafx.GroovyFX
I was able to get this script working in the GroovyConsole without much problem and as expected....
I tried grabbing another randomly chosen dependency (turned out to be a Spring library) and it worked straight out:
#Grab(group='org.springframework', module='spring', version='2.5.6')
import org.springframework.jdbc.core.JdbcTemplate
println JdbcTemplate.class.name
I can see no good reason why the Spring library should work, but not the GroovyFX library!!!!
I even double checked that the GroovyFx library had been actually downloaded, and it is there where it should be (under {user.home}/.groovy/grapes/{group}/{module}/jars/)
What can cause this weird and extremely frustrating problem??
I tested your problem both with groovyConsole (from groovy-sdk-2.1.0) and with IntelliJ IDEA 12.0.3. The only exception I got was:
Caught: java.lang.NoClassDefFoundError: javafx/application/Application
java.lang.NoClassDefFoundError: javafx/application/Application
at com.intellij.rt.execution.application.AppMain.main(AppMain.java:120)
Caused by: java.lang.ClassNotFoundException: javafx.application.Application
... 1 more
This was because the JavaFX runtime (jfxrt.jar) was not in the classpath. This can be fixed with
mvn com.zenjava:javafx-maven-plugin:1.3:fix-classpath
The command above is taken from the JavaFX Maven Plugin Wiki. You have to execute it only once. After that change both groovyConsole and IntelliJ are working. I had to restart the groovyConsole, this was not necessary for IntelliJ.
What is interesting is that I don't see the GroovyFx-jar under "External Libraries". I am using plain IDEA community edition without any plugins.
The Hello World from the GroovyFX homepage works out of the box in IDEA but not in the groovyConsole - I also get the "java.lang.ClassNotFoundException: groovyx.javafx.GroovyFX". I managed to let it run with the following code, but it is not a good solution, since it works only on the first run, then you have to restart the groovyConsole:
#GrabConfig(systemClassLoader=true, initContextClassLoader=true)
#Grab(group='org.codehaus.groovyfx', module='groovyfx', version='0.3.1')
import static groovyx.javafx.GroovyFX.start
start {
stage(title: 'GroovyFX Hello World', visible: true) {
scene(fill: BLACK, width: 500, height: 250) {
hbox(padding: 60) {
text(text: 'Groovy', font: '80pt sanserif') {
fill linearGradient(endX: 0, stops: [PALEGREEN, SEAGREEN])
}
text(text: 'FX', font: '80pt sanserif') {
fill linearGradient(endX: 0, stops: [CYAN, DODGERBLUE])
effect dropShadow(color: DODGERBLUE, radius: 25, spread: 0.25)
}
}
}
}
}
I am not sure but I think the reason is this bug here. Should be fixed in Groovy 2.2, we will see.

How can I get stacktrace for Adobe AIR global runtime errors in non-debug mode?

The new version AIR gives us the ability to globally capture run time errors and handle them. The problem is that it doesn't have the stacktrace or any helpful information about the error other than the error id and error message and name. For example it may tell me that a null pointer exception has happened but it will not tell me where or which method or anything. The debug version of the runtime gives us all of that but when the app is deployed to customers it is not running on the debug version so none of the useful information is available. I was wondering if this group has any suggestions on how to enable better logging of errors in an AIR app for better supportability of the product. Any suggestions?
I have a little hack to get line numbers too. :)
make a listener to get uncaught errors. I do it in my main class:
private function addedToStageHandler(event:Event):void {
loaderInfo.uncaughtErrorEvents.addEventListener( UncaughtErrorEvent.UNCAUGHT_ERROR, uncaughtErrorHandler );
}
for example my listener with error.getStackTrace():
private function uncaughtErrorHandler( event:UncaughtErrorEvent ):void
{
var errorText:String;
var stack:String;
if( event.error is Error )
{
errorText = (event.error as Error).message;
stack = (event.error as Error).getStackTrace();
if(stack != null){
errorText += stack;
}
} else if( event.error is ErrorEvent )
{
errorText = (event.error as ErrorEvent).text;
} else
{
errorText = event.text;
}
event.preventDefault();
Alert.show( errorText + " " + event.error, "Error" );
}
Add additional compiler argument: -compiler.verbose-stacktraces=true
Create the release build.
now the little hack:
Mac:
Go to the installation location where you have your .app file. Right click and choose show package content. Navigate to Contents ▸ Resources ▸ META-INF ▸ AIR. There you can find a file called hash. Duplicate the hash file and rename it to debug. Open the debug file with some text editor and remove the content. Done now you get the stack trace + line numbers.
Windows:
Browse to its install directory in a file explorer. Navigate to {app-folder}▸META-INF▸AIR▸. Here you can find a file called hash. Duplicate the hash file and rename it to debug. Open the debug file with some text editor and remove the content. Done now you get the stack trace + line numbers.
If you can't find the hash file, just create an empty file without file extension and call it debug.
Tested with Air 3.6!
No way until new version of AIR supports it. It doesn't now because of performance issues, rendering global handler almost useless. I'm waiting for it too, because alternative is logging everything yourself, and this is very time consuming.
The compiler option:
compiler.verbose-stacktraces=true
should embed stack information even in a non-debug build.
About the compiler option.
I develop with IntelliJ IDEA 14. In my build options i have also "Generate debuggable SWF". Maybe thats the reason why its working. Check my attachment.
Grettings