milesmcc / a17t Goto Github PK
View Code? Open in Web Editor NEWAn atomic design toolkit for pragmatists
Home Page: https://a17t.miles.land
License: MIT License
a17t's Issues
dark mode
would be great with either support and/or guidance on how to work with dark mode and a17t. would be awesome if there were dark variants for the ~color classes so one could write ... className="button ~blue dark:~green. or somehow define what ~positive should be in dark mode.
Add high-level variable mixins for headings, elevation, etc
This will make theming much easier by providing simple primitives for these groups of elements.
How to integrate with Tailwind + svelte?
Hey a17t looks great, would like to use in my svelte-based project
I looked at #2 but when I am using svelte, I cannot seem to import css file.
I am using the following template : https://github.com/sarioglu/svelte-tailwindcss-template (https://dev.to/sarioglu/using-svelte-with-tailwindcss-a-better-approach-47ph)
and I cannot see how I can add a17t to the process. Any idea?
How to integrate with Tailwind?
I have tried to setup this with tailwind but is not clear for me how exactly. I try importing as tailwind plugin:
module.exports = {
theme: {
extend: {},
},
variants: {},
plugins: [
require('@a17t'),
]
}
How a postcss:
module.exports = {
plugins: [
require('a17t'),
require('tailwindcss'),
require('autoprefixer'),
]
}
Or with a direct import on my main css
@import "a17t";
@import "tailwindcss/base";
@import "tailwindcss/components";
None work for me. (ps: I'm not very fluent in the JS ecosystem so if this is something obvious is not for me)
a17t not found by Tailwind when pinned
I kind'a stumbled on your project - and liked it instantly 😀
Now I'm moving a project from Sprockets, npm/yarn, to Propshaft, importmap - and I find myself not being able to get "a17t" imported correctly 😢
I know this probably has nothing whatsoever with a17t to do - and that I'm totally barking up the wrong tree, but perhaps you've bumped your toe on this one too 🥸
# config/tailwind.config.js
module.exports = {
plugins: [
require("a17t")
]
}
# config/importmap.rb
pin "tailwindcss/plugin", to: "tailwindcss--plugin.js" # @3.4.3
pin "a17t" # @0.10.1
I checked - and both libs are sitting safely tucked in my vendor/javascript folder
then I did my incantations - dev - with this unexpected output
13:59:47 css.1 |
13:59:47 css.1 | Rebuilding...
13:59:47 css.1 | Error: Cannot find module 'a17t'
13:59:47 css.1 | Require stack:
13:59:47 css.1 | - /Users/walther/Deling/Walther/src/mortimer/redbox/bellis/config/tailwind.config.js
13:59:47 css.1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
13:59:47 css.1 | at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
13:59:47 css.1 | at Function.resolve (node:internal/modules/cjs/helpers:108:19)
13:59:47 css.1 | at Function.resolve (/snapshot/tailwindcss/standalone-cli/patch-require.js:34:38)
13:59:47 css.1 | at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:251148)
13:59:47 css.1 | at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253746)
13:59:47 css.1 | at /Users/walther/Deling/Walther/src/mortimer/redbox/bellis/config/tailwind.config.js:91:5
13:59:47 css.1 | at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:256443)
13:59:47 css.1 | at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:254371)
13:59:47 css.1 | at /snapshot/tailwindcss/lib/lib/load-config.js:52:30 {
13:59:47 css.1 | code: 'MODULE_NOT_FOUND',
13:59:47 css.1 | requireStack: [
13:59:47 css.1 | '/Users/walther/Deling/Walther/src/mortimer/redbox/bellis/config/tailwind.config.js'
13:59:47 css.1 | ]
13:59:47 css.1 | }
What's more unexpected is, however, that the lib a17t does in fact get loaded – when I look into the <head> part of my browser view!
problem with tailwind postcss and/or jit?
When i use a main.css with
@import 'a17t/dist/tailwind.css';
@import 'a17t';
And a package.json with:
"scripts": {
"build": "cross-env NODE_ENV=production eleventy && set debug= && cross-env NODE_ENV=production postcss src/static/css/main.css --o _site/static/css/style.css",
[...]
},
"devDependencies": {
"@11ty/eleventy": "^0.11.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
"@neojp/tailwindcss-important-variant": "^1.0.1",
"@tailwindcss/typography": "^0.3.1",
[...]
"tailwindcss": "^2.0.2"
},
"dependencies": {
"@tailwindcss/jit": "^0.1.18",
"a17t": "^0.5.1",
"autoprefixer": "^10.1.0",
"cssnano": "^5.0.2",
"postcss": "^8.2.1",
"postcss-easy-import": "^3.0.0",
"postcss-import": "^14.0.2",
"postcss-preset-env": "^6.7.0",
"tailwindcss-debug-screens": "^2.0.0"
}
}
I get this error from issuing yarn build (the problem is in the last part of the output)
C:\laragon\Projects\tailwinds\neat\kai.froeb.net>yarn build
yarn run v1.22.5
warning ....\package.json: No license field
$ cross-env NODE_ENV=production eleventy && set debug= && cross-env NODE_ENV=production postcss src/static/css/main.css --o _site/static/css/style.css
(node:11800) [DEP0128] DeprecationWarning: Invalid 'main' field in 'C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\emitter-mixin\package.json' of 'y'. Please either fix that or report it to the module author
(Use node --trace-deprecation ... to show where the warning was created)
Writing _site/ds.htm from ./src/ds.html.
Writing _site/impressum.htm from ./src/impressum.html.
Writing _site/index.htm from ./src/index.html.
Writing _site/en/index.htm from ./src/en/index.html.
Writing _site/es/index.htm from ./src/es/index.html.
Writing _site/fr/index.htm from ./src/fr/index.html.
Writing _site/it/index.htm from ./src/it/index.html.
Writing _site/pt/index.htm from ./src/pt/index.html.
Copied 29 files / Wrote 8 files in 0.57 seconds (v0.11.1)
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
Source path: C:\laragon\Projects\tailwinds\neat\kai.froeb.net\src\static\css\main.css
Setting up new context...
JIT TOTAL: 3.063s
ParserError: Syntax Error at line: 1, column 26
at C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\a17t\dist\tailwind.css:1:10918
at Parser.error (C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss-values-parser\lib\parser.js:127:11)
at Parser.operator (C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss-values-parser\lib\parser.js:162:20)
at Parser.parseTokens (C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss-values-parser\lib\parser.js:245:14)
at Parser.loop (C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss-values-parser\lib\parser.js:132:12)
at Parser.parse (C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss-values-parser\lib\parser.js:51:17)
at parse (C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss-custom-properties\index.cjs.js:47:30)
at C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss-custom-properties\index.cjs.js:333:24
at C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss\lib\container.js:91:18
at C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss\lib\container.js:74:18
at Rule.each (C:\laragon\Projects\tailwinds\neat\kai.froeb.net\node_modules\postcss\lib\container.js:60:16) {
postcssNode: Declaration {
raws: { before: '', between: ':' },
type: 'decl',
parent: Rule {
raws: [Object],
type: 'rule',
nodes: [Array],
parent: [Root],
source: [Object],
selector: '.-space-y-0>:not([hidden])~:not([hidden])',
lastEach: 12,
indexes: [Object],
[Symbol(isClean)]: false
},
source: { start: [Object], input: [Input], end: [Object] },
prop: 'margin-top',
value: 'calc(var(--spacing-0, 0)-1(1 - var(--tw-space-y-reverse)))',
[Symbol(isClean)]: false
}
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
123
Docs: relative links broken on published version
In markdown files (e.g. icon.md) the link [shield](./shield) points to the file in the same directory.
But in the published version, the link <a href="./shield">shield</a> points to the subpath icon/shield:
https://a17t.miles.land/information/icon/shield - which doesn't exist.
I guess it's a configuration option in whatever tool you're using for the published docs.
Good luck figuring that out 😋
Thanks for the great tool!
ParseError: RightParenthesis is expected
Getting this error
it might be related to #5 and how svelte process css somehow, but maybe not ?
Interestingly (which is the issue I encounter in #5) if I import a17t after tailwind directive (see https://github.com/wighawag/a17t-svelte-test) none of a17t css get included and I do not get the error
$ rollup -c -w
rollup v2.18.0
bundles src/main.js → public\build\bundle.js...
[!] (plugin svelte) ParseError: RightParenthesis is expected
src\Tailwindcss.svelte
70535: transition-delay:1000ms
70536: }
70537: }</style>
^
ParseError: RightParenthesis is expected
at error (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\utils\error.ts:25:16)
at Parser$1.error (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\index.ts:93:3)
at Object.read_style [as read] (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\read\style.ts:21:11)
at tag (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\state\tag.ts:190:27)
at new Parser$1 (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\index.ts:45:12)
at parse (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\index.ts:208:17)
at compile (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\compile\index.ts:79:14)
at C:\dev\projects\wighawag\a17t-svelte-test\node_modules\rollup-plugin-svelte\index.js:252:22
at ModuleLoader.addModuleSource (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\rollup\dist\shared\rollup.js:17742:30)
at ModuleLoader.fetchModule (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\rollup\dist\shared\rollup.js:17796:9)
This repo : https://github.com/wighawag/a17t-svelte-test reproduce the issue
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.