catom 1.2.0 → 1.2.7

package/README.md

@@ -136,7 +136,7 @@ and then inject it using a template parameter.
 </head>
 ```
 
-it also allows you to use postCSS plugins by importing the `transformCSS` and/or `autoPrefixCSS` functions
+uses parcel css under the hood
 
 # 0 Runtime
 

package/dist/babelPlugin.d.ts

@@ -1,2 +1,4 @@
-import type { PluginItem } from "@babel/core";
-export default function catomBabelPlugin(): PluginItem;
+import { Visitor } from "@babel/traverse";
+export default function catomBabelPlugin(): {
+    visitor: Visitor;
+};

package/dist/babelPlugin.js

@@ -19,51 +19,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const path_1 = require("path");
-const promises_1 = require("fs/promises");
 const template = __importStar(require("@babel/template"));
-const css_1 = require("./css");
 const astObject_1 = require("./plugin/astObject");
-function handleExpression(path, expression, removeName, mapObj) {
+function handleExpression(path, expression, removeName) {
     if (!expression)
         return;
     if (expression.type === "CallExpression") {
         return commonInject(path, expression, {
             name: removeName,
-            mapObj,
         });
     }
 }
 function catomBabelPlugin() {
     let removeName = "css";
-    const cssPropertyMap = new Map();
-    const mediaQueryMap = new Map();
-    const pseudoSelectorMap = new Map();
-    const mapObj = {
-        cssPropertyMap: cssPropertyMap,
-        mediaQueryMap: mediaQueryMap,
-        pseudoSelectorMap: pseudoSelectorMap,
-    };
-    let last;
     return {
-        post() {
-            const css = (0, css_1.emitCSS)(mapObj);
-            if (css == last)
-                return;
-            if (!this.__emitFile)
-                return;
-            last = css;
-            const f = (0, path_1.join)("./", this.__emitFile);
-            (0, promises_1.writeFile)(f, css);
-        },
         visitor: {
-            Program(_, state) {
-                if (!state?.opts.emitFile)
-                    throw new Error("No emit file provided!");
-                this.__emitFile = this.__emitFile || state.opts.emitFile;
-            },
             CallExpression(path) {
-                return handleExpression(path, path.node, removeName, mapObj);
+                return handleExpression(path, path.node, removeName);
             },
         },
     };
@@ -74,14 +46,14 @@ function commonInject(path, right, options) {
     if (callee && callee.type === "Identifier") {
         if (callee.name === options.name) {
             const arg0 = right.arguments[0];
-            return injectDependency(path, arg0, options.mapObj);
+            return injectDependency(path, arg0);
         }
     }
 }
-function injectDependency(path, arg0, mapObj) {
+function injectDependency(path, arg0) {
     if (arg0.type === "ObjectExpression") {
         let retArray = [];
-        (0, astObject_1.parseObjectExpression)(arg0, retArray, null, mapObj);
+        (0, astObject_1.parseObjectExpression)(arg0, retArray);
         path.replaceWith(template.statement.ast(JSON.stringify(retArray.join(" "))));
     }
 }

package/dist/css.d.ts

@@ -1,5 +1,5 @@
-import { MapObj } from "./plugin/constants";
+/// <reference types="node" />
 import { emitCSS } from "./plugin/cssTransform";
-export default function transformCSS(maps: MapObj, ...plugins: any): Promise<any>;
-export declare function autoPrefixCSS(maps: MapObj, ...plugins: any): Promise<any>;
+export default function transformCSS(css?: string, ...plugins: any): Promise<Buffer>;
+export declare function autoPrefixCSS(css?: string, ...plugins: any): Promise<Buffer>;
 export { emitCSS };

package/dist/css.js

@@ -1,19 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.emitCSS = exports.autoPrefixCSS = void 0;
-const postCSS = require("postcss");
+const css_1 = require("@parcel/css");
 const cssTransform_1 = require("./plugin/cssTransform");
 Object.defineProperty(exports, "emitCSS", { enumerable: true, get: function () { return cssTransform_1.emitCSS; } });
-async function transformCSS(maps, ...plugins) {
-    const css = (0, cssTransform_1.emitCSS)(maps);
-    const result = await postCSS(...plugins).process(css);
-    result.warnings().forEach((warn) => {
-        console.warn(warn.toString());
+async function transformCSS(css, ...plugins) {
+    css = css || (0, cssTransform_1.emitCSS)();
+    const { code } = (0, css_1.transform)({
+        code: Buffer.from(css),
+        filename: "style.css",
+        sourceMap: false,
+        // browserslist hardcoded
+        // probably change or manually audit
+        targets: {
+            android: 6422528,
+            chrome: 6488064,
+            edge: 6488064,
+            firefox: 6356992,
+            ie: 720896,
+            ios_saf: 983552,
+            opera: 5439488,
+            safari: 983552,
+            samsung: 1048576,
+        },
     });
-    return result.css;
+    return code;
 }
 exports.default = transformCSS;
-function autoPrefixCSS(maps, ...plugins) {
-    return transformCSS(maps, ...plugins.concat(require("autoprefixer")));
+function autoPrefixCSS(css, ...plugins) {
+    return transformCSS(css);
 }
 exports.autoPrefixCSS = autoPrefixCSS;

package/dist/plugin/astObject.d.ts

@@ -1,3 +1,3 @@
+import { Hashable } from "./constants";
 import * as babel from "@babel/types";
-import { Hashable, MapObj } from "./constants";
-export declare function parseObjectExpression(object: babel.ObjectExpression, retArray: Array<string>, hashable: Hashable, mapObj: MapObj): any;
+export declare function parseObjectExpression(object: babel.ObjectExpression, retArray: Array<string>, hashable?: Hashable): any;

package/dist/plugin/astObject.js

@@ -2,27 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseObjectExpression = void 0;
 const cssTransform_1 = require("./cssTransform");
-function parseObjectExpression(object, retArray, hashable, mapObj) {
-    return object.properties.forEach((p) => handleProperties(p, retArray, hashable, mapObj));
+function parseObjectExpression(object, retArray, hashable) {
+    return object.properties.forEach((p) => handleProperties(p, retArray, hashable));
 }
 exports.parseObjectExpression = parseObjectExpression;
-// function handleSpread(
-//   spread: babel.SpreadElement,
-//   retArray: Array<string>,
-//   hashable: Hashable,
-//   mapObj: MapObj
-// ) {
-//   const argument = spread.argument;
-//   if (argument.type === "ObjectExpression") {
-//     return parseObjectExpression(argument, retArray, hashable, mapObj);
-//   }
-//   throw Error(
-//     `Cannot parse ${spread.type}. Catom compiler only accepts compile time constant values`
-//   );
-// }
-function handleProperties(propertyOrSpread, retArray, hashable, mapObj) {
+function handleSpread(spread, retArray, hashable) {
+    const argument = spread.argument;
+    if (argument.type === "ObjectExpression") {
+        return parseObjectExpression(argument, retArray, hashable);
+    }
+    throw Error(`Cannot parse ${spread.type}. Catom compiler only accepts compile time constant values`);
+}
+function handleProperties(propertyOrSpread, retArray, hashable) {
     if (propertyOrSpread.type === "SpreadElement") {
-        return throwErr("Catom does not except spread elements");
+        return handleSpread(propertyOrSpread, retArray, hashable);
     }
     let { key, value } = propertyOrSpread;
     if (value.type === "TSAsExpression")
@@ -43,14 +36,14 @@ function handleProperties(propertyOrSpread, retArray, hashable, mapObj) {
     if (value.type === "StringLiteral" || value.type === "NumericLiteral") {
         if (canAcceptObjectLiteralInValue)
             throwErr("Need an object literal for media query or pseudo selector");
-        return retArray.push((0, cssTransform_1.createValueHash)(keyName, value.value, hashable, mapObj));
+        return retArray.push((0, cssTransform_1.createValueHash)(keyName, value.value, hashable));
     }
     if (canAcceptObjectLiteralInValue && value.type === "ObjectExpression") {
-        return value.properties.forEach((prop) => handleMediaOrPseudoProperties(prop, retArray, isMedia, isPseudo, mapObj));
+        return value.properties.forEach((prop) => handleMediaOrPseudoProperties(prop, retArray, isMedia, isPseudo));
     }
     throwErr();
 }
-function handleMediaOrPseudoProperties(property, retArray, isMedia, isPseudo, mapObj) {
+function handleMediaOrPseudoProperties(property, retArray, isMedia, isPseudo) {
     if (property.type === "ObjectProperty") {
         const { key, value } = property;
         let keyName;
@@ -59,7 +52,7 @@ function handleMediaOrPseudoProperties(property, retArray, isMedia, isPseudo, ma
         else if (key.type === "Identifier")
             keyName = key.name;
         if (value.type === "ObjectExpression") {
-            return parseObjectExpression(value, retArray, (isMedia && { media: keyName }) || (isPseudo && { pseudo: keyName }), mapObj);
+            return parseObjectExpression(value, retArray, (isMedia && { media: keyName }) || (isPseudo && { pseudo: keyName }));
         }
     }
     throwErr();

package/dist/plugin/constants.d.ts

@@ -3,11 +3,6 @@ export declare type PropMap = Map<string, CSSProps>;
 export interface AtomicCSSOptions {
     transpileFunctionName: "css";
 }
-export interface MapObj {
-    mediaQueryMap: Map<string, PropMap>;
-    pseudoSelectorMap: Map<string, PropMap>;
-    cssPropertyMap: PropMap;
-}
 export interface CSSProps {
     class: string;
     cssRule: string;

package/dist/plugin/cssTransform.d.ts

@@ -1,3 +1,3 @@
-import { Hashable, MapObj } from "./constants";
-export declare function createValueHash(key: string, unparsed: string | number, hashable: Hashable, { mediaQueryMap, pseudoSelectorMap, cssPropertyMap }: MapObj): string;
-export declare function emitCSS({ mediaQueryMap, pseudoSelectorMap, cssPropertyMap, }: MapObj): string;
+import { Hashable } from "./constants";
+export declare function createValueHash(key: string, unparsed: string | number, hashable?: Hashable): string;
+export declare function emitCSS(): string;

package/dist/plugin/cssTransform.js

@@ -3,6 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.emitCSS = exports.createValueHash = void 0;
 const constants_1 = require("./constants");
 const hash_1 = require("./hash");
+const CSS_PROPERTY_MAP = new Map();
+const MEDIA_QUERY_MAP = new Map();
+const PSEUDO_SELECTOR_MAP = new Map();
+// function clearMaps(): void {
+//   CSS_PROPERTY_MAP.clear();
+//   MEDIA_QUERY_MAP.clear();
+//   PSEUDO_SELECTOR_MAP.clear();
+// }
 function toCSSProp(prop) {
     return prop.replace(constants_1.KEBAB_CASE_REGEXP, "$1-$2").toLowerCase();
 }
@@ -12,21 +20,18 @@ function makeCSSCompat(str) {
     return str;
 }
 const sanitizeRegExp = /([^\w]|_)/g;
-function createValueHash(key, unparsed, hashable, { mediaQueryMap, pseudoSelectorMap, cssPropertyMap }) {
+function createValueHash(key, unparsed, hashable) {
     key = key.trim();
     const value = String(unparsed).trim();
-    const isMediaQuery = hashable && hashable.media;
+    const MEDIA_QUERY = hashable && hashable.media;
     const PSEUDO_SELECTOR = hashable && hashable.pseudo;
-    const isSpec = isMediaQuery || PSEUDO_SELECTOR;
+    const isSpec = MEDIA_QUERY || PSEUDO_SELECTOR;
     // example: const rawCSSRule  = "margin:auto;"
-    let prefix = "";
     const rawCSSRule = `${toCSSProp(key)}:${value};`;
-    if (process.env.NODE_ENV !== "production")
-        prefix = `${rawCSSRule.replace(sanitizeRegExp, "_")}____`;
     // a unique rule will be one with a different media/pseudo rule + key&value
-    const identity = ((hashable && (isMediaQuery || PSEUDO_SELECTOR)) || "").trim() + rawCSSRule;
+    const identity = ((hashable && (MEDIA_QUERY || PSEUDO_SELECTOR)) || "").trim() + rawCSSRule;
     let cache;
-    const $map = isSpec && isMediaQuery ? mediaQueryMap : pseudoSelectorMap;
+    const $map = isSpec && MEDIA_QUERY ? MEDIA_QUERY_MAP : PSEUDO_SELECTOR_MAP;
     let fetchMap;
     if ($map) {
         fetchMap = $map.get(isSpec);
@@ -39,17 +44,17 @@ function createValueHash(key, unparsed, hashable, { mediaQueryMap, pseudoSelecto
         cache = fetchMap.get(identity);
     }
     else {
-        cache = cssPropertyMap.get(identity);
+        cache = CSS_PROPERTY_MAP.get(identity);
     }
     if (cache)
         return cache.class;
-    const hash = prefix + makeCSSCompat((0, hash_1.murmur2)(identity));
+    const hash = makeCSSCompat((0, hash_1.murmur2)(identity));
     const obj = { class: hash, cssRule: rawCSSRule };
     if (isSpec) {
         fetchMap.set(identity, obj);
     }
     else {
-        cssPropertyMap.set(identity, obj);
+        CSS_PROPERTY_MAP.set(identity, obj);
     }
     return hash;
 }
@@ -68,13 +73,13 @@ function mergeDuplicateRules(value, dedupedPropMap, suffix = "") {
     }
     arr.add(cls);
 }
-function emitCSS({ mediaQueryMap, pseudoSelectorMap, cssPropertyMap, }) {
+function emitCSS() {
     const dedupedPropMap = new Map();
-    Array.from(cssPropertyMap.values()).forEach((v) => mergeDuplicateRules(v, dedupedPropMap));
-    Array.from(pseudoSelectorMap.entries()).forEach(([k, v]) => Array.from(v.values())
+    Array.from(CSS_PROPERTY_MAP.values()).forEach((v) => mergeDuplicateRules(v, dedupedPropMap));
+    Array.from(PSEUDO_SELECTOR_MAP.entries()).forEach(([k, v]) => Array.from(v.values())
         .sort()
         .forEach((prop) => mergeDuplicateRules(prop, dedupedPropMap, k)));
-    const mediaQueries = Array.from(mediaQueryMap.entries())
+    const mediaQueries = Array.from(MEDIA_QUERY_MAP.entries())
         .map(([k, v]) => `@media ${k} {\n${toCSS(v)}\n}\n`)
         .sort()
         .join("\n");

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "catom",
-  "version": "1.2.0",
+  "version": "1.2.7",
   "description": "0 runtime CSS in JS tool",
   "main": "dist/index.js",
   "scripts": {
+    "prepublishOnly": "npm run build",
     "prebuild": "rm -rf ./dist",
     "build": "tsc --build tsconfig.json"
   },
@@ -28,8 +29,7 @@
     "typescript": "^4.4.4"
   },
   "peerDependencies": {
-    "autoprefixer": "^10.3.7",
-    "postcss": "^8.3.9"
+    "@parcel/css": "^1.5.0"
   },
   "dependencies": {
     "@babel/template": "^7.15.4",