I want to use autoprefixer in my node application to compile css.
For my specific needs, I want to call autoprefixer without callback or promise.
Just plain:
var result = autoprefixer.process(css);
or
var result = myPrefixerWrap(css);
I am fighting with this for a while, can you help me please?
ps: I already tried postcss-js, but it result an json object for react use, and not pure css. For example {borderRadius:"5px"}
var prefixer = postcssJs.sync([ autoprefixer ]);
var cssCompiled = postcss.parse(css);
var cssObject = postcssJS.objectify(cssCompiled);
var autoResult = prefixer(cssObject);
PostCSS has an API for synchronously getting the results of Processor#process (process().css, aliased as toString()), which will work as long as all of the PostCSS plugins being used are synchronous (like Autoprefixer). The code to do that is as simple as:
var postcss = require('postcss'); // import postcss from 'posts';
var autoprefixer = require('autoprefixer'); // import autoprefixer from 'autoprefixer';
postcss([autoprefixer]).process(styleString).css;
Note: I had issues with using postcss-js in Webpack, so for those who see errors like:
Module parse failed: /path/to/node_modules/autoprefixer/node_modules/caniuse-db/features-json/css-regions.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
Or:
ERROR in ./~/autoprefixer/~/browserslist/index.js
Module not found: Error: Cannot resolve module 'fs' in /path/to/node_modules/autoprefixer/node_modules/browserslist
# ./~/autoprefixer/~/browserslist/index.js 3:14-27
Check out the Troubleshooting section of the postcss-js GitHub readme to find out what you need to add to your Webpack config to get it working.
Related
import nextJest from 'next/jest'
const createJestConfig = nextJest({
dir: './',
})
// Add any custom config to be passed to Jest
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jest-environment-jsdom',
modulePathIgnorePatterns: ['./cypress'],
// testMatch: ['<rootDir>/**/*.test.js', '<rootDir>/**/*.test.jsx'],
}
module.exports = createJestConfig(customJestConfig)
In my project, we use Nextjs application with both Cypress and Jest. The latest jest.config.ts which is recommended is shown above.
If you are now owned this problem. you can maybe try to check your modulePathIgnorePatterns.
I added a ./ to ['cypress'], then it works well. So, I think maybe it just cann't recognize the path.
How come I am getting this error when running gulp sass 'gulp-sass 5 does not have a default Sass compiler; please set one yourself'
I am trying to compile my sass for a shopify theme. But I get this error after running gulp sass
Error
Both the `sass` and `node-sass` packages are permitted. I added the line of code they recommended but that still did work.
For example, in your gulpfile:
var sass = require('gulp-sass')(require('sass'));
[01:12:12] The following tasks did not complete: sass
[01:12:12] Did you forget to signal async completion?
My code
const gulp = require('gulp')
const themekit = require('#shopify/themekit')
const sass = require('gulp-sass')
gulp.task('sass', function() {
return gulp.src('scss/global.scss')
.pipe(sass())
.pipe(gulp.dest('assets'))
});
I am using "gulp-sass": "^5.0.0"
Thank you in advance
I'm facing a strange problem on Meteor and I can't resolve it :
I'm developping a WebRTC app using Meteor, PeerJS and AdapterJS (which give an WebRTC plugin for unsupported browser like Safari or IE). These two libs are downloaded using NPM : meteor npm install peerjs/adapterjs
So in my view's controller I have :
view.js
//import Peer from 'peerjs'; => same error with "import"
//import AdapterJS from 'adapterjs';
Template.view.onRendered(function(){
AdapterJS = require("adapterjs");
Peer = require("peerjs");
//var peerkey="..."
var peer = new Peer({
key: peerkey, // get a free key at http://peerjs.com/peerserver
debug: 3,
config: {'iceServers': [
{ url: 'stun:stun.l.google.com:19302' },
{ url: 'stun:stun1.l.google.com:19302' },
]}
});
But when I run my controller, I get an exception because "console" is undefined inside peerjs/util.js function when calling the peerjs constructor :
Uncaught TypeError: Cannot read property 'log' of undefined
Strangly, when I only require "peerjs", there is no exeption...
I tried to change the order of require functions but it won't work.
Other variable like "alert", "window.console" work and are defined inside the module but "console" not.. :/
Any suggestion can help ^^
Thanks in advance.
EDIT : If I add a breakpoint on the first line of node_module/peerjs/lib/util.js, I see that the "console" variable is "undefined" inside util.js but .... it is defined inside the caller function (fileEvaluate) !
EDIT2 : I tried something else to check if the code inside adapterjs redefine or change something : I put 'require("adapterjs")' inside a timeout function with a long delay (10 seconds) and .... console is still undefined inside peer module ! But when I comment require("adapterjs"), no error, console is defined ! I think that Meteor do something special before running the controller script depending on require functions...
EDIT3 : Here is a git repo to test the project : gitlab.com
If you display the dev console, you will see exceptions.
I found a solution, although I don't fully understand it myself. It's something to do with the way that Meteor imports modules, and Peerjs runs afoul of that.
Basically I copied node_modules/peerjs/dist/peer.js into the client directory, so that Meteor will load it "as is".
A small change to main.js as follows:
import './main.html';
// I placed peer.js from the node_modules/peerjs/dist/peer.js into the client folder and it works fine
// import {Peer} from 'peerjs';
import {AdapterJS as Adapter} from 'adapterjs';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
window.peer = new Peer({
and it works fine :)
I see in line 860+ of adapter.js that console is being defined (part of the shim) from https://github.com/Temasys/AdapterJS/blob/master/source/adapter.js
// IE 9 is not offering an implementation of console.log until you open a console
if (typeof console !== 'object' || typeof console.log !== 'function') {
/* jshint -W020 */
console = {} || console;
// Implemented based on console specs from MDN
// You may override these functions
console.log = function (arg) {};
console.info = function (arg) {};
console.error = function (arg) {};
This code defines the console if it doesn't find one to it's liking? Does this mean you are using IE9 or some other incompatible browser?
Try pasting this into your console and see what it tells you:
if (typeof console !== 'object' || typeof console.log !== 'function') alert("Console not present, needs to be shimmed?"); else console.log("console is ok");
Presumably the reason you are using adapter.js is for compatibility purposes - this will help you trouble shoot it. Please let me know what you find, as I will be following you down this path :)
I need some help regarding my gulp task.
I have gulp karma task and I want to pass karma config file as a argument to that task.
I am able to achieve this grunt. Like in grunt , we can use
grunt.option("file")
and we can called grunt task as
grunt taskName --file=myFileName
So How Can I achieve same with gulp?
There's nothing in gulp to parse command line arguments for you.
You can use node's global process.argv directly if you feel like it.
I like to use the yargs module to handle arguments in my gulpfiles.
var args = require('yargs').argv;
var karmaFile = argv.file; // for the argument --file="myFileName"
Adding to #kombucha's answer, here's an example of how to use process.argv. If in your case you passed:
gulp taskName --file myFileName
(without the '=' ) then the below would retrieve the file value:
var filename, i = process.argv.indexOf("--file");
if(i>-1) {
filename = process.argv[i+1];
}
It should be simple enough to turn the above into a generic function for retrieving command-line values. I have used this before to good effect:
function getCLValue(name) {
var i = process.argv.indexOf(name);
return (i>-1) ? process.argv[i+1] : null;
}
I'm just getting to grips with Gulp.js and this is the only error I can't seem to get around.
I have install bootstrap via bower, and I'm trying to minify the bootstrap css.
Here's my gulp task;
gulp.task('minifycss', function() {
gulp.src('www/css/animate.css', 'www/bower_components/bootstrap/dist/css/bootstrap.css')
.pipe(minifycss({compatibility: 'ie8'}))
.pipe(gulp.dest('www-deploy/css/'));
});
However when I run my main gulp task. It states that the file is "read only"
Karls-MacBook-Pro:cmp-2015 karltaylor$ gulp
[13:48:50] Using gulpfile ~/Documents/web/cmp-2015/gulpfile.js
[13:48:50] Starting 'sassMin'...
[13:48:50] Finished 'sassMin' after 12 ms
[13:48:50] Starting 'minifycss'...
[13:48:50] 'minifycss' errored after 508 μs
[13:48:50] TypeError: Cannot assign to read only property 'cwd' of www/bower_components/bootstrap/dist/css/bootstrap.css
at Object.gs.createStream (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-stream/index.js:19:46)
at Object.gs.create (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-stream/index.js:68:42)
at Gulp.src (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/vinyl-fs/lib/src/index.js:33:23)
at Gulp.<anonymous> (/Users/karltaylor/Documents/web/cmp-2015/gulpfile.js:35:7)
at module.exports (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at /Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/index.js:279:18
at finish (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
at module.exports (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:60:3)
Things I've tried:
Reinstalling bootstrap
Moving the actual bootstrap.css file to my css file, however it does exactly the same thing.
EDIT: SOLVED = To use multiple sources you have to put them in an array.
Source: https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md
Like #topleft mentioned, it was error in the syntax from using multiple files in my gulp.src. To use multiple sources you need to put them in an array.
Example:
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('default', function() {
return gulp.src(['foo/*', 'bar/*'])
.pipe(concat('result.txt'))
.pipe(gulp.dest('build'));
});
I had this issue when I tried to output 2 css files and I didn't use array [].
Instead of:
gulp.src('www/css/animate.css', 'www/bower_components/bootstrap/dist/css/bootstrap.css')
.pipe(minifycss({compatibility: 'ie8'}))
.pipe(gulp.dest('www-deploy/css/'));
});
Use this:
gulp.src(['www/css/animate.css', 'www/bower_components/bootstrap/dist/css/bootstrap.css'])
.pipe(minifycss({compatibility: 'ie8'}))
.pipe(gulp.dest('www-deploy/css/'));
});
Explanation:
gulp.src(['./file1.scss', './file2.scss']);
alternatively you could also try with
return gulp.src('www/**/*.css')
it should add every .css in your directories if thats the wanted effect