milesmcc / a17t

An atomic design toolkit for pragmatists

👋 Hey, I'm Miles. Check out my website. You can also follow me on Twitter or sign up for my infrequent email letter.

a17t's Issues

Add high-level variable mixins for headings, elevation, etc

This will make theming much easier by providing simple primitives for these groups of elements.

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.

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?

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

123

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.

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!

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)