Gathering detailed insights and metrics for ember-css-modules-active-route
Gathering detailed insights and metrics for ember-css-modules-active-route
`:app-root` & `:document-root` selectors to apply styles to the root element, when a route is active.
Installations
npm install ember-css-modules-active-routeDeveloper Guide
BETA
Typescript
No
Module System
N/A
Min. Node Version
8.* || >= 10.*
Releases
8
Languages
4
TypeScript
JavaScript
HTML
CSS
TypeScript (57.26%)
JavaScript (30.76%)
HTML (10.19%)
CSS (1.78%)
Developer
buschtoens
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
NOASSERTION License
9 Stars
143 Commits
2 Watchers
25 Branches
2 Contributors
Updated on Jul 01, 2025
Maintainers
1
Package Meta Information
Latest Version
0.4.2
Package Id
ember-css-modules-active-route@0.4.2
Unpacked Size
25.95 kB
Size
8.63 kB
File Count
39
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
36
@clark/eslint-config-ember@clark/eslint-config-ember-typescript@clark/eslint-config-node@ember/optional-features@types/ember@types/ember-qunit@types/ember-resolver@types/ember__test-helpers@types/qunit@types/rsvpbroccoli-asset-revdummy-engineember-cliember-cli-dependency-checkerember-cli-htmlbarsember-cli-htmlbars-inline-precompileember-cli-inject-live-reloadember-cli-sriember-cli-typescript-blueprintsember-cli-uglifyember-css-modulesember-disable-prototype-extensionsember-enginesember-export-application-globalember-load-initializersember-maybe-import-regeneratorember-qunitember-resolverember-sourceember-source-channel-urlember-template-lintember-tryeslintloader.jsqunit-domtypescript
ember-css-modules-active-route
:app-root and :document-root selectors to apply styles to the root element,
when a route is active.
Installation
ember install ember-css-modules-active-route ember-css-modules
This is a plugin for ember-css-modules, so you need to
have it installed as well.
Usage
:app-root: Maps to the root element of your application. Usually<body>.:document-root: Maps to thedocumentElement/:root, which is the<html>element.
Example
1Router.map(function() { 2 this.route('foo', function() { 3 this.route('bar'); 4 }); 5 this.route('qux'); 6});
1/* app/foo/styles.css */ 2 3:app-root { 4 background: green; 5}
1/* app/foo/index/styles.css */ 2 3:app-root { 4 background: red; 5}
When the user enters the foo route, the :app-root pseudo-selector will be
applied to the app's rootElement (<body>). The background of the page will
be red, as foo.index overrides foo.
When the user navigates to foo.bar, the background will turn green, as the
user has left the foo.index route and the override no longer takes effect.
When the user navigates to qux, the background will become transparent again,
as no route styles are active any more.
Combining Selectors
You can also combine the :app-root & :document-root selectors with other
regular selectors. For instance, instead of just using :document-root, which
targets the :root element (<html>), you can target child elements instead:
1:document-root :global(.some-cookie-banner) { 2 display: none; 3}
In this example, <div class="some-cookie-banner"> is inserted by the backend
and would be hidden, while the user is on a certain route.
Specificity
CSS Specificity can be a tricky thing. This addon tries to make everything work out of the box. For every level of nesting, the selector specificity will be increased automatically. This way, overrides in child routes actually override declarations in parent routes, without the source order being relevant.
You can also manually set the specificity, like so:
1:app-root(3) { 2 background: red; 3} 4 5:app-root(2) { 6 background: green; 7}
The background will be red, as 3 is a higher specificity than 2.
How does it work?
The :app-root / :app-root(n) and :document-root / :document-root(n)
selectors are replaced with "magic" class name selectors by
lib/route-plugin.js. These selectors are repeated n
times to raise them to the necessary specificity level.
n can either be specified explicitly as :app-root(n), or when used as
:app-root will be derived from the depth of route nesting by counting the /
in the file path of the respective styles.css. This ensures that rules in
nested child routes override rules from their parent routes.
1:app-root { 2 background: yellow; 3} 4:app-root(3) { 5 background: green; 6} 7:app-document(1) body { 8 background: blue; 9} 10 11/* becomes */ 12 13/* Class name may be repeated more often depending on level of nesting. */ 14.css-modules-active-route-app.css-modules-active-route-app { 15 background: yellow; 16} 17 18/* With an explicit `n` provided, the class name is repeated that many times. */ 19.css-modules-active-route-app.css-modules-active-route-app.css-modules-active-route-app { 20 background: green; 21} 22 23/* Combining with other selectors is possible. */ 24.css-modules-active-route-document body { 25 background: blue; 26}
When the a transition is started or finished the
CSSModulesActiveRouteService
resolves the styles for the current route hierarchy via the Ember container
using the route name. This implies, that you cannot render custom / non-default
templates for routes,
which is deprecated anyway.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Warn: project license file does not contain an FSF or OSI license.
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
83 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-gxr4-xjj5-5px2
- Warn: Project is vulnerable to: GHSA-jpcq-cgw6-v4j6
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-pc58-wgmc-hfjr
- Warn: Project is vulnerable to: GHSA-vvv8-xw5f-3f88
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-xfhp-gmh8-r8v2
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
Score
1.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More