egoist / style-inject Goto Github PK
View Code? Open in Web Editor NEWInject style tag to document head.
License: MIT License
Inject style tag to document head.
License: MIT License
Hi I think there's a problem with the release.
yarnpkg
CDN source that you've already fixed here in GitHub (three years ogo)yarn add --dev style-inject
gets you this version
https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
This has the issue of ref.insertAt
can be an uncaught inexistant property, which I see you've fixed already in the current GitHub version.
yarn add --dev https://github.com/egoist/style-inject.git
gets you also v0.3.0 but it's source is different;
export default function styleInject(css, { insertAt } = {}) {
if (!css || typeof document === 'undefined') return
So basically yarn add --dev style-inject
or yarn add --dev rollup-plugin-postcss
gets the user an old version of the code which in my case failed Closure Compiler tests (I'll submit another issue about that shortly).
I also checked other repos and they have the same difference.
https://www.jsdelivr.com/package/npm/style-inject
https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz
Would be nice to include option to add attributes such as id
.
I would like to be able to pass options to style-inject
that allows me to place meta tags on the <style>
tags injected into the head.
For example, I could use the CSS Module name like: <style data-meta="MyModule" />
.
This would allow me to add context to the style, and additionally target this specific <style>
tag for updates during development (with things such as hot-reloading).
When trying to use in a TS project, getting an error:
Could not find a declaration file for module 'style-inject'. '/Users/anton/Documents/EasyKnock/git/ek-ui-components/node_modules/style-inject/dist/style-inject.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/style-inject` if it exists or add a new declaration (.d.ts) file containing `declare module 'style-inject';`ts(7016)
tsconfig:
"compilerOptions": {
"jsx": "react",
"lib": ["dom", "esnext"],
"module": "esnext",
"moduleResolution": "node",
"outDir": "dist",
"allowSyntheticDefaultImports": true,
"declaration": true,
"esModuleInterop": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"resolveJsonModule": true,
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true
},
Hi,
Going from 0.1.2 to 0.2.0 made verification of document variable definition disappeared.
if (typeof document === 'undefined') { return returnValue; }
Would it be possible to put it back so my module can work on server-side without throwing an exception?
Thanks
style-inject
is used by rollup-plugin-postcss
and many other packages. When used in these packages there is an issue with insertAt
behavior.
Given the following imports
// A.js
import B from './B';
import styles from './a.css';
...
// B.js
import styles from './b.css'`
...
Without insertAt: 'top'
the resulting injected styles are
<style>
// contents of b.css
</style>
<style>
// contents of a.css
</style>
With insertAt: 'top'
the resulting injected styles are
<style>
// contents of a.css
</style>
<style>
// contents of b.css
</style>
This is incorrect as a's styles were imported after b, so should override the styles from b naturally by being imported second.
What this plugin really needs in an option to preserve the order of stylesheets relative to each other but still insert them at the beginning of the head
The title says it all.
We need an option to hook onto the created stylesheet element, similar to style-loader
option. Correct me if I'm wrong, but right not it isn't possible and the only way is overriding this function, which is used in Rollup PostCSS plugin.
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.