postcss-cssnext gulp4 task fails to find existing 'postcss.config.json'
opened this issue · comments
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?
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