search

MoOx / postcss-cssnext

`postcss-cssnext` has been deprecated in favor of `postcss-preset-env`.
https://moox.io/blog/deprecating-cssnext/
MIT License
5.3k stars 189 forks source link

postcss-cssnext gulp4 task fails to find existing 'postcss.config.json' #436

Closed ghost closed 6 years ago

ghost commented 6 years ago

I've installed,

    cd /dev/www/test/
    node -v
        v9.3.0
    yarn add --mutex file --dev \
     https://github.com/ben-eb/caniuse-lite#master \
     https://github.com/MoOx/postcss-cssnext#master \
     cssnano \
     gulp-postcss \
     postcss-load-config
    gulp --version
        [09:49:10] Requiring external module @babel/register
        [09:49:10] CLI version 1.4.0
        [09:49:10] Local version 4.0.0-alpha.2

checking

yarn list | grep "^├─" | egrep "cssnano|postcss|autoprefixer|caniuse" ``` ├─ autoprefixer@6.7.7 ├─ caniuse-api@2.0.0 ├─ caniuse-db@1.0.30000783 ├─ caniuse-lite@1.0.30000783 ├─ cssnano@3.10.0 ├─ gulp-postcss@7.0.0 ├─ postcss-apply@0.8.0 ├─ postcss-attribute-case-insensitive@2.0.0 ├─ postcss-calc@5.3.1 ├─ postcss-color-function@4.0.1 ├─ postcss-color-gray@4.1.0 ├─ postcss-color-hex-alpha@3.0.0 ├─ postcss-color-hsl@2.0.0 ├─ postcss-color-hwb@3.0.0 ├─ postcss-color-rebeccapurple@3.0.0 ├─ postcss-color-rgb@2.0.0 ├─ postcss-color-rgba-fallback@3.0.0 ├─ postcss-colormin@2.2.2 ├─ postcss-convert-values@2.6.1 ├─ postcss-cssnext@3.0.2 ├─ postcss-custom-media@6.0.0 ├─ postcss-custom-properties@6.2.0 ├─ postcss-custom-selectors@4.0.1 ├─ postcss-discard-comments@2.0.4 ├─ postcss-discard-duplicates@2.1.0 ├─ postcss-discard-empty@2.1.0 ├─ postcss-discard-overridden@0.1.1 ├─ postcss-discard-unused@2.2.3 ├─ postcss-filter-plugins@2.0.2 ├─ postcss-font-family-system-ui@2.1.1 ├─ postcss-font-variant@3.0.0 ├─ postcss-image-set-polyfill@0.3.5 ├─ postcss-initial@2.0.0 ├─ postcss-load-config@1.2.0 ├─ postcss-load-options@1.2.0 ├─ postcss-load-plugins@2.3.0 ├─ postcss-media-minmax@3.0.0 ├─ postcss-media-query-parser@0.2.3 ├─ postcss-merge-idents@2.1.7 ├─ postcss-merge-longhand@2.0.2 ├─ postcss-merge-rules@2.1.2 ├─ postcss-message-helpers@2.0.0 ├─ postcss-minify-font-values@1.0.5 ├─ postcss-minify-gradients@1.0.5 ├─ postcss-minify-params@1.2.2 ├─ postcss-minify-selectors@2.1.1 ├─ postcss-nesting@4.2.1 ├─ postcss-normalize-charset@1.1.1 ├─ postcss-normalize-url@3.0.8 ├─ postcss-ordered-values@2.2.3 ├─ postcss-pseudo-class-any-link@4.0.0 ├─ postcss-pseudoelements@5.0.0 ├─ postcss-reduce-idents@2.4.0 ├─ postcss-reduce-initial@1.0.1 ├─ postcss-reduce-transforms@1.0.4 ├─ postcss-replace-overflow-wrap@2.0.0 ├─ postcss-selector-matches@3.0.1 ├─ postcss-selector-not@3.0.1 ├─ postcss-selector-parser@2.2.3 ├─ postcss-svgo@2.1.6 ├─ postcss-unique-selectors@2.0.2 ├─ postcss-value-parser@3.3.0 ├─ postcss-zindex@2.2.0 ├─ postcss@6.0.14 ```


with my gulpfile,

cat /dev/www/test/gulpfile.babel.js
    ...
    import gulp         from 'gulp';
    import {src, dest, watch, parallel, series} from 'gulp';
    import autoprefixer from 'autoprefixer';
    import cssnano      from 'cssnano';
    import postcss      from 'gulp-postcss';
    import cssnext      from 'postcss-cssnext';
    ...
    function scss_min() {
        var postcssPlugins = [
            cssnext({
                browsers: ['last 1 version'],
                cascade: false
            }),
            cssnano()
        ];
        return pump([
            gulp.src([
                PATHS.scssSrc + 'main.scss'
            ]),
            sass({
                includePaths: [
                    PATHS.scssSrc
                ],
                errLogToConsole: true
            }).on('error', sass.logError),
            postcss({postcssPlugins}),
            rename({
                suffix: '.min'
            }),
            gulp.dest( PATHS.cssGen ),
        ]);
    };
    ...

and, postcss config,

    cat /dev/www/test/postcss.config.json
        {
          "use": [
            "postcss-cssnext",
            "autoprefixer",
            "cssnano"
          ]
        }

gulp fails on exec,

    ...
    [09:07:46] 'scss_min' errored after 6.52 s
    [09:07:46] Error in plugin 'gulp-postcss'
    Message:
        No PostCSS Config found in: /dev/www/test/web-src/scss
    Details:
        fileName: /dev/www/test/web-src/scss/main.css
    Stack:
    Error: No PostCSS Config found in: /dev/www/test/web-src/scss
        at /dev/www/test/node_modules/postcss-load-config/index.js:51:26
        at <anonymous>
    ...

Note it's looking for the config file in the scss source dir,

/dev/www/test/web-src/scss

not in the app root,

/dev/www/test/

is this an issue in postcss-cssnext itself, the gulp-postcss wrapper, or my config/usage?

ghost commented 6 years ago

cssnano@next was needed

installing

yarn add --mutex file --dev \
 https://github.com/ben-eb/caniuse-lite#master \
 https://github.com/MoOx/postcss-cssnext#master \
 gulp-postcss \
 postcss-load-config \
 cssnano@next

with

import gulp from 'gulp';
import {src, dest, watch, parallel, series} from 'gulp';
import cssnext      from 'postcss-cssnext';
import cssnano      from 'cssnano';
import postcss      from 'gulp-postcss';
import postcssrc    from 'postcss-load-config';
...
function scss_min() {
    return pump([
        gulp.src([
            PATHS.scssSrc + 'main.scss'
        ]),
        sass({
            includePaths: [
                PATHS.scssSrc
            ],
            errLogToConsole: true
        }).on('error', sass.logError),
        postcss([
            require("postcss-cssnext")(),
            require("cssnano")({ autoprefixer: false })
        ]),
        rename({
            suffix: '.min'
        }),
        gulp.dest( PATHS.cssGen ),
    ]);
};
...

seems to do the trick.

scss is being compiled+minified correctly