terrierscript / grunt-cssjoin Goto Github PK

View Code? Open in Web Editor NEW

10.0 2.0 4.0 190 KB

[DEPRECATED] Use postcss-import https://github.com/postcss/postcss-import

License: MIT License

JavaScript 98.08% CSS 1.92%

grunt-cssjoin's Introduction

grunt-cssjoin

Extend and join css @import loaded file

If you want cssjoin without grunt, check cssjoin repository

Getting Started

This plugin requires Grunt ~0.4.0

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-cssjoin --save-dev

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

grunt.loadNpmTasks('grunt-cssjoin');

The "cssjoin" task

Overview

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

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

Options

options.paths

Type: Array or String Css @import resolve include paths()

Usage Examples

Default Options

In this example, execute cssjoin to single convert.

grunt.initConfig({
  cssjoin: {
    join :{
      files: {
        'dest/bar.css': ['src/bar.css'],
      },
    }
  },
})

Path Options

In this example, setting cssjoin's paths.

grunt.initConfig({
  cssjoin: {
    path_option :{
      options: {
        paths : ["src/"]
      },
      files: {
        'dest/default_options': ['src/foo.css', 'src/dir/bar.css'],
      },
    }
  },
})

Convert Same File.

In this example, execute cssjoin to same file

grunt.initConfig({
  cssjoin: {
    sameFile : {
      files:  grunt.file.expandMapping(["/src/*.css"]),
    }
  }
})

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.

grunt-cssjoin's People

Contributors

Stargazers

Watchers

Forkers

jacobq robhrt7 alexvauch gruntjs-updater

grunt-cssjoin's Issues

Unexpected image url change in 3.0

With 3.0 came unexpected plugin functionality, that changes image ulrs in CSS, please turn in off and provide an option for that.

Does not work

@suisho Thanks for your great work.

I am using Yeoman 1.0 Beta for my Web application which has

webapp
     app
          components
          styles
                index.scss
     dist
          styles
                index.css
    Gruntfile.js

I used SASS for stylesheets. index.scss file includes other third party css files like

   @import url(../components/alertify/themes/alertify.core.css);
   @import url(../components/alertify/themes/alertify.default.css);
   @import url(../components/select2/select2.css);
   @import url(../components/jquery-file-upload/css/jquery.fileupload-ui.css);

The grunt tasks compiles this sass into dist/styles/index.css. I included cssjoin grunt task to join all import css file. My configuration as follows

    cssjoin : {
        path_option :{
            options: {
                path : ['app/styles/']
            },
            files: {
                'dist/styles/index.css': ['dist/styles/index.css'],
            },
        }
    },

But final CSS file still has @import statement. Am i missing anything?

Config JS Hint Capatable

grunt.initConfig({
  cssjoin: {
    path_option :{
      options: {
        paths : ["src/"]
      },
      files: {
        'dest/default_options': ['src/foo.css', 'src/dir/bar.css'],
      },
    }
  },
})

Would you support path_option to pathOption for jshint capatable?

Unexpected symbols concatenated via @import v0.2.0

...

Upgrade cssjoin

How does paths option really work?

I have this kind of CSS file:

@import "/res/css/reset.css";
@import "/res/css/base/base.css";

and Grunt config:

cssjoin: {
    bundles: {
        options: {
            paths: ['build/grunt']
        },
        files: [
            {
                expand: true,
                cwd: 'path/with/import-bundles',
                dest: 'comp/some',
                src: [
                    '**/*.css'
                ]
            }
        ]
    }
}

In cases, where defined file path in @import could not be found (on filesystem), task uses options.paths.path + declared import path, but if file that is declared in @import statement exists, options.paths are not used in forming right path to file that I need to join.

So if /res/css/reset.css exists, cssjoin will take file from there, but if not, if would combine path in options.paths and will lookup file in this dir build/grunt/res/css/reset.css. How could I make cssjoin to only look for path that are combined with option defined rule?