Adapt cssmin.js for minifyStyles + update tests

packages/styling/src/minifyStyles.test.ts

@@ -4,12 +4,32 @@ import { minifyStyles } from './minifyStyles.js';
 
 describe('@acusti/styling', () => {
  describe('minifyStyles.ts', () => {
- it("replaces consecutive whitespace (including \\n) with ' '", () => {
+ it('minifies basic CSS declarations', () => {
  expect(
- minifyStyles(`.foo {
+ minifyStyles(`
+.foo {
+ padding: 10px;
  color: red;
 }`),
- ).toBe('.foo { color: red; }');
+ ).toBe('.foo{padding:10px;color:red}');
+ });
+
+ it('preserves whitespace where needed in selectors', () => {
+ expect(
+ minifyStyles(`
+.foo > .bar :hover {
+ background-color: cyan;
+}`),
+ ).toBe('.foo>.bar :hover{background-color:cyan}');
+ });
+
+ it('minifies 0.6 to .6, but only when preceded by : or a whitespace', () => {
+ expect(
+ minifyStyles(`
+.foo {
+ opacity: 0.6;
+}`),
+ ).toBe('.foo{opacity:.6}');
  });
  });
 });

packages/styling/src/minifyStyles.ts

@@ -1,8 +1,191 @@
-// TODO use techniques from https://github.com/jbleuzen/node-cssmin/blob/master/cssmin.js
-// (check https://github.com/jbleuzen/node-cssmin/pull/19/files also)
-export function minifyStyles(styles: string) {
- // Minify CSS styles by replacing consecutive whitespace (including \n) with ' '
- return styles.replace(/\s+/gm, ' ');
+/**
+ * Adapted from:
+ * https://github.com/jbleuzen/node-cssmin/blob/master/cssmin.js
+ * node-cssmin
+ * A simple module for Node.js that minify CSS
+ * Author : Johan Bleuzen
+ */
+
+/**
+ * cssmin.js
+ * Author: Stoyan Stefanov - http://phpied.com/
+ * This is a JavaScript port of the CSS minification tool
+ * distributed with YUICompressor, itself a port
+ * of the cssmin utility by Isaac Schlueter - http://foohack.com/
+ * Permission is hereby granted to use the JavaScript version under the same
+ * conditions as the YUICompressor (original YUICompressor note below).
+ */
+
+/*
+* YUI Compressor
+* http://developer.yahoo.com/yui/compressor/
+* Author: Julien Lecomte - http://www.julienlecomte.net/
+* Copyright (c) 2011 Yahoo! Inc. All rights reserved.
+* The copyrights embodied in the content of this file are licensed
+* by Yahoo! Inc. under the BSD (revised) open source license.
+*/
+
+export function minifyStyles(css: string) {
+ const preservedTokens: Array<string> = [];
+ const comments: Array<string> = [];
+ const totalLength = css.length;
+ let startIndex = 0,
+ endIndex = 0,
+ i = 0,
+ max = 0,
+ token = '',
+ placeholder = '';
+
+ // collect all comment blocks...
+ while ((startIndex = css.indexOf('/*', startIndex)) >= 0) {
+ endIndex = css.indexOf('*/', startIndex + 2);
+ if (endIndex < 0) {
+ endIndex = totalLength;
+ }
+ token = css.slice(startIndex + 2, endIndex);
+ comments.push(token);
+ css =
+ css.slice(0, startIndex + 2) +
+ '___PRESERVE_CANDIDATE_COMMENT_' +
+ (comments.length - 1) +
+ '___' +
+ css.slice(endIndex);
+ startIndex += 2;
+ }
+
+ // preserve strings so their content doesn't get accidentally minified
+ css = css.replace(/("([^\\"]|\\.|\\)*")|('([^\\']|\\.|\\)*')/g, function (match) {
+ const quote = match.substring(0, 1);
+ let i, max;
+
+ match = match.slice(1, -1);
+
+ // maybe the string contains a comment-like substring?
+ // one, maybe more? put'em back then
+ if (match.indexOf('___PRESERVE_CANDIDATE_COMMENT_') >= 0) {
+ for (i = 0, max = comments.length; i < max; i = i + 1) {
+ match = match.replace(
+ '___PRESERVE_CANDIDATE_COMMENT_' + i + '___',
+ comments[i],
+ );
+ }
+ }
+
+ preservedTokens.push(match);
+ return (
+ quote +
+ '___PRESERVED_TOKEN_' +
+ (preservedTokens.length - 1) +
+ '___' +
+ quote
+ );
+ });
+
+ // strings are safe, now wrestle the comments
+ for (i = 0, max = comments.length; i < max; i = i + 1) {
+ token = comments[i];
+ placeholder = '___PRESERVE_CANDIDATE_COMMENT_' + i + '___';
+
+ // ! in the first position of the comment means preserve
+ // so push to the preserved tokens keeping the !
+ if (token.charAt(0) === '!') {
+ preservedTokens.push(token);
+ css = css.replace(
+ placeholder,
+ '___PRESERVED_TOKEN_' + (preservedTokens.length - 1) + '___',
+ );
+ continue;
+ }
+
+ // otherwise, kill the comment
+ css = css.replace('/*' + placeholder + '*/', '');
+ }
+
+ // Normalize all whitespace strings to single spaces. Easier to work with that way.
+ css = css.replace(/\s+/g, ' ');
+
+ // Remove the spaces before the things that should not have spaces before them.
+ // But, be careful not to turn "p :link {...}" into "p:link{...}"
+ // Swap out any pseudo-class colons with the token, and then swap back.
+ css = css.replace(/(^|\})(([^{:])+:)+([^{]*\{)/g, function (m) {
+ return m.replace(/:/g, '___PSEUDOCLASSCOLON___');
+ });
+
+ // Preserve spaces in calc expressions
+ css = css.replace(/calc\s*\(\s*(.*?)\s*\)/g, function (m, c: string) {
+ return m.replace(c, c.replace(/\s+/g, '___SPACE_IN_CALC___'));
+ });
+
+ css = css.replace(/\s+([!{};:>+()\],])/g, '$1');
+ css = css.replace(/___PSEUDOCLASSCOLON___/g, ':');
+
+ // no space after the end of a preserved comment
+ css = css.replace(/\*\/ /g, '*/');
+
+ // If there is a @charset, then only allow one, and push to the top of the file.
+ css = css.replace(/^(.*)(@charset "[^"]*";)/gi, '$2$1');
+ css = css.replace(/^(\s*@charset [^;]+;\s*)+/gi, '$1');
+
+ // Put the space back in some cases, to support stuff like
+ // @media screen and (-webkit-min-device-pixel-ratio:0){
+ css = css.replace(/\band\(/gi, 'and (');
+
+ // Remove the spaces after the things that should not have spaces after them.
+ css = css.replace(/([!{}:;>+([,])\s+/g, '$1');
+
+ // Restore preserved spaces in calc expressions
+ css = css.replace(/___SPACE_IN_CALC___/g, ' ');
+
+ // remove unnecessary semicolons
+ css = css.replace(/;+\}/g, '}');
+
+ // Replace 0(px,em,%) with 0.
+ css = css.replace(/([\s:])(0)(px|em|%|in|cm|mm|pc|pt|ex)/gi, '$1$2');
+
+ // Replace 0 0 0 0; with 0.
+ css = css.replace(/:0 0 0 0(;|\})/g, ':0$1');
+ css = css.replace(/:0 0 0(;|\})/g, ':0$1');
+ css = css.replace(/:0 0(;|\})/g, ':0$1');
+
+ // Replace background-position:0; with background-position:0 0;
+ // same for transform-origin
+ css = css.replace(
+ /(background-position|transform-origin):0(;|\})/gi,
+ function (_all, prop: string, tail: string) {
+ return prop.toLowerCase() + ':0 0' + tail;
+ },
+ );
+
+ // Replace 0.6 to .6, but only when preceded by : or a white-space
+ css = css.replace(/(:|\s)0+\.(\d+)/g, '$1.$2');
+
+ // border: none -> border:0
+ css = css.replace(
+ /(border|border-top|border-right|border-bottom|border-right|outline|background):none(;|\})/gi,
+ function (_all, prop: string, tail: string) {
+ return prop.toLowerCase() + ':0' + tail;
+ },
+ );
+
+ // Remove empty rules.
+ css = css.replace(/[^};{/]+\{\}/g, '');
+
+ // Replace multiple semi-colons in a row by a single one
+ // See SF bug #1980989
+ css = css.replace(/;;+/g, ';');
+
+ // restore preserved comments and strings
+ for (i = 0, max = preservedTokens.length; i < max; i = i + 1) {
+ css = css.replace(
+ '___PRESERVED_TOKEN_' + i + '___',
+ preservedTokens[i],
+ );
+ }
+
+ // Trim the final string (for any leading or trailing white spaces)
+ css = css.replace(/^\s+|\s+$/g, '');
+
+ return css;
 }
 
 export default minifyStyles;

packages/styling/src/useStyles.test.tsx

@@ -28,7 +28,7 @@ describe('@acusti/styling', () => {
 
  let stylesItemA = styleRegistry.get(mockStylesA);
  expect(stylesItemA?.referenceCount).toBe(2);
- expect(stylesItemA?.styles).toBe('.test-a { color: cyan; }');
+ expect(stylesItemA?.styles).toBe('.test-a{color:cyan}');
  expect(styleRegistry.size).toBe(1);
 
  rerender(<Style>{mockStylesA}</Style>);