madeleineostoja / rucksack

A little bag of CSS superpowers, built on PostCSS

Home Page:https://www.rucksackcss.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Invalid input file path error, when using Rucksack on Windows platform

alexlibby opened this issue · comments

Hi,
I've used this gulpfile for a number of projects without any issue:

'use strict';

var gulp = require('gulp');
var postcss = require('gulp-postcss');
//var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var stylelint = require('stylelint');
var reporter = require('postcss-reporter');
var rucksack = require('rucksack');


gulp.task('styles', function () {
  return gulp.src('/src/*.css')
    .pipe(postcss([ rucksack({ fallbacks: true, autoprefixer: true }) ]))
    .pipe(gulp.dest('dest/'));
});

gulp.task("lint-styles", ['styles'], function() {
    return gulp.src("dest/*.css")
    .pipe(postcss([ stylelint({ 
        "rules": {
          "color-no-invalid-hex": 2,
          "declaration-colon-space-before": [2, "never"],
          "indentation": [2, 2],
          "number-leading-zero": [2, "always"]
        }
      }),
      reporter({
        clearMessages: true,
      })
    ]))
});

gulp.task('rename', ['lint-styles'], function () {
  return gulp.src('dest/*.css')
    .pipe(postcss([ cssnano() ]))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest("dest/"));
});

gulp.task('sourcemap', ['rename'], function () {
  return gulp.src('dest/*.css')
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('maps/'))
    .pipe(gulp.dest("dest/"));
});

gulp.task('default', ['styles', 'lint-styles', 'rename', 'sourcemap']);

var watcher = gulp.watch('src/*.scss', ['styles', 'lint-styles', 'rename', 'sourcemap']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

However, when I add in Rucksack (and comment out the existing autoprefixer plugin), I get this error - I should add that no compiled CSS files are produced:

C:\wamp\www\postcss>gulp
[14:43:17] Using gulpfile C:\wamp\www\postcss\gulpfile.js
[14:43:17] Starting 'styles'...
[14:43:17] 'styles' errored after 18 ms
[14:43:17] TypeError: The input file path should be a valid path.
    at bundle (C:\wamp\www\postcss\node_modules\rucksack\lib\index.js:57:15)
    at Gulp.<anonymous> (C:\wamp\www\postcss\gulpfile.js:16:21)
    at module.exports (C:\wamp\www\postcss\node_modules\gulp\node_modules\orchestrator\lib\runTask.j
s:34:7)
    at Gulp.Orchestrator._runTask (C:\wamp\www\postcss\node_modules\gulp\node_modules\orchestrator\i
ndex.js:273:3)
    at Gulp.Orchestrator._runStep (C:\wamp\www\postcss\node_modules\gulp\node_modules\orchestrator\i
ndex.js:214:10)
    at Gulp.Orchestrator.start (C:\wamp\www\postcss\node_modules\gulp\node_modules\orchestrator\inde
x.js:134:8)
    at C:\Users\alex\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at doNTCallback0 (node.js:407:9)
    at process._tickCallback (node.js:336:13)
    at Function.Module.runMain (module.js:477:11)

I've tried stripping this back to one task, but it makes no difference; as soon as I remove the reference to Rucksack() in the initial task, it works fine. Anyone any ideas as to why please? I have to work on a Windows environment - could this be causing the issue?

commented

Yep I'd say it's a Windows issue and how node handles the filesystem there. I'm a *nix guy so no idea what is actually going on. Will try debug this in a VM when I get a moment, but any Windows users please feel free to chime in and offer some wisdom!

I think I've solved my little problem:
I had another look at the docs - it seems I can't read: the plugin I should have used is rucksack**-css**, and not rucksack! Installing this and compiling my code worked fine - I'm not sure which plugin I had installed when I installed using npm install rucksack --save-dev though?

commented

Ah yeah, sorry, the rucksack npm module was already registered when we built Rucksack. rucksack seems to be a js bundler of some sort (https://www.npmjs.com/package/rucksack).