Comments (12)
that will do, was next on my to-do list
from rollup-plugin-postcss.
Fixed in v1.0.5
from rollup-plugin-postcss.
cc @lmihaidaniel maybe add styleInject: false
to fix this?
from rollup-plugin-postcss.
Check out inject option in v1.0
from rollup-plugin-postcss.
Hi @egoist and @lmihaidaniel,
I tried to add the inject: false
option, but I still get the __$$styleInject
function added to my output code.
This is the configuration that I'm using:
//...
plugins: [
postcss({
inject: false,
plugins: [
inlineSvg,
autoprefixer({browsers: 'last 2 versions'}),
],
}),
and this is the output code generated:
function __$$styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css) { return }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = "[...]";
__$$styleInject(css);
Ideally, I'd just like to get rid of the __$$styleInject
function definition and the __$$styleInject(css);
call completely, keeping only var css = ...
.
Would that be possible?
EDIT: looking at the source code, it looks like the inferOption(option, defaultValue)
function may not behave as expected: if the value of option
is false
(which is what I'm setting for the inject
option), then its value is set to {}
(see https://github.com/egoist/rollup-plugin-postcss/blob/master/src/index.js#L15)
from rollup-plugin-postcss.
It works now — thank you!
from rollup-plugin-postcss.
Could you please update README to mention this behavior?
from rollup-plugin-postcss.
@nikolay-borzov what needs To be updated? it's already in the options section.
from rollup-plugin-postcss.
Right, but it doesn't say that setting inject: false
excludes styleInject
and keeps varaible with CSS string
from rollup-plugin-postcss.
It will always export a variable with the CSS string unless extract: true
, now mentioned it in usage
: https://github.com/egoist/rollup-plugin-postcss#usage
from rollup-plugin-postcss.
Thanks!
from rollup-plugin-postcss.
Is there a way to get hold of the generated styles when modules: true
? Currently, it only exposes the object with class names; I'd like the actual CSS too. If you set inject: false
and modules: true
, the CSS gets lost and is never bundled.
from rollup-plugin-postcss.
Related Issues (20)
- postcss/lib/processor.es6:139:15
- Not working with scss modules including inline comments
- React npm packages using rollup not working with srr or nextjs? HOT 5
- Usage of "~" sign in imports
- [scss] Sources path in extracted "*.map.css" file is not correct - hierarchy of folders is missed. HOT 1
- Error thrown "@use rules must be written before any other rules." HOT 1
- No option to generate moduler css along with one single css which will load separately into dom
- Question: Is there a way to add attributes to the <style> tag generated? HOT 1
- Customize `less` instance
- Is it possible to set stylesheet order?
- On watch mode generated CSS sometimes is prepended when using multiple CSS files
- Sourcemap file points to the compiled scss when its setting is `true`
- Bundle webcomponent.js with webcomponent.css
- 编译css文件失败 HOT 3
- How to use only dart(sass) without node-sass
- Nextjs support: The server side rendering of components is making it unstyled. HOT 3
- Can't use mjs config files HOT 2
- Move to `postcss-load-config` 5.0
- Cannot convert deep syntax in Vue HOT 2
- ES module support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rollup-plugin-postcss.