Comments (11)
Importing in css is fine, but more confusing to recommend, because in order to get the css to be part of your module graph, you need css imported into js.
That is, it's not clear if importing in to css is from special css that already participates in the module graph, or if from the legacy style system: which [the legacy system] is always global, and can't participate in route based (or any kind of) splitting ever
(Docs could always be sure to mention this, however)
from ember-power-select.
@NullVoxPopuli ember-basic-dropdown
and ember-power-select
are now V2 addon (both were released for now as beta v8.0.0-beta.0
). The migration to v2 addon has bring also some braking changes see #1619 & cibernox/ember-basic-dropdown#728
The css is now not anymore auto-imported. It must be manually done like you have described.
CSS import example is present in documentation:
- https://ember-power-select.com/docs/installation
- https://ember-power-select.com/cookbook/bootstrap-theme
- https://ember-power-select.com/cookbook/material-theme
from ember-power-select.
I also stumbled upon the change in v2 when importing css in vanilla css contexts. FWIW, I found it possible to import the css directly into /assets/styles.css like this:
@import 'ember-power-select/vendor/ember-power-select.css';
(It may be a matter of personal taste, but I sometimes find it cleaner to import css directly in css, and not via js.).
from ember-power-select.
There are a lot of options to import the css in the app... but i think we should add only one way in documencation (which is already), because i think that is the recommended way.
Since the file is public everyone can add it like he want. We can block that only by creating a "-private" folder, but if somebody want to import from "-private" he has always the possibility.
Option 1 (recommended):
// app.js or other js file
import 'ember-power-select/styles';
Option 2:
/* assets/styles.css */
@import 'ember-power-select/vendor/ember-power-select.css';
Option 3:
removed
from ember-power-select.
Option 3 should be banned from historical records π
Option 2 in fine for tiny apps.
But only importing in js, or css-that-participates-in-the-module-graph, can you canditionally get the power-select css upon an await import(..)
component/route/whatever.
but i think we should add only one way
This would be ideal, but (un)fortunately we don't have only one way.
Hopefully soon tho!
from ember-power-select.
okay thank you!
I have removed option 3 in my comment π
(before somebody use that :D)...
If i have understand correctly, we should add option 2 also in docs with example from a route and describe, that there is also possible to use in component and controllers... right?
The blueprint adds always this lines in app.js like in your initial comment
from ember-power-select.
If i have understand correctly, we should add option 2 also in docs with example from a route and describe, that there is also possible to use in component and controllers... right?
yeah, exactly.
The blueprint adds always this lines in app.js like in your initial comment
yeah, it's the lazy documentation way.
And depending on your app's build config, you can use
@import 'ember-power-select/styles`
and have it participate in the module graph.
It's a weird balance between trying to document what's possible, and trying not to cover all cases possible.
I like to lean towards over-documenting this sort of stuff, because build behavior is super opaque to folks unfamiliar with how crazy JS build tooling is.
from ember-power-select.
@NullVoxPopuli @johanrd i have added the option in docs... would you like to review before we merge it (see #1627)?
Docs preview: https://deploy-preview-1627--rubber-tapper-eddies-44787.netlify.app/docs/installation
from ember-power-select.
oh, great. Looks good to me.
I learnt something new regarding the module-graph benefits of importing through js, thanks! Regarding the benefits β if i understand it correctly βΒ importing directly to app.js
, won't give any module loading benefits, right? β you would rather need to import 'ember-power-select/styles';
in all the actual components / controllers / routes that are using ember-power-select.
from ember-power-select.
Correct
@mkszepp looks good!
from ember-power-select.
Great! Many thanks for inputs... PR is merged and so i think, that we can also close this issue
from ember-power-select.
Related Issues (20)
- Update ember to v4.12 & allow `ember-concurrency 3.x` as dependency
- Embroider doesn't recognize helper? HOT 1
- Types don't include Blocks or Element HOT 1
- Precompiled css doesn't contain latest changes HOT 1
- Breaking change, needs major. HOT 1
- More ergonomic customization for selected item in trigger (:named blocks) HOT 2
- website down HOT 1
- Start fails when using ember-truth-helpers 4.x HOT 3
- TS2345 in a fresh ember app
- TS not compiled away on publish? HOT 1
- Whole repo published to npm HOT 1
- Help with Ember version 5 , error on element helper HOT 2
- V2 addon error: ember-power-select is trying to import from #embroider_compat but that is not one of its explicit dependencies HOT 3
- V2 addon error: Module not found: Error: Can't resolve 'ember-power-select/test-support' HOT 4
- Unable to highlight a specific object option HOT 6
- `selected` argument to `PowerSelect` component doesn't work when `0` is passed as value
- Can't resolve 'ember-power-select/helpers/ember-power-select-is-selected & `styles.js` is missing HOT 10
- Dropdown opens at wrong place (location of <BasicDropdownWormhole />?) with version 8.0.1 HOT 6
- Documentation unreachable
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 ember-power-select.