postcss-inject

PostCSS Inject - inject css file into each other

Usage no npm install needed!

<script type="module">
  import postcssInject from 'https://cdn.skypack.dev/postcss-inject';
</script>

README

Build Status

PostCSS Inject

PostCSS Inject is PostCSS plugin that can inject one css file to another.

Why?

Let's say there are some css variables that are required in few separate css files which don't import each other so they can not inherit variables. To make variables work across all css files you need to:

  • import all css files into each other
  • import variables in each css file where variables required

Basic Usage

postcss([
    require('postcss-inject')({
        cssFilePath: 'path/to/file/'
    })
]);

variables.css:

:root {
    --primary-color: green;
    --scondary-color: blue;
}

input.css:

a {
    color: var(--primary-color);
}

a:hover {
    color: var(--secondary-color);
}

output.css:

:root {
    --primary-color: green;
    --scondary-color: blue;
}

a {
    color: var(--primary-color);
}

a:hover {
    color: var(--secondary-color);
}

Options

Name Description
injectTo Use fileStart to inject at the begining of file
cssPlainText Plain CSS for example /* My CSS File */
cssFilePath Path to css file