Articles of postcss

stream通过postcss uncss插件的CSS,以最大限度地减less缓冲区的使用?

如果这个问题太宽泛,请让我知道。 我会把它分解成更多的离散片段。 我们遇到了PostCSS uncss插件在处理大型html和css文件时可以处理的限制。 一些由@superflycss项目生成的testing文件几乎是一百万行长的css,随着更多模块的添加,将会变得更长。 这是一个例子 。 无论如何,通过PostCSS uncss,加载整个CSS和html文件,然后执行匹配,我们认为这是造成内存耗尽。 想知道是否有人知道通过loggingstream式传输CSS或HTMLlogging的方法,以便我们可以得到相同的结果: 一个修剪的CSS文件,只包括使用的CSSselect器 源地图 这些是相关的问题链接: https://github.com/giakki/uncss/issues/339 https://github.com/giakki/uncss/issues/319 https://github.com/postcss/postcss/issues/1087

Grunt grunt-postcss Autoprefixer不能正常工作

我已经跳进了一个非盈利的开源项目,并且想要帮助一下,但是我不熟悉Grunt。 我做了一些研究,不知道为什么configuration不起作用。 这是我正在尝试使用的插件。 它允许应用几个后处理器,但我现在只需要Autoprefixer: https : //github.com/nDmitry/grunt-postcss configuration: Gruntfile.js http://pastebin.com/4Ud0sa1W grunt/concurrent.js http://pastebin.com/Satr1wSK grunt/sass.js http://pastebin.com/rc6evWas grunt/watch.js http://pastebin.com/eGBpFSLs 任务得到执行没有问题: laptop:website lextoc$ grunt sass:postcss Running "sass:postcss" (sass) task Done. 但是,CSS文件没有得到所需的供应商前缀,我使用display: flex来检查它是否工作。 原来的项目(我分叉它)可以在这里find: https : //github.com/faforever/website

webpack postcss-loader在传递函数时不工作

我正在从一个webpackconfiguration中repo removed 。 现在当我运行npm run teststart (使用webpack.development.js )或npm run testbuild (使用webpack.production.js )时,postcss加载器stylelint,autoprefixer和postcss-focus似乎不起作用。 但是,如果我将一个数组而不是form()=> []的函数传递给postcss-loader的插件,它确实可行。 所以例如,如果我改变 options: { plugins: () => [require('autoprefixer'), require('postcss-focus')] } 至 options: { plugins: [require('autoprefixer'), require('postcss-focus')] } 在webpack.production.js它的作品。 但在另一个项目中,函数格式正常工作。 试图找出为什么它不在这里工作。

将gatsby项目从css转换为scss,在丢失网格预处理方面存在问题

我正在采用一个使用迷失网格的gatsby starter项目,并从css转换为scss来获得一些收益。 这是启动项目: https : //github.com/wpioneer/gatsby-starter-lumen 从本质上讲,我将项目转换为scss,因为我更喜欢它的结构,并希望从所有的css文件中移走。 现在,我简单地说: 安装了sass-loader , scss和node-sass 将所有的css文件重命名为scss文件 并修改gatsby-node.js到以下内容: var rucksack = require('rucksack-css') var lost = require("lost") var cssnext = require("postcss-cssnext") exports.modifyWebpackConfig = function(config, env) { config.merge({ postcss: [ lost(), rucksack(), cssnext({ browsers: ['>1%', 'last 2 versions'] }) ] }) config.loader('svg', { test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader', }) config.loader('sass', { test: /\.scss$/, […]

为什么我会在Node v5.7.0上得到一个“Promise is not defined。”的错误

我使用autoprefixer postcss和移动到一个新的Linux服务器后,一定是错的,但我不知道这可能是什么。 我收到错误: /home/ec2-user/Enviziion/Muveoo/Server/node_modules/postcss/lib/lazy-result.js:157 this.processing = new Promise(function (resolve, reject) { ^ ReferenceError: Promise is not defined 这是由以下几点触发的 var autoprefixer = require('autoprefixer'); var postCSS = require('postcss'); function prefix(css, res, type, fullPath) { postCSS([autoprefixer]).process(css).then(function(result) { var css = result.css; var length = css.length; res.writeHead(200, { 'Content-Length' : length, 'Content-Type' : type }); res.write(css); res.end(); }); } […]

用postcss观察多个css文件并输出一个bundle.css

我试图找出涉及postcss的工作stream程。 我的需要是在一个文件夹中有css partials,看着他们,并输出一个捆绑的CSS文件。 bundle css文件的顶部必须包含一个base.css文件。 postcss有一个–watch标志,可以观看多个文件,但只能输出多个文件,而不是捆绑的css文件。 我可以使用cat结合所有的文件,并使用标准inputpipe道postcss。 但是我不能从postcss中触发cat命令。 我的文件结构可能是这样的: partials/ |_one.css |_two.css styles/ |_base.css |_bundle.css 我如何使用npm来安排我的脚本部分使用CLI命令来实现我的目标? 我的主要问题是弄清楚如何对构build步骤进行pipe理,而不是一个步骤阻塞下一步。 一个工作stream程示例的链接将是非常好的! 编辑我有一个解决scheme工作,但它是非常不理想的,因为它不能与源代码映射,不能有全局variables,是一个两步的过程。 但我会在这里概述一下,希望有人能提出一个更好的方法。 使用以下结构: build/ |_stylesheet/ |_default.css (final processed css) partials/ |_one.css |_one.htm (html snippet example) |_two.css |_two.htm (html snippet example) styles/ |_base.css |_bundle/ (css files from partial/ that is partly processed) |_one.css |_two.css |_master.css (import rules) 我在package.json有两个步骤。 […]