{"id":15376027,"url":"https://github.com/thepassle/rollup-plugin-native-css-modules","last_synced_at":"2025-04-15T16:17:29.351Z","repository":{"id":65395372,"uuid":"591618115","full_name":"thepassle/rollup-plugin-native-css-modules","owner":"thepassle","description":"Use native CSS modules with import assertions in Rollup, without transforming CSS to JS.","archived":false,"fork":false,"pushed_at":"2023-12-16T21:33:11.000Z","size":37,"stargazers_count":20,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-15T16:17:18.664Z","etag":null,"topics":["assertions","css","import","modules","rollup"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/rollup-plugin-native-css-modules","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/thepassle.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-01-21T09:54:20.000Z","updated_at":"2024-05-13T14:53:30.000Z","dependencies_parsed_at":"2024-02-22T05:46:15.466Z","dependency_job_id":null,"html_url":"https://github.com/thepassle/rollup-plugin-native-css-modules","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Frollup-plugin-native-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Frollup-plugin-native-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Frollup-plugin-native-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Frollup-plugin-native-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thepassle","download_url":"https://codeload.github.com/thepassle/rollup-plugin-native-css-modules/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249105474,"owners_count":21213536,"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":["assertions","css","import","modules","rollup"],"created_at":"2024-10-01T14:05:38.703Z","updated_at":"2025-04-15T16:17:29.333Z","avatar_url":"https://github.com/thepassle.png","language":"JavaScript","readme":"# Rollup-plugin-native-css-modules\n\nUse native CSS modules with import assertions in Rollup. This plugin is intended to be used if you want to use import assertions in your build _output_, either in browsers that already support it, or because you're using something like [es-module-shims](https://github.com/guybedford/es-module-shims) to support native CSS modules. \n\nThis plugin does **not** transform any CSS module imports to JavaScript, it leaves the import statements and imports in tact.\n\n## Example\n\nCheckout the example on [Stackblitz](https://stackblitz.com/edit/rollup-repro-fbdojc).\n\nOr take a look at the [example project](https://github.com/thepassle/css-example-project) for a more elaborate example.\n\n### Input\n\n`src/index.js`:\n```js\nimport styles from './styles.css' assert { type: 'css' };\n```\n\n### Output:\n\n`dist/index.js`:\n```js\nimport styles from './styles-3275f665.css' assert { type: 'css' };\n```\n\n## Usage\n\n```\nnpm i -S rollup-plugin-native-css-modules\n```\n\n```js\nimport css from 'rollup-plugin-native-css-modules';\n\nexport default {\n  input: 'index.js',\n  output: {\n    dir: 'dist',\n    format: 'esm'\n  },\n  plugins: [\n    css(),\n    /**\n     * Or:\n     */\n    css({\n      transform: (code) =\u003e {\n        // modify the CSS code, minify, post-process, etc\n        return code;\n      }\n    })\n  ]\n};\n```\n\n## Features\n\nAt time of writing Rollup V3 supports import assertion syntax, however, Rollup will still try to parse any module that gets imported in your source code and expect it to be JavaScript. This will cause Rollup to throw an error, because it'll try to parse CSS files expecting it to be JavaScript. This plugin fixes that.\n\n### Support\n\nThis plugin supports:\n\n```js\nimport styles from './styles.css' assert { type: 'css' };\nimport styles from 'bare-module-specifier/styles.css' assert { type: 'css' };\nimport('./styles.css', { assert: { type: 'css'} });\n```\n\nThis plugin does NOT support:\n```js\nimport(`./styles-${i}.css`, { assert: { type: 'css'} });\nimport('./styles-' + i + '.css', { assert: { type: 'css'} });\n```\n\nThe reason for this is that imports with dynamic variables are hard to statically analyze, because they rely on runtime code.\n\nExternal stylesheets are ignored:\n```js\nimport styles from 'http://styles.com/index.css' assert { type: 'css' };\nimport styles from 'https://styles.com/index.css' assert { type: 'css' };\n```\n\nData uri's are also ignored.\n\n### Deduplication\n\nThis plugin also deduplicates imports for the same module. If `foo.js` and `bar.js` both import `my-styles.css`, only one CSS file will be output in the output directory, as opposed to two.\n\n### Hashing\n\nCSS modules output by this plugin receive a hash based on the contents of the CSS file. E.g.:\n\n**input:**\n```js\nimport styles from './styles.css' assert { type: 'css' };\n```\n\n**output:**\n```js\nimport styles from './styles-3275f665.css' assert { type: 'css' };\n```\n\n### Transform\n\nYou can use the `transform` hook to modify the CSS that gets output to, for example, minify your CSS using a tool like [lightning CSS](https://lightningcss.dev/docs.html) or something like postcss.\n\n\n```js\nimport css from 'rollup-plugin-native-css-modules';\nimport { transform } from 'lightningcss';\n\nexport default {\n  input: 'demo/index.js',\n  output: {\n    dir: 'demo/dist',\n    format: 'esm'\n  },\n  plugins: [\n    css({\n      transform: (css) =\u003e transform({\n        code: Buffer.from(css),\n        minify: true\n      }).code.toString()\n    })\n  ]\n};\n```\n\n\n## FAQ\n\n### Polyfilling\n\nAt the time of writing, browser support for import assertions is still low, so you're probably going to need to polyfill them. You can do this via [`es-module-shims`](https://github.com/guybedford/es-module-shims), note that you'll also need a polyfill for constructable stylesheets, which you can polyfill via [`construct-style-sheets-polyfill`](https://www.npmjs.com/package/construct-style-sheets-polyfill).\n\n### Why are CSS files not combined and bundled?\n\nBecause you can't. Consider the following example:\n\n```\nmy-app/\n├─ index.js\n├─ element-a.js\n├─ element-b.js\n├─ blue-styles.css\n├─ red-styles.css\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eindex.js\u003c/code\u003e\u003c/summary\u003e\n\n```js\nimport './element-a.js';\nimport './element-b.js';\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eelement-a.js\u003c/code\u003e\u003c/summary\u003e\n\n```js\nimport blueStyles from './blue-styles.css' assert { type: 'css' };\n\nclass ElementA extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.adoptedStyleSheets = [blueStyles];\n  }\n\n  connectedCallback() {\n    this.shadowRoot.innerHTML = '\u003ch1\u003eblue\u003c/h1\u003e';\n  }\n}\n\ncustomElements.define('element-a', ElementA);\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eelement-b.js\u003c/code\u003e\u003c/summary\u003e\n\n```js\nimport redStyles from './red-styles.css' assert { type: 'css' };\n\nclass ElementB extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.adoptedStyleSheets = [redStyles];\n  }\n\n  connectedCallback() {\n    this.shadowRoot.innerHTML = '\u003ch1\u003ered\u003c/h1\u003e';\n  }\n}\n\ncustomElements.define('element-b', ElementB);\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eblue-styles.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\nh1 {\n  color: blue;\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ered-styles.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\nh1 {\n  color: red;\n}\n```\n\u003c/details\u003e\n\nBundling this would lead to the following build output:\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ebundle.js\u003c/code\u003e\u003c/summary\u003e\n\n```js\nimport blueStyles from './styles-3275f665.css' assert { type: 'css' };\nimport redStyles from './styles-3a3f9686.css' assert { type: 'css' };\n\nclass ElementA extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.adoptedStyleSheets = [blueStyles];\n  }\n\n  connectedCallback() {\n    this.shadowRoot.innerHTML = '\u003ch1\u003eblue\u003c/h1\u003e';\n  }\n}\n\ncustomElements.define('element-a', ElementA);\n\nclass ElementB extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.adoptedStyleSheets = [redStyles];\n  }\n\n  connectedCallback() {\n    this.shadowRoot.innerHTML = '\u003ch1\u003ered\u003c/h1\u003e';\n  }\n}\n\ncustomElements.define('element-b', ElementB);\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003estyles-3a3f9686.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\nh1 {\n  color: red;\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003estyles-3275f665.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\nh1 {\n  color: blue;\n}\n```\n\u003c/details\u003e\n\nIf you would combine the CSS files for `blueStyles` and `redStyles` into one, and use that stylesheet in both components, it would lead to style clashes; you would only have red `\u003ch1\u003e`s, instead of one blue `\u003ch1\u003e` for `\u003celement-a\u003e` and one red `\u003ch1\u003e` for `\u003celement-b\u003e`.\n\nTo illustrate:\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ebundle.js\u003c/code\u003e\u003c/summary\u003e\n\n```js\nimport bundledStyles from './styles-f32a2851.css' assert { type: 'css' };\n\nclass ElementA extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.adoptedStyleSheets = [bundledStyles];\n  }\n\n  connectedCallback() {\n    this.shadowRoot.innerHTML = '\u003ch1\u003eblue\u003c/h1\u003e';\n  }\n}\n\ncustomElements.define('element-a', ElementA);\n\nclass ElementB extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.adoptedStyleSheets = [bundledStyles];\n  }\n\n  connectedCallback() {\n    this.shadowRoot.innerHTML = '\u003ch1\u003ered\u003c/h1\u003e';\n  }\n}\n\ncustomElements.define('element-b', ElementB);\n```\n\n\u003c/details\u003e\n\n\n\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003estyles-f32a2851.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\nh1 {\n  color: blue;\n}\n\nh1 {\n  color: red;\n}\n```\n\n\u003c/details\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepassle%2Frollup-plugin-native-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthepassle%2Frollup-plugin-native-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepassle%2Frollup-plugin-native-css-modules/lists"}