Code Monkey home page Code Monkey logo

hexo-renderer-postcss's Introduction

hexo-renderer-postcss2

A Hexo plugin for rendering PostCSS

Install

$ npm install hexo-renderer-postcss2 --save

Options

You can create .postcssrc.js:

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['last 4 version']
    }
  }
}

hexo-renderer-postcss's People

Contributors

chuangker avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

hexo-renderer-postcss's Issues

Do you have any advice for using this with tailwind

the preferred way to use tailwind seems to be with postcss which is what led to your plugin

https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss

I tried changing your code to read

"use strict";

var postcss = require("postcss");
var postcssrc = require("postcss-load-config");
var atImport = require("postcss-import");

console.log("postcss2 registering");

module.exports = function(data) {
    console.log("postcssrc", data);
    return postcssrc()
        .then(({ plugins, options }) => {
            console.log("tailwind", plugins, options);
            return postcss(plugins)
                .use(atImport())
                .process(data.text, options);
        })
        .then(result => {
            console.log("tailwind 2", result);
            return result.css;
        });
};

This is converting @import "tailwindcss/base"; in my css files to @tailwind base but I cant seem to get tailwind applied to that with:

module.exports = {
    from: undefined,
    plugins: {
        tailwindcss: require("tailwindcss")
    }
};

or

module.exports = {
    from: undefined,
    plugins: [require("tailwindcss")]
};

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.