tachyons-css/tachyons-build-css

Transpile Tachyons postcss to vanilla css

tachyons-build-css

Transpile Tachyons PostCSS to vanilla CSS. This build process also removes comments, autoprefixes, and has options for minifying the output or repeating class selectors (to play nice with overly specific CSS frameworks).

Installation

npm install --save-dev tachyons-build-css

Usage

const fs = require('fs')
const tachyonsBuildCss = require('tachyons-build-css')

const input = fs.readFileSync('input.css', 'utf8')

tachyonsBuildCss(input, {
  from: 'input.css',
  to: 'output.css',
  minify: true,
  plugins: [my(), other(), plugins()]
}).then(result => {
  fs.writeFileSync('output.css', result.css)
})

If you want more control, but want the plugins used here, you can get them with the getPlugins function

const { getPlugins } = require('tachyons-build-css')

const plugins = getPlugins({
  from: 'input.css',
  to: 'output.css',
  minify: true
})

Options

Option	Default	Description	Values
from	undefined	The input file name	file name
to	undefined	The output file name	file name
minify	false	Minify the output CSS	true, false
repeat	false	Whether to repeat classes in selectors	false, 1..10
plugins	false	Additional postcss plugins	[my(), other(), plugins()]
atImport	{}	Options for postcss-import	postcss-import options

License

MIT

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Crafted with <3 by John Otander (@4lpine).

---

This package was initially generated with yeoman and the p generator.

tachyons-build-css's Issues

BrowserslistError: Unknown browser query `dead`

I am trying to use tachyons with simple react based application.
When I run a command in my scripts like this tachyons src/css/index.css > src/index.css --minify
I see this error

/home/edd/work/testrepo/node_modules/tachyons-build-css/node_modules/caniuse-api/node_modules/browserslist/index.js:37
    throw new BrowserslistError(name);
    ^
BrowserslistError: Unknown browser query `dead`

As I understood the issue is connected with cssnano library.

Use `flexbox: 'no-2009'` or postcss-flexbugs-fixes to fix Flexbox issues

See Avoid old CSS flexbox (Google Lighthouse) · Issue #9 · tachyons-css/tachyons-flexbox.

I would suggest either passing the flexbox: 'no-2009' option to autoprefixer in tachyons-css/tachyons-build-css.

Or maybe use luisrudge/postcss-flexbugs-fixes: PostCSS plugin that tries to fix all of flexbug's issues, since the build pipeline is already based on PostCSS (see philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.).

optimization experiment

Hey - I did this as an experiment - http://npm.im/tachyons-build-optimal-css

Allows for class filtering, so unused classes can be stripped out (also allows comment stripping)

Let me know if you want a PR - if so I'll do so, and deprecate the module

Make postcss build pluggable

As discussed in #5 it'd be nice to be able to pass an optional array of additional postcss plugins. This would allow users to use additional plugins if they desire, while keeping the base Tachyons plugins simple.

Perhaps an API like the following:

tachyonsBuildCss('my css', {
  from: 'input.css',
  to: 'output.css',
  plugins: [my(), other(), plugins()]
})

css-mqpacker is deprecated

Hey There!

Thanks so much for the great toolkit. It's teaching me a lot about postcss.

Please excuse me as I'm coming from SASS where everything's just done for you under the hood.

I was trying to understand which plugins tachyon used by default so that I could extend it for a WYSIWYG editor in a CMS theme, and I learned that css-mqpacker is deprecated. I'm not sure why, but I was able to find 'node-css-mqpacker' from the same author here: https://www.npmjs.com/package/node-css-mqpacker

We're using the deprecated package here:

tachyons-build-css/index.js

Line 5 in 55ba9af

const queries = require('css-mqpacker')

Not even sure if it matters.