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-atomizer

v3.4.0

Published

Grunt task for Atomizer

Downloads

5,409

Readme

grunt-atomizer npm version

Overview

A grunt task for running Atomizer

Install

npm install grunt-atomizer --save-dev

Usage

Options

None of the options are required. Make sure you understand atomic configs in order to properly use the config options below.

options.cache

Caches the output of the task target by saving it to .atomic-cache at the root dir. False by default.

options.config

The Atomizer config passed directly to the grunt task. See examples below.

options.configFile

The Atomizer config passed as a file. This option can be used as an alternative to options.config or in conjunction with it. See examples below.

options.configOutput

The config file generated by the tool. Useful when parsing is used (See files.src below) and you want to save generated config.

options.bumpMQ

Boolean flag that adds a small amount of additional specificity weight to all media queries. False by default.

options.namespace

A CSS selector used to define scope for the Atomic CSS rules. (eg, if options.namespace is set to #atomic, the CSS output will be in the form of #atomic .P(10px), etc.)

options.rtl

Process the rules for right-to-left output. False by default.

options.rules

An array of additional Atomizer rulesets passed as file paths.

files.src

Any files matched by files.src will be parsed and if valid atomic classes are found they will be added to the final CSS. You'd generally want to also pass a options.configOutput so that you have the updated config. Custom class names cannot be automatically generated and have to be manually added in the config.

files.dest

The path to the CSS file that will be created.

Examples

atomizer: {
    // Example 1: Simple usage. Parse files and create CSS.
    // Ideally you'd also want to pass a namespace to deal with specificity.
    example1: {
        files: [
            {
                src: ['test/fixtures/*.html'],
                dest: 'tmp/configFileOnly.css'
            }
        ]
    },
    // Example 2: Passing a configFile only.
    example2: {
        options: {
            namespace: '#atomic',
            configFile: 'test/fixtures/sample-config.js'
        },
        files: [
            {
                dest: 'tmp/configFileOnly.css'
            }
        ]
    },
    // Example 3: Passing the config to the grunt task directly
    example3: {
        options: {
            namespace: '#atomic',
            config: {
                classNames: ['D(ib)']
            }
        },
        files: [
            {
                dest: 'tmp/configGruntOnly.css'
            }
        ]
    },
    // Example 4: Using both config and configFile.
    // `options.config` will be merged (and override) the `options.configFile`.
    example4: {
        options: {
            namespace: '#atomic',
            // bring a sample config file
            configFile: 'test/fixtures/sample-config.js',
            // config will override any thing declared in configFile
            config: {
                classNames: ['D(ib)'],
                custom: {
                    '1': '10px solid #ccc'
                }
            }
        },
        files: [
            {
                dest: 'tmp/configBoth.css'
            }
        ]
    },
    // Example 5: Using config, configFile and also parsing HTML files (it can be any type of file).
    // Parsing will warn if you've used a class that cannot be automatically generated and therefore requires you to manually add it to the config.
    example5: {
        options: {
            namespace: '#atomic',
            // pass a base config file
            configFile: 'test/fixtures/sample-config.js',
            // override classNames in the base config file
            config: {
                classNames: ['D(b)']
            }
            // the final config file used by the tool will be written
            // in the following file:
            configOutput: 'tmp/configOutput.json',
        },
        files: [
            {
                // parse html files to automatically create a config
                src: ['test/fixtures/*.html'],
                // generate the css in the file below
                dest: 'tmp/configBothWithParsing.css'
            }
        ]
    }
}

License

This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.

Third-pary open source code used are listed in our package.json file.