@wyw-in-js/processor-utils 0.1.0

package/types/utils/getClassNameAndSlug.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = require("path");
+const shared_1 = require("@wyw-in-js/shared");
+const buildSlug_1 = require("./buildSlug");
+const toValidCSSIdentifier_1 = require("./toValidCSSIdentifier");
+function getClassNameAndSlug(displayName, idx, options, context) {
+    const relativeFilename = (context.root && context.filename
+        ? (0, path_1.relative)(context.root, context.filename)
+        : context.filename ?? 'unknown').replace(/\\/g, path_1.posix.sep);
+    // Custom properties need to start with a letter, so we prefix the slug
+    // Also use append the index of the class to the filename for uniqueness in the file
+    const slug = (0, toValidCSSIdentifier_1.toValidCSSIdentifier)(`${displayName.charAt(0).toLowerCase()}${(0, shared_1.slugify)(`${relativeFilename}:${idx}`)}`);
+    // Collect some useful replacement patterns from the filename
+    // Available variables for the square brackets used in `classNameSlug` options
+    const ext = (0, path_1.extname)(relativeFilename);
+    const slugVars = {
+        hash: slug,
+        title: displayName,
+        file: relativeFilename,
+        ext,
+        name: (0, path_1.basename)(relativeFilename, ext),
+        dir: (0, path_1.dirname)(relativeFilename).split(path_1.sep).pop(),
+    };
+    let className = options.displayName
+        ? `${(0, toValidCSSIdentifier_1.toValidCSSIdentifier)(displayName)}_${slug}`
+        : slug;
+    // The className can be defined by the user either as fn or a string
+    if (typeof options.classNameSlug === 'function') {
+        try {
+            className = (0, toValidCSSIdentifier_1.toValidCSSIdentifier)(options.classNameSlug(slug, displayName, slugVars));
+        }
+        catch {
+            throw new Error('classNameSlug option must return a string');
+        }
+    }
+    if (typeof options.classNameSlug === 'string') {
+        className = (0, toValidCSSIdentifier_1.toValidCSSIdentifier)((0, buildSlug_1.buildSlug)(options.classNameSlug, slugVars));
+    }
+    shared_1.logger.extend('template-parse:generated-meta')(`slug: ${slug}, displayName: ${displayName}, className: ${className}`);
+    return { className, slug };
+}
+exports.default = getClassNameAndSlug;

package/types/utils/getVariableName.d.ts

@@ -0,0 +1,2 @@
+import type { IOptions } from './types';
+export declare function getVariableName(varId: string, rawVariableName: IOptions['variableNameConfig'] | undefined): string;

package/types/utils/getVariableName.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVariableName = void 0;
+function getVariableName(varId, rawVariableName) {
+    switch (rawVariableName) {
+        case 'raw':
+            return varId;
+        case 'dashes':
+            return `--${varId}`;
+        case 'var':
+        default:
+            return `var(--${varId})`;
+    }
+}
+exports.getVariableName = getVariableName;

package/types/utils/stripLines.d.ts

@@ -0,0 +1,5 @@
+import type { Location } from '@wyw-in-js/shared';
+export default function stripLines(loc: {
+    end: Location;
+    start: Location;
+}, text: string | number): string;

package/types/utils/stripLines.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Stripping away the new lines ensures that we preserve line numbers
+// This is useful in case of tools such as the stylelint pre-processor
+// This should be safe because strings cannot contain newline: https://www.w3.org/TR/CSS2/syndata.html#strings
+function stripLines(loc, text) {
+    let result = String(text)
+        .replace(/[\r\n]+/g, ' ')
+        .trim();
+    // If the start and end line numbers aren't same, add new lines to span the text across multiple lines
+    if (loc.start.line !== loc.end.line) {
+        result += '\n'.repeat(loc.end.line - loc.start.line);
+        // Add extra spaces to offset the column
+        result += ' '.repeat(loc.end.column);
+    }
+    return result;
+}
+exports.default = stripLines;

package/types/utils/templateProcessor.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This file handles transforming template literals to class names or styled components and generates CSS content.
+ * It uses CSS code from template literals and evaluated values of lazy dependencies stored in ValueCache.
+ */
+import type { TemplateElement } from '@babel/types';
+import type { ExpressionValue, Replacements } from '@wyw-in-js/shared';
+import type { TaggedTemplateProcessor } from '../TaggedTemplateProcessor';
+import type { ValueCache, Rules } from '../types';
+import type { IOptions } from './types';
+export default function templateProcessor(tagProcessor: TaggedTemplateProcessor, [...template]: (TemplateElement | ExpressionValue)[], valueCache: ValueCache, variableNameConfig: IOptions['variableNameConfig'] | undefined): [rules: Rules, sourceMapReplacements: Replacements] | null;

package/types/utils/templateProcessor.js

@@ -0,0 +1,140 @@
+"use strict";
+/* eslint-disable no-continue */
+/**
+ * This file handles transforming template literals to class names or styled components and generates CSS content.
+ * It uses CSS code from template literals and evaluated values of lazy dependencies stored in ValueCache.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const shared_1 = require("@wyw-in-js/shared");
+const getVariableName_1 = require("./getVariableName");
+const stripLines_1 = __importDefault(require("./stripLines"));
+const throwIfInvalid_1 = __importDefault(require("./throwIfInvalid"));
+const toCSS_1 = __importStar(require("./toCSS"));
+const units_1 = require("./units");
+// Match any valid CSS units followed by a separator such as ;, newline etc.
+const unitRegex = new RegExp(`^(?:${units_1.units.join('|')})\\b`);
+function templateProcessor(tagProcessor, [...template], valueCache, variableNameConfig) {
+    const sourceMapReplacements = [];
+    // Check if the variable is referenced anywhere for basic DCE
+    // Only works when it's assigned to a variable
+    const { isReferenced } = tagProcessor;
+    // Serialize the tagged template literal to a string
+    let cssText = '';
+    let item;
+    let lastTemplateElementLocation;
+    // eslint-disable-next-line no-cond-assign
+    while ((item = template.shift())) {
+        if ('type' in item) {
+            // It's a template element
+            cssText += item.value.cooked;
+            lastTemplateElementLocation = item.loc;
+            continue;
+        }
+        // It's an expression
+        const { ex } = item;
+        const { end } = ex.loc;
+        const beforeLength = cssText.length;
+        // The location will be end of the current string to start of next string
+        const next = template[0]; // template[0] is the next template element
+        const loc = {
+            // +1 because an expression location always shows 1 column before
+            start: {
+                line: lastTemplateElementLocation.end.line,
+                column: lastTemplateElementLocation.end.column + 1,
+            },
+            end: next
+                ? { line: next.loc.start.line, column: next.loc.start.column }
+                : { line: end.line, column: end.column + 1 },
+        };
+        const value = 'value' in item ? item.value : valueCache.get(item.ex.name);
+        // Is it props based interpolation?
+        if (item.kind === shared_1.ValueType.FUNCTION || typeof value === 'function') {
+            // Check if previous expression was a CSS variable that we replaced
+            // If it has a unit after it, we need to move the unit into the interpolation
+            // e.g. `var(--size)px` should actually be `var(--size)`
+            // So we check if the current text starts with a unit, and add the unit to the previous interpolation
+            // Another approach would be `calc(var(--size) * 1px), but some browsers don't support all units
+            // https://bugzilla.mozilla.org/show_bug.cgi?id=956573
+            const matches = next.value.cooked?.match(unitRegex);
+            try {
+                if (matches) {
+                    template.shift();
+                    const [unit] = matches;
+                    const varId = tagProcessor.addInterpolation(item.ex, cssText, item.source, unit);
+                    cssText += (0, getVariableName_1.getVariableName)(varId, variableNameConfig);
+                    cssText += next.value.cooked?.substring(unit?.length ?? 0) ?? '';
+                }
+                else {
+                    const varId = tagProcessor.addInterpolation(item.ex, cssText, item.source);
+                    cssText += (0, getVariableName_1.getVariableName)(varId, variableNameConfig);
+                }
+            }
+            catch (e) {
+                if (e instanceof Error) {
+                    throw item.buildCodeFrameError(e.message);
+                }
+                throw e;
+            }
+        }
+        else {
+            (0, throwIfInvalid_1.default)(tagProcessor.isValidValue.bind(tagProcessor), value, item, item.source);
+            if (value !== undefined && typeof value !== 'function') {
+                // Skip the blank string instead of throw ing an error
+                if (value === '') {
+                    continue;
+                }
+                if ((0, shared_1.hasEvalMeta)(value)) {
+                    // If it's a React component wrapped in styled, get the class name
+                    // Useful for interpolating components
+                    cssText += `.${value.__wyw_meta.className}`;
+                }
+                else if ((0, toCSS_1.isCSSable)(value)) {
+                    // If it's a plain object or an array, convert it to a CSS string
+                    cssText += (0, stripLines_1.default)(loc, (0, toCSS_1.default)(value));
+                }
+                else {
+                    // For anything else, assume it'll be stringified
+                    cssText += (0, stripLines_1.default)(loc, value);
+                }
+                sourceMapReplacements.push({
+                    original: loc,
+                    length: cssText.length - beforeLength,
+                });
+            }
+        }
+    }
+    const rules = tagProcessor.extractRules(valueCache, cssText, tagProcessor.location);
+    // tagProcessor.doRuntimeReplacement(classes);
+    if (!isReferenced && !cssText.includes(':global')) {
+        return null;
+    }
+    // eslint-disable-next-line no-param-reassign
+    return [rules, sourceMapReplacements];
+}
+exports.default = templateProcessor;

package/types/utils/throwIfInvalid.d.ts

@@ -0,0 +1,5 @@
+import type { BuildCodeFrameErrorFn } from '@wyw-in-js/shared';
+declare function throwIfInvalid<T>(checker: (value: unknown) => value is T, value: Error | unknown, ex: {
+    buildCodeFrameError: BuildCodeFrameErrorFn;
+}, source: string): asserts value is T;
+export default throwIfInvalid;

package/types/utils/throwIfInvalid.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const isLikeError = (value) => typeof value === 'object' &&
+    value !== null &&
+    'stack' in value &&
+    'message' in value;
+// Throw if we can't handle the interpolated value
+function throwIfInvalid(checker, value, ex, source) {
+    // We can't use instanceof here so let's use duck typing
+    if (isLikeError(value) && value.stack && value.message) {
+        throw ex.buildCodeFrameError(`An error occurred when evaluating the expression:
+
+  > ${value.message}.
+
+  Make sure you are not using a browser or Node specific API and all the variables are available in static context.
+  Linaria have to extract pieces of your code to resolve the interpolated values.
+  Defining styled component or class will not work inside:
+    - function,
+    - class,
+    - method,
+    - loop,
+  because it cannot be statically determined in which context you use them.
+  That's why some variables may be not defined during evaluation.
+      `);
+    }
+    if (checker(value)) {
+        return;
+    }
+    const stringified = typeof value === 'object' ? JSON.stringify(value) : String(value);
+    throw ex.buildCodeFrameError(`The expression evaluated to '${stringified}', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(${source})'.`);
+}
+exports.default = throwIfInvalid;

package/types/utils/toCSS.d.ts

@@ -0,0 +1,3 @@
+import type { CSSPropertyValue, CSSable } from '../types';
+export declare const isCSSable: (o: unknown) => o is CSSPropertyValue | import("../types").ObjectWithSelectors | (CSSPropertyValue | import("../types").ObjectWithSelectors)[];
+export default function toCSS(o: CSSable): string;

package/types/utils/toCSS.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCSSable = void 0;
+const shared_1 = require("@wyw-in-js/shared");
+const units_1 = require("./units");
+const isCSSPropertyValue = (o) => {
+    return ((0, shared_1.isBoxedPrimitive)(o) ||
+        typeof o === 'string' ||
+        (typeof o === 'number' && Number.isFinite(o)));
+};
+const isCSSable = (o) => {
+    if (isCSSPropertyValue(o)) {
+        return true;
+    }
+    if (Array.isArray(o)) {
+        return o.every(exports.isCSSable);
+    }
+    if (typeof o === 'object') {
+        return o !== null && Object.values(o).every(exports.isCSSable);
+    }
+    return false;
+};
+exports.isCSSable = isCSSable;
+const hyphenate = (s) => {
+    if (s.startsWith('--')) {
+        // It's a custom property which is already well formatted.
+        return s;
+    }
+    return (s
+        // Hyphenate CSS property names from camelCase version from JS string
+        .replace(/([A-Z])/g, (match, p1) => `-${p1.toLowerCase()}`)
+        // Special case for `-ms` because in JS it starts with `ms` unlike `Webkit`
+        .replace(/^ms-/, '-ms-'));
+};
+// Some tools such as polished.js output JS objects
+// To support them transparently, we convert JS objects to CSS strings
+function toCSS(o) {
+    if (Array.isArray(o)) {
+        return o.map(toCSS).join('\n');
+    }
+    if (isCSSPropertyValue(o)) {
+        return o.valueOf().toString();
+    }
+    return Object.entries(o)
+        .filter(([, value]) => 
+    // Ignore all falsy values except numbers
+    typeof value === 'number' || value)
+        .map(([key, value]) => {
+        if (!isCSSPropertyValue(value)) {
+            return `${key} { ${toCSS(value)} }`;
+        }
+        return `${hyphenate(key)}: ${typeof value === 'number' &&
+            value !== 0 &&
+            // Strip vendor prefixes when checking if the value is unitless
+            !(key.replace(/^(Webkit|Moz|O|ms)([A-Z])(.+)$/, (match, p1, p2, p3) => `${p2.toLowerCase()}${p3}`) in units_1.unitless)
+            ? `${value}px`
+            : value};`;
+    })
+        .join(' ');
+}
+exports.default = toCSS;

package/types/utils/toValidCSSIdentifier.d.ts

@@ -0,0 +1 @@
+export declare function toValidCSSIdentifier(s: string): string;

package/types/utils/toValidCSSIdentifier.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toValidCSSIdentifier = void 0;
+function toValidCSSIdentifier(s) {
+    return s.replace(/[^-_a-z0-9\u00A0-\uFFFF]/gi, '_').replace(/^\d/, '_');
+}
+exports.toValidCSSIdentifier = toValidCSSIdentifier;

package/types/utils/types.d.ts

@@ -0,0 +1,9 @@
+import type { TransformOptions } from '@babel/core';
+import type { ClassNameFn, VariableNameFn } from '@wyw-in-js/shared';
+export interface IOptions {
+    classNameSlug?: string | ClassNameFn;
+    displayName: boolean;
+    variableNameConfig?: 'var' | 'dashes' | 'raw';
+    variableNameSlug?: string | VariableNameFn;
+}
+export type IFileContext = Pick<TransformOptions, 'root' | 'filename'>;

package/types/utils/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/types/utils/units.d.ts

@@ -0,0 +1,44 @@
+export declare const units: string[];
+export declare const unitless: {
+    animationIterationCount: boolean;
+    borderImageOutset: boolean;
+    borderImageSlice: boolean;
+    borderImageWidth: boolean;
+    boxFlex: boolean;
+    boxFlexGroup: boolean;
+    boxOrdinalGroup: boolean;
+    columnCount: boolean;
+    columns: boolean;
+    flex: boolean;
+    flexGrow: boolean;
+    flexPositive: boolean;
+    flexShrink: boolean;
+    flexNegative: boolean;
+    flexOrder: boolean;
+    gridRow: boolean;
+    gridRowEnd: boolean;
+    gridRowSpan: boolean;
+    gridRowStart: boolean;
+    gridColumn: boolean;
+    gridColumnEnd: boolean;
+    gridColumnSpan: boolean;
+    gridColumnStart: boolean;
+    fontWeight: boolean;
+    lineClamp: boolean;
+    lineHeight: boolean;
+    opacity: boolean;
+    order: boolean;
+    orphans: boolean;
+    tabSize: boolean;
+    widows: boolean;
+    zIndex: boolean;
+    zoom: boolean;
+    fillOpacity: boolean;
+    floodOpacity: boolean;
+    stopOpacity: boolean;
+    strokeDasharray: boolean;
+    strokeDashoffset: boolean;
+    strokeMiterlimit: boolean;
+    strokeOpacity: boolean;
+    strokeWidth: boolean;
+};

package/types/utils/units.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unitless = exports.units = void 0;
+// https://www.w3.org/TR/css-values-4/
+exports.units = [
+    // font relative lengths
+    'em',
+    'ex',
+    'cap',
+    'ch',
+    'ic',
+    'rem',
+    'lh',
+    'rlh',
+    // viewport percentage lengths
+    'vw',
+    'vh',
+    'vi',
+    'vb',
+    'vmin',
+    'vmax',
+    // absolute lengths
+    'cm',
+    'mm',
+    'Q',
+    'in',
+    'pc',
+    'pt',
+    'px',
+    // angle units
+    'deg',
+    'grad',
+    'rad',
+    'turn',
+    // duration units
+    's',
+    'ms',
+    // frequency units
+    'Hz',
+    'kHz',
+    // resolution units
+    'dpi',
+    'dpcm',
+    'dppx',
+    'x',
+    // https://www.w3.org/TR/css-grid-1/#fr-unit
+    'fr',
+    // percentages
+    '%',
+];
+exports.unitless = {
+    animationIterationCount: true,
+    borderImageOutset: true,
+    borderImageSlice: true,
+    borderImageWidth: true,
+    boxFlex: true,
+    boxFlexGroup: true,
+    boxOrdinalGroup: true,
+    columnCount: true,
+    columns: true,
+    flex: true,
+    flexGrow: true,
+    flexPositive: true,
+    flexShrink: true,
+    flexNegative: true,
+    flexOrder: true,
+    gridRow: true,
+    gridRowEnd: true,
+    gridRowSpan: true,
+    gridRowStart: true,
+    gridColumn: true,
+    gridColumnEnd: true,
+    gridColumnSpan: true,
+    gridColumnStart: true,
+    fontWeight: true,
+    lineClamp: true,
+    lineHeight: true,
+    opacity: true,
+    order: true,
+    orphans: true,
+    tabSize: true,
+    widows: true,
+    zIndex: true,
+    zoom: true,
+    // SVG-related properties
+    fillOpacity: true,
+    floodOpacity: true,
+    stopOpacity: true,
+    strokeDasharray: true,
+    strokeDashoffset: true,
+    strokeMiterlimit: true,
+    strokeOpacity: true,
+    strokeWidth: true,
+};

package/types/utils/validateParams.d.ts

@@ -0,0 +1,16 @@
+import type { Param, Params } from '../types';
+type ParamName = Param[0];
+type ParamConstraint = ParamName | [...ParamName[]] | '*';
+export type ParamConstraints = [...ParamConstraint[]] | [...ParamConstraint[], '...'];
+type ParamMapping = {
+    [K in ParamName]: Extract<Param, readonly [K, ...unknown[]]>;
+};
+type GetParamByName<T> = T extends '*' ? Param : T extends keyof ParamMapping ? ParamMapping[T] : T extends Array<infer TNames> ? TNames extends ParamName ? Extract<Param, readonly [TNames, ...unknown[]]> : never : never;
+export type MapParams<TNames extends ParamConstraints, TRes extends Param[] = []> = TNames extends [infer THead, ...infer TTail] ? THead extends '...' ? [...TRes, ...Params] : MapParams<Extract<TTail, ParamConstraints>, // Extract the remaining ParamConstraints.
+[
+    ...TRes,
+    GetParamByName<Extract<THead, ParamName | '*' | ParamName[]>>
+]> : TRes;
+export declare function isValidParams<T extends ParamConstraints>(params: Params, constraints: T): params is MapParams<T>;
+export declare function validateParams<T extends ParamConstraints>(params: Params, constraints: T, messageOrError: unknown): asserts params is MapParams<T>;
+export {};

package/types/utils/validateParams.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateParams = exports.isValidParams = void 0;
+function isValidParams(params, constraints) {
+    const length = Math.max(params.length, constraints.length);
+    for (let i = 0; i < length; i++) {
+        if (params[i] === undefined || constraints[i] === undefined) {
+            return false;
+        }
+        const constraint = constraints[i];
+        if (constraint === '...') {
+            return true;
+        }
+        if (constraint === '*') {
+            if (params[i] === undefined) {
+                return false;
+            }
+        }
+        else if (Array.isArray(constraint)) {
+            if (constraint.every((c) => c !== params[i]?.[0])) {
+                return false;
+            }
+        }
+        else if (constraint !== params[i]?.[0]) {
+            return false;
+        }
+    }
+    return true;
+}
+exports.isValidParams = isValidParams;
+function validateParams(params, constraints, messageOrError) {
+    if (!isValidParams(params, constraints)) {
+        if (typeof messageOrError === 'string') {
+            throw new Error(messageOrError);
+        }
+        throw messageOrError;
+    }
+}
+exports.validateParams = validateParams;