I am simply trying to further compress a css file. And I am getting an error which is peculiar. I wondered why I would get a ReferenceError: Can't find variable: jQuery for just a task which solely encompasses selectors from HTML & CSS? Unless it's reading the script tags in my HTML which have selectors?
UPDATE I forgot to mention the task is not spitting out, a new CSS file!
Also I noticed many gulp tasks have ./ preceding the directory, What is the purpose of that?
Anyway, see below:
This is my Gulp file, figured I include it...
gulp.task('uncss', function() {
return gulp.src('site/assets/stylesheets/style.min.81113a5b.css')
.pipe(uncss({
html: [
'site/**/*.html'
]
}))
.pipe(gulp.dest('./out'));
});
This is the error I am getting.
ReferenceError: Can't find variable: jQuery
file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:12
file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:43
/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:43
fn = function () { throw arg; };
^
Error: uncss/node_modules/css: unable to parse undefined:
missing '}' near line 1:46497
1: -> ebkit-min-device-pixel-ratio:0){#media{.
at error (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:57:15)
at declarations (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:224:26)
at rule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:481:21)
at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:56)
at atmedia (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:345:35)
at atrule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:457:10)
at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:44)
at stylesheet (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:73:16)
at Object.module.exports [as parse] (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:485:10)
at process (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/src/uncss.js:158:22)
at tryCatcher (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/util.js:26:23)
at Promise._settlePromiseFromHandler (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:501:31)
at Promise._settlePromiseAt (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:577:18)
at Promise._settlePromises (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:693:14)
at Async._drainQueue (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:123:16)
at Async._drainQueues (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:133:10)
Taken from the UnCSS documentation:
How?
The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
...
This means that your page will be loaded in a headless browser, so that library is able to find which selectors are really used.
I never used UnCSS, but what it seems to me is that:
it will throw JS errors in case they happen;
it will complain in case your CSS is not error-free.
That's why you're getting those errors.
Sounds similar to Issue 157. The solution - try using paths like /site/**/*.html instead of site/**/*.html.
Next thing to try is setting a higher value for the timeout option to give jQuery more time to load.
Related
I'm working on a lit-element project, and I got a problem that reset.css cannot be applied to web components wrapped with shadow-root
I've tried this way, and I got this following error.
Refused to apply style from 'http://localhost:8080/style/static/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The code I tried is this:
<script>
var css = new CSSStyleSheet()
css.replace('#import url("./style/static/reset.css")')
document.adoptedStyleSheets = [css]
</script>
this is put into a html file.
How can I avoid this error, and apply the reset.css to the web components?
Does it help to apply the replace import to the shadowroot as opposed to the document?
const node = document.createElement('div')
const shadow = node.attachShadow({ mode: 'open' })
shadow.adoptedStyleSheets = [sheet]
https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets
Edit -- addition for clarity:
The above addresses applying a style sheet possibly containing #import statements onto the frame to which your original question refers, the shadow-root node (element), however, because your code tries to apply the instantiated sheet to the document, to me, the question becomes a bit hazy.
The error you indicate seems indicative of code which attempts to apply a style sheet created in another document:
If you try to adopt a CSSStyleSheet that's constructed in a different Document, a "NotAllowedError" DOMException will be thrown.
https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md
I am using this stackblitz to create mat-select. I copied the whole code including the mat-select folder and module. The whole code compiles perfectly without any error or issues. However, during page rendering time the code breaks and I get error Unexpected directive 'MatSelectSearchComponent' imported by the module 'AngularMaterialModule'. Please add a #NgModule annotation.
In the main HTML page where I am trying to use the mat-select there on mat-select-search tag, I am getting an error that mat-select-search is not a known element.
Although the code compiles without any error.
I tried importing mat-select-searchmodule in layout.component.ts then I am getting the below error
Type MatSelectSearchComponent is part of the declarations of 2 modules: MatSelectSearchModule and InsertModule! Please consider moving MatSelectSearchComponent to a higher module that imports MatSelectSearchModule and InsertModule.
so I'm new to SASS and coding in general so please don't be too harsh. I'm self taught.
Anyway, I keep getting this error after using Codekit to compile my html, css, and sass files.
Libsass: Error: Invalid CSS after "...blic domain) */": expected 1 selector or at-rule, was "*/ {}"
on line 3 of Users/MargaretBowen/Desktop/Code/better code/_reset.sass
>> License: none (public domain) */
-----------------------------------^
I've been following this tutorial (https://www.youtube.com/watch?v=gDsPH0Zt8Qw#t=3.356712) to help me out. I also tried to use this reset code (https://gist.github.com/hcatlin/1027867) in order to prevent errors from Codekit!
Obviously something isn't going right. Below is what is within my sass file and my _reset.sass file has only the github code in it. Restarting the server within Codekit didn't do anything.
// Imports
#import reset
I figured it out!! My issue was simply that my file _reset.sass was a Sass file instead of a scss file! Silly error.
I'm working on a AngularJS application and using gulp for the build-process. I have multiple JavaScript files (for controllers, services, directives, etc.) which I concat, uglify and then inline into an index.html in order to minimize the amount of server connections.
Here comes the problem:
When I do not inline the concatenated and uglified JavaScript files into index.html, the sourcemaps work when I debug the application with the developer tools.
When I do inline the JavaScript files into index.html, then my breakpoints are never hit. Why? I'm not sure, what I'm doing wrong.
This is the relevant part of my gulpfile:
// isPublish is set to true to uglify.
// the temp-folders are here just for testing purposes, I tried with
// and without and I have also changed the order of the gulp-command.
return gulp.src(definition.srcs)
.pipe(sourcemaps.init())
.pipe(replace("$build:serverApiBaseUrl$", args.serverApiBaseUrl || "..."))
.pipe(gulp.dest(targetFolder + "/temp1"))
.pipe(concat(definition.targetFile))
.pipe(gulp.dest(targetFolder + "/temp2"))
.pipe(gulpif(isPublish, uglify()))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest(targetFolder));
Please see here for the whole solution, e.g. for the project structure, etc. Even though I think this isn't really of any relevance for my problem.
Another thing I realized is that even though the breakpoints get hit (when not using the "inlined"-mode), the variable names are still in the mangled format (i.e. only letters). Is this a expected browser behavior (i.e. do developer tools not support this?), or do I need to specify something special for the sourcemaps-command? I don't understand why, as the generated sourcemaps contain the names-information.
Update I (13.10.2015)
I realized I could also use following method:
return gulp.src(paths.target + "index.html")
.pipe(inline({
base: paths.target,
js: uglify()
}))
.pipe(gulp.dest(paths.target));
This however doesn't seem to work due to a issue in gulp-inline. There seems to be a pull request, no idea when it will be merged back though. And even if it would work, I'm not sure what will happen with the sourcemaps in that case..?
Update II (19.10.2015)
Version 0.1.0 of gulp-inline has been released today (see pull request mentioned in "Update 1" which has now been merged back). It now works correctly with gulp-uglify, i.e. the bug has been fixed. I still couldn't get the sourcemaps to work though. Not sure if this is supported by gulp-inline.
So for the time being, I'm still searching for a solution..
I'm trying to append an element to one of my pages in a Volt project, via opal-browser, like so:
if RUBY_PLATFORM == 'opal'
require 'browser'
$document.body << my_dom_element.to_n
end
# controller code below
Unfortunately, I'm getting an error:
[Error] TypeError: null is not an object (evaluating 'value.nodeType')
(anonymous function) (main.js, line 7772)
The DOM element that I'm appending is perfectly sound. It's just the following code:
document.createElement( 'myElement' )
I'm assuming that Volt doesn't like me to append elements to a page in a controller, rather than manually creating it in a view HTML file. Is there a way I can work around this? I kind of need to do this element-appending thing for compatibility with another library that I'm using in conjunction with Volt.
Ok, so the problem is that the code you have is being loaded as soon as the compiled .js file loads. You need to run the code once the DOM is ready. The easy way to do this in volt is to run it on a {action}_ready method:
module Main
class MainController < Volt::ModelController
def index_ready
# run view code here
end
end
end
The index_ready method will be called after the index view has rendered and the dom is ready.