postcss / postcss-import Goto Github PK
View Code? Open in Web Editor NEWPostCSS plugin to inline at-import rules content
License: MIT License
PostCSS plugin to inline at-import rules content
License: MIT License
hi.
is it possible to have this http://lesscss.org/features/#import-options-reference functionality?
for example I want to import vars.css
file that contains only vars declarations to 100 other css files without inlining but using it as a reference to resolve vars.
Hi!
I'm also trying to write import plugin and like to discuss if we can do it together and if yes how to do better do it.
The version that I'm writing right now will have following differences:
Import example.
This way all files will be imported:
@import "local1.css";
@import "http://cdn.google.com/external.css";
@import "local2.css";
This way import will be ignored by browser because @import can only be in the beginning of the file or after @charset of other @import ( see http://www.w3.org/TR/CSS2/syndata.html#at-rules ):
.local1 { color: red; }
@import "http://cdn.google.com/external.css";
.local2 { color: blue; }
I already wrote couple of helper plugins and libs that I'm planing to use with it:
How do you think, can we join out projects or is it better leave them separated?
Hello,
there seems to be not much missing for semantic-ui to be built using postcss...
this seems to be a problem though:
https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/elements/button.less#L19
thanks for any advice on resolving this.
@import 'src/css/_foo'
:root {
--color: #a12;
}
Omiting the ; make the root node to be part of the import statement in the AST.
@ai doesn't think of a simpler way to handle that in postcss itself because the parser is very flexible (which is a good thing).
So we might here throw an error or a message via postcss message api.
web_modules are like node_modules, but local.
webpack support (created?) it.
I "just" need to add it into the resolved dir & (and add tests)
Using Sass it's possible to import using comma separated files, e.g:
@import
'module1.pcss',
'module2.pcss';
This would be great to have available from within this plugin as it tidies up your main stylesheet file.
This file is becoming huge. All functions accept too many parameters, it's going to be a pain to maintain if we don't do something :)
I am working off this cssnext
version https://github.com/littlebits/cssnext/tree/feature/add-postcss-url which is bleeding edge.
I am trying to use it in my project and am noticing some strange behaviour that I'm pretty sure represents a breaking deviation from before. Namely the package normalize.css
(yes, .css
is literally in the package name) is causing all sorts of trouble for cssnext
. I assume its due to postcss-import
though honestly I just don't know yet.
Here is a screenshot of the error in my project dep (I've opened an editor into my littlebits-ui
dep:
When I uncomment that line, everything works but when it is active then cssnext
fails with almost no help:
ERROR in ./~/css-loader!./~/cssnext-loader!./lib/index.css
TypeError: Cannot call method 'indexOf' of undefined
Other @import
s work just fine. For instance if I move up one dependency closer to my project there is this index.css
file with:
/*@import 'suitcss-base';*/
@import 'suitcss-components-button';
@import 'suitcss-utils-text';
As you can see I can import other suitcss
packages just fine.
@necolas @MoOx Let me know any ideas you have about this.
@sokra How can I get a more useful error message from the build, even a stack trace please!
When importing a file that doesn't exist, postcss processing seems to abort suddenly (i'm using gulp-postcss
; I get Starting 'build:postcss'
but never a Finished
, and my dest
files aren't created).
It seems like it should either:
I'm using postcss in a Webpack project using the postcss-loader. I'm looking to store my global vars in a single index.css
file and pull that in where needed. As soon as I add the postcss-import
plugin and an import statement I get the following error:
ERROR in ./~/css-loader?modules&localIdentName=[name]--[local]_[hash:base64:5]!./~/postcss-loader!./src/js/website.com/components/Button/Button.css
Module build failed: TypeError: Cannot read property 'before' of undefined
at Stringifier.raw (/Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/stringifier.js:121:30)
at Stringifier.body (/Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/stringifier.js:93:31)
at Stringifier.root (/Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/stringifier.js:37:14)
at Stringifier.stringify (/Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/stringifier.js:33:24)
at _default.stringify (/Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/stringify.js:14:9)
at _default.generateString (/Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/map-generator.js:231:14)
at _default.generateMap (/Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/map-generator.js:189:14)
at _default.generate (/Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/map-generator.js:271:25)
at LazyResult.stringify (/Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:221:24)
at /Users/username/Sites/website/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:158:27
at lib$es6$promise$$internal$$tryCatch (/Users/username/Sites/website/node_modules/autoprefixer-core/node_modules/postcss/node_modules/es6-promise/dist/es6-promise.js:331:16)
at lib$es6$promise$$internal$$invokeCallback (/Users/username/Sites/website/node_modules/autoprefixer-core/node_modules/postcss/node_modules/es6-promise/dist/es6-promise.js:343:17)
at /Users/username/Sites/website/node_modules/autoprefixer-core/node_modules/postcss/node_modules/es6-promise/dist/es6-promise.js:891:13
at Object.lib$es6$promise$asap$$flush [as _onImmediate] (/Users/username/Sites/website/node_modules/autoprefixer-core/node_modules/postcss/node_modules/es6-promise/dist/es6-promise.js:125:9)
at processImmediate [as _immediateCallback] (timers.js:345:15)
@ ./src/js/website.com/components/Button/Button.css 4:14-198
This is my loader:
{
test: /\.(css)$/,
loader: 'style-loader!css-loader?modules&localIdentName=[name]--[local]_[hash:base64:5]!postcss-loader'
}
… and the postcss config:
postcss: function () {
return [
require('postcss-import'),
require('postcss-custom-properties'),
require('postcss-mixins')
];
}
Any ideas?
PostCSS 4.1 brings async support, so we can make postcss-import
much faster
See #1 (comment)
In Sass you can import files with underscores without adding underscores in the code- When the file name is actually _my-file.scss :
@import "my-file.scss"
// or
@import "my-file"
Unless I'm missing something it would be handy to add this. Having loads of underscores in the names makes it ugly to read and its also useful to have a prefix that's ignored so we can exclude the files from watch tasks etc
Thanks you
whenever I try to install through npm I get this error while all other postcss plugins does not asks for sudo
error: EACCES, mkdir '/Users/francis.thibault/.npm/glob/5.0.14'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES, mkdir '/Users/francis.thibault/.npm/glob/5.0.14']...
Hello!
I try to combine postcss-import and gulp-sourcemaps plugins and I encounter a problem. I created the repository with the example code https://github.com/vkrol/imports-sourcemap
The problem is in the wrong "sources" entry in bundle.css.map https://github.com/vkrol/imports-sourcemap/blob/master/build/bundle.css.map
Please, help me. How i can fix this?
Thanks.
I've a main css file where I do:
@import "module-a";
@import "module-b";
Both modules have an index.css
with @import "./src/styles/index.css";
If I compile, it only imports the first module, not the second. For instance, if I switch from a
to b
like that:
@import "module-b";
@import "module-a";
module-b
will be imported but not module-a
.
To fix it, I have to do that:
@import "module-a/src/styles/index.css";
@import "module-b/src/styles/index.css";
I'm inspecting this bug but if you have already an idea why, I'll be glad to hear.
Hi, I just noticed that [email protected]
does not longer exist in the NPM registry.
I suspect it is because you unpublished them from the registry.
Please don't do that, because it might break some workflows (i.e. npm shrinkwrap
).
Perhaps you can use npm deprecate
instead?
Seems like postcss.parse
broke a AST in PostCSS 5.0 (because your plugin depends on PostCSS 4.x and uses 4.x parser, which generates 4.x nodes).
Can you update PostCSS in dependencies?
/cc @MoOx
Using [email protected]
and [email protected]
, indentation is no longer preserved. It used to work with [email protected]
and [email protected]
.
It seems that decl
no longer contains before
, after
and between
properties.
There is nice idea of rework-npm module. I think we need same. Also some Rework users will think about move to PostCSS if we made it.
Should we integrate it to postcss-import
or we can use @import
support from postcss-import
in some postcss-npm
? Or postcss-npm
should some kind of source of postcss-import
?
It looks to me like the first arg of the onImport
callback is the file that's doing the importing and every subsequent arg is a file that it imports. Is that correct? If so, it's definitely not working properly. I have 3 files:
/* global.css */
@import foo;
/* page1.css */
@import foo;
@import bar;
/* page2.css */
@import bar;
@import foo;
With the following configuration:
require('postcss-import')({
path: 'styles/blocks',
onImport: function(files) {
console.log('========== import ==========');
files.forEach(function(file) {
gutil.log('import:', file);
});
}
}),
And here's what I get in the shell:
13:53 $gulp styles
[13:54:12] Using gulpfile z:\gulpfile.js
[13:54:12] Starting 'styles'...
[13:54:12] Finished 'styles' after 37 ms
========== import ===========
[13:54:12] import: z:\styles\sheets\global\global.css
[13:54:12] import: z:\styles\blocks\block-foo.css
========== import ===========
[13:54:12] import: z:\styles\sheets\global\global.css
[13:54:12] import: z:\styles\blocks\block-foo.css
[13:54:12] import: z:\styles\blocks\block-bar.css
========== import ===========
[13:54:12] import: z:\styles\sheets\global\global.css
[13:54:12] import: z:\styles\blocks\block-bar.css
[13:54:12] import: z:\styles\blocks\block-foo.css
Notice how global.css is mentioned 3 times here, when it should have mentioned page1.css and page2.css.
Any ideas?
If I have one or more @import
pointing to an external URL (e.g. @import url("//hello.myfonts.net/count/");
) and nothing else, postcss-import doesn't inline them. 👍
However, if the stylesheet also has an @import
pointing to a local stylesheet for inlining, I get the following:
/Projects/postcss-import-test/node_modules/postcss/lib/node.js:284
if (p != root && p.parent && p.parent == root) {
^
TypeError: Cannot read property 'parent' of undefined
at /Projects/postcss-import-test/node_modules/postcss/lib/node.js:284:35
at /Projects/postcss-import-test/node_modules/postcss/lib/container.js:116:26
at Root.each (/Projects/postcss-import-test/node_modules/postcss/lib/container.js:94:22)
at Root.eachInside (/Projects/postcss-import-test/node_modules/postcss/lib/container.js:115:21)
at Declaration.style (/Projects/postcss-import-test/node_modules/postcss/lib/node.js:282:18)
at Declaration.style (/Projects/postcss-import-test/node_modules/postcss/lib/node.js:362:35)
at Declaration.stringify (/Projects/postcss-import-test/node_modules/postcss/lib/declaration.js:19:27)
at Rule.stringifyContent (/Projects/postcss-import-test/node_modules/postcss/lib/container.js:34:27)
at Rule.stringifyBlock (/Projects/postcss-import-test/node_modules/postcss/lib/container.js:49:18)
at Rule.stringify (/Projects/postcss-import-test/node_modules/postcss/lib/rule.js:23:14)
Also, if the stylesheet to be inlined only contains an empty declaration block (e.g. p {}
), I don't get the error but do see:
@import url("http://hello.myfonts.net/count/");
undefinedp{}
Looks like something is creeping in with parsing, prepending that undefined
, but haven't been able to get further than that.
Noticed this when bumping a project from [email protected]
and [email protected]
to [email protected]
and [email protected]
. Works as expected (ie. remote stylesheet @import
ignored, local inlined) with the older versions.
Test case at this gist.
Ever since 5bbe120 was merged in, I'm seeing that the plugin options no longer get passed in.
I'm using cssnext and I dove into cssnext/node_modules/postcss-import/index.js
and added the following to the top of the AtImport
function block to see what was happening:
function AtImport(options) {
console.log("options:", options)
process.exit()
And I get the following in my shell:
options: undefined
If, however, I pull index.js from the previous commit, c900ccc, I get the following:
options: { path: 'src/app/styles/blocks',
plugins:
[ { [Function: creator] postcss: [Object] },
{ [Function]
postcssPlugin: 'postcss-bem-linter',
postcssVersion: '4.1.11' } ] }
It must have something to do with replacing this:
/**
* Expose the plugin.
*/
module.exports = AtImport
with this:
module.exports = postcss.plugin(
"postcss-import",
AtImport
)
But I'm not sure how that broke things.
Never used @charset
at-rules myself and not really understand why somebody may want to make css files with different @charset
values (importing css from external libraries perhaps?), but specificaition allows it.
Good idea will probably to do the following: If any of imported files have @charset
, then convert file to UTF-8 from this charset and remove @charset
at-rule.
But it is not really a urgent feature, it can be done sometimes later.
http://www.w3.org/TR/css-cascade-4/#at-import
@import [ <url> | <string> ] [ supports( <supports-condition> ) ]? <media-query-list>? ;
@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
...
}
Let's assume the following project structure:
./gulpfile.js
./css/main.css
./css/lists.css
main.css
contains the following line: @import "lists.css";
This currently doesn't work without passing { path: ['css'] }
to postcss-import. This is probably related to #7, but I feel like relative imports should just work despite of what postcss-import does after it decided that it's not a relative import (e.g., look for node_modules/lists.css/
or something like that).
brunch seems to returns option as immutable object and this is creating an issue here https://github.com/postcss/postcss-import/blob/master/index.js#L38-L40
poke @lionelB
It would be great if postcss-import natively supported import of bower packages the same way it supports npm modules.
For example, it seems more logic to me to have normalize.css installed through Bower than through npm.
Thanks!
Should ignore hash url.
@import url("#");
If the processed file with hash url we get an error:
/Users/blond/projects/postcss-import/node_modules/postcss-message-helpers/index.js:79
throw err
^
Error: <css input>:15:1: Failed to find '#' from /Users/blond/projects/postcss-import
in [
/Users/blond/projects/postcss-import/test/fixtures/imports
]
at <css input>:15:1
at resolveFilename (/Users/blond/projects/postcss-import/index.js:326:11)
at readAtImport (/Users/blond/projects/postcss-import/index.js:149:26)
at transformAtImport (/Users/blond/projects/postcss-import/index.js:87:7)
at Object.tryCatch [as try] (/Users/blond/projects/postcss-import/node_modules/postcss-message-helpers/index.js:53:12)
at /Users/blond/projects/postcss-import/index.js:86:16
at Array.forEach (native)
at parseStyles (/Users/blond/projects/postcss-import/index.js:85:11)
at /Users/blond/projects/postcss-import/index.js:67:5
at PostCSS.process (/Users/blond/projects/postcss-import/node_modules/postcss/lib/postcss.js:79:28)
at compareFixtures (/Users/blond/projects/postcss-import/test/index.js:22:6)
I'd like to preface this by saying I'm having a hard time isolating this bug.
I have an ember-cli app using Postcss with a number of plugins. The import plugin works fine for finding node modules, like normalize.css, and relative files (ie. "components/header"). However, when I enable globbing in the options object and try a number of syntaxes:
@import "components/*
@import "components/**/*
@import "components/*.css
@import "components/**/*.css
It works fine on first load, but upon saving a file and having livereload kick off a new build of the application the globbed components aren't included in the build, so in a way it fails silently. I initially thought it had to do with my settings or config, but then it shouldn't even work for the first load.
I was hoping to get some help in isolating this behaviour because I think this type of setup is likely fairly common.
Would be nice to get support for that, should be pretty simple to swap out resolve
for browser-resolve
Convenient to run a linter on the fly. No extra processing.
Ideas:
What about adding feature like glob @import "css/**/*.css"
, @import "css/dir/*.css"
?
This error occurs multiple times, and I don't understand real issue here.
First, your README example doesn't work. If I use from
option, I get:
TypeError: Property '0' of object [object Object],function AtImport(options) {
// blah blah blah
} is not a function
If I don't use the from
option, I get the Failed to find <file> from <path>
error.
If I use the path
option, it used to work with 3.2.0 version, but no longer work with 4.0.0. Still the Failed to find <file> from <path>
error.
Any thought ?
Hey there.
Has anyone gotten auto-reload (ReactHotloader) working using on imported css files using the postcss-import plugin? The problem I'm having is that any changes made in css files that get imported by a main css file do not to directly show up on screen.
I'd like to figure out whether this is an issue caused by my own setup, the import-plugin, ReactHotLoader, and whether there is a good solution for this.
I've created an example case in the following repo: https://github.com/0nn0/hotloader-postcss-imports/
You can produce the problem using the following steps.
npm install
npm run start
http://localhost:3000/
If I do not use the postcss-import plugin, then none of the postcss-plugins set in the webpack config will be applied on any of the to be imported css files, in this case components.css.
Any help would be much appreciated.
Hi!
I've been using rework and rework-npm like so:
@import "icon";
icon
is a local package in this dir, structured as such:
app/styles/icon
package.json
index.css
lib/icon.css
package.json
looks like this:
{
"name": "icon",
"description": "Symbols that represent things",
"version": "0.1.0",
"style": "index.css",
"main": "index.css",
"files": [
"index.css"
]
}
and my styles task looks like this:
.pipe(postcss([
inline({
path: ['app/styles/']
}),
but I'm getting this error:
[11:51:12] { errno: 28,
code: 'EISDIR',
syscall: 'read',
name: 'Error',
message: 'EISDIR, illegal operation on a directory',
stack: 'Error: EISDIR, illegal operation on a directory\n at Object.fs.readSync (fs.js:476:19)\n at Object.fs.readFileSync (fs.js:310:28)\n at readFile (/Users/vince/Projects/leveleleven/scorecard/client/node_modules/postcss-import/index.js:271:23)\n at insertAtImportContent (/Users/vince/Projects/leveleleven/scorecard/client/node_modules/postcss-import/index.js:156:21)\n at readAtImport (/Users/vince/Projects/leveleleven/scorecard/client/node_modules/postcss-import/index.js:133:3)\n at checkAtRule (/Users/vince/Projects/leveleleven/scorecard/client/node_modules/postcss-import/index.js:66:5)\n at /Users/vince/Projects/leveleleven/scorecard/client/node_modules/postcss/lib/container.js:233:26\n at /Users/vince/Projects/leveleleven/scorecard/client/node_modules/postcss/lib/container.js:157:24\n at Root._classProps.each.value (/Users/vince/Projects/leveleleven/scorecard/client/node_modules/postcss/lib/container.js:131:20)\n at Root._classProps.eachInside.value (/Users/vince/Projects/leveleleven/scorecard/client/node_modules/postcss/lib/container.js:156:21)',
showStack: false,
showProperties: true,
plugin: 'gulp-postcss' }
[
normal npm modules are working correctly. Any idea if I'm doing something wrong here?
available only if "to" option has been provided
I use postcss-import with postcss-cli as this:
postcss -u postcss-import ./index.css > test/bundle.css
My index.css
:
@import 'other.css';
My other.css
:
a {}
In terminal I get:
> postcss -u postcss-import ./index.css > test/bundle.css
Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Node#before is deprecated. Use Node#raws.before
[TypeError: Cannot read property 'before' of undefined]
...
Versions:
$ npm list postcss
[email protected] c:\path\to\xxx
├─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
└── [email protected]
Not sure whether it is postcss-cli or postcss-import issue.
I don't really know the problem, but let's take 2 files:
/*file 1*/
@import 'file2.css';
.file1 {}
/*file 2*/
.file2--1 {}
.file2--2 {}
And add a console.log(styles.nodes[1].parent)
on line index.js:67
.
When using [email protected]
, you get 3 nodes in parent
, while with [email protected]
, you only get 2 nodes, only those from file2.css
. I checked your modifications, but my brain doesn't find where the problem is.
And this breaks some tests when using postcss-import with other modules.
This is probably a misunderstanding on my part of how this works, but im having a few issues, where the modifications made by postcss to my files stop working once I put that code into an import file.
For example, im using postcss-map
to create maps, and have this on my main css file:
header{
background: map(colors, header, bg);
}
However once I pull that code into a partial file than I later import it stops working, and the text is outputted without any modification, meaning it won't replace that map call by the corresponding value.
My gulp file looks like this:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var nestedcss = require('postcss-nested');
var simplevars = require('postcss-simple-vars');
var map = require('postcss-map');
var atImport = require('postcss-import');
var autoprefixer = require('autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var config = require('../config').markup;
var opts = {
basePath: 'src/settings/',
maps: [ 'colors.yml', 'typography.yml' ]
};
gulp.task('css', function () {
var processors = [
autoprefixer({browsers: ['last 1 version', 'ie 10']}),
map(opts),
nestedcss,
simplevars,
atImport
];
return gulp.src('./src/css/main.css')
.pipe( plumber() )
.pipe( sourcemaps.init() )
.pipe( postcss(processors) )
.pipe( sourcemaps.write('.') )
.pipe( gulp.dest('build/') )
.pipe( browserSync.stream({match: "**/*.css"}) );
});
Any tips?
as import uses its own filesystem, webpack needs to get a dependency map to watch the right files for the development mode
it then would be great to get a dependency map from this plugin
Currently, if a file contains the same content as another, it's skipped. This can fail in cases like this:
/* main.css */
@import "foo/index.css";
@import "bar/index.css";
/* both foo/index.css and bar/index.css has this content */
@import "baz/index.css";
This causes bar/baz/index.css
not being imported.
With this CSS:
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);
The error occurs on first.before = "\n\n" + first.before
from index.js:112
Same error using postcss-import v4 with postcss v3.
Related: iamvdo/pleeease#40
I get the following error:
/Users/nullstyle/src/tmp/busted/node_modules/postcss-import/node_modules/postcss-message-helpers/index.js:79
throw err
^
TypeError: <css input>:1:1: Cannot call method 'map' of undefined
at <css input>:1:1
at Root.Container.normalize (/Users/nullstyle/src/tmp/busted/node_modules/postcss/lib/container.js:451:25)
at Root.normalize (/Users/nullstyle/src/tmp/busted/node_modules/postcss/lib/root.js:44:45)
at Root.Container.insertBefore (/Users/nullstyle/src/tmp/busted/node_modules/postcss/lib/container.js:306:20)
at insertRules (/Users/nullstyle/src/tmp/busted/node_modules/postcss-import/index.js:217:17)
at readImportedContent (/Users/nullstyle/src/tmp/busted/node_modules/postcss-import/index.js:185:3)
at readAtImport (/Users/nullstyle/src/tmp/busted/node_modules/postcss-import/index.js:150:3)
at transformAtImport (/Users/nullstyle/src/tmp/busted/node_modules/postcss-import/index.js:86:7)
at Object.tryCatch [as try] (/Users/nullstyle/src/tmp/busted/node_modules/postcss-import/node_modules/postcss-message-helpers/index.js:53:12)
at checkAtRule (/Users/nullstyle/src/tmp/busted/node_modules/postcss-import/index.js:85:16)
at /Users/nullstyle/src/tmp/busted/node_modules/postcss/lib/container.js:218:22
I was currently on node 10 and trying to use the latest version, which doesn't work due to no native Promise support. The package.json should note that node 12 is a dependency via the engines property so npm installs on node 10 will throw a warning.
I have question about using the postcss-import plugin with combination with simple vars plugin.
I have a set of files which I want to import to a main file. Here's an example structure.
// variables.css
$blue: #056ef0;
$foo: #ff00ff;
// fileone.css
address {
color: $foo;
}
//filetwo.css
p {
color: $blue;
}
I was expecting the output to parse the variables in fileone.css
and filetwo.css
and generate the end file like:
address {
color: #ff00ff;
}
p {
color: #056ef0;
}
but what i get in the end is:
address {
color: $foo;
}
p {
color: $blue;
}
So my variables are being ignore. My gulpfile looks like this:
var postcss = require('gulp-postcss'),
gulp = require('gulp'),
autoprefixer = require('autoprefixer-core'),
mqpacker = require('css-mqpacker'),
csswring = require('csswring'),
atImport = require('postcss-import'),
mixins = require('postcss-mixins'),
vars = require('postcss-simple-vars'),
nested = require('postcss-nested');
gulp.task('css', function () {
var processors = [
mixins,
vars,
nested,
atImport,
autoprefixer({browsers: ['last 4 version']}),
mqpacker,
// csswring
];
return gulp.src('./assets/src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./assets/dest'));
});
gulp.task('default', [
'css'
]);
Can anyone point me to the right direction as to how to get my variables to be picked up and parsed by the import plugin? Any examples would be appreciated.
I want to use postcss-import
with plugin-postcss
(jspm/SystemJS plugin). But since postcss-import
uses fs
and resolve
packages/calls it isn't compatible when trying to run it client side in the browser.
I am not sure on the best way to solve this other than using fetch
and inlining when the promise resolves.
Related: I opened geelen/plugin-postcss#4 which will add the proper processing from
option for nice path resolves.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.