diff --git a/.gitignore b/.gitignore index 9115b3d274..8975ad857c 100644 --- a/.gitignore +++ b/.gitignore @@ -11,4 +11,4 @@ coverage coverage.lcov test/sourcemaps/samples/*/output.js test/sourcemaps/samples/*/output.js.map -_actual.json +_actual.* diff --git a/src/generators/Generator.js b/src/generators/Generator.js index f43ca29c3b..bdf8de7278 100644 --- a/src/generators/Generator.js +++ b/src/generators/Generator.js @@ -6,6 +6,7 @@ import globalWhitelist from '../utils/globalWhitelist.js'; import reservedNames from '../utils/reservedNames.js'; import getIntro from './shared/utils/getIntro.js'; import getOutro from './shared/utils/getOutro.js'; +import processCss from './shared/processCss.js'; import annotateWithScopes from './annotateWithScopes.js'; export default class Generator { @@ -30,6 +31,7 @@ export default class Generator { this.elementDepth = 0; this.code = new MagicString( source ); + this.css = parsed.css ? processCss( parsed, this.code ) : null; this.cssId = parsed.css ? `svelte-${parsed.hash}` : ''; this.usesRefs = false; @@ -233,7 +235,8 @@ export default class Generator { return { code: compiled.toString(), - map: compiled.generateMap({ includeContent: true, file: options.outputFilename }) + map: compiled.generateMap({ includeContent: true, file: options.outputFilename }), + css: this.css }; } diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js index a51cb6feaf..8d4e18b488 100644 --- a/src/generators/dom/index.js +++ b/src/generators/dom/index.js @@ -2,7 +2,6 @@ import deindent from '../../utils/deindent.js'; import getBuilders from './utils/getBuilders.js'; import CodeBuilder from '../../utils/CodeBuilder.js'; import namespaces from '../../utils/namespaces.js'; -import processCss from '../shared/processCss.js'; import removeObjectKey from '../../utils/removeObjectKey.js'; import visitors from './visitors/index.js'; import Generator from '../Generator.js'; @@ -275,12 +274,12 @@ export default function dom ( parsed, source, options ) { builders.main.addBlock( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` ); } - if ( parsed.css && options.css !== false ) { + if ( generator.css && options.css !== false ) { builders.main.addBlock( deindent` var ${generator.alias( 'addedCss' )} = false; function ${generator.alias( 'addCss' )} () { var style = ${generator.helper( 'createElement' )}( 'style' ); - style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )}; + style.textContent = ${JSON.stringify( generator.css )}; ${generator.helper( 'appendNode' )}( style, document.head ); ${generator.alias( 'addedCss' )} = true; diff --git a/src/generators/server-side-rendering/index.js b/src/generators/server-side-rendering/index.js index 8cce0610c7..b40d29f34b 100644 --- a/src/generators/server-side-rendering/index.js +++ b/src/generators/server-side-rendering/index.js @@ -1,7 +1,6 @@ import deindent from '../../utils/deindent.js'; import CodeBuilder from '../../utils/CodeBuilder.js'; import flattenReference from '../../utils/flattenReference.js'; -import processCss from '../shared/processCss.js'; import visitors from './visitors/index.js'; import Generator from '../Generator.js'; @@ -93,11 +92,11 @@ export default function ssr ( parsed, source, options ) { `var components = [];` ); - if ( parsed.css ) { + if ( generator.css ) { builders.renderCss.addBlock( deindent` components.push({ filename: ${name}.filename, - css: ${JSON.stringify( processCss( parsed, generator.code ) )}, + css: ${JSON.stringify( generator.css )}, map: null // TODO }); ` ); diff --git a/test/css/index.js b/test/css/index.js new file mode 100644 index 0000000000..e0cbab2676 --- /dev/null +++ b/test/css/index.js @@ -0,0 +1,25 @@ +import assert from 'assert'; +import * as fs from 'fs'; +import { svelte, exists } from '../helpers.js'; + +describe.only( 'css', () => { + fs.readdirSync( 'test/css/samples' ).forEach( dir => { + if ( dir[0] === '.' ) return; + + const solo = exists( `test/css/samples/${dir}/solo` ); + + if ( solo && process.env.CI ) { + throw new Error( 'Forgot to remove `solo: true` from test' ); + } + + ( solo ? it.only : it )( dir, () => { + const input = fs.readFileSync( `test/css/samples/${dir}/input.html`, 'utf-8' ).replace( /\s+$/, '' ); + + const actual = svelte.compile( input ).css; + fs.writeFileSync( `test/css/samples/${dir}/_actual.css`, actual ); + const expected = fs.readFileSync( `test/css/samples/${dir}/expected.css`, 'utf-8' ); + + assert.equal( actual.trim(), expected.trim() ); + }); + }); +}); diff --git a/test/css/samples/basic/expected.css b/test/css/samples/basic/expected.css new file mode 100644 index 0000000000..ee9575d9a8 --- /dev/null +++ b/test/css/samples/basic/expected.css @@ -0,0 +1,4 @@ + + div[svelte-281576708], [svelte-281576708] div { + color: red; + } diff --git a/test/css/samples/basic/input.html b/test/css/samples/basic/input.html new file mode 100644 index 0000000000..c87862c093 --- /dev/null +++ b/test/css/samples/basic/input.html @@ -0,0 +1,7 @@ +<div>red</div> + +<style> + div { + color: red; + } +</style> \ No newline at end of file