Skip to content

Commit adfdbbd

Browse files
Turbo87Turbo87
committed
Migrate from ember-css-modules to ember-scoped-css
The former isn't particularly well maintained anymore and blocks all sorts of other migration.
1 parent 9cc2009 commit adfdbbd

File tree

168 files changed

+1505
-1054
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

168 files changed

+1505
-1054
lines changed

‎app/app.css‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
@import "./css/shared/a11y.css";
2+
@import "./css/shared/buttons.css";
3+
@import "./css/shared/forms.css";
4+
@import "./css/shared/sort-by.css";
5+
@import "./css/shared/typography.css";
6+
@import "./css/normalize.css";
7+
8+
@layer global {
9+
:root, [data-theme="classic"] {
10+
--violet800: hsl(252, 44%, 24%);
11+
--grey900: hsl(200, 15%, 19%);
12+
--grey700: hsl(200, 11%, 43%);
13+
--grey600: hsl(200, 13%, 60%);
14+
--grey200: hsl(200, 17%, 96%);
15+
--green800: hsl(115, 31%, 31%);
16+
--green900: hsl(115, 31%, 21%);
17+
18+
--orange-50: #fff7ed;
19+
--orange-100: #ffedd5;
20+
--orange-200: #fed7aa;
21+
--orange-300: #fdba74;
22+
--orange-400: #fb923c;
23+
--orange-500: #f97316;
24+
--orange-600: #ea580c;
25+
--orange-700: #c2410c;
26+
--orange-800: #9a3412;
27+
--orange-900: #7c2d12;
28+
29+
--yellow100: hsl(44, 100%, 90%);
30+
--yellow500: hsl(44, 100%, 60%);
31+
--yellow700: hsl(44, 67%, 50%);
32+
--yellow800: hsl(44, 67%, 20%);
33+
34+
--header-bg-color: light-dark(hsl(115, 31%, 20%), #141413);
35+
36+
--transition-x-slow: 1000ms;
37+
--transition-slow: 500ms;
38+
--transition-medium: 250ms;
39+
--transition-fast: 150ms;
40+
--transition-x-fast: 50ms;
41+
--transition-instant: 0ms;
42+
43+
--font-heading: "Fira Sans", sans-serif;
44+
--font-body: var(--font-heading);
45+
--font-monospace: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
46+
"Courier New", monospace;
47+
48+
--main-color: light-dark(#383838, #f9f7ec);
49+
--main-color-light: light-dark(#858585, #a6a6a6);
50+
--main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
51+
--main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
52+
--main-bg-dark: light-dark(#edebdd, #141413);
53+
--gray-border: light-dark(#d5d3cb, #666561);
54+
--link-color: rgb(0, 172, 91);
55+
--link-hover-color: #007940;
56+
57+
--placeholder-bg: hsl(212, 7%, 57%);
58+
--placeholder-bg2: hsl(213, 16%, 75%);
59+
60+
/* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */
61+
62+
--space-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
63+
--space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
64+
--space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
65+
--space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
66+
--space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
67+
--space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
68+
--space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
69+
--space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
70+
--space-2xl: clamp(3.50rem, calc(3.11rem + 1.95vw), 4.50rem);
71+
--space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);
72+
73+
/* One-up pairs */
74+
--space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
75+
--space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
76+
--space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
77+
--space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
78+
--space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
79+
--space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
80+
--space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
81+
--space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem);
82+
--space-2xl-3xl: clamp(3.50rem, calc(2.23rem + 6.34vw), 6.75rem);
83+
84+
/* Custom pairs */
85+
--space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
86+
87+
color-scheme: light dark;
88+
}
89+
90+
[data-color-scheme="light"] {
91+
color-scheme: light;
92+
}
93+
94+
[data-color-scheme="dark"] {
95+
color-scheme: dark;
96+
}
97+
98+
* {
99+
box-sizing: border-box;
100+
}
101+
102+
html, body {
103+
margin: 0;
104+
scroll-behavior: smooth;
105+
}
106+
107+
body {
108+
background-color: var(--header-bg-color);
109+
font-family: var(--font-body);
110+
font-size: 16px;
111+
display: flex;
112+
flex-direction: column;
113+
min-height: 100vh;
114+
}
115+
116+
h1, h2, h3, h4 {
117+
font-family: var(--font-heading);
118+
}
119+
120+
h1 {
121+
@media only screen and (max-width: 400px) {
122+
font-size: 1.5em;
123+
}
124+
}
125+
126+
a, .link, .text--link {
127+
color: var(--link-color);
128+
text-decoration: none;
129+
cursor: pointer;
130+
131+
&:hover {
132+
color: var(--link-hover-color);
133+
}
134+
}
135+
136+
/* Using `:not(...)` here for specificity reasons */
137+
a:not([href]) {
138+
color: unset;
139+
cursor: initial;
140+
}
141+
142+
pre.terminal {
143+
background: var(--main-color);
144+
color: white;
145+
padding: var(--space-s);
146+
font-family: var(--font-monospace);
147+
}
148+
149+
abbr[title] {
150+
text-decoration: none;
151+
border-bottom: 1px dotted;
152+
}
153+
154+
noscript {
155+
display: grid;
156+
justify-items: center;
157+
padding: var(--space-m);
158+
color: white;
159+
}
160+
161+
/* see https://github.com/twbs/bootstrap/pull/30269 */
162+
::-webkit-datetime-edit,
163+
::-webkit-datetime-edit-fields-wrapper,
164+
::-webkit-datetime-edit-text,
165+
::-webkit-datetime-edit-minute,
166+
::-webkit-datetime-edit-hour-field,
167+
::-webkit-datetime-edit-day-field,
168+
::-webkit-datetime-edit-month-field,
169+
::-webkit-datetime-edit-year-field {
170+
padding: 0;
171+
}
172+
173+
::-webkit-calendar-picker-indicator {
174+
font-size: 0.9em
175+
}
176+
177+
.c-notification__icon {
178+
display: flex;
179+
justify-content: center;
180+
align-items: center;
181+
}
182+
183+
.c-notification__content {
184+
line-height: 1.5;
185+
}
186+
187+
.width-limit {
188+
width: 960px;
189+
@media only screen and (max-width: 960px) {
190+
width: 100%;
191+
}
192+
}
193+
}

‎app/app.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Resolver from 'ember-resolver';
66
import config from './config/environment';
77
import * as Sentry from './sentry';
88

9+
import './app.css';
10+
911
// eslint-disable-next-line unicorn/prefer-add-event-listener
1012
window.onerror = undefined;
1113
Sentry.init();

‎app/components/color-scheme-menu.module.css‎ renamed to ‎app/components/color-scheme-menu.css‎

File renamed without changes.

‎app/components/color-scheme-menu.hbs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<Dropdown local-class="dropdown" data-test-dark-mode-menu ...attributes as |dd|>
2-
<dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-dark-mode-toggle>
3-
{{svg-jar this.icon local-class="icon"}}
1+
<Dropdown data-test-dark-mode-menu ...attributes class="dropdown" as |dd|>
2+
<dd.Trigger @hideArrow={{true}} class="trigger" data-test-dark-mode-toggle>
3+
{{svg-jar this.icon class=(scoped-class "icon")}}
44
<span class="sr-only">Change color scheme</span>
55
</dd.Trigger>
66

7-
<dd.Menu local-class="menu" as |menu|>
7+
<dd.Menu class="menu" as |menu|>
88
{{#each this.colorSchemes as |colorScheme|}}
99
<menu.Item>
1010
<button
11-
local-class="menu-button {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
11+
class="menu-button {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
1212
class="button-reset"
1313
type="button"
1414
{{on 'click' (fn this.colorScheme.set colorScheme.mode)}}
1515
>
16-
{{svg-jar colorScheme.svg local-class="icon"}} {{colorScheme.mode}}
16+
{{svg-jar colorScheme.svg class=(scoped-class "icon")}} {{colorScheme.mode}}
1717
</button>
1818
</menu.Item>
1919
{{/each}}

‎app/components/crate-downloads-list.module.css‎ renamed to ‎app/components/crate-downloads-list.css‎

File renamed without changes.

‎app/components/crate-downloads-list.hbs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<ul local-class="list">
1+
<ul class="list">
22
{{#each @crates as |crate|}}
33
<li>
4-
<LinkTo @route="crate" @model={{crate.id}} local-class="link">
4+
<LinkTo @route="crate" @model={{crate.id}} class="link">
55
{{ crate.name }} ({{ crate.max_version }})
6-
{{svg-jar "download-arrow" local-class="download-icon"}}
6+
{{svg-jar "download-arrow" class=(scoped-class "download-icon")}}
77
{{ format-num crate.downloads }}
88
</LinkTo>
99
</li>

‎app/components/crate-header.module.css‎ renamed to ‎app/components/crate-header.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
white-space: nowrap;
2626
cursor: default;
2727

28-
svg {
28+
:global(svg) {
2929
width: 1em;
3030
height: 1em;
3131
flex-shrink: 0;

‎app/components/crate-header.hbs‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<PageHeader local-class="header" data-test-heading>
2-
<h1 local-class="heading">
1+
<PageHeader class="header" data-test-heading>
2+
<h1 class="heading">
33
<span data-test-crate-name>{{@crate.name}}</span>
44
{{#if @version}}
55
<small data-test-crate-version>v{{@version.num}}</small>
66

77
{{#if @version.yanked}}
8-
<span local-class="yanked-badge" data-test-yanked>
8+
<span class="yanked-badge" data-test-yanked>
99
{{svg-jar "trash"}}
1010
Yanked
1111

@@ -19,29 +19,29 @@
1919
</h1>
2020

2121
{{#if @crate.description}}
22-
<div local-class="description">
22+
<div class="description">
2323
{{@crate.description}}
2424
</div>
2525
{{/if}}
2626

2727
{{#if this.keywords}}
28-
<ul local-class="keywords">
28+
<ul class="keywords">
2929
{{#each this.keywords as |keyword|}}
3030
<li>
3131
<LinkTo @route="keyword" @model={{keyword.id}} data-test-keyword={{keyword.id}}>
32-
<span local-class="hash">#</span>{{keyword.id}}
32+
<span class="hash">#</span>{{keyword.id}}
3333
</LinkTo>
3434
</li>
3535
{{/each}}
3636
</ul>
3737
{{/if}}
3838

3939
{{#if this.session.currentUser}}
40-
<FollowButton @crate={{@crate}} local-class="follow-button"/>
40+
<FollowButton @crate={{@crate}} class="follow-button"/>
4141
{{/if}}
4242
</PageHeader>
4343

44-
<NavTabs aria-label="{{@crate.name}} crate subpages" local-class="nav" as |nav|>
44+
<NavTabs aria-label="{{@crate.name}} crate subpages" class="nav" as |nav|>
4545
<nav.Tab
4646
@link={{if
4747
@versionNum

‎app/components/crate-list.module.css‎ renamed to ‎app/components/crate-list.css‎

File renamed without changes.

‎app/components/crate-list.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div ...attributes>
22
{{!-- The extra div wrapper is needed for specificity issues with `margin` --}}
3-
<ol local-class="list">
3+
<ol class="list">
44
{{#each @crates as |crate index|}}
55
<li>
66
<CrateRow @crate={{crate}} data-test-crate-row={{index}} />

0 commit comments

Comments
 (0)