{"_id":"@cactuslab/shopify-file-loader","_rev":"3-da751fe625b6fdc8ee10953956df9589","name":"@cactuslab/shopify-file-loader","dist-tags":{"latest":"0.0.7"},"versions":{"0.0.7":{"name":"@cactuslab/shopify-file-loader","version":"0.0.7","author":{"name":"Taha Eldeib @tahaeldeib"},"description":"file loader module for webpack","dependencies":{"loader-utils":"^1.0.2"},"devDependencies":{"should":"~4.0.4","mocha":"~1.21.3"},"scripts":{"test":"mocha -R spec"},"repository":{"type":"git","url":"git+https://github.com/taha/shopify-file-loader.git"},"bugs":{"url":"https://github.com/taha/shopify-file-loader/issues"},"homepage":"https://github.com/taha/shopify-file-loader","main":"index.js","directories":{"test":"test"},"license":"MIT","gitHead":"2242de687db8bd9ad0b3e2d68b30df81aabd972f","_id":"@cactuslab/shopify-file-loader@0.0.7","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-m/J2CynDAuUJig7DO34ompq5F+o2GZBHO01GFR9cltdSNikq3wLTynrKsGJrL29aE2DAARWF+7hsMMqktrphlQ==","shasum":"986742b8987b8862d183cb15cdb08bd7add688fe","tarball":"https://registry.npmjs.org/@cactuslab/shopify-file-loader/-/shopify-file-loader-0.0.7.tgz","fileCount":3,"unpackedSize":4510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEjERCRA9TVsSAnZWagAARY0P/0O1uZA9H3KGxqTTeaEU\nDsZKNx10w9mvh/6LplKNCpR4pyDHpPiODnSuulNGNAKkthf7dfhsafLCs8Vu\nrkrxSpl4ip8dgLX3os2+o16GgV09ovGMvXrns3ZGrGQiHClymicOrsqlVgLU\nGSHca9S37kcWdXJA/6f0vDXAePVNUkHNnjw1wpGHbnHkef8h+CRYU2J6lin9\n6gpzsC14hI+JEXEXU2AXTewFwCYLjAeAzTw8J04bdE1a82rwbka+pmNEnOCV\n1958YfdndS+ZgBGlr0ewP0NuKsjmMz0d3CdEcLyjTRHWz3ktHo3tSCu3D627\nfxdznvmkoYYYakUPwQkH/ua1mY8F6e6YFyzUbtc9YxCyBzHYYMAMnok7H9DS\nZjRyERb3NlsedzL2AFzd5dtdPvCfZ/mLiq/rbkHTMA8HCpPVWzfGn4KuNKTn\nmO96shn7DJpMF26lVVzRbGSkd0dy7palRjgdHlcWa5gbPLnqJjxtzhZqJrdn\n9AWjhJuvza8dGi7ZI2JJU5WxeEWvfh3ctsNYqi1I38Qaozz5f/f68KUHaQRw\nftJ2rwd5jlB2FRLZChLzpsyxFwOUcV2eOKh/9wFfHu6CQkznEW2+hUEyspUE\nE7rw+V4MJiTtknOonDp11MCXt4yA3bbAt6mNOMUOi7qMvrjvABET1gNkXa/i\nsK9D\r\n=K7mR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFzouPiP9NSBOlMcYB6xe7SayEnKXwXHhU7enp7gNXYuAiEA6d66dNI/obpAJV3T8jY/C+Eadaq5t9zL4UZCNVobbp0="}]},"_npmUser":{"name":"karlvr","email":"karl@xk72.com"},"maintainers":[{"name":"karlvr","email":"karl@xk72.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/shopify-file-loader_0.0.7_1611804944747_0.763536508538128"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-28T03:35:44.522Z","0.0.7":"2021-01-28T03:35:44.925Z","modified":"2022-04-04T21:28:41.677Z"},"maintainers":[{"email":"hydnhntr+npmjs@gmail.com","name":"hydnhntr"},{"email":"karl@xk72.com","name":"karlvr"},{"email":"tom@cactuslab.com","name":"tomcarey"}],"description":"file loader module for webpack","homepage":"https://github.com/taha/shopify-file-loader","repository":{"type":"git","url":"git+https://github.com/taha/shopify-file-loader.git"},"author":{"name":"Taha Eldeib @tahaeldeib"},"bugs":{"url":"https://github.com/taha/shopify-file-loader/issues"},"license":"MIT","readme":"# Shopify file loader for webpack\r\n\r\nBased on webpack's [file-loader](https://github.com/webpack/file-loader) to support Shopify's liquid [URL filters](https://help.shopify.com/themes/liquid/filters/url-filters).\r\n\r\n## Installation\r\n\r\n`npm install shopify-file-loader --save-dev`\r\n\r\n## Usage\r\n\r\nThe loader follows the same configuration as the original `file-loader`, meaning that all options from the original loader are supported such as the [filename templates](https://github.com/webpack/file-loader#filename-templates).\r\n\r\nHowever, it is important to allow the query string when testing for filenames (notice the `(\\?.*)?` below?).\r\n\r\n```js\r\n  module: {\r\n    loaders: [\r\n      ...,\r\n      { // Theme Assets\r\n        test: /\\/assets\\/(.+?)\\.(jpe?g|gif|png|woff|woff2|eot|ttf|svg)(\\?.*)?$/,\r\n        loader: 'shopify-file?name=assets/[name]-[hash].[ext]'\r\n      }\r\n    ]\r\n  }\r\n```\r\n\r\nThe following CSS\r\n\r\n```css\r\n#foo {\r\n    background-image: url(src/assets/images/bg.png);\r\n}\r\n```\r\n\r\nEmits `bg.png` as `assets/bg-0dcbbaa701328a3c262cfd45869e351f.png` in the output directory and returns the liquid tag:\r\n\r\n```css\r\n#foo {\r\n    background-image: url({{'bg-3a6f8fc07427621158d3d78d92e20f23.png' | asset_url}});\r\n}\r\n```\r\n\r\nNow the CSS file (with `.css.liquid` extension) will include the correct assets URLs.\r\n\r\n## Filter parameters\r\n\r\nThe `asset_url` URL filter is used by default. Other filters can be used as such:\r\n\r\n```css\r\n#foo {\r\n    background-image: url(src/assets/images/bg.png?asset_img_url=300x);\r\n    /* emits -> url({{'bg-3a6f8fc07427621158d3d78d92e20f23.png' | asset_img_url: '300x'}}) */\r\n\r\n    background-image: url(src/assets/images/bg.png?asset_img_url=300x&crop=bottom);\r\n    /* emits -> url({{'bg-3a6f8fc07427621158d3d78d92e20f23.png' | asset_img_url: '300x', crop: 'bottom'}}) */\r\n}\r\n```","readmeFilename":"README.md"}