CSS is processed out of order (@import rules must precede all rules aside from @charset and @layer statements) #19
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
I'm trying to use Lightning CSS to transform CSS files but it fails with:
Eleventy:cmd command: eleventy { _: [], quiet: null, version: false, watch: false, dryrun: false, help: false, serve: false, incremental: false, 'ignore-initial': false } +0ms Eleventy:EventBus Setting up global EventBus. +0ms Eleventy:UserConfig Resetting EleventyConfig to initial values. +0ms Eleventy:UserConfig Adding universal filter 'slug' +9ms Eleventy:UserConfig Adding universal filter 'slugify' +0ms Eleventy:UserConfig Adding universal filter 'url' +0ms Eleventy:UserConfig Adding universal filter 'log' +1ms Eleventy:UserConfig Adding universal filter 'serverlessUrl' +0ms Eleventy:UserConfig Adding universal filter 'getCollectionItemIndex' +0ms Eleventy:UserConfig Adding universal filter 'getCollectionItem' +0ms Eleventy:UserConfig Adding universal filter 'getPreviousCollectionItem' +1ms Eleventy:UserConfig Adding universal filter 'getNextCollectionItem' +0ms Eleventy:TemplateConfig rootConfig { templateFormats: [ 'liquid', 'ejs', 'md', 'hbs', 'mustache', 'haml', 'pug', 'njk', 'html', '11ty.js' ], pathPrefix: '/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', htmlOutputSuffix: '-o', dataFileSuffixes: [ '.11tydata', '' ], dataFileDirBaseNameOverride: false, keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride', computed: 'eleventyComputed' }, dir: { input: '.', includes: '_includes', data: '_data', output: '_site' }, handlebarsHelpers: {}, nunjucksFilters: {} } +0ms Eleventy Setting process.env.ELEVENTY_ROOT: '/home/boojum/code/NOW/11ty-webc-base-2' +0ms Eleventy:TemplateConfig Merging config with eleventy.config.js +4ms Eleventy:UserConfig Adding anonymous plugin +51ms Eleventy:UserConfig Adding universal filter 'webcGetCss' +6ms Eleventy:UserConfig Adding universal filter 'webcGetJs' +0ms Eleventy:UserConfig Adding eleventyBundlePlugin plugin +0ms Eleventy:UserConfig Adding universal paired shortcode 'css' +3ms Eleventy:UserConfig Adding universal paired shortcode 'js' +0ms Eleventy:UserConfig Adding universal paired shortcode 'html' +0ms Eleventy:UserConfig Adding universal shortcode 'getBundle' +0ms Eleventy:UserConfig Adding universal shortcode 'getBundleFileUrl' +1ms Eleventy:TemplateConfig overrides: {} +57ms Eleventy:TemplateConfig Current configuration: { pathPrefix: '/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', htmlOutputSuffix: '-o', dataFileSuffixes: [ '.11tydata', '' ], dataFileDirBaseNameOverride: false, keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride', computed: 'eleventyComputed' }, dir: { input: 'src', includes: '11ty', data: '11ty', output: 'dist', layouts: '11ty/layouts' }, handlebarsHelpers: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItemIndex: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)], webcGetCss: [Function (anonymous)], webcGetJs: [Function (anonymous)] }, nunjucksFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItemIndex: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)], webcGetCss: [Function (anonymous)], webcGetJs: [Function (anonymous)] }, templateFormats: [ 'liquid', 'ejs', 'md', 'hbs', 'mustache', 'haml', 'pug', 'njk', 'html', '11ty.js', 'webc' ], transforms: { '@11ty/eleventy-bundle': [Function (anonymous)] }, linters: {}, globalData: {}, layoutAliases: {}, layoutResolution: true, passthroughCopies: { 'src/assets/*.*': { outputPath: '.', copyOptions: {} } }, liquidOptions: {}, liquidTags: {}, liquidFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItemIndex: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)], webcGetCss: [Function (anonymous)], webcGetJs: [Function (anonymous)] }, liquidShortcodes: { getBundle: [Function (anonymous)], getBundleFileUrl: [Function (anonymous)] }, liquidPairedShortcodes: { css: [Function (anonymous)], js: [Function (anonymous)], html: [Function (anonymous)] }, nunjucksEnvironmentOptions: {}, nunjucksPrecompiledTemplates: {}, nunjucksAsyncFilters: {}, nunjucksTags: {}, nunjucksGlobals: {}, nunjucksAsyncShortcodes: {}, nunjucksShortcodes: { getBundle: [Function (anonymous)], getBundleFileUrl: [Function (anonymous)] }, nunjucksAsyncPairedShortcodes: {}, nunjucksPairedShortcodes: { css: [Function (anonymous)], js: [Function (anonymous)], html: [Function (anonymous)] }, handlebarsShortcodes: { getBundle: [Function (anonymous)], getBundleFileUrl: [Function (anonymous)] }, handlebarsPairedShortcodes: { css: [Function (anonymous)], js: [Function (anonymous)], html: [Function (anonymous)] }, javascriptFunctions: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItemIndex: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)], webcGetCss: [Function (anonymous)], webcGetJs: [Function (anonymous)], css: [Function (anonymous)], js: [Function (anonymous)], html: [Function (anonymous)], getBundle: [Function (anonymous)], getBundleFileUrl: [Function (anonymous)] }, pugOptions: {}, ejsOptions: {}, markdownHighlighter: null, libraryOverrides: {}, dynamicPermalinks: true, useGitIgnore: true, ignores: Set(3) { '**/node_modules/**', '.git/**', 'src/11ty/components/**/*.webc' }, watchIgnores: Set(2) { '**/node_modules/**', '.git/**' }, dataDeepMerge: true, watchJavaScriptDependencies: true, additionalWatchTargets: [ 'src/11ty/components/**/*.webc' ], serverOptions: {}, chokidarConfig: {}, watchThrottleWaitTime: 0, frontMatterParsingOptions: undefined, dataExtensions: Map(0) {}, extensionMap: Set(1) { { key: 'webc', extension: 'webc', outputFileExtension: 'html', compileOptions: [Object], compile: [AsyncFunction: compile] } }, quietMode: true, events: AsyncEventEmitter { _events: [Object: null prototype] { 'eleventy.before': [Array], 'eleventy.config': [Function (anonymous)] }, _eventsCount: 2, _maxListeners: undefined, [Symbol(shapeMode)]: false, [Symbol(kCapture)]: false }, benchmarkManager: BenchmarkManager { benchmarkGroups: { Configuration: [BenchmarkGroup], Aggregate: [BenchmarkGroup] }, isVerbose: true, start: 359.895674 }, plugins: [ { plugin: [Function (anonymous)], options: [Object], pluginNamespace: '' }, { plugin: [Function], options: [Object], pluginNamespace: '' } ], useTemplateCache: true, precompiledCollections: {}, dataFilterSelectors: Set(0) {}, libraryAmendments: {}, serverPassthroughCopyBehavior: 'copy', urlTransforms: [] } +1ms Eleventy Eleventy warm up time (in ms) 438.27614 +64ms Eleventy:TemplatePassthroughManager Resetting counts to 0 +0ms Eleventy:EleventyFiles >>> When processing .gitignore/.eleventyignore, Eleventy does not currently support negative patterns but encountered one: +0ms Eleventy:EleventyFiles >>> !.vscode/extensions.json +0ms Eleventy:EleventyFiles Follow along at https://github.com/11ty/eleventy/issues/693 to track support. +0ms Eleventy:EleventyFiles >>> When processing .gitignore/.eleventyignore, Eleventy does not currently support negative patterns but encountered one: +0ms Eleventy:EleventyFiles >>> !.env.example +0ms Eleventy:EleventyFiles Follow along at https://github.com/11ty/eleventy/issues/693 to track support. +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./.vscode/* +3ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./.idea +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./.DS_Store +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./*.suo +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./*.ntvs* +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./*.njsproj +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./*.sln +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./*.sw? +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./node_modules/** +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./.svelte-kit +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./package +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./vite.config.js.timestamp-* +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./vite.config.ts.timestamp-* +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./dist +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./.env +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./.env.* +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./.cache/** +0ms Eleventy:EleventyFiles .gitignore,.eleventyignore,src/.eleventyignore ignoring: ./.logs/** +0ms Eleventy Directories: Eleventy Input (Dir): src Eleventy Input (File): undefined Eleventy Data: src/11ty Eleventy Includes: src/11ty Eleventy Layouts: src/11ty/layouts Eleventy Output: dist Eleventy Template Formats: liquid,ejs,md,hbs,mustache,haml,pug,njk,html,11ty.js,webc Eleventy Verbose Output: false +12ms Eleventy:EleventyFiles Searching for: [ './src/**/*.{liquid,ejs,md,hbs,mustache,haml,pug,njk,html,11ty.js,11ty.cjs,webc}' ] +223ms Eleventy:FastGlobManager Glob search ('templates') searching for: [ './src/**/*.{liquid,ejs,md,hbs,mustache,haml,pug,njk,html,11ty.js,11ty.cjs,webc}' ] +0ms Eleventy:FastGlobManager Glob search ('templates') ignoring: [ '.vscode/*', '.idea', '.DS_Store', '*.suo', '*.ntvs*', '*.njsproj', '*.sln', '*.sw?', 'node_modules/**', '.svelte-kit', 'package', 'vite.config.js.timestamp-*', 'vite.config.ts.timestamp-*', 'dist', '.env', '.env.*', '.cache/**', '.logs/**', 'dist/**', 'src/11ty/**', 'src/11ty/layouts/**', '**/node_modules/**', '.git/**', 'src/11ty/components/**/*.webc' ] +0ms Eleventy:TemplatePassthroughManager TemplatePassthrough copy started. +246ms Eleventy:TemplatePassthroughManager `addPassthroughCopy` config API paths: { 'src/assets/*.*': { outputPath: '.', copyOptions: {} } } +0ms Eleventy:TemplatePassthroughManager `addPassthroughCopy` config API normalized paths: [ { inputPath: './src/assets/*.*', outputPath: '.', copyOptions: {} } ] +1ms Eleventy:TemplatePassthroughManager TemplatePassthrough copying from config: { inputPath: './src/assets/*.*', outputPath: '.', copyOptions: {} } +0ms Eleventy:TemplatePassthrough Copying './src/assets/*.*' +0ms Eleventy:TemplatePassthrough Searching for: './src/assets/*.*' +0ms Eleventy:FastGlobManager Glob search ('passthrough') searching for: './src/assets/*.*' +20ms Eleventy:TemplateData Using [ '.11tydata', '' ] suffixes to find data files. +0ms Eleventy:TemplateData getLocalDataPaths('./src/content/home.webc'): [ './src/content/home.11tydata.js', './src/content/home.11tydata.cjs', './src/content/home.11tydata.json', './src/content/home.json', './src/content/content.11tydata.js', './src/content/content.11tydata.cjs', './src/content/content.11tydata.json', './src/content/content.json', './src/src.11tydata.js', './src/src.11tydata.cjs', './src/src.11tydata.json', './src/src.json' ] +1ms Eleventy:TemplateWriter ./src/content/home.webc adding to template map. +0ms Eleventy:FastGlobManager Glob search ('global-data') searching for: [ './src/11ty/**/*.{json,cjs,js}' ] +8ms Eleventy:TemplateData Found global data file ./src/11ty/metadata.js and adding as: metadata +12ms Eleventy:TemplatePassthrough Copying individual file 'src/assets/apple-touch-icon.png' +23ms Eleventy:TemplatePassthrough Copying individual file 'src/assets/favicon.ico' +1ms Eleventy:TemplatePassthrough Copying individual file 'src/assets/favicon.svg' +1ms Eleventy:TemplatePassthrough Copying individual file 'src/assets/icon-192.png' +0ms Eleventy:TemplatePassthrough Copying individual file 'src/assets/icon-512.png' +0ms Eleventy:TemplatePassthrough Copying individual file 'src/assets/manifest.json' +0ms Eleventy:TemplatePassthrough Copying individual file 'src/assets/robots.txt' +0ms Eleventy:Template Template date: using file’s 'birthtimeMs' for './src/content/home.webc' of 2024-02-29T10:29:56.665Z (from 1709202596665.8284) +0ms Eleventy:TemplateMap Caching collections objects. +0ms Eleventy:WebC Error evaluating dynamic permalink, returning raw string contents instead: '/index.html' Eleventy:WebC Error: Check the permalink for ./src/content/home.webc Eleventy:WebC Original error message: Invalid regular expression: missing / Eleventy:WebC at ModuleScript.evaluateScript (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/webc/src/moduleScript.cjs:71:10) Eleventy:WebC at Object.<anonymous> (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy-plugin-webc/src/eleventyWebcTemplate.js:80:49) Eleventy:WebC at Template._renderFunction (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/TemplateContent.js:405:27) Eleventy:WebC at Template.renderPermalink (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/TemplateContent.js:454:19) Eleventy:WebC at async Template._getLink (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Template.js:251:24) Eleventy:WebC at async Template.getOutputLocations (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Template.js:301:16) Eleventy:WebC at async Template.addComputedData (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Template.js:614:28) Eleventy:WebC at async Template.getTemplates (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Template.js:682:7) Eleventy:WebC at async TemplateMap.initDependencyMap (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/TemplateMap.js:414:22) Eleventy:WebC at async TemplateMap.cache (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/TemplateMap.js:458:5) +0ms Eleventy:Template Rendering permalink for './src/content/home.webc': /index.html becomes '/index.html' +9ms Eleventy:TemplateMap Collection: collections.all size: 1 +8ms Eleventy:TemplateMap Collection: collections.all size: 1 +0ms Eleventy:TemplateWriter Template map created. +116ms Eleventy:Bundle Adding code to bundle 'css' for '/' (bucket: 'default'): [ '@layer components{.wsi-tgnaa div h1 a{font-size:1.69rem;color:orangered}}', '@layer components {\n' + ' .theme-toggle {\n' + ' --size: 2rem;\n' + ' --icon-fill: hsl(210deg 10% 30%);\n' + ' --icon-fill-hover: hsl(210deg 10% 15%);\n' + '\n' + ' /* reset */\n' + ' background: none;\n' + ' border: none;\n' + ' padding: 0;\n' + '\n' + ' /* sizing */\n' + ' inline-size: var(--size);\n' + ' block-size: var(--size);\n' + ' aspect-ratio: 1;\n' + ' border-radius: 50%;\n' + '\n' + ' /* interaction */\n' + ' cursor: pointer;\n' + ' touch-action: manipulation;\n' + ' -webkit-tap-highlight-color: transparent;\n' + '\n' + ' /* outline */\n' + ' outline-offset: 5px;\n' + '\n' + ' & > svg {\n' + ' width: 100%;\n' + ' height: 100%;\n' + ' stroke-linecap: round;\n' + ' }\n' + '\n' + ' @media (hover: none) {\n' + ' --size: 48px;\n' + ' }\n' + ' }\n' + '\n' + " [data-theme='dark'] .theme-toggle {\n" + ' --icon-fill: hsl(210deg 10% 70%);\n' + ' --icon-fill-hover: hsl(210deg 15% 90%);\n' + ' }\n' + '\n' + ' :root {\n' + ' --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n' + ' --ease-elastic-out-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);\n' + ' --ease-elastic-3: var(--ease-elastic-out-3);\n' + ' --ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);\n' + ' --ease-elastic-4: var(--ease-elastic-out-4);\n' + ' --ease-out-5: cubic-bezier(0, 0, 0, 1);\n' + ' }\n' + '\n' + ' .sun-and-moon {\n' + ' & > :is(.moon, .sun, .sun-beams) {\n' + ' transform-origin: center center;\n' + ' }\n' + '\n' + ' & > :is(.moon, .sun) {\n' + ' fill: var(--icon-fill);\n' + ' }\n' + '\n' + ' & > .sun-beams {\n' + ' stroke: var(--icon-fill);\n' + ' stroke-width: 2px;\n' + ' }\n' + ' }\n' + '\n' + ' .sun-and-moon:is(:hover, :focus-visible) .sun {\n' + ' fill: var(--icon-fill-hover);\n' + ' }\n' + '\n' + ' .sun-and-moon:is(:hover, :focus-visible) .sun-beams {\n' + ' stroke: var(--icon-fill-hover);\n' + ' }\n' + '\n' + " [data-theme='dark'] .sun-and-moon {\n" + ' & > .sun {\n' + ' transform: scale(1.75);\n' + ' }\n' + '\n' + ' & > .sun-beams {\n' + ' opacity: 0;\n' + ' }\n' + '\n' + ' & > .moon > circle {\n' + ' transform: translateX(-7px);\n' + '\n' + ' @supports (cx: 1) {\n' + ' transform: translateX(0);\n' + ' cx: 17;\n' + ' }\n' + ' }\n' + ' }\n' + '\n' + ' @media (prefers-reduced-motion: no-preference) {\n' + ' .sun-and-moon {\n' + ' & > .sun {\n' + ' transition: transform 0.5s var(--ease-elastic-3);\n' + ' }\n' + '\n' + ' & > .sun-beams {\n' + ' transition:\n' + ' transform 0.5s var(--ease-elastic-4),\n' + ' opacity 0.5s var(--ease-3);\n' + ' }\n' + '\n' + ' & .moon > circle {\n' + ' transition: transform 0.25s var(--ease-out-5);\n' + '\n' + ' @supports (cx: 1) {\n' + ' transition: cx 0.25s var(--ease-out-5);\n' + ' }\n' + ' }\n' + ' }\n' + '\n' + " [data-theme='dark'] .sun-and-moon {\n" + ' & > .sun {\n' + ' transform: scale(1.75);\n' + ' transition-timing-function: var(--ease-3);\n' + ' transition-duration: 0.25s;\n' + ' }\n' + '\n' + ' & > .sun-beams {\n' + ' transform: rotateZ(-25deg);\n' + ' transition-duration: 0.15s;\n' + ' }\n' + '\n' + ' & > .moon > circle {\n' + ' transition-delay: 0.25s;\n' + ' transition-duration: 0.5s;\n' + ' }\n' + ' }\n' + ' }\n' + ' }', '@layer components{.wlmouui86>header>div{display:flex;place-items:center}}', '@layer reset, theme, global, layout, components, state;\n' + '\n' + "@import url('_reset.css');\n" + "@import url('_theme.css');\n" + "@import url('_global.css');\n" + "@import url('_layout.css');" ] +0ms Eleventy:Bundle Adding code to bundle 'js' for '/' (bucket: 'default'): [ "const storageKey = 'theme-preference'\n" + '\n' + ' const onClick = () => {\n' + " theme.value = theme.value === 'light' ? 'dark' : 'light'\n" + ' setPreference()\n' + ' }\n' + '\n' + ' const getColorPreference = () => {\n' + ' if (localStorage.getItem(storageKey)) return localStorage.getItem(storageKey)\n' + " else return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n" + ' }\n' + '\n' + ' const setPreference = () => {\n' + ' localStorage.setItem(storageKey, theme.value)\n' + ' reflectPreference()\n' + ' }\n' + '\n' + ' const reflectPreference = () => {\n' + " document.firstElementChild.setAttribute('data-theme', theme.value)\n" + '\n' + " document.querySelector('.theme-toggle')?.setAttribute('aria-label', theme.value)\n" + ' }\n' + '\n' + ' const theme = {\n' + ' value: getColorPreference(),\n' + ' }\n' + '\n' + ' // set early so no page flashes / CSS is made aware\n' + ' reflectPreference()\n' + '\n' + ' window.onload = () => {\n' + ' // set on load so screen readers can see latest value on the button\n' + ' reflectPreference()\n' + '\n' + ' // now this script can find and listen for clicks on the control\n' + " document.querySelector('.theme-toggle').addEventListener('click', onClick)\n" + ' }\n' + '\n' + ' // sync with system changes\n' + ' window\n' + " .matchMedia('(prefers-color-scheme: dark)')\n" + " .addEventListener('change', ({ matches: isDark }) => {\n" + " theme.value = isDark ? 'dark' : 'light'\n" + ' setPreference()\n' + ' })' ] +2ms Eleventy:Bundle Retrieving 'css' for '/' (buckets: [ 'default' ]) +3ms [11ty] Problem writing Eleventy templates: [11ty] 1. Having trouble writing to "dist/index.html" from "./src/content/home.webc" (via EleventyTemplateError) Eleventy:EleventyErrorHandler (error stack): EleventyTemplateError: Having trouble writing to "dist/index.html" from "./src/content/home.webc" Eleventy:EleventyErrorHandler at /home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/TemplateWriter.js:374:15 Eleventy:EleventyErrorHandler at async Promise.all (index 1) Eleventy:EleventyErrorHandler at async Eleventy.executeBuild (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Eleventy.js:1191:13) +0ms [11ty] 2. Transform `@11ty/eleventy-bundle` encountered an error when transforming ./src/content/home.webc. (via EleventyTransformError) Eleventy:EleventyErrorHandler (error stack): EleventyTransformError: Transform `@11ty/eleventy-bundle` encountered an error when transforming ./src/content/home.webc. Eleventy:EleventyErrorHandler at Template.runTransforms (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Template.js:530:15) Eleventy:EleventyErrorHandler at async Template.renderPageEntry (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Template.js:799:15) Eleventy:EleventyErrorHandler at async /home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Template.js:822:21 Eleventy:EleventyErrorHandler at async Promise.all (index 0) Eleventy:EleventyErrorHandler at async Promise.all (index 1) Eleventy:EleventyErrorHandler at async Eleventy.executeBuild (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Eleventy.js:1191:13) +1ms [11ty] 3. @import rules must precede all rules aside from @charset and @layer statements (via SyntaxError) Eleventy:EleventyErrorHandler (error stack): SyntaxError: @import rules must precede all rules aside from @charset and @layer statements Eleventy:EleventyErrorHandler at config.addPlugin.transforms (/home/boojum/code/NOW/11ty-webc-base-2/eleventy.config.js:20:26) Eleventy:EleventyErrorHandler at CodeManager.runTransforms (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy-plugin-bundle/codeManager.js:84:25) Eleventy:EleventyErrorHandler at CodeManager.getForPage (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy-plugin-bundle/codeManager.js:130:15) Eleventy:EleventyErrorHandler at /home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy-plugin-bundle/outOfOrderRender.js:128:20 Eleventy:EleventyErrorHandler at Array.map (<anonymous>) Eleventy:EleventyErrorHandler at OutOfOrderRender.replaceAll (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy-plugin-bundle/outOfOrderRender.js:118:43) Eleventy:EleventyErrorHandler at Object.<anonymous> (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy-plugin-bundle/eleventy.shortcodes.js:80:17) Eleventy:EleventyErrorHandler at Object.<anonymous> (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:32:26) Eleventy:EleventyErrorHandler at Template.runTransforms (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Template.js:514:30) Eleventy:EleventyErrorHandler at Template.renderPageEntry (/home/boojum/code/NOW/11ty-webc-base-2/node_modules/@11ty/eleventy/src/Template.js:799:26) +0ms Eleventy:Benchmark Benchmark 3ms 0% 2× (Configuration) "css" JavaScript Function +0ms Eleventy:Benchmark Benchmark 3ms 1% 1× (Configuration) "@11ty/eleventy-bundle" Transform +0ms Eleventy:Benchmark Benchmark 10ms 2% 2× (Aggregate) Configuration addPlugin +0ms Eleventy:Benchmark Benchmark 19ms 4% 1× (Aggregate) Searching the file system (templates) +0ms Eleventy:Benchmark Benchmark 11ms 2% 1× (Aggregate) Searching the file system (passthrough) +0ms Eleventy:Benchmark Benchmark 7ms 1% 1× (Aggregate) Searching the file system (data) +0ms Eleventy:Benchmark Benchmark 25ms 5% 2× (Aggregate) Template Read +0ms Eleventy:Benchmark Benchmark 0ms 0% 7× (Aggregate) Passthrough Copy File +0ms Eleventy:Logger Benchmark 47ms 9% 1× (Aggregate) Render +0ms Eleventy:Benchmark Benchmark 47ms 9% 1× (Aggregate) Render +0ms Eleventy:Logger Benchmark 47ms 9% 1× (Aggregate) > Render > ./src/content/home.webc +1ms Eleventy:Benchmark Benchmark 47ms 9% 1× (Aggregate) > Render > ./src/content/home.webc +1ms [11ty] Wrote 0 files in 0.44 seconds (v2.0.1) Eleventy Finished writing templates. +426ms Eleventy Eleventy Getting frustrated? Have a suggestion/feature request/feedback? Eleventy I want to hear it! Open an issue: https://github.com/11ty/eleventy/issues/new +0ms Eleventy:TemplatePassthroughManager Copied './src/assets/*.*' (7 files) +189ms Eleventy:TemplatePassthroughManager TemplatePassthrough copy finished. Current count: 7 +0msTo make 11ty aware of my CSS I've these in the main
webclayout file:Which first gets the bundle from components, and only then add to it other CSS files. This is a little problematic due to the CSS cascade, like in this case, when using
@import. From MDN:If I won't use the
@importand write styles directly inindex.cssprocessing is successful, but produced CSS is still out of order.Related issue @11ty/webc.
Here's a repo to reproduce the issue. Clone it, copy
env.expamleto.env, and run eithernpm startornpm run buildto observe the issue.NOTE: If not using
@importthe component-first processing can be worked around but defining explicit CSS ordering with@layer. Using@importcurrently prevents any successful build.The text was updated successfully, but these errors were encountered: