Fix import

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@atomico/postcss-tokens",
-    "version": "2.0.1",
+    "version": "2.0.2",
     "description": "Transform a simple object into tokens for webcomponents or html",
     "main": "./dist/postcss-tokens.cjs",
     "module": "./dist/postcss-tokens.mjs",

src/postcss-tokens.ts

@@ -1,5 +1,5 @@
 import path from "path";
-import postcss, { PluginCreator, AtRule, rule } from "postcss";
+import postcss, { PluginCreator, AtRule } from "postcss";
 import { load } from "./load";
 import { transform } from "./transform";
 import { objectToCssProps, cssRule, cleanQuote } from "./utils";
@@ -60,11 +60,16 @@ async function replace(atRule: AtRule, { load, ...rootOptions }: Options) {
 
     const data = await load(path.join(dirname, config.from), file);
 
+    const _import = config.import
+        ? RegExp(`^${config.import.replace(/\./, "-")}-*`)
+        : false;
+
     const tokens = transform({
         data,
         prefix: config.prefix,
         root: config.root,
         withDefault: config.default,
+        import: _import,
     });
 
     const rootRules: string[] = [];
@@ -79,7 +84,7 @@ async function replace(atRule: AtRule, { load, ...rootOptions }: Options) {
                     objectToCssProps(tokens[prop], {
                         prefix: "    --",
                         filter: config.filter,
-                        import: config.import,
+                        import: _import,
                     })
                 )
             );

src/transform.ts

@@ -55,6 +55,7 @@ const customProperty = ({
     withDefault,
     onlyProperty,
     onlyValue,
+    import: _import,
 }: {
     prefix: string;
     root: string;
@@ -63,6 +64,7 @@ const customProperty = ({
     withDefault?: boolean;
     onlyProperty?: boolean;
     onlyValue?: boolean;
+    import?: RegExp | false;
 }) => {
     const mapRoot = isMatch.test(root)
         ? root === ":host"
@@ -85,11 +87,11 @@ const customProperty = ({
 
     const nextValue = `${value}`.replace(
         /(\$(?:\$){0,1})([^\s$]+)/g,
-        (all, type, mapProp) => {
-            mapProp = mapProp.replace(/\./g, "-", map);
+        (all, type: string, mapProp: string) => {
+            mapProp = mapProp.replace(/\./g, "-");
             return `var(${(type == "$"
                 ? ["", prefix, mapProp]
-                : ["", mapProp]
+                : ["", _import ? mapProp.replace(_import, "") : mapProp]
             ).join("--")})`;
         }
     );
@@ -108,12 +110,14 @@ export function transform(
         root,
         shadowDom = root === ":host",
         withDefault,
+        import: _import,
     }: {
         data: Record<string, any>;
         prefix: string;
         root: string;
         shadowDom?: boolean;
         withDefault?: boolean;
+        import?: RegExp | false;
     },
     results = {} as Record<string, Record<string, string>>,
     parent = ""
@@ -138,6 +142,7 @@ export function transform(
                         }]${operator ? ")" : ""}`
                     ),
                     withDefault,
+                    import: _import,
                 },
                 results,
                 parent
@@ -150,6 +155,7 @@ export function transform(
                     prefix,
                     root,
                     withDefault,
+                    import: _import,
                 },
                 results,
                 join(parent, prop)
@@ -164,6 +170,7 @@ export function transform(
                     prop: id,
                     value,
                     withDefault,
+                    import: _import,
                 });
             } else {
                 results[root][

src/utils.ts

@@ -1,21 +1,25 @@
 export const objectToCssProps = (
     data: Record<string, string>,
-    { prefix = "  ", filter = "", import: _import = "" } = {}
+    {
+        prefix = "  ",
+        filter = "",
+        import: _import = false,
+    }: {
+        prefix?: string;
+        filter?: string;
+        import?: RegExp | false;
+    } = {}
 ) => {
     const match = filter
         ? RegExp(`^(${filter.replace(/\./g, "-").replace(/ *, */g, "|")})`)
         : false;
 
-    const replaceImport = _import
-        ? RegExp(`^${_import.replace(/\./, "-")}-*`)
-        : false;
-
     return Object.entries(data)
         .filter(([index]) => (match ? match.test(index) : true))
         .map(
             ([index, value]) =>
                 `${prefix || ""}${
-                    replaceImport ? index.replace(replaceImport, "") : index
+                    _import ? index.replace(_import, "") : index
                 }: ${value}`
         )
         .join(";\n");

tests/expect-host.txt

@@ -1,6 +1,7 @@
 :host {
     --font-size: var(--my-dsprefix--font-size);
     --font-family: var(--my-dsprefix--font-family);
+    --font-smal: var(--font-size);
     --border-radius: var(--my-dsprefix--border-radius);
     --border-width: var(--my-dsprefix--border-width);
     --opacity-unselect: var(--my-dsprefix--opacity-unselect);

tests/expect-import.txt

@@ -1,6 +1,7 @@
 :host {
     --size: var(--my-dsprefix--font-size);
-    --family: var(--my-dsprefix--font-family)
+    --family: var(--my-dsprefix--font-family);
+    --smal: var(--size)
 }
 :host([size="small"]) {
     --size: var(--my-dsprefix--size--small--font)

tests/expect-root.txt

@@ -1,6 +1,7 @@
 :root {
   --my-dsprefix--font-size: 1rem;
   --my-dsprefix--font-family: unset;
+  --my-dsprefix--font-smal: var(--font-size);
   --my-dsprefix--border-radius: .5rem;
   --my-dsprefix--border-width: 1px;
   --my-dsprefix--opacity-unselect: .25;

tests/expect-use.txt

@@ -1,6 +1,7 @@
 :host {
     --font-size: var(--my-dsprefix--font-size);
     --font-family: var(--my-dsprefix--font-family);
+    --font-smal: var(--font-size);
     --size-: var(--my-dsprefix--size);
     --size-xl: calc(var(--size) * 10);
     --size-l: calc(var(--size) * 8);