frontend-layers/scss-reset

SCSS reset compilation: modern + mayers + normalizer

scss-reset's Issues

Relocate possible styles from _typography.scss to _reset.scss

? mobile normalization
? fonts for Mac normalization

CDN for compressed CSS

reset.css for static pages without SCSS

Test Case: Styled Components

Application test with jsx + tsx with https://styled-components.com/

Animation reset

Need to provide cases for animation

@media (prefers-reduced-motion: reduce) {
...

preferences

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

mixins

need to add some mixins

Possible Changes

• diff view

• update test templates

• select reset for dropdown component by mixins

• examples for structured elements wrapped by mixins and extended by variables

• html { scroll-behavior: smooth; }

• --save-dev installation instructions

• sys: remove *.lock

• css support + CDN

• total reset

• ? scss-typography

• ? Relocate outdated reset styles into mixins (? should be done by autoprefix)

• ? less, ? stylus ports

• ? test: additional test cases for popular js libraries (sandbox)

• ? scss config by condition variables for enabling normalization features

• ? example for postcss ( or plugin )

• ? doc: link to https://gitter.im/frontent-issues/community

• ? test: override reset styles by custom (a (:hover, :visited etc.), input)

• ? doc: features and secondary (more detailed) features

Cannot install Library for Angular v12

Describe the bug
Cannot install the library for an Angular application

To Reproduce
Steps to reproduce the behavior:

1. Create empty Angular project: ng new ...
2. Run npm i scss-reset --save in the project directory
3. See error

Expected behavior
The library should be installed without error

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10 Build 19043.985
• npm v7.15.1
• node v16.3.0
• Angular CLI v12.0.3

Additional context
Log:

npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! code 1
npm ERR! path E:\Dev\Angular\scss-reset-test\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe E:\Dev\Angular\scss-reset-test\node_modules\node-sass\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'E:\\Dev\\Angular\\scss-reset-test\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (E:\Dev\Angular\scss-reset-test\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (E:\Dev\Angular\scss-reset-test\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (E:\Dev\Angular\scss-reset-test\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at E:\Dev\Angular\scss-reset-test\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at E:\Dev\Angular\scss-reset-test\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at E:\Dev\Angular\scss-reset-test\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (E:\Dev\Angular\scss-reset-test\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (E:\Dev\Angular\scss-reset-test\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (E:\Dev\Angular\scss-reset-test\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at E:\Dev\Angular\scss-reset-test\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at E:\Dev\Angular\scss-reset-test\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at E:\Dev\Angular\scss-reset-test\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:195:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Python39\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:326:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1067:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19043
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "E:\\Dev\\Angular\\scss-reset-test\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd E:\Dev\Angular\scss-reset-test\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.3.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\marvd\AppData\Local\npm-cache\_logs\2021-06-04T13_30_13_647Z-debug.log

Test Case: Tailwind CSS

Basic HTML template based on Tailwind CSS

1.2.1

? Relocate outdated reset styles into mixins (? should be done by autoprefix)

• doc: md tables
• doc: buttons links
• ? less, ? stylus, css support + CDN
• test: additional test cases for popular js libraries (? sandbox)
• scss config by condition variables for enabling normalization features
• examples for structured elements wrapped by mixins and extended by variables
• example for postcss (? or plugin)
• doc: dependencies free
• doc: link to https://gitter.im/frontent-issues/community
• doc: link to staging repo
• test: override reset styles by custom (a (:hover, :visited etc.), input)
• doc: features and secondary (more detailed) features
• recovery test cases