shannonmoeller / reset-css Goto Github PK
View Code? Open in Web Editor NEWAn unmodified* copy of Eric Meyer's CSS reset. PostCSS, webpack, Sass, and Less friendly.
Home Page: http://npm.im/reset-css
License: The Unlicense
An unmodified* copy of Eric Meyer's CSS reset. PostCSS, webpack, Sass, and Less friendly.
Home Page: http://npm.im/reset-css
License: The Unlicense
Having the css and scss version named the same causes sass to throw a wobbly making it impossible to import the scss version in this set up.
@import '_reset'
is invalid and results in
Error: File to import not found or unreadable
The correct method:
@import 'reset'
results in
Error: It's not clear which file to import for @import
As sass doesn't know whether to import the css or sass version.
I'm using webpack 4.10.2 with sass-loader 6.0.7. After updating my include for the new version to have /sass
, my build now fails with:
ERROR in Module build failed:
License: none (public domain)
^
Invalid CSS after "...blic domain) */": expected 1 selector or at-rule, was "*/ {}"
in (myBuildPath)/node_modules/reset-css/sass/_reset.sass (line 3, column 36)
I didn't inspect the file terribly closely, but I believe the only real difference between version 3 and version 4 is that the extension changed. If I manually switch the extension back to .scss
, the build succeeds.
Lastly, plugging the file into https://www.sassmeister.com/ switches the comment to look like this:
/* http://meyerweb.com/eric/tools/css/reset/
* v4.0 | 20180602
* License: none (public domain)
html, body, div, span, applet, object, iframe,
but then upon compile, it switches to
/* http://meyerweb.com/eric/tools/css/reset/
* v4.0 | 20180602
* License: none (public domain) */
html, body, div, span, applet, object, iframe,
(The comment closing characters being the important difference). Manually altering the .sass
file to have this comment style ends up breaking the build further down the file (at time, mark, audio, video {
), which leads me to believe the extension switch may have been by mistake.
Was the change from .scss
to .sass
intentional? And if so, is there anything else I should try here?
:-webkit-any(article,aside,nav,section) h1
not be reset
this is what I get
$ bower install shannonmoeller/reset-css
bower reset-css#* not-cached git://github.com/shannonmoeller/reset-css.git#*
bower reset-css#* resolve git://github.com/shannonmoeller/reset-css.git#*
bower reset-css#* download https://github.com/shannonmoeller/reset-css/archive/v2.0.20110126.tar.gz
bower reset-css#* extract archive.tar.gz
bower reset-css#* invalid-meta reset-css is missing "ignore" entry in bower.json
bower reset-css#* resolved git://github.com/shannonmoeller/reset-css.git#2.0.20110126
bower reset-css#~2.0.20110126 install reset-css#2.0.20110126
The version is still 5.0.1
in the CSS/LESS/SCSS files after the 5.0.2
update.
https://github.com/shannonmoeller/reset-css/blob/cefc1804d5adfe020eee615f6dd2aa52c4644428/reset.css
https://github.com/shannonmoeller/reset-css/blob/cefc1804d5adfe020eee615f6dd2aa52c4644428/sass/_reset.scss
https://github.com/shannonmoeller/reset-css/blob/cefc1804d5adfe020eee615f6dd2aa52c4644428/less/reset.less
There is the menu
two time in the first rule:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu
, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu
, nav, output, ruby, section, summary,
time, mark, audio, video { ... }
The code quality check Sonarqube reports it as code-smell : https://rules.sonarsource.com/css/RSPEC-4666/
Introduced by #17
CSS Logical Properties, such as margin-block-start
, are not overridden.
Quick fix:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin-block-start: 0;
margin-block-end: 0;
padding-block-start: 0;
padding-block-end: 0;
border-inline-start: 0;
border-inline-end: 0;
}
Although this is supposed to be a copy of reset CSS, but it is possible to add reset styles for outline
property for focus
state. Happy to send PR across.
The CSS reset appears to break the hidden
attribute for numerous semantic elements, such as <section>
.
For example, <section hidden>
leads to a visible element after applying the reset, because the display: block
property of that rule apparently trumps the effect of the hidden
attribute in terms of specificity.
If it has to reset the display
property of semantic block elements - and I'm not convinced that it needs to, because the semantic block elements should have display: block
by default - but assuming it has to, it probably needs to include a more specific rule to restore the expected behavior of the hidden
attribute, e.g. for example:
section[hidden] {
display: none;
}
Title self-explanatory.
Without it being reset, I'm needing to overwrite the input fonts manually.
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.