New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

csstyle

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

csstyle - npm Package Compare versions

Comparing version 1.1.0 to 1.3.0

.sass-cache/ac45cccdb0baf943d441fe9094d6333199cb955b/options-with-concat.scssc

15

package.json
{
"name": "csstyle",
"version": "1.1.0",
"version": "1.3.0",
"description": "clean, simple styling for styling the web.",

@@ -8,6 +8,13 @@ "directories": {

},
"dependencies": {},
"dependencies": {
"lodash": "^3.2.0"
},
"devDependencies": {
"specificity": "~0.1.4",
"shelljs": "~0.3.0"
"fs-extra": "^0.16.3",
"glob": "^4.3.5",
"postcss": "^4.0.4",
"postcss-nested": "^0.2.1",
"postcss-simple-vars": "^0.2.3",
"shelljs": "~0.3.0",
"specificity": "~0.1.4"
},

@@ -14,0 +21,0 @@ "scripts": {

@@ -8,5 +8,6 @@ # [csstyle](http://csstyle.io)

You can use csstyle with either [Sass](http://sass-lang.com/) or [postcss](https://github.com/postcss/postcss).
## Getting Started
1. make sure you have the latest stable SASS (3.4).
1. Setup your project with either Sass or Postcss. If you're using Sass make sure you have the latest stable SASS (3.4).

@@ -16,15 +17,54 @@ 2. Add `id="csstyle"` to your html or body element. This is necessary so that components with their

3. Download the csstyle mixins and `@import` them into your sass file.
3. Download csstyle from npm:
```
npm install csstyle --save
```
or from bower:
```
bower install csstyle --save
```
4. If you're using Sass, import into your stylesheets:
```scss
@import 'csstyle';
```
npm install csstyle
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.
Now you can start creating components with options & parts, adding in tweaks and locations as needed.
Now you're set and can start creating components with options & parts, adding in tweaks and locations as needed. Enjoy!
## FAQ
## Running the Unit Tests
`npm install -g jasmine-node`
`npm test`
### Can I use this with Libsass?
People using webpack or similar often want to load Sass via libsass.
Unfortunately libsass is quite behind the ruby Sass and some things are [still missingl](https://sass-compatibility.github.io/)
before it will work with csstyle. As a workaround while we wait for libsass you
can load your Sass files with the [ruby Sass loader](https://github.com/ddelbondio/ruby-sass-loader) and it will work just fine, it just
won't be as fast as libsass.
### 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 & {
background: blue;
}
}
}
```
### Can I configure the styling convention?
You can configure which symbol is used to denote `parts` by changing the `$csstyle-part-symbol` variable. The default is `__` but you can set it to `-` or whatever suits your style.
## License

@@ -34,3 +74,2 @@ MIT

## TODO
- ship mixins as gem
- support stylus, rework, and less once API is solid
- make postcss version configurable too

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc