Overwrite Brunch sourcemap with PostCSS sourcemap?

[jonny-harte]

Hi,

At present a .map file is being generated but this appears to be from brunch and doesn't account for any postCSS (all styles are listed as index.css:1 in chrome dev tools). I've modified the file structure a bit so the brunch-config, node_modules etc. are in the root of a wordpress install but all the js, css etc is in a theme and compiled into the root of the theme (script.js & style.css). Heres my brunch-config.js.

const
    project = 'react-theme',
    path = 'wp-content/themes/' + project + '/';

exports.config = {
    files: {
        javascripts: { joinTo: 'script.js' },
        stylesheets: { joinTo: 'style.css' }
    },
    modules: {
        autoRequire: {
            'script.js': [path + 'app/initialize']
        }
    },
    paths: {
        public: path,
        watched: [path + 'app', path + 'styles']
    },
    plugins: {
        babel: { presets: ['es2015', 'react'] },
        browserSync: {
            files: [
                path + "**/*.php",
                path + "**/*.html",
                path + "/fonts/**/*.{eot,otf,svg,ttf,woff,woff2}",
                path + "/images/**/*.{gif,jpg,png,svg}",
                path + "script.js",
                path + "style.css"
            ],
            proxy: project + '.local'
        },
        postcss: {
            from: path + 'styles/index.css',
            to: path + 'style.css',
            map: { inline: false },
            processors: [
                require('precss')(),
                require('autoprefixer')(['> 5%']),
                require('postcss-pxtorem')({
                    prop_white_list: [],
                    media_query: true
                }),
                require('css-mqpacker')({ sort: true }),
                require('cssnano')({
                    discardComments: { removeAll: true }
                }),
            ]
        }
    },
};

My folder structure is:

wordpress-root/
-brunch-config.js
-package.json
-/node_modules/
-/wp-content/
--/themes/
---/react-theme/
----index.php
----functions.php
----scripts.js
----scripts.js.map
----style.css
----style.css.map
----/app/
-----initialize.js
-----/components/
------App.jsx
----/styles/
-----index.css
-----/partials/
------_base.css
------_typography.css

Just getting started with brunch so any tips advice would be much appreciated!

[denysdovhan]

Hi, @hartey11! Thanks for reaching out!

I've noticed this:

require('cssnano')({
  discardComments: { removeAll: true }
})

Here is a docs for that option: http://cssnano.co/optimisations/discardComments

Brunch's source maps are generating as //-comments for JavaScript and /* */-comments for other languages. Seems like discardComments option removes these comments out of files. Try to disable this rule, that may help you.

[jonny-harte]

Hi, I removed it but I still didn't get the output I was expecting. Looks like the setup I was trying won't work. Ideally I'm for the following:

brunch watch: preCSS, autoprefixer & sourcemaps.

--production preCSS, autoprefixer, mqpacker, pxtorem & then the output file minified.

It looks like postCSS is run on the individual input files and not the output file? Currently mqpacker doesn't seem to combine all media queries if i inspect the output file

[Jayphen]

I appear to have the same issue – was this resolved?

[jonny-harte]

Sorry I'm not sure. I was experimenting with brunch and never used it in an a project in the end.

[friday]

This is a duplicate of https://github.com/brunch/brunch/issues/1648 which has been fixed pretty recently. It doesn't happen in the latest release.