romeovs/README.md

## README.md

      
    Raw
  

              README.md
            
          
    rollup-plugin-styles order discrepancies

This gist shows that there are ordering issues in rollup-plugin-styles.
The output is different based on what mode is being used.
The extract output is out of order.
To test run:
yarn
yarn build

and open inject.html and extract.html to see the difference.

  
## extract.html
<!doctype html>
<html>
	<head>
		<script src="./dist/extract/index.js"></script>
		<link rel="stylesheet" href="./dist/extract/index.css" />
	</head>
	<body>
		<div class="foo">
			This should be red.
		</div>
	</body>
</html>

## foo.css
.foo {
  color: blue;
}

## foo.js
import css from './foo.css'

export const foo = css

## index.css
.foo {
  color: red;
}

## index.js
import { foo } from './foo'
import css from './index.css'

console.log('Hello world!')

## inject.html
<!doctype html>
<html>
	<head>
		<script src="./dist/inject/index.js"></script>
	</head>
	<body>
		<div class="foo">
			This should be red.
		</div>
	</body>
</html>

## package.json
{
  "name": "example-style-order",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
	"scripts": {
		"build": "rollup -c && echo 'Open inject.html and extract.html to see the difference'"
	},
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.34.0",
    "rollup-plugin-styles": "^3.11.0"
  }
}

## rollup.config.js
import resolve from '@rollup/plugin-node-resolve'
import styles from 'rollup-plugin-styles'

function config(mode) {
	return {
		input: './src/index.js',
		output: {
			dir: `dist/${mode}`,
			entryFileNames: '[name].js',
			assetFileNames: '[name].[ext]',
		},
		plugins: [
			resolve(),
			styles({
				mode,
			}),
		],
	}
}

export default [
	config('inject'),
	config('extract'),
]
	<!doctype html>
	<html>
	<head>
	<script src="./dist/extract/index.js"></script>
	<link rel="stylesheet" href="./dist/extract/index.css" />
	</head>
	<body>
	<div class="foo">
	This should be red.
	</div>
	</body>
	</html>
	import { foo } from './foo'
	import css from './index.css'

	console.log('Hello world!')
	{
	"name": "example-style-order",
	"version": "1.0.0",
	"main": "index.js",
	"license": "MIT",
	"scripts": {
	"build": "rollup -c && echo 'Open inject.html and extract.html to see the difference'"
	},
	"devDependencies": {
	"@rollup/plugin-node-resolve": "^11.0.0",
	"rollup": "^2.34.0",
	"rollup-plugin-styles": "^3.11.0"
	}
	}
	import resolve from '@rollup/plugin-node-resolve'
	import styles from 'rollup-plugin-styles'

	function config(mode) {
	return {
	input: './src/index.js',
	output: {
	dir: `dist/${mode}`,
	entryFileNames: '[name].js',
	assetFileNames: '[name].[ext]',
	},
	plugins: [
	resolve(),
	styles({
	mode,
	}),
	],
	}
	}

	export default [
	config('inject'),
	config('extract'),
	]