Skip to content

Commit

Permalink
Generate components CSS on virtual files
Browse files Browse the repository at this point in the history
  • Loading branch information
@kaisermann
kaisermann committed Apr 21, 2018
1 parent ca1b71b commit f7e0634
Show file tree
Hide file tree
Showing 3 changed files with 1,084 additions and 14 deletions.
29 changes: 16 additions & 13 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
const { basename, extname, posix, relative } = require('path');
const { basename, extname, relative } = require('path');
const { compile, preprocess } = require('svelte');
const { getOptions } = require('loader-utils');
const { statSync, utimesSync, writeFileSync } = require('fs');
const { tmpdir } = require('os');
const VirtualModulesPlugin = require('webpack-virtual-modules');

const hotApi = require.resolve('./lib/hot-api.js');
const virtualModules = new VirtualModulesPlugin();

function makeHot(id, code, hotOptions) {
const options = JSON.stringify(hotOptions);
Expand Down Expand Up @@ -107,18 +107,18 @@ module.exports = function(source, map) {
options.preprocess.filename = options.filename;

preprocess(source, options.preprocess).then(processed => {
let { js, css, ast } = normalize(compile(processed.toString(), options));
let { js, css } = normalize(compile(processed.toString(), options));

if (options.emitCss && css.code) {
const posixTmpdir = posixify(tmpdir());
const tmpFile = posix.join(posixTmpdir, 'svelte-' + ast.hash + '.css');

css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/';
js.code = js.code + `\nrequire('${tmpFile}');\n`;

writeFileSync(tmpFile, css.code);
const { atime, mtime } = statSync(tmpFile);
utimesSync(tmpFile, new Date(atime.getTime() - 99999), new Date(mtime.getTime() - 99999));
const cssFilepath = options.filename.replace(
/\.[^/.]+$/,
`.${Math.random()
.toString()
.slice(2, 11)}.css`
);
css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/'
js.code = js.code + `\nrequire('${cssFilepath}');\n`
virtualModules.writeModule(cssFilepath, css.code)
}

if (options.hotReload && !isProduction && !isServer) {
Expand All @@ -134,3 +134,6 @@ module.exports = function(source, map) {
callback(new Error(`${err.name}: ${err.toString()}`));
});
};

module.exports.plugin = virtualModules;
module.exports.loader = __filename;
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"dependencies": {
"loader-utils": "^1.1.0",
"svelte-dev-helper": "^1.1.4",
"tmp": "0.0.31"
"webpack-virtual-modules": "^0.1.9"
},
"devDependencies": {
"chai": "^3.5.0",
Expand Down
Loading

2 comments on commit f7e0634

@cklmercer
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I receive the following error when trying to use this:

ERROR in ./src/App.html
Module build failed: Error: TypeError: TypeError: Cannot read property 'watchFileSystem' of undefined
    at preprocess.then.catch.err (/home/cklmercer/Code/svelte-app/node_modules/svelte-loader/index.js:134:12)
    at <anonymous>
 @ ./src/main.js 1:0-29 3:16-19
 @ multi ./src/main.js

@kaisermann
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cklmercer can you test now? The webpack-virtual-modules was just updated with a fix for this issue.

Please sign in to comment.