Git Product home page Git Product logo

Comments (8)

unlight avatar unlight commented on June 21, 2024

I'm not sure that it is the right way of usage.
Why are you not using gulp-sass?

from gulp-cssimport.

wardpenney avatar wardpenney commented on June 21, 2024

The recommendation came from Shopify's example repo at https://github.com/Shopify/shopify-css-import to use gulp-cssimport. I am guessing they don't use gulp-sass because the files need to actually be liquid as the last file extension. When I try to use gulp-sass I get an error saying the source file is invalid.

from gulp-cssimport.

unlight avatar unlight commented on June 21, 2024

Maybe directory option can help, it will act as current working directory.

gulp.task("styles", function(){
  return gulp.src([sourceFilename])
    .pipe(cssimport(directory: bourbonPaths[0]))
    .pipe(gulp.dest(destinationFolder));
})

Note: directory is string, so you can specify only 1 path.

Not tested this.

from gulp-cssimport.

wardpenney avatar wardpenney commented on June 21, 2024

Ohh that is close! But it looks like the directory option is not respected or something:

This line has the path logged out:

[14:27:23] WARDTEST: /Users/wardpenney/test-app/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets
[14:27:23] WARDTEST: /Users/wardpenney/test-app/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets
Trace: { [Error: ENOENT, open '/Users/wardpenney/test-app/scss/bourbon']
  errno: 34,
  code: 'ENOENT',
  path: '/Users/wardpenney/test-app/scss/bourbon' }
    at onResolvePath (/Users/wardpenney/test-app/node_modules/gulp-cssimport/gulp-cssimport.js:85:13)
    at /Users/wardpenney/test-app/node_modules/gulp-cssimport/helper.js:94:3
    at fs.js:207:20
    at Object.oncomplete (fs.js:107:15)

/Users/wardpenney/workspace/test-app/node_modules/gulp-cssimport/gulp-cssimport.js:86
                throw err;
                      ^
Error: ENOENT, open '/Users/wardpenney/test-app/scss/bourbon'

from gulp-cssimport.

unlight avatar unlight commented on June 21, 2024

You are right, directory is ignored if object is vinyl file.

from gulp-cssimport.

unlight avatar unlight commented on June 21, 2024

gulp-cssimport can work with plain string/buffer streams.

var through2 = require("through2");
var VinylFile = require('vinyl');
var Chunk = require("gulp-cssimport/chunk");

    var stream = gulp.src("design/style.css")
        .pipe(through2.obj(function (chunk, enc, callback) {
            var ch = Chunk.create({
                contents: chunk.contents.toString(),
                directory: chunk.base
            });
            callback(null, ch);
        }))
        .pipe(cssimport({directory: "design" }))
        .pipe(through2.obj(function (data, enc, callback) {
            var file = new VinylFile({
                path: 'x', // <--- we lost path here.
                contents: new Buffer(data)
            });
            callback(null, file);
        }))
        .pipe(gulp.dest("/dev/null"));

It works for me, but there is a problem - we lost file name. Need to solve this somehow.

from gulp-cssimport.

wardpenney avatar wardpenney commented on June 21, 2024

What if we just use a variable to hold the filename?

var gulp = require("gulp"),
    cssimport = require("gulp-cssimport"),
    through2 = require("through2"),
    VinylFile = require('vinyl'),
    neatPaths = require("node-neat").includePaths,
    bourbonPaths = require("node-bourbon").includePaths,
    sourceFilename = "scss/styles.scss.liquid",
    destinationFolder = "assets/",
    Chunk = require("gulp-cssimport/chunk");

gulp.task("styles", function(){
  return gulp.src([sourceFilename])
    .pipe(through2.obj(function (chunk, enc, callback) {
        var ch = Chunk.create({
            contents: chunk.contents.toString(),
            directory: chunk.base
        });
        callback(null, ch);
    }))
    .pipe(cssimport({directory: bourbonPaths[0]}))
    .pipe(through2.obj(function (data, enc, callback) {
        var file = new VinylFile({
            path: sourceFilename, // <- Can we just use a filename variable?
            contents: new Buffer(data)
        });
        callback(null, file);
    }))
    .pipe(gulp.dest(destinationFolder));
})

gulp.task("watch", function () {
  gulp.watch("scss/**/*.*", ["styles"]);
});

gulp.task("default", ["watch"]);

Thanks for all your help, btw

from gulp-cssimport.

unlight avatar unlight commented on June 21, 2024

If you are building 1:1from single source file then yes it is a solution.
But I will think how to improve this stuff.

from gulp-cssimport.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.