You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
			
				
					80 lines
				
				1.9 KiB
			
		
		
			
		
	
	
					80 lines
				
				1.9 KiB
			| 
								 
											4 years ago
										 
									 | 
							
								# CSS Modules: Extract Imports
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								[](https://travis-ci.org/css-modules/postcss-modules-extract-imports)
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								Transforms:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```css
							 | 
						||
| 
								 | 
							
								:local(.continueButton) {
							 | 
						||
| 
								 | 
							
								  composes: button from "library/button.css";
							 | 
						||
| 
								 | 
							
								  color: green;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								into:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```css
							 | 
						||
| 
								 | 
							
								:import("library/button.css") {
							 | 
						||
| 
								 | 
							
								  button: __tmp_487387465fczSDGHSABb;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								:local(.continueButton) {
							 | 
						||
| 
								 | 
							
								  composes: __tmp_487387465fczSDGHSABb;
							 | 
						||
| 
								 | 
							
								  color: green;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Specification
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								- Only a certain whitelist of properties are inspected. Currently, that whitelist is `['composes']` alone.
							 | 
						||
| 
								 | 
							
								- An extend-import has the following format:
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								composes: className [... className] from "path/to/file.css";
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Options
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								- `failOnWrongOrder` `bool` generates exception for unpredictable imports order.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```css
							 | 
						||
| 
								 | 
							
								.aa {
							 | 
						||
| 
								 | 
							
								  composes: b from './b.css';
							 | 
						||
| 
								 | 
							
								  composes: c from './c.css';
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.bb {
							 | 
						||
| 
								 | 
							
								  /* "b.css" should be before "c.css" in this case */
							 | 
						||
| 
								 | 
							
								  composes: c from './c.css';
							 | 
						||
| 
								 | 
							
								  composes: b from './b.css';
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Building
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								npm install
							 | 
						||
| 
								 | 
							
								npm test
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								[](https://travis-ci.org/css-modules/postcss-modules-extract-imports)
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								* Lines: [](https://coveralls.io/r/css-modules/postcss-modules-extract-imports?branch=master)
							 | 
						||
| 
								 | 
							
								* Statements: [](http://codecov.io/github/css-modules/postcss-modules-extract-imports?branch=master)
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Development
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								- `npm watch` will watch `src` for changes and rebuild
							 | 
						||
| 
								 | 
							
								- `npm autotest` will watch `src` and `test` for changes and retest
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## License
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								ISC
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## With thanks
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								- Mark Dalgleish
							 | 
						||
| 
								 | 
							
								- Tobias Koppers
							 | 
						||
| 
								 | 
							
								- Guy Bedford
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								---
							 | 
						||
| 
								 | 
							
								Glen Maddern, 2015.
							 |