npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sugarss

v4.0.1

Published

Indent-based CSS syntax for PostCSS

Downloads

6,601,776

Readme

SugarSS

Indent-based CSS syntax for PostCSS.

a
  color: blue

.multiline,
.selector
  box-shadow: 1px 0 9px rgba(0, 0, 0, .4),
              1px 0 3px rgba(0, 0, 0, .6)

// Mobile
@media (max-width: 400px)
  .body
    padding: 0 10px

As any PostCSS custom syntax, SugarSS has source map, stylelint and postcss-sorting support out-of-box.

It was designed to be used with PreCSS and postcss-nested-props. But you can use it with any PostCSS plugins or use it without any PostCSS plugins. With gulp-sass-to-postcss-mixins you can use +mixin syntax as in Sass.

Syntax

SugarSS MIME-type is text/x-sugarss with .sss file extension.

Indent

We recommend 2 spaces indent. However, SugarSS autodetects indent and can be used with tabs or spaces.

But it is prohibited to mix spaces and tabs in SugarSS sources.

Multiline

SugarSS was designed to have intuitively multiline selectors and declaration values.

There are 3 rules for any types of nodes:

// 1. New line inside brackets will be ignored
@supports ( (display: flex) and
            (display: grid) )

// 2. Comma at the end of the line
@media (max-width: 400px),
       (max-height: 800px)

// 3. Backslash before new line
@media screen and \
       (min-width: 600px)

In a selector you can put a new line anywhere. Just keep same indent for every line of selector:

.parent >
.child
  color: black

In a declaration value you can put a new line anywhere. Just keep a bigger indent for the value:

.one
  background: linear-gradient(rgba(0, 0, 0, 0), black)
              linear-gradient(red, rgba(255, 0, 0, 0))

.two
  background:
    linear-gradient(rgba(0, 0, 0, 0), black)
    linear-gradient(red, rgba(255, 0, 0, 0))

Comments

SugarSS supports two types of comments:

/*
 Multiline comments
 */

// Inline comments

There is no “silent” comment in SugarSS. Output CSS will contain all comments from .sss source. But you can use postcss-discard-comments for Sass’s silent/loud comments behaviour.

Rule and Declarations

SugarSS separates selectors and declarations by :\s or :\n token.

So you must write a space after the property name: color: black is good, color:black is prohibited.

Other

SugarSS is just a syntax, it change the way how you write CSS, but do not add preprocessor features build-in.

Here are PostCSS plugins which could add you preprocessor features:

Text Editors

We are working on syntax highlight support in text editors.

Right now, you can set Sass or Stylus syntax highlight for .sss files.

Usage

SugarSS needs PostCSS compiler. Install postcss-loader for webpack, gulp-postcss for Gulp, postcss-cli for npm scripts. Parcel has build-in support for PostCSS.

Then install SugarSS: npm install --save-dev postcss sugarss if you use npm and yarn add --dev postcss sugarss if you use Yarn.

Then create .postcssrc file:

{
  "parser": "sugarss",
  "plugins": {
    "precss": {}
  }
}

Imports

If you doesn’t use Webpack or Parcel, you need some PostCSS plugin to process @import directives.

postcss-import doesn’t support .sss file extension, because this plugin implements W3C specification. If you want smarter @import, you should use postcss-easy-import with the extensions option.

{
  "parser": "sugarss",
  "plugins": {
+   "postcss-easy-import": {
+     "extensions": [
+       ".sss"
+     ]
+   },
    "precss": {},
  }
}

Mixins

For mixins support, install postcss-mixins and add it to .postcssrc file:

{
  "parser": "sugarss",
  "plugins": {
+   "postcss-mixins": {
+     "mixinsDir": "./mixins"
+   },
    "precss": {},
  }
}

Now you can define your mixins in mixins/ dir. For example create mixins/circle.sss with:

@define-mixin circle $size
  border-radius: 50%
  width: $size
  height: $size

Functions

To define custom functions you need to install postcss-functions and add it to .postcssrc file:

{
  "parser": "sugarss",
  "plugins": {
+   "postcss-functions": {
+     "glob": "./functions"
+   },
    "precss": {},
  }
}

Then you can define functions in functions/ dir. For example, functions/foo.js will define foo() function in CSS:

module.exports = function (args) {
  return 'foo'
}

SugarSS to SugarSS

Sometimes we use PostCSS not to build CSS, but to fix source files. For example, to sort properties by postcss-sorting.

For this cases use the syntax option, instead of parser:

gulp.task('sort', function () {
    return gulp.src('src/**/*.sss')
        .pipe(postcss([sorting], { syntax: sugarss }))
        .pipe(gulp.dest('src'));
});

CSS to SugarSS

You can even compile existing CSS sources to SugarSS syntax. Just use stringifier option instead of parser:

postcss().process(css, { stringifier: sugarss }).then(function (result) {
    result.content // Converted SugarSS content
});

Thanks

Cute project logo was made by Maria Keller.