Skip to content

Commit

Permalink
export function minify()
Browse files Browse the repository at this point in the history
  • Loading branch information
Bart Veneman committed Feb 17, 2024
1 parent da4d7d7 commit 75e05f5
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 13 deletions.
11 changes: 10 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -429,7 +429,7 @@ function print(node, css, indent_level = 0) {
/**
* Take a string of CSS (minified or not) and format it with some simple rules
* @param {string} css The original CSS
* @returns {string} The newly formatted CSS
* @returns {string} The formatted CSS
*/
export function format(css, { minify = false } = {}) {
let ast = parse(css, {
Expand All @@ -445,3 +445,12 @@ export function format(css, { minify = false } = {}) {

return print(ast, css, 0)
}

/**
* Take a string of CSS and minify it
* @param {string} css The original CSS
* @returns {string} The minified CSS
*/
export function minify(css) {
return format(css, { minify: true })
}
22 changes: 10 additions & 12 deletions test/minify.test.js
Original file line number Diff line number Diff line change
@@ -1,50 +1,48 @@
import { suite } from "uvu"
import * as assert from "uvu/assert"
import { format } from "../index.js"
import { minify } from "../index.js"

let test = suite("Minify")

const MINIFY_OPTIONS = { minify: true }

test('empty rule', () => {
let actual = format(`a {}`, MINIFY_OPTIONS)
let actual = minify(`a {}`)
let expected = `a{}`
assert.equal(actual, expected)
})

test('simple declaration', () => {
let actual = format(`:root { --color: red; }`, MINIFY_OPTIONS)
let actual = minify(`:root { --color: red; }`)
let expected = `:root{--color:red;}`
assert.equal(actual, expected)
})

test('simple atrule', () => {
let actual = format(`@media (min-width: 100px) { body { color: red; } }`, MINIFY_OPTIONS)
let actual = minify(`@media (min-width: 100px) { body { color: red; } }`)
let expected = `@media (min-width: 100px){body{color:red;}}`
assert.equal(actual, expected)
})

test('empty atrule', () => {
let actual = format(`@media (min-width: 100px) {}`, MINIFY_OPTIONS)
let actual = minify(`@media (min-width: 100px) {}`)
let expected = `@media (min-width: 100px){}`
assert.equal(actual, expected)
})

test("formats multiline values on a single line", () => {
let actual = format(`
let actual = minify(`
a {
background: linear-gradient(
red,
10% blue,
20% green,100% yellow);
}
`, MINIFY_OPTIONS);
`);
let expected = `a{background:linear-gradient(red, 10% blue, 20% green, 100% yellow);}`;
assert.equal(actual, expected);
})

test('Vadim Makeevs example works', () => {
let actual = format(`
let actual = minify(`
@layer what {
@container (width > 0) {
ul:has(:nth-child(1 of li)) {
Expand All @@ -56,13 +54,13 @@ test('Vadim Makeevs example works', () => {
}
}
}
`, MINIFY_OPTIONS)
`)
let expected = `@layer what{@container (width > 0){ul:has(:nth-child(1 of li)){@media (height > 0){&:hover{--is:this;}}}}}`
assert.equal(actual, expected)
})

test('minified Vadims example', () => {
let actual = format(`@layer what{@container (width>0){@media (min-height:.001px){ul:has(:nth-child(1 of li)):hover{--is:this}}}}`, MINIFY_OPTIONS)
let actual = minify(`@layer what{@container (width>0){@media (min-height:.001px){ul:has(:nth-child(1 of li)):hover{--is:this}}}}`)
let expected = `@layer what{@container (width > 0){@media (min-height: .001px){ul:has(:nth-child(1 of li)):hover{--is:this;}}}}`
assert.equal(actual, expected)
})
Expand Down

0 comments on commit 75e05f5

Please sign in to comment.