Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    postcss-partial-importpublic

    Partial Import PostCSS Logo

    NPM Version Build Status Licensing Changelog Gitter Chat

    Partial Import lets you use sugary @import statements in CSS, including glob-like and Sass-like behavior. It even lets you generates imports as a scaffolding tool.

    /* before: style.css */
     
    @import "foo/bar";
     
    /* before: foo/bar.css */
     
    .example-1 {
        background-color: #fafafa;
    }
     
    /* after: style.css */
     
    .example-1 {
        background-color: #fafafa;
    }

    Options

    root

    Type: String
    Default: from or process.cwd()

    The root where paths are resolved. This should be the directory containing node_modules.

    path

    Type: String | Array
    Default: []

    A path or paths used to locate files.

    plugins

    Type: Array
    Default: undefined

    An array of plugins to be applied to imported file.

    onImport

    Type: Function
    Default: null

    The function called after the import process, receiving an array of imported files.

    resolve

    Type: Function
    Default: null

    A custom resolver, receiving the id, basedir, and importOptions of an import.

    load

    Type: Function
    Default: null

    A custom loader, receiving the filename, importOptions, and content or promised content.

    skipDuplicates

    Type: Boolean
    Default: true

    Whether similar files (based on the same content) will be skipped.

    prefix

    Type: String
    Default: ""

    Leading characters conditionally prepended to imports which are not found without them. For Sass-like, use "_".

    glob

    Type: Boolean | Object
    Default: true

    Whether glob-like behavior should be supported by imports. An object passed here will be forwarded to glob in order to change pattern matching behavior.

    touch

    Type: Boolean
    Default: false

    Whether imports should be created as files if they do not already exist.

    extension

    Type: String
    Default: .css

    A file extension conditionally appended to touched imports which do not specify an extension.

    Usage

    Add Partial Import to your build tool:

    npm install postcss-partial-import --save-dev

    Node

    require('postcss-partial-import').process(YOUR_CSS, { /* options */ });

    PostCSS

    Add PostCSS to your build tool:

    npm install postcss --save-dev

    Load Partial Import as a PostCSS plugin:

    postcss([
        require('postcss-partial-import')({ /* options */ })
    ]).process(YOUR_CSS, /* options */);

    Gulp

    Add Gulp PostCSS to your build tool:

    npm install gulp-postcss --save-dev

    Enable Partial Import within your Gulpfile:

    var postcss = require('gulp-postcss');
     
    gulp.task('css', function () {
        return gulp.src('./src/*.css').pipe(
            postcss([
                require('postcss-partial-import')({ /* options */ })
            ])
        ).pipe(
            gulp.dest('.')
        );
    });

    Grunt

    Add Grunt PostCSS to your build tool:

    npm install grunt-postcss --save-dev

    Enable Partial Import within your Gruntfile:

    grunt.loadNpmTasks('grunt-postcss');
     
    grunt.initConfig({
        postcss: {
            options: {
                use: [
                    require('postcss-partial-import')({ /* options */ })
                ]
            },
            dist: {
                src: '*.css'
            }
        }
    });

    install

    npm i postcss-partial-import

    Downloadsweekly downloads

    81,030

    version

    4.1.0

    license

    CC0-1.0

    repository

    githubgithub

    last publish

    collaborators

    • avatar