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

grunt-fscss

v0.5.2

Published

Replaces media references in CSS files with valid FirstSpirit $CMS_REF(media:"")$ function calls.

Downloads

70

Readme

grunt-fscss Build Status

Replaces media references in CSS files with valid FirstSpirit $CMS_REF(media:"")$ function calls.

NPM

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-fscss --save-dev

One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-fscss');

The "fscss" task

Options

seperator

Type: String Default: \n\n

addFileNameComment

Type: boolean Default: false

This option will add the source filename as a css comment at the end of each line where a url() call got replaced with a $CMS_REF()$ function call. This feature is mainly for debugging purposes.

abs

Type: number Default: undefined

Global $CMS_REF()$ `abs configuration for all referenced files.

cacheStrategy

Type: string Default: undefined

Possible options: revision

fileMapping

Type: object Default: {}

If you need to make sure that a file gets a custom reference name in generated CSS or you want to overwrite global abs configuration, fileMappingis the way to go:

grunt.initConfig({
  fscss: {
    dist: {
      options: {
        fileMapping: {
          // short syntax, just configure a custom reference name
          '/my/image.gif': 'my_image_2',
          // if you want to configure a custom reference name and an abs configuration:
          '/my/super/image.png': {
            referenceName: 'overwrite_ref_name',
            abs: 2
          }
        }
      }
    },
  },
})

Usage exmples

In your project's Gruntfile, add a section named fscss to the data object passed into grunt.initConfig().

grunt.initConfig({
  fscss: {
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

A Simple example

In this example, the default options are used to replace image references to FirstSpirit $CMS_REF(media:"")$ function calls:

grunt.initConfig({
  fscss: {
    dist: {
      files: {
        'path/to/output-fs.css': ['path/to/input.css'],
      }
    }
  }
})

Some sample replacement could be:

.box {
  background: url('images/my-Great-Picture.png') no-repeat;
}

gets replaced with:

.box {
  background: url('$CMS_REF(media:"my_great_picture")$') no-repeat;
}

Multiple files per target

You can also configure multiple files that get concatenated to one output file like in this example:

grunt.initConfig({
  fscss: {
    dist: {
      options: {
        seperator: '\n\n /* next file */ \n\n'
      },
      files: {
        'path/to/output-fs.css': ['path/to/input1.css', 'path/to/input2.css'],
      }
    }
  }
})

File comments in compiled CSS

When you enable the option addFileNameComment the processor will add comments to the end of the line with the source filenames that got replaced. Here's an example:

grunt.initConfig({
  fscss: {
    options: {
      addFileNameComment: true
    }
    dist: {
      files: {
        'path/to/output-fs.css': ['path/to/input.css'],
      }
    }
  }
})

Some sample output could be:

.box {
  background: url('images/my-Great-Picture.png') no-repeat;
}

gets replaced with:

.box {
  background: url('$CMS_REF(media:"my_great_picture")$') no-repeat; /* my_great_picture = images/my-Great-Picture.png */
}

Cache Strategy

When you set the option cacheStrategy to revision, grunt-fscss will add a ?rid query parameter with the FirstSpirit release revsion id to all CMS_REF calls. When no release revision ID is defined, FirstSpirit will fallback to #global.now.timeInMillis:

.box {
  background: url('images/my-Picture.png') no-repeat;
}

gets replaced with:

.box {
  background: url('$CMS_REF(media:"my_picture")$?rid=$CMS_VALUE(ref(media:"my_picture").target.releaseRevision.id, default:#global.now.timeInMillis)$') no-repeat;
}

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Changelog

See CHANGELOG.md

Analytics