Comments (9)
Works perfectly now! Many thanks!
from vanilla-picker.
Right... To avoid a breaking change, how about we wrap the injection in a try/catch
and output a warning to the console if it fails?
from vanilla-picker.
It does not throw an exception. In particular, appending the style-node to the DOM is still successful, it just won't have any effect.
Wrapping the injection inside if (!options.externalCss) { ... }
wouldn't be a breaking change, as long as externalCss
defaults to false
.
from vanilla-picker.
Ok, so in your case this is more of an annoyance, as you can add an external CSS file and everything works?
The breaking change is: Right now, the <style>
element is injected when the script is executed. It doesn't wait for a picker to be created (where we have the options
object). Changing that may break how someone uses the generated style element.
Maybe a fair trade-off would be to create the element (thus keeping it accessible in Picker.StyleElement
), but only inject it once the first picker is created...
from vanilla-picker.
Yes, the injection part is just an annoyance, since it doesn't prevent the plugin from working correctly. However, it's quite annoying to constantly have an error in the dev console. Further, the npm package currently doesn't provide a compiled version of the styles, e.g. a CSS file. This makes it a bit harder to pull in the required styles, if for example I do not already use SCSS in my project.
Delaying the injection until first use would be of marginal benefit. I would still get an error in the end. If compatibility is an issue, perhaps providing an alternate entry point is a solution, e.g. import Picker from 'vanilla-picker/no-styles';
I also found this discussion about detecting the CSP at runtime, which might be interesting.
from vanilla-picker.
Thanks for your input on this!
I think the solution will be to build an additional pair of files: vanilla-picker.csp.js
and .csp.css
. Then, if I understand this question correctly, an extra entry point can be added in package.json
for easy importing.
from vanilla-picker.
Could you check if the new v2.12.0
works for you?
import Picker from 'vanilla-picker/csp';
The CSS is in dist/vanilla-picker.csp.css
.
from vanilla-picker.
Hi, thanks for the update. I can't seem to import the CSS file (I'm using webpack 5.52.1).
import 'vanilla-picker/dist/vanilla-picker.csp.css';
Output:
ERROR in ./js/backend/admin/colorPicker.js 4:0-52
Module not found: Error: Package path ./dist/vanilla-picker.csp.css is not exported from package /path/to/project/node_modules/vanilla-picker (see exports field in /path/to/project/node_modules/vanilla-picker/package.json)
Apparently it's not possible to import files that weren't explicitly exported in package.json.
This seems to be the only issue though, if I manually copy vanilla-picker.csp.css
into the project and include it, everything works fine, with no CSP errors.
from vanilla-picker.
Ok, we're getting closer :)
Try v2.12.1
from vanilla-picker.
Related Issues (20)
- How to set custom CSS? HOT 2
- Best way to add picker to page body? HOT 11
- Auto-Placement 2 HOT 5
- alpha option cannot be changed
- How to clear color value? HOT 1
- TypeScript declaration HOT 4
- wrong style HOT 3
- Picker appears to be semi-transparent and can see and interact with elements underneath HOT 1
- Support for #AARRGGBB vs #RRGGBBAA HOT 6
- How to use vanilla-picker within forms? HOT 2
- Make the *picker_selector* keyboard accessible HOT 2
- Option to pass window object to avoid globals HOT 1
- [Enhancement request] Cancel button to fire an onCancel event HOT 2
- Prevent Hide the picker when click HOT 2
- Disabling alpha in options does not remove it from the color string HOT 1
- 5 elements in template of picker are not need but required HOT 1
- Support for gradients HOT 1
- Please make parent click handling optional. HOT 2
- Width of picker_alpha and height of picker_hue HOT 2
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 vanilla-picker.