[PostCSSPlugin] Unexpected token o in JSON at position 1

[cmizzi]

Hi everyone.

I'm currently testing fuse-box with PostCSSPlugin and CSSPlugin. My goal is the following :

• creates an built/app.css with my custom grouped CSS files (apply PostCSS on this file and prevents inject) ;
• injects the rest of the CSS that can be loaded dynamically but is provided by vendor packages (just CSS) ;

This is working, but when I want sourceMaps: true, I've got this kind of error

10:15:10: Source changed for index.js
10:15:10: Source changed for index.js
SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at File.generateCorrectSourceMap (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/File.js:438:39)
    at group.subFiles.forEach.file (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/plugins/stylesheet/CSSplugin.js:51:67)
    at Array.forEach (native)
    at CSSPluginClass.transformGroup (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/plugins/stylesheet/CSSplugin.js:49:24)
    at promises.push.Promise (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/ModuleCollection.js:144:59)
    at context.fileGroups.forEach (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/ModuleCollection.js:143:35)
    at Map.forEach (native)
    at ModuleCollection.transformGroups (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/ModuleCollection.js:139:33)
    at realm_utils_1.each.then.then.then.then.then (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/ModuleCollection.js:92:34)

--------------------------
Bundle "app" 

    index.js
    style/app.css
    app.css
└──  (3 files,  543 Bytes) default
size: 543 Bytes in 30ms
SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at File.generateCorrectSourceMap (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/File.js:438:39)
    at group.subFiles.forEach.file (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/plugins/stylesheet/CSSplugin.js:51:67)
    at Array.forEach (native)
    at CSSPluginClass.transformGroup (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/plugins/stylesheet/CSSplugin.js:49:24)
    at promises.push.Promise (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/ModuleCollection.js:144:59)
    at context.fileGroups.forEach (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/ModuleCollection.js:143:35)
    at Map.forEach (native)
    at ModuleCollection.transformGroups (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/ModuleCollection.js:139:33)
    at realm_utils_1.each.then.then.then.then.then (/data/cmizzi/fusebox/node_modules/fuse-box/dist/commonjs/core/ModuleCollection.js:92:34)

--------------------------
Bundle "vendor" 

    app.css
└──  (1 files,  146 Bytes) default
size: 146 Bytes in 41ms

This is the test repository I made : https://github.com/cmizzi/fusebox-vuecomponentplugin. When I run a node ./fuse.js, sometime the bug is thrown but not every time. Just write into the index.js file and the bug is here...

const {FuseBox, PostCSSPlugin, CSSPlugin, VueComponentPlugin} = require('fuse-box')
const fuse      = new FuseBox({
	homeDir    : 'sources',
	output     : 'built/$name.js',
	log        : true,
	sourceMaps : true,
	plugins    : [
		VueComponentPlugin(),

		[
			'style/**.css', 

			PostCSSPlugin([require('autoprefixer')(), require('precss')()], {
				sourceMaps: true,
			}),
			CSSPlugin({ group: 'app.css', inject: (file) => `built/${file}`, outFile: 'built/app.css' })
		],
		CSSPlugin({ group: 'vendor.css', inject: true }),
	],
	useTypescriptCompiler : true
})

fuse.dev({ root: './', port: 8081, devServer: false })
fuse.bundle('vendor').instructions('~ index.ts').watch().hmr()
fuse.bundle('app').instructions('!> [index.ts]').watch().hmr()

fuse.run()

fusebox master 19ed958 ➜ node -v
v7.0.0

[nchanged]

We will take a look at it, thanks for submitting.

[cmizzi]

I don't know if I'm using well PostCSS and CSS plugins together and if my goal is really reached (because as the error is thrown, I cannot look at the CSS file and sourcemaps :/ )

[nchanged]

@cmizzi are you using it in the VueComponent? I think it's handled differently
http://fuse-box.org/plugins/vue-component-plugin#using-custom-plugin-chains

[cmizzi]

Not at now. I'm just loading my style/app.css file directly in the index.js file. I don't have vue single file component yet. I'm just trying to make the css working :P

[nchanged]

@cmizzi can you reproduce it please in a repository?

[cmizzi]

Hum, the repository is already updated : https://github.com/cmizzi/fusebox-vuecomponentplugin

[nchanged]

Sorry, thanks, i will take a look

[cmizzi]

Any news ?

[nchanged]

First thing I noticed
That is wrong -->

import * as 'Vue' from 'vue'

Should be

import * as Vue from 'vue'

The bug is fixed, do that:

 npm install fuse-box@2.3.4-beta.9 --save-dev

[nchanged]

Regarding the sourcemaps, I see there is something off with them, can you verify that please, and we can ask @Shepless to check it out

[cmizzi]

Hum, sourcemaps looks like to be generated but not used (loaded). I've got a file called app.css.map in my built working tree but it is not loaded into debugger (Chrome or Firefox)... I've just updated my repository to expose this bug.

{"version":3,"sources":["style/app.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":""}

[nchanged]

@Shepless could you take a look mate?

[TombolaShepless]

@cmizzi @nchanged will take a look this evening after work. Will keep you posted.

[Shepless]

@cmizzi @nchanged sorry for the delay - I have looked at this and not had much joy might be a bit beyond my knowledge!

[mwmessin]

PR'd a fix: #897