UNPKG

motion

Version:

motion - moving development forward

85 lines (84 loc) 5.14 kB
{ "_args": [ [ "postcss-modules-scope@https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.0.0.tgz", "/Users/nw/flint/packages/flint" ] ], "_from": "postcss-modules-scope@>=1.0.0 <2.0.0", "_id": "postcss-modules-scope@1.0.0", "_inCache": true, "_location": "/postcss-modules-scope", "_phantomChildren": {}, "_requested": { "name": "postcss-modules-scope", "raw": "postcss-modules-scope@https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.0.0.tgz", "rawSpec": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.0.0.tgz", "scope": null, "spec": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.0.0.tgz", "type": "remote" }, "_requiredBy": [ "/css-loader" ], "_resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.0.0.tgz", "_shasum": "d17baef9b34512d06a316492cb3ea7cce9072255", "_shrinkwrap": null, "_spec": "postcss-modules-scope@https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.0.0.tgz", "_where": "/Users/nw/flint/packages/flint", "author": { "name": "Glen Maddern" }, "bugs": { "url": "https://github.com/geelen/postcss-modules-scope/issues" }, "dependencies": { "css-selector-tokenizer": "^0.5.0", "postcss": "^5.0.4" }, "description": "A CSS Modules transform to extract export statements from local-scope classes", "devDependencies": { "babel": "^5.4.7", "babel-eslint": "^4.1.3", "babel-istanbul": "^0.3.20", "babelify": "^6.1.2", "chokidar-cli": "^1.0.1", "codecov.io": "^0.1.2", "coveralls": "^2.11.2", "css-selector-parser": "^1.0.4", "eslint": "^1.5.0", "mocha": "^2.2.5" }, "files": [ "lib" ], "homepage": "https://github.com/geelen/postcss-modules-scope", "keywords": [ "css-modules", "plugin", "postcss" ], "license": "ISC", "main": "lib/index.js", "name": "postcss-modules-scope", "optionalDependencies": {}, "readme": "# CSS Modules: Scope Locals & Extend\n\n[![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)\n\nTransforms:\n\n```css\n:local(.continueButton) {\n color: green;\n}\n```\n\ninto:\n\n```css\n:export {\n continueButton: __buttons_continueButton_djd347adcxz9;\n}\n.__buttons_continueButton_djd347adcxz9 {\n color: green;\n}\n```\n\nso it doesn't pollute CSS global scope and can be simply used in JS like so:\n\n```js\nimport styles from './buttons.css'\nelem.innerHTML = `<button class=\"${styles.continueButton}\">Continue</button>`\n```\n\n## Composition\n\nSince we're exporting class names, there's no reason to export only one. This can give us some really useful reuse of styles:\n\n```css\n.globalButtonStyle {\n background: white;\n border: 1px solid;\n border-radius: 0.25rem;\n}\n.globalButtonStyle:hover {\n box-shadow: 0 0 4px -2px;\n}\n:local(.continueButton) {\n compose-with: globalButtonStyle;\n color: green;\n}\n```\n\nbecomes:\n\n```\n.globalButtonStyle {\n background: white;\n border: 1px solid;\n border-radius: 0.25rem;\n}\n.globalButtonStyle:hover {\n box-shadow: 0 0 4px -2px;\n}\n:local(.continueButton) {\n compose-with: globalButtonStyle;\n color: green;\n}\n```\n\n**Note:** you can also use `composes` as a shorthand for `compose-with`\n\n## Local-by-default & reuse across files\n\nYou're looking for [CSS Modules](https://github.com/css-modules/css-modules). It uses this plugin as well as a few others, and it's amazing.\n\n## Building\n\n```\nnpm install\nnpm test\n```\n\n[![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)\n\n* Lines: [![Coverage Status](https://coveralls.io/repos/css-modules/postcss-modules-scope/badge.svg?branch=master)](https://coveralls.io/r/css-modules/postcss-modules-scope?branch=master)\n* Statements: [![codecov.io](http://codecov.io/github/css-modules/postcss-modules-scope/coverage.svg?branch=master)](http://codecov.io/github/css-modules/postcss-modules-scope?branch=master)\n\n## Development\n\n- `npm autotest` will watch `src` and `test` for changes and run the tests, and transpile the ES6 to ES5 on success\n\n## License\n\nISC\n\n## With thanks\n\n- Mark Dalgleish\n- Tobias Koppers\n- Guy Bedford\n\n---\nGlen Maddern, 2015.\n", "readmeFilename": "README.md", "repository": { "type": "git", "url": "git+https://github.com/geelen/postcss-modules-scope.git" }, "scripts": { "autotest": "chokidar src test -c 'npm test'", "build": "babel --out-dir lib src", "cover": "babel-istanbul cover node_modules/.bin/_mocha", "lint": "eslint src", "posttest": "npm run lint && npm run build", "precover": "npm run lint && npm run build", "prepublish": "npm run build", "test": "mocha --compilers js:babel/register", "travis": "npm run cover -- --report lcovonly", "watch": "chokidar src -c 'npm run build'" }, "version": "1.0.0" }