diff --git a/README.md b/README.md index 7e090a2..3cf8408 100644 --- a/README.md +++ b/README.md @@ -58,10 +58,10 @@ The package also exports lower-level formatters for individual CSS constructs: ```js import { - format_value, - format_declaration, - format_selector, - format_atrule_prelude, + format_value, + format_declaration, + format_selector, + format_atrule_prelude, } from '@projectwallace/format-css' // Format a CSS value (e.g. the right-hand side of a declaration) diff --git a/src/lib/index.ts b/src/lib/index.ts index 573671d..2cf80f0 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -309,7 +309,9 @@ export function format_atrule_prelude( .replace(/\)([a-zA-Z])/g, ') $1') // force whitespace between closing parenthesis and following text (usually and|or) .replace(/\s*(=>|>=|<=)\s*/g, `${optional_space}$1${optional_space}`) // add optional spacing around =>, >= and <= .replace(/([^<>=\s])([<>])([^<>=\s])/g, `$1${optional_space}$2${optional_space}$3`) // add spacing around < or > except when it's part of <=, >=, => - .replace(/\s+/g, optional_space) // collapse multiple whitespaces into one + .replace(/([^<>=\s])\s+([<>])\s+([^<>=\s])/g, `$1${optional_space}$2${optional_space}$3`) // handle spaces around < or > when they already have surrounding whitespace + .replace(/\s+/g, SPACE) // collapse multiple whitespaces into one + .replace(/([:,]) /g, minify ? '$1' : '$1 ') // in minify mode, remove optional spaces after : and , .replace( /calc\(\s*([^()+\-*/]+)\s*([*/+-])\s*([^()+\-*/]+)\s*\)/g, (_, left, operator, right) => { diff --git a/test/atrules.test.ts b/test/atrules.test.ts index 20d9ad9..83686d0 100644 --- a/test/atrules.test.ts +++ b/test/atrules.test.ts @@ -367,6 +367,12 @@ test('minify: new-fangled comparators (width > 1000px)', () => { expect(actual).toEqual(expected) }) +test('minify: keeps necessary whitespace between keywords', () => { + let actual = minify(`@media screen or print {}`) + let expected = `@media screen or print{}` + expect(actual).toEqual(expected) +}) + test.skip('preserves comments', () => { let actual = format(` @media /* comment */ all {}