{"id":30212211,"url":"https://github.com/slavafyi/vite-plugin-shopify-import-maps","last_synced_at":"2025-08-13T22:02:51.475Z","repository":{"id":194188947,"uuid":"690276822","full_name":"slavafyi/vite-plugin-shopify-import-maps","owner":"slavafyi","description":"Enhances Shopify theme development by adding support for import-maps","archived":false,"fork":false,"pushed_at":"2025-04-28T12:55:24.000Z","size":271,"stargazers_count":21,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-02T12:28:32.264Z","etag":null,"topics":["shopify","shopify-theme","shopify-themes"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slavafyi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-09-11T22:17:41.000Z","updated_at":"2025-08-02T12:20:52.000Z","dependencies_parsed_at":"2023-09-27T22:54:21.443Z","dependency_job_id":"6f92c4ef-3c0c-416a-abe1-865e30e95669","html_url":"https://github.com/slavafyi/vite-plugin-shopify-import-maps","commit_stats":null,"previous_names":["slavamak/vite-plugin-shopify-import-maps"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/slavafyi/vite-plugin-shopify-import-maps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavafyi%2Fvite-plugin-shopify-import-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavafyi%2Fvite-plugin-shopify-import-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavafyi%2Fvite-plugin-shopify-import-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavafyi%2Fvite-plugin-shopify-import-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slavafyi","download_url":"https://codeload.github.com/slavafyi/vite-plugin-shopify-import-maps/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavafyi%2Fvite-plugin-shopify-import-maps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270323580,"owners_count":24564684,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["shopify","shopify-theme","shopify-themes"],"created_at":"2025-08-13T22:01:25.055Z","updated_at":"2025-08-13T22:02:51.440Z","avatar_url":"https://github.com/slavafyi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/vite-plugin-shopify-import-maps?color=brightgreen)](https://www.npmjs.com/package/vite-plugin-shopify-import-maps) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://standardjs.com) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n# vite-plugin-shopify-import-maps\n\nThe `vite-plugin-shopify-import-maps` enhances Shopify theme development by adding support for [import-maps](https://github.com/WICG/import-maps) which can be used to control the resolution of module specifiers.\n\n## Requirements\n\nBefore using this plugin, make sure you have the [vite-plugin-shopify](https://github.com/barrel/shopify-vite/tree/main/packages/vite-plugin-shopify) installed. This plugin provides the necessary underlying setup for developing Shopify themes with Vite.\n\n## Install\n\n```bash\nnpm i -D vite-plugin-shopify-import-maps\n\n# yarn\nyarn add -D vite-plugin-shopify-import-maps\n\n# pnpm\npnpm add -D vite-plugin-shopify-import-maps\n```\n\n## Usage\n\n1. Add [ES Module Shims](https://github.com/guybedford/es-module-shims#usage) to the `\u003chead\u003e` tag in your `theme.liquid` file.\n\n2. Render the `importmap` snippet file **before** performing any imports:\n\n```liquid\n\u003cscript src=\"{{ 'es-module-shims.js' | asset_url }}\" async\u003e\u003c/script\u003e\n\n{% liquid\n  render 'importmap'\n  render 'vite-tag' with 'theme.js'\n  render 'vite-tag' with 'customers.js'\n%}\n```\n\n3. Add the `vite-plugin-shopify-import-maps` to your `vite.config.js` file:\n\n```js\nimport { defineConfig } from 'vite'\nimport shopify from 'vite-plugin-shopify'\nimport importMaps from 'vite-plugin-shopify-import-maps'\n\n// Recommended configuration\nexport default defineConfig({\n  build: {\n    rollupOptions: {\n      output: {\n        entryFileNames: '[name].js',\n        chunkFileNames: '[name].js',\n        assetFileNames: '[name].[ext]'\n      }\n    }\n  },\n  plugins: [\n    shopify({ versionNumbers: true }),\n    importMaps({ bareModules: true })\n  ]\n})\n```\n\nAfter executing the build command, the `importmap.liquid` file will be generated in the `snippets` folder in your theme root directory.\n\n## Options\n\n### themeRoot\n\n- **Type:** `string`\n- **Default:** `'./'`\n\nRoot path to your Shopify theme directory.\n\n### snippetFile\n\n- **Type:** `string`\n- **Default:** `'importmap.liquid'`\n\nSpecifies the file name of the snippet that include import map.\n\n### bareModules\n\n- **Type:** `boolean | BareModules`\n- **Default:** `false`\n\n```ts\nexport interface BareModules {\n  defaultGroup: string\n  groups: Record\u003cstring, string | RegExp | Array\u003cstring | RegExp\u003e\u003e\n}\n```\n\nConfigure bare specifier remapping for JavaScript modules.\n\nExample:\n\n```ts\nexport default defineConfig({\n  plugins: [\n    importMap({\n      bareModules: {\n        defaultGroup: 'main', // By default is 'main'\n        groups: {\n          helpers: /frontend\\/lib/, // RegExp pattern\n          vendors: 'node_modules', // String\n          general: ['frontend/entrypoints', /vite/] // Array of string or RegExp pattern\n        }\n      }\n    })\n  ]\n})\n```\n\nThis generates the `importmap.liquid` file:\n\n```liquid\n\u003cscript type=\"importmap\"\u003e\n{\n  \"imports\": {\n    \"general/customers\": \"{{ 'customers.js' | asset_url }}\",\n    \"general/modulepreload-polyfill\": \"{{ 'modulepreload-polyfill.js' | asset_url }}\",\n    \"general/theme\": \"{{ 'theme.js' | asset_url }}\",\n    \"helpers/customer-address\": \"{{ 'customer-address.js' | asset_url }}\",\n    \"helpers/shopify_common\": \"{{ 'shopify_common.js' | asset_url }}\",\n    \"helpers/utils\": \"{{ 'utils.js' | asset_url }}\",\n    \"main/header-drawer\": \"{{ 'header-drawer.js' | asset_url }}\",\n    \"main/localization-form\": \"{{ 'localization-form.js' | asset_url }}\",\n    \"main/product-recommendations\": \"{{ 'product-recommendations.js' | asset_url }}\",\n    \"vendors/lodash\": \"{{ 'lodash.js' | asset_url }}\"\n  }\n}\n\u003c/script\u003e\n```\n\n### modulePreload\n\n- **Type:** `boolean`\n- **Default:** `false`\n\nThis option when set to `true`, generates `modulepreload` link tags below the import map script tag.\n\n```liquid\n\u003clink rel=\"modulepreload\" href=\"{{ 'customers.js' | asset_url }}\"\u003e\n\u003clink rel=\"modulepreload\" href=\"{{ 'theme.js' | asset_url }}\"\u003e\n```\n\n## Troubleshooting\n\nIf you have any problems or have suggestions, welcome to [issues](https://github.com/slavamak/vite-plugin-shopify-import-maps/issues).\n\n### Importing asset files (e.g. fonts, images) does not use the version parameter from Shopify CDN\n\nThis is not the scope of import map, as it is are designed to manage javascript modules. But you can load assets from Liquid files using the `asset_url` filter and consume them via CSS variables:\n\n```liquid\n{% #theme.liquid %}\n\n{% style %}\n  @font-face {\n    font-family: 'Anton';\n    src: url(\"{{ 'anton-v23-latin-regular.woff2' | asset_url }}\") format('woff2');\n    font-display: swap;\n  }\n\n  :root {\n    --font-heading-family: 'Anton', sans-serif;\n    --background-image: url('{{ 'background-image.svg' | asset_url }}');\n  }\n{% endstyle %}\n```\n\n```css\n/* styles.css */\n\nh1,\nh2,\nh3 {\n  font-family: var(--font-heading-family);\n}\n\nbody {\n  background-image: var(--background-image);\n}\n```\n\n## Acknowledges\n\n- [vite-plugin-shopify](https://github.com/barrel/shopify-vite) - Shopify theme development using Vite\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavafyi%2Fvite-plugin-shopify-import-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslavafyi%2Fvite-plugin-shopify-import-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavafyi%2Fvite-plugin-shopify-import-maps/lists"}