		{
		"name": "csstyle",
		"version": "1.6.0",
		"version": "2.0.0",
		"description": "clean, simple styling for styling the web.",
		"directories": {
		"test": "test"
		},
		"dependencies": {
		"lodash": "^3.2.0"
		},
		"devDependencies": {
		"fs-extra": "^0.16.3",
		"glob": "^4.3.5",
		"grunt": "~0.4.5",
		"grunt-release": "~0.12.0",
		"jasmine-node": "^1.14.5",
		"postcss": "^6.0.2",
		"postcss-nested": "^2.0.2",
		"postcss-simple-vars": "^4.0.0",
		"shelljs": "~0.3.0",
		"specificity": "~0.1.4"
		},
		"main": "csstyle.js",
		"scripts": {
		"test": "jasmine-node spec",
		"sitecss": "sass -r sass-globbing ./site/site.scss > ./site/site.css"
		"test": "mocha --recursive './tests/*.test.js'"
		},
		"repository": {
		"type": "git",
		"url": "git://github.com/csstyle/csstyle.git"
		"url": "git://github.com/csstyle-org/csstyle.git"
		},
		"keywords": [
		"css",
		"web",
		"sass",
		"scss",
		"web",
		"method",
		"mixins",
		"modular",
		"styling",
		"approach",
		"components",
		"styling",
		"mixins",
		"method",
		"approach"
		"abstraction"
		],
		"author": "Dave Geddes",
		"author": "Frankie Wittevrongel <frankie@cupoftea.io>",
		"license": "MIT",
		"bugs": {
		"url": "https://github.com/csstyle/csstyle/issues"
		"url": "https://github.com/csstyle-org/csstyle/issues"
		},
		"homepage": "http://www.csstyle.io"
		"homepage": "https://csstyle.io",
		"devDependencies": {
		"expect.js": "^0.3.1",
		"fibers": "^3.1.1",
		"mkdirp": "^0.5.1",
		"mocha": "^6.0.0",
		"sass": "^1.17.1",
		"specificity": "^0.4.1"
		}
		}

106

README.md

		@@ -1,103 +0,41 @@
		# [csstyle](http://csstyle.io)
		[![csstyle](https://github.com/geddski/csstyle/blob/master/site/common/images/csstyle.png)](http://csstyle.io)
		[![csstyle](https://csstyle.io/assets/img/logo.png)](https://csstyle.io)

		Clean, simple, for styling the web.
		Clean, simple, for styling the web.

		Check out the docs and examples on [csstyle.io](http://csstyle.io)
		csstyle is a modern approach for crafting beautifully maintainable stylesheets. Keeping CSS clean and organized is really hard. csstyle provides a higher-level abstraction for writing modular CSS. Written for [Sass](https://sass-lang.com/), it makes your CSS readable and semantic, generates your selectors for you, and automatically handles things like specificity and nesting.

		You can use csstyle with either [Sass](http://sass-lang.com/) or [postcss](https://github.com/postcss/postcss).
		csstyle makes your project's styling refreshingly consistent

		## Getting Started
		1. Setup your project with either Sass or Postcss. If you're using Sass make sure you have the latest stable SASS (3.4).

		2. Add `id="csstyle"` to your html or body element. This is necessary so that components with their
		parts and options can nest indefinitely yet always be overridden by tweaks.
		Install csstyle via npm or yarn.

		3. Download csstyle from npm:
		```shell
		$ npm install --save-dev csstyle
		$ yarn add --dev csstyle
		```

		```
		npm install csstyle --save
		```
		Next, you need to add the `app` id to your `html` tag. You can use another id if you like, but you will need to configure this in your csstyle settings.

		or from bower:
		```
		bower install csstyle --save
		```

		4. If you're using Sass, import into your stylesheets:
		```scss
		@import 'csstyle';
		```html
		<!DOCTYPE html>
		<html id="app" lang="en">
		...
		</html>
		```

		If you're using postcss, add csstyle as a plugin:
		```js
		postcss([require('postcss-nested'), require('csstyle')]);
		```
		Be sure to include postcss-nested and csstyle in that order.
		Lastly, you'll need to import csstyle in your main sass file.

		Now you're set and can start creating components with options & parts, adding in tweaks as needed. Enjoy!

		## Customizing Styling Conventions
		csstyle lets you change the style conventions to whatever suits your style.

		### Default Symbols
		- `options`: `\--`
		- `parts`: `__`
		- `tweaks`: `\+`
		- `rootId`: `csstyle`

		### With SASS
		Override the defaults using SASS variables.
		- `options`: `$csstyle-option-symbol`
		- `parts`: `$csstyle-part-symbol`
		- `tweaks`: `$csstyle-tweak-symbol`
		- `rootId`: `$csstyle-root-id`

		Example:
		```scss
		$csstyle-part-symbol: '\\/';
		$csstyle-root-id: 'app';
		@import '~csstyle/csstyle';
		```

		### With Postcss
		Override the defaults by calling the cssytle function with an options object.
		- `options`: `optionSymbol`
		- `parts`: `partSymbol`
		- `tweaks`: `tweakSymbol`
		- `rootId`: `rootId`
		Now you're set and can start creating components with options & parts, adding in tweaks and locations as needed. Enjoy!

		Example:
		## Documentation

		```js
		require('../csstyle')({optionSymbol: '\\-', partSymbol: '\\/', rootId: 'app'})
		```
		Documentation for csstyle can be found [here](https://csstyle.io/installation).

		IMPORTANT NOTE All characters besides `_` need to be escaped! However, if you are using dashes, only _the first one_ needs to be escaped. Use two backslashes to properly escape. For example to use a forward slash to separate parts, set $csstyle-part-symbol to `\\/`. The generated CSS classes will then be escaped with a single backslash.
		## License


		## FAQ

		### Can I use this with Libsass?
		Yes. Libsass version 3.2.0 or greater fully supports csstyle.

		### How do parts react to component states like hover?
		In Sass you can append a `&` to a selector or pseudo-selector to have it applied to the parent context. So for example to have a `part` react when the `component` gets hovered:

		```scss
		@include component(capacitor) {
		background: red;

		@include part(flux) {
		background: orange;
		}

		&:hover & {
		@include part(flux) {
		background: blue;
		}
		}
		}
		```

		## License
		MIT
		csstyle is open-sourced software licensed under the [MIT license](https://github.com/csstyle-org/csstyle/blob/master/LICENSE).

bower.json

CONTRIBUTING.md

csstyle.js

csstyle.scss

Gruntfile.js

LICENSE.md

csstyle - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes