{"id":16592284,"url":"https://github.com/quantizor/link-media-html-webpack-plugin","last_synced_at":"2025-09-29T00:33:14.710Z","repository":{"id":66057503,"uuid":"81007702","full_name":"quantizor/link-media-html-webpack-plugin","owner":"quantizor","description":"parses CSS filenames to automatically apply media HTML attribute to link elements","archived":false,"fork":false,"pushed_at":"2020-05-18T13:54:37.000Z","size":3192,"stargazers_count":15,"open_issues_count":11,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-03T14:23:21.014Z","etag":null,"topics":["html-webpack-plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/quantizor.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}},"created_at":"2017-02-05T17:09:07.000Z","updated_at":"2022-04-23T09:56:53.000Z","dependencies_parsed_at":"2023-04-06T00:00:33.393Z","dependency_job_id":null,"html_url":"https://github.com/quantizor/link-media-html-webpack-plugin","commit_stats":null,"previous_names":["yaycmyk/link-media-html-webpack-plugin","quantizor/link-media-html-webpack-plugin"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantizor%2Flink-media-html-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantizor%2Flink-media-html-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantizor%2Flink-media-html-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantizor%2Flink-media-html-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quantizor","download_url":"https://codeload.github.com/quantizor/link-media-html-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234448343,"owners_count":18834213,"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","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":["html-webpack-plugin"],"created_at":"2024-10-11T23:20:13.225Z","updated_at":"2025-09-29T00:33:09.448Z","avatar_url":"https://github.com/quantizor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Link Media HTML Webpack Plugin\n==============================\n\n[![Build Status](https://travis-ci.org/probablyup/link-media-html-webpack-plugin.svg?branch=master)](https://travis-ci.org/probablyup/link-media-html-webpack-plugin) [![codecov](https://codecov.io/gh/probablyup/link-media-html-webpack-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/probablyup/link-media-html-webpack-plugin)\n\n\nThis is an extension plugin for the [webpack](http://webpack.github.io) plugin [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin).\n\nIt automatically adds the [media attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes) to generated `\u003clink\u003e` HTML elements, inferred from the CSS filename according to the pattern `media_{base64MediaString}`:\n\n```\nstyle.media_KG1pbi13aWR0aDogNzAwcHgpLCBoYW5kaGVsZCBhbmQgKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUp.css\n\nwill be injected into the HTML template as:\n\n\u003clink src=\"styles.media_KG1pbi13aWR0aDogNzAwcHgpLCBoYW5kaGVsZCBhbmQgKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUp.css\" rel=\"stylesheet\" media=\"(min-width: 700px), handheld and (orientation: landscape)\" /\u003e\n```\n\nThis is useful for print stylesheets or desktop/mobile-specific styles that the browser should only load depending on the @media match.\n\nInstallation\n------------\n\nYou must be running webpack on node 4.x or higher\n\nInstall the plugin with npm:\n\n```shell\n$ npm install --save-dev link-media-html-webpack-plugin\n```\n\nBasic Usage\n-----------\n\nLoad the plugin\n\n```js\nconst LinkMediaHtmlWebpackPlugin = require('link-media-html-webpack-plugin');\n```\n\nand add it to your webpack config as follows:\n\n```js\nplugins: [\n    new HtmlWebpackPlugin(),\n    new LinkMediaHtmlWebpackPlugin(),\n]\n```\n\nyou'll probably want to use this in conjunction with [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to split up the loaded assets so the browser can do its thing. Here's a sample webpack 2.x config:\n\n```js\nconst path = require('path');\nconst webpack = require('webpack');\nconst HTMLPlugin = require('html-webpack-plugin');\nconst LinkMediaHTMLPlugin = require('link-media-html-webpack-plugin');\n\nconst ExtractPlugin = require('extract-text-webpack-plugin');\n\n// a utility provided by this plugin for easily forming the requisite filename syntax\nconst getMediaFilename = require('link-media-html-webpack-plugin/get-media-filename');\n\nconst getFilePath = (filename) =\u003e path.join(__dirname, 'src', filename);\n\nconst mainStyleExtractor = new ExtractPlugin('style.css');\nconst printStyleExtractor = new ExtractPlugin(getMediaFilename(getFilePath('style.print.css')));\n\nwebpack({\n    entry: getFilePath('entry.js'),\n    module: {\n      loaders: [\n        {\n            test: /print\\.css$/,\n            use: printStyleExtractor.extract('css-loader'),\n        }, {\n            test: /\\.css$/,\n            exclude: /print\\.css$/,\n            use: mainStyleExtractor.extract('css-loader'),\n        },\n      ],\n    },\n    output: {\n        path: OUTPUT_DIR,\n    },\n    plugins: [\n        mainStyleExtractor,\n        printStyleExtractor,\n        new HTMLPlugin({\n            minify: {\n                collapseWhitespace: true,\n            },\n        }),\n        new LinkMediaHTMLPlugin(),\n    ],\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquantizor%2Flink-media-html-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquantizor%2Flink-media-html-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquantizor%2Flink-media-html-webpack-plugin/lists"}