GithubHelp home page GithubHelp logo

sindresorhus / gulp-rework Goto Github PK

View Code? Open in Web Editor NEW
31.0 7.0 7.0 27 KB

Preprocess CSS with Rework

License: MIT License

JavaScript 100.00%
javascript nodejs gulp-plugin css rework preprocessor deprecated

gulp-rework's Issues

Last argument as option doesn't work.

Here is my task

var rework = require('gulp-rework')

gulp.task('styles', function () {
  gulp.src('src/css/index.css')
    .pipe(
      rework(
        //  rework.at2x()
          rework.colors()
        , rework.references()
        , require('rework-breakpoints')
        , require('rework-vars')()
        , require('rework-parent')
        , require('rework-clearfix')
        , {
          sourcemap: true
        }
      )
    )
    .pipe(require('gulp-autoprefixer')())
    //.pipe(require('gulp-csso')())
    .pipe(gulp.dest('dist/css'))
});

Here is what I got

❯ gulp styles
[gulp] Using file /blah/frontend/gulpfile.js
[gulp] Working directory changed to /blah/frontend
[gulp] Running 'styles'...
[gulp] Finished 'styles' in 46 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
TypeError: object is not a function
    at Rework.use (/blah/frontend/node_modules/gulp-rework/node_modules/rework/lib/rework.js:58:3)
    at /blah/frontend/node_modules/gulp-rework/index.js:13:8
    at Array.forEach (native)
    at /blah/frontend/node_modules/gulp-rework/index.js:12:11
    at wrappedMapper (/blah/frontend/node_modules/gulp-rework/node_modules/event-stream/node_modules/map-stream/index.js:76:19)
    at Stream.stream.write (/blah/frontend/node_modules/gulp-rework/node_modules/event-stream/node_modules/map-stream/index.js:88:21)
    at Stream.ondata (stream.js:51:26)
    at Stream.EventEmitter.emit (events.js:95:17)
    at queueData (/blah/frontend/node_modules/gulp/node_modules/event-stream/node_modules/map-stream/index.js:38:21)
    at next (/blah/frontend/node_modules/gulp/node_modules/event-stream/node_modules/map-stream/index.js:68:5)

Error when running gulp-rework: no 'slice' method 

gulp.task('css', function () {
    gulp.src('./src/css/main.css')
        .pipe(rework())
        .pipe(gulp.dest('./target/css'));
});

Error:

❯ ./node_modules/.bin/gulp css
[11:14:53] Using gulpfile ~/Development/bright-north-site-v4/Gulpfile.js
[11:14:53] Starting 'css'...
[11:14:53] 'css' errored after 6.28 ms
[11:14:53] TypeError: Cannot call method 'slice' of undefined
    at match (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:129:15)
    at whitespace (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:138:5)
    at rules (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:109:5)
    at stylesheet (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:81:16)
    at module.exports (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:558:20)
    at rework (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/index.js:26:21)
    at Gulp.<anonymous> (/Users/Oliver/Development/bright-north-site-v4/Gulpfile.js:19:15)
    at module.exports (/Users/Oliver/Development/bright-north-site-v4/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/Oliver/Development/bright-north-site-v4/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/Oliver/Development/bright-north-site-v4/node_modules/gulp/node_modules/orchestrator/index.js:214:10)

Example with autoprefixer doesn't work

I just paste the example in the readme & it didn't work.

var gulp = require('gulp');
var rework = require('gulp-rework');
var autoprefixer = require('autoprefixer');

gulp.task('default', function () {
    gulp.src('src/css/index.css')
        .pipe(rework(rework.at2x(), autoprefixer().rework, {sourcemap: true}))
        .pipe(gulp.dest('dist'));
});

Result

❯❯ gulp
[gulp] Using file /blah/frontend/gulpfile.js
[gulp] Working directory changed to /blah/frontend
[gulp] Running 'default'...
[gulp] Finished 'default' in 23 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
TypeError: undefined is not a function
    at Rework.use (/blah/frontend/node_modules/gulp-rework/node_modules/rework/lib/rework.js:58:3)
    at /blah/frontend/node_modules/gulp-rework/index.js:13:8
    at Array.forEach (native)
    at /blah/frontend/node_modules/gulp-rework/index.js:12:11
    at wrappedMapper (/blah/frontend/node_modules/gulp-rework/node_modules/event-stream/node_modules/map-stream/index.js:76:19)
    at Stream.stream.write (/blah/frontend/node_modules/gulp-rework/node_modules/event-stream/node_modules/map-stream/index.js:88:21)
    at Stream.ondata (stream.js:51:26)
    at Stream.EventEmitter.emit (events.js:95:17)
    at queueData (/blah/frontend/node_modules/gulp/node_modules/event-stream/node_modules/map-stream/index.js:38:21)
    at next (/blah/frontend/node_modules/gulp/node_modules/event-stream/node_modules/map-stream/index.js:68:5)

I try to check console.log(autoprefixer().rework) but get undefined.
What am I doing wrong ?

Not works if css contains inline comments

Not works if css contains inline comments like below. Throwing error

background: #aaaaaa/{bgColorOverlay}/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/{bgImgUrlOverlay}/ 50%/{bgOverlayXPos}/ 50%/{bgOverlayYPos}/ repeat-x/{bgOverlayRepeat}/;

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.