{"id":18609671,"url":"https://github.com/unlight/gulp-extract-media-queries","last_synced_at":"2025-06-30T13:33:57.022Z","repository":{"id":57257488,"uuid":"44111191","full_name":"unlight/gulp-extract-media-queries","owner":"unlight","description":"Plugin extracts css rules inside of media queries and saves it to separated files.","archived":false,"fork":false,"pushed_at":"2017-04-24T12:43:33.000Z","size":5,"stargazers_count":19,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T05:41:36.764Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unlight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-12T14:06:22.000Z","updated_at":"2020-11-12T14:05:43.000Z","dependencies_parsed_at":"2022-08-25T21:22:45.397Z","dependency_job_id":null,"html_url":"https://github.com/unlight/gulp-extract-media-queries","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlight%2Fgulp-extract-media-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlight%2Fgulp-extract-media-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlight%2Fgulp-extract-media-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlight%2Fgulp-extract-media-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unlight","download_url":"https://codeload.github.com/unlight/gulp-extract-media-queries/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980815,"owners_count":21027804,"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":[],"created_at":"2024-11-07T03:06:56.104Z","updated_at":"2025-04-10T22:31:36.277Z","avatar_url":"https://github.com/unlight.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"gulp-extract-media-queries\n--------------------------\nPlugin extracts css rules inside of media queries and saves it to separated files.\n\nEXAMPLE\n-------\n```js\nvar gulp = require(\"gulp\");\nvar g = require(\"gulp-load-plugins\")();\n\ngulp.task(\"design.build\", function() {\n\tgulp.src(\"src/design/style.css\")\n\t\t.pipe(g.extractMediaQueries())\n\t\t.pipe(gulp.dest(\"build\"));\n});\n```\nTask `design.build` for below `style.css` file:\n``` css\n* {\n\tbox-sizing: border-box;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tmargin: 0 auto;\n\t}\n}\n```\nProduces following files:\n\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003estyle.css\u003c/th\u003e\n\t\t\u003cth\u003emin-width-640px.css\u003c/th\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003e\u003cpre\u003e* {\n\tbox-sizing: border-box;\n}\u003c/pre\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cpre\u003e.container {\n\tmargin: 0 auto;\n}\u003c/pre\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\nAnd now you can include it in your html in such way:\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" /\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"min-width-640px.css\" media=\"(min-width: 640px)\" /\u003e\n```\n\nWhen a media query is true, the corresponding style sheet or style rules are applied, \nfollowing the normal cascading rules. Style sheets with media queries attached \nto their \u003clink\u003e tags will still download even if their media queries\nwould return false (they will not apply, however).\n\nUnless you use the `not` or `only` operators,\nthe media type is optional and the all type will be implied.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlight%2Fgulp-extract-media-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funlight%2Fgulp-extract-media-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlight%2Fgulp-extract-media-queries/lists"}