@master/css-compiler 2.0.0-rc.70 → 2.0.0-rc.72

package/dist/core.mjs

@@ -367,10 +367,136 @@ function formatDeclarationValue(declaration) {
         throw error;
     }
     const colonIndex = declarationText.indexOf(':');
-    return declarationText.slice(colonIndex + 1).trim();
+    return formatCSSNumberLiterals(declarationText.slice(colonIndex + 1).trim());
+}
+function normalizeNumberText(value) {
+    const [rawMantissa, rawExponent] = value.toLowerCase().replace('e+', 'e').split('e');
+    let mantissa = rawMantissa.replace(/^\+/, '');
+    if (mantissa.includes('.')) {
+        mantissa = mantissa.replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '');
+    }
+    if (mantissa === '-0') mantissa = '0';
+    mantissa = mantissa.replace(/^(-?)0\./, '$1.');
+    return rawExponent === undefined ? mantissa : `${mantissa}e${rawExponent}`;
 }
 function formatNumber(value) {
-    return String(value).replace(/^(-?)0\./, '$1.');
+    if (Object.is(value, -0)) return '0';
+    if (!Number.isFinite(value)) return String(value);
+    const direct = normalizeNumberText(String(value));
+    if (Number.isInteger(value)) return direct;
+    const target = Math.fround(value);
+    if (!Number.isFinite(target)) return direct;
+    let best = direct;
+    for(let precision = 1; precision <= 9; precision++){
+        const candidate = normalizeNumberText(target.toPrecision(precision));
+        if (!Object.is(Math.fround(Number(candidate)), target)) continue;
+        if (candidate.length < best.length || candidate.length === best.length && best.includes('e') && !candidate.includes('e')) {
+            best = candidate;
+        }
+    }
+    return best;
+}
+function isCSSIdentifierChar(value) {
+    return value !== undefined && /[-_a-zA-Z0-9]/.test(value);
+}
+function isCSSDigit(value) {
+    return value !== undefined && value >= '0' && value <= '9';
+}
+function canStartCSSNumber(value, index) {
+    const previous = value[index - 1];
+    if (isCSSIdentifierChar(previous) || previous === '#' || previous === '\\') return false;
+    const current = value[index];
+    const next = value[index + 1];
+    if (current === '+' || current === '-') {
+        return isCSSDigit(next) || next === '.' && isCSSDigit(value[index + 2]);
+    }
+    return isCSSDigit(current) || current === '.' && isCSSDigit(next);
+}
+function readCSSNumber(value, start) {
+    let index = start;
+    if (value[index] === '+' || value[index] === '-') index++;
+    let hasDigits = false;
+    while(isCSSDigit(value[index])){
+        hasDigits = true;
+        index++;
+    }
+    if (value[index] === '.') {
+        index++;
+        while(isCSSDigit(value[index])){
+            hasDigits = true;
+            index++;
+        }
+    }
+    if (!hasDigits) return;
+    if (value[index] === 'e' || value[index] === 'E') {
+        let exponentIndex = index + 1;
+        if (value[exponentIndex] === '+' || value[exponentIndex] === '-') exponentIndex++;
+        const exponentStart = exponentIndex;
+        while(isCSSDigit(value[exponentIndex]))exponentIndex++;
+        if (exponentIndex > exponentStart) index = exponentIndex;
+    }
+    return {
+        text: value.slice(start, index),
+        end: index
+    };
+}
+function findCSSFunctionEnd(value, start) {
+    let depth = 0;
+    for(let index = start; index < value.length; index++){
+        const char = value[index];
+        if (char === '\\') {
+            index++;
+            continue;
+        }
+        if (char === '"' || char === '\'') {
+            index = findCSSClosingQuote(value, index, char);
+            continue;
+        }
+        if (char === '(') {
+            depth++;
+            continue;
+        }
+        if (char === ')') {
+            depth--;
+            if (depth === 0) return index + 1;
+        }
+    }
+    return value.length;
+}
+function formatCSSNumberLiterals(value) {
+    let result = '';
+    let index = 0;
+    while(index < value.length){
+        const char = value[index];
+        if (char === '\\') {
+            result += value.slice(index, index + 2);
+            index += 2;
+            continue;
+        }
+        if (char === '"' || char === '\'') {
+            const end = findCSSClosingQuote(value, index, char) + 1;
+            result += value.slice(index, end);
+            index = end;
+            continue;
+        }
+        if (value.slice(index, index + 4).toLowerCase() === 'url(' && !isCSSIdentifierChar(value[index - 1])) {
+            const end = findCSSFunctionEnd(value, index);
+            result += value.slice(index, end);
+            index = end;
+            continue;
+        }
+        if (canStartCSSNumber(value, index)) {
+            const number = readCSSNumber(value, index);
+            if (number) {
+                result += formatNumber(Number(number.text));
+                index = number.end;
+                continue;
+            }
+        }
+        result += char;
+        index++;
+    }
+    return result;
 }
 function formatDeclarationValueOverride(declaration) {
     if (declaration.property !== 'aspect-ratio') return;
@@ -443,11 +569,11 @@ function formatToken(token) {
         case 'unquoted-url':
             return `url(${token.value})`;
         case 'number':
-            return String(token.value);
+            return formatNumber(token.value);
         case 'percentage':
-            return `${token.value * 100}%`;
+            return `${formatNumber(token.value * 100)}%`;
         case 'dimension':
-            return `${token.value}${token.unit}`;
+            return `${formatNumber(token.value)}${token.unit}`;
         case 'white-space':
             return token.value;
         case 'comment':
@@ -526,12 +652,13 @@ const COMPARISON_OPERATORS = {
 };
 function formatFeatureValue(value) {
     if (value === undefined || value === null) return '';
-    if (typeof value === 'string' || typeof value === 'number') return String(value);
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number') return formatNumber(value);
     switch(value.type){
         case 'ident':
             return value.value;
         case 'number':
-            return String(value.value);
+            return formatNumber(value.value);
         case 'length':
             {
                 let resolvedValue = value.value;
@@ -544,7 +671,7 @@ function formatFeatureValue(value) {
         case 'ratio':
             return `${value.value.numerator}/${value.value.denominator}`;
         default:
-            return formatPrelude(value) || String(value.value ?? '');
+            return formatPrelude(value) || (typeof value.value === 'number' ? formatNumber(value.value) : String(value.value ?? ''));
     }
 }
 function formatCondition(condition) {
@@ -1316,9 +1443,9 @@ function formatKeyframeSelector(selector) {
         case 'to':
             return selector.type;
         case 'percentage':
-            return `${selector.value * 100}%`;
+            return `${formatNumber(selector.value * 100)}%`;
         case 'timeline-range-percentage':
-            return `${selector.value.name} ${selector.value.percentage * 100}%`;
+            return `${selector.value.name} ${formatNumber(selector.value.percentage * 100)}%`;
     }
 }
 function parseKeyframes(rule, manifestInput, isStatic) {

package/dist/index.mjs

@@ -3,6 +3,7 @@ import { createRequire } from 'node:module';
 import { isAbsolute, resolve, extname, dirname } from 'node:path';
 import { transform } from 'lightningcss';
 import { stringifyMasterCSSManifestJSON } from '@master/css-schema/manifest-json';
+import { MASTER_CSS_ENTRY_DIRECTIVE_NAME } from '@master/css-lexer';
 import { createMasterCSSManifest } from './master-css-manifest.mjs';
 import lowerCSSDirectives from './lower-css-directives.mjs';
 import { compileCSS, findCSSReferenceStatements, removeCSSReferenceStatements } from './core.mjs';
@@ -78,7 +79,7 @@ function resolveMasterCSSPackageEntryFile(importSource, fromFile = process.cwd()
     return styleFile;
 }
 function inspectCSS(source) {
-    const hasMasterEntryDirective = findStandaloneMasterDirectiveStatements(source).some((statement)=>statement.name === '');
+    const hasMasterEntryDirective = findStandaloneMasterDirectiveStatements(source).some((statement)=>statement.name === MASTER_CSS_ENTRY_DIRECTIVE_NAME);
     const hasMasterCSSImport = findCSSImportStatements(source).some((statement)=>statement.source === MASTER_CSS_PACKAGE_ID);
     return {
         hasMasterEntryDirective,

package/dist/lexer/standalone-master.mjs

@@ -1,4 +1,4 @@
-import { removeSourceRanges, escapeRegExp } from '@master/css-lexer';
+import { removeSourceRanges, MASTER_CSS_ENTRY_DIRECTIVE_NAME, escapeRegExp } from '@master/css-lexer';
 import { findAtRuleStatementEnd } from './source.mjs';
 
 const STANDALONE_CSS_DIRECTIVE_NAMES = new Set([
@@ -131,8 +131,8 @@ function parseStandaloneCSSDirectiveStatement(source, start, atRuleName) {
     if (end === -1) return;
     const statement = source.slice(start, end);
     const prelude = statement.replace(new RegExp(`^@${atRuleName}\\b`), '').replace(/;$/, '');
-    if (atRuleName === 'master' && prelude.trim()) return;
-    const name = atRuleName === 'master' ? '' : atRuleName;
+    const name = atRuleName === 'master' ? MASTER_CSS_ENTRY_DIRECTIVE_NAME : atRuleName;
+    if (atRuleName === 'master' && prelude.trim() !== MASTER_CSS_ENTRY_DIRECTIVE_NAME) return;
     return {
         start,
         end,

package/package.json

@@ -1 +1 @@
-{"name":"@master/css-compiler","type":"module","scripts":{"build":"techor build \"src/**/*.ts\" --formats esm","dev":"pnpm build --watch","lint":"eslint","type-check":"tsc --noEmit","test":"vitest"},"license":"MIT","description":"Compile Master CSS stylesheet directives","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/compiler"},"keywords":["compiler","directives","css","mastercss"],"sideEffects":false,"main":"./dist/index.mjs","module":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","default":"./dist/index.mjs"},"./browser":{"types":"./dist/browser.d.ts","import":"./dist/browser.mjs","default":"./dist/browser.mjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css-engine":"^2.0.0-rc.70","@master/css-lexer":"^2.0.0-rc.70","css-tree":"^3.2.1","csstype":"^3.2.3","lightningcss":"^1.32.0","lightningcss-wasm":"^1.32.0","@master/css-schema":"^2.0.0-rc.70"},"devDependencies":{"@master/css-preset":"^2.0.0-rc.70","@types/css-tree":"^2.3.11"},"version":"2.0.0-rc.70"}
+{"name":"@master/css-compiler","type":"module","scripts":{"build":"techor build \"src/**/*.ts\" --formats esm","dev":"pnpm build --watch","lint":"eslint","type-check":"tsc --noEmit","test":"vitest"},"license":"MIT","description":"Compile Master CSS stylesheet directives","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/compiler"},"keywords":["compiler","directives","css","mastercss"],"sideEffects":false,"main":"./dist/index.mjs","module":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","default":"./dist/index.mjs"},"./browser":{"types":"./dist/browser.d.ts","import":"./dist/browser.mjs","default":"./dist/browser.mjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css-engine":"^2.0.0-rc.72","@master/css-lexer":"^2.0.0-rc.72","css-tree":"^3.2.1","csstype":"^3.2.3","lightningcss":"^1.32.0","lightningcss-wasm":"^1.32.0","@master/css-schema":"^2.0.0-rc.72"},"devDependencies":{"@master/css-preset":"^2.0.0-rc.72","@types/css-tree":"^2.3.11"},"version":"2.0.0-rc.72"}