0.5.4 • Published 10 years ago

postcss-mixin-from v0.5.4

Weekly downloads
1
License
MIT
Repository
github
Last release
10 years ago

PostCSS Mixin From Build Status

PostCSS plugin which enhances postcss-mixins with the ability to inline import from other files.

Input:

.installButton {
  @mixin raisedButton from './button[.trait]';
  background-color: blue;
}

/* button.trait */
@mixin-definition raisedButton {
  color: white;
}

Output:

@define-mixin raisedButton {
  color: white;
}

.installButton {
  @mixin raisedButton;
}

Usage

This plugin is environment-independent. It must be provided the ability to load other CSS files by the end user.

An example using SystemJS:

const getFileText = (filePath, relativeToPath) => {
  const isBundling = typeof window === 'undefined';
  let absolutePath = filePath;

  if (isBundling && filePath[0] === '.') {
    absolutePath = path.resolve(path.dirname(relativeToPath), filePath);
    // css.source.input.from is incorrect when building. Need to convert from relative and then drop root
    // so that when giving the path to SystemJS' fetch it works as expected.
    absolutePath = absolutePath.replace(path.parse(absolutePath).root, '');
  }

  const canonicalParent = relativeToPath.replace(/^\//, '');

  return System
    .normalize(absolutePath, path.join(System.baseURL, canonicalParent))
    .then(System.import.bind(System));
};

Be sure to run this plugin before postcss-mixins.

const mixinFrom = require('postcss-mixin-from');
const mixins = require('postcss-mixins');
postcss([
  mixinFrom({getFileText}),
  mixins
])

See PostCSS docs for examples for your environment.

0.5.4

10 years ago

0.5.3

10 years ago

0.5.2

10 years ago

0.5.1

10 years ago

0.5.0

10 years ago

0.4.0

10 years ago

0.3.0

10 years ago

0.2.2

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.0

10 years ago

0.0.0

10 years ago