Merge pull request #966 from ckeditor/css-data-image-new-line-fix

Fix: Should not corrupt the CSS code during splitting CSS into editor and content files. See ckeditor/ckeditor5#16670.

packages/ckeditor5-dev-build-tools/src/plugins/splitCss.ts

@@ -8,6 +8,7 @@ import { parse, type Rule, type Declaration, type Stylesheet } from 'css';
 import type { Plugin, OutputBundle, NormalizedOutputOptions, EmittedAsset } from 'rollup';
 import type { Processor } from 'postcss';
 import cssnano from 'cssnano';
+import { removeNewline } from '../utils';
 
 export interface RollupSplitCssOptions {
 
@@ -269,5 +270,13 @@ async function unifyFileContentOutput( content: string = '', minimize: boolean )
  * Wraps `declarations` list into passed `selector`;
  */
 function wrapDefinitionsIntoSelector( selector: string, definitions: string ): string {
+	// When definition contains `data:image` it should be in one line following the specification.
+	// Currently used tool responsible for parsing definitions tries to split each definition into new line.
+	// When `data:image` contains `SVG` with style attribute which contains CSS definitions it splits it into new lines,
+	// which breaks the CSS.
+	if ( definitions.includes( 'data:image' ) ) {
+		definitions = removeNewline( definitions );
+	}
+
 	return `${ selector } {\n${ definitions }}\n`;
 }

packages/ckeditor5-dev-build-tools/src/utils.ts

@@ -41,6 +41,14 @@ export function removeWhitespace( text: string ): string {
 	return text.replaceAll( /\n\s+/gm, '\n' );
 }
 
+/**
+ * Returns string without newline.
+ */
+
+export function removeNewline( text: string ): string {
+	return text.replaceAll( /\r?\n|\r/g, '' );
+}
+
 /**
  * Returns dependency resolved relative to the current working directory. This is needed to ensure
  * that the dependency of this package itself (which may be in a different version) is not used.

packages/ckeditor5-dev-build-tools/tests/plugins/splitCss/fixtures/import-data-image/input.ts

@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import './body.css';
+
+export const test = 123;

packages/ckeditor5-dev-build-tools/tests/plugins/splitCss/splitCss.test.ts

@@ -246,3 +246,22 @@ test( 'should minify the content output', async () => {
 	verifyDividedStyleSheet( output, 'styles-editor.css', expectedResult );
 	verifyDividedStyleSheet( output, 'styles-content.css', '' );
 } );
+
+test( 'should correctly parse the `data:image` style definition (should do not add new lines)', async () => {
+	const output = await generateBundle(
+		'./fixtures/import-data-image/input.ts',
+		{ baseFileName: 'styles' }
+	);
+
+	const expectedResult = removeWhitespace(
+		'.ck {\n' +
+			'background-image: url("data:image/svg+xml;utf8,<svg width=\'120\' height=\'12\' xmlns=\'http://www.w3.org/2000/svg\' >' +
+			'<text style=\'paint-order:stroke fill; clip-path: inset(-3px);transform: translate(-2px, 0)\' stroke=\'%23EAEAEA\' ' +
+			'stroke-width=\'13\' dominant-baseline=\'middle\' fill=\'black\' x=\'100%\' text-anchor=\'end\' y=\'7\' font-size=\'9px\' ' +
+			'font-family=\'Consolas, %22Lucida Console%22, %22Lucida Sans Typewriter%22, %22DejaVu Sans Mono%22, ' +
+			'%22Bitstream Vera Sans Mono%22, %22Liberation Mono%22, Monaco, %22Courier New%22, Courier, monospace\'>' +
+			'FIGCAPTION</text></svg>");background-position: calc(100% - 1px) 1px;}\n' );
+
+	verifyDividedStyleSheet( output, 'styles-editor.css', expectedResult );
+	verifyDividedStyleSheet( output, 'styles-content.css', '' );
+} );

packages/ckeditor5-dev-build-tools/tests/utils.test.ts

@@ -5,7 +5,7 @@
 
 import { test, expect } from 'vitest';
 import upath from 'upath';
-import { getCwdPath, camelize, camelizeObjectKeys } from '../src/utils.js';
+import { getCwdPath, camelize, camelizeObjectKeys, removeNewline } from '../src/utils.js';
 
 test( 'getPath()', () => {
 	expect( getCwdPath( 'dist', 'index.js' ) ).toBe( upath.join( process.cwd(), '/dist/index.js' ) );
@@ -15,6 +15,12 @@ test( 'camelize()', () => {
 	expect( camelize( 'this-is-a-test' ) ).toBe( 'thisIsATest' );
 } );
 
+test( 'removeNewline()', () => {
+	const newLines = `line1;
+line2;`;
+	expect( removeNewline( newLines ) ).toBe( 'line1;line2;' );
+} );
+
 test( 'camelizeObjectKeys()', () => {
 	expect( camelizeObjectKeys( {
 		'test-one': 1,