Merge pull request #58 from thgh/dedupe

Fix duplicate styles in CSS output

Author: thgh

package.json

@@ -18,8 +18,9 @@
     "test:nested": "cd test/nested && rm -rf output && rollup -c && cmp output/output.js expected.js && cmp output/output.css expected.css && cd ../..",
     "test:empty": "cd test/empty && rm -rf output && rollup -c && cmp output/output.js expected.js && cmp output/output.css expected.css && cd ../..",
     "test:simple": "cd test/simple && rm -rf output && rollup -c && cmp output/output.js expected.js && cmp output/output.css expected.css && cd ../..",
+    "test:unique": "cd test/unique && rm -rf output && rollup -c && cmp output/main.js expected.js && cmp output/output.css expected.css && cd ../..",
     "test:win:simple": "cd .\\test\\simple && del -f output.* && rollup -c && cd .. && ECHO n|comp simple\\output.js expected.js && ECHO n|comp simple\\output.css simple\\expected.css && cd ..",
-    "test": "npm run test:simple && npm run test:nested && npm run test:empty && npm run test:circular",
+    "test": "npm run test:simple && npm run test:nested && npm run test:empty && npm run test:circular && npm run test:unique",
     "test:win": "npm run test:win:simple",
     "lint": "prettier rollup.config.js src/**",
     "prepare": "npm run build",

src/index.mjs

@@ -59,17 +59,17 @@ export default function css(options = {}) {
       return ''
     },
     generateBundle(opts, bundle) {
-      const ids = []
+      const ids = new Set()
 
       // Determine import order of files
       for (const file in bundle) {
         const root = bundle[file].facadeModuleId
         const modules = getCSSModules(root, this.getModuleInfo)
-        ids.push(...Array.from(modules))
+        modules.forEach(id => ids.add(id))
       }
 
       // Combine all stylesheets, respecting import order
-      const css = ids.map(id => styles[id]).join('\n')
+      const css = Array.from(ids).map(id => styles[id]).join('\n')
 
       // Emit styles through callback
       if (typeof options.output === 'function') {

test/unique/dependency-a.js

@@ -0,0 +1,3 @@
+import './input.css'
+
+console.log('dependency-a');

test/unique/expected.css

@@ -0,0 +1,4 @@
+.rollup {
+  color: green;
+  user-select: none;
+}

test/unique/expected.js

@@ -0,0 +1 @@
+import('./dependency-a.js');

test/unique/input.css

@@ -0,0 +1,4 @@
+.rollup {
+  color: green;
+  user-select: none;
+}

test/unique/main.js

@@ -0,0 +1,2 @@
+import './input.css'
+import('./dependency-a.js')

test/unique/output/dependency-a.js

@@ -0,0 +1 @@
+console.log('dependency-a');

test/unique/output/main.js

@@ -0,0 +1 @@
+import('./dependency-a.js');

test/unique/rollup.config.mjs

@@ -0,0 +1,11 @@
+import css from '../../src/index.mjs'
+
+export default {
+  input: 'main.js',
+  output: {
+    chunkFileNames: '[name].js',
+    dir: 'output',
+    format: 'esm'
+  },
+  plugins: [css({ output: 'output.css' })]
+}