{"id":28485651,"url":"https://github.com/smallcase/sc-fe-postcssense","last_synced_at":"2025-06-28T16:30:45.535Z","repository":{"id":288001811,"uuid":"630030072","full_name":"smallcase/sc-fe-postcssense","owner":"smallcase","description":"Vs code extension to provide intellisense for global postcss classes","archived":false,"fork":false,"pushed_at":"2025-04-23T17:53:28.000Z","size":781,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-06-25T20:49:33.880Z","etag":null,"topics":["css","html","intellisense","postcss","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=smallcase.postcssense","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smallcase.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-04-19T14:18:06.000Z","updated_at":"2025-06-21T13:07:09.000Z","dependencies_parsed_at":"2025-04-23T18:35:30.555Z","dependency_job_id":null,"html_url":"https://github.com/smallcase/sc-fe-postcssense","commit_stats":null,"previous_names":["smallcase/sc-fe-postcssense"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/smallcase/sc-fe-postcssense","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallcase%2Fsc-fe-postcssense","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallcase%2Fsc-fe-postcssense/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallcase%2Fsc-fe-postcssense/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallcase%2Fsc-fe-postcssense/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smallcase","download_url":"https://codeload.github.com/smallcase/sc-fe-postcssense/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallcase%2Fsc-fe-postcssense/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262460161,"owners_count":23314668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","intellisense","postcss","vscode-extension"],"created_at":"2025-06-08T00:30:29.567Z","updated_at":"2025-06-28T16:30:45.528Z","avatar_url":"https://github.com/smallcase.png","language":"TypeScript","readme":"# PostCSSense\n\nA Visual Studio Code extension that provides intelligent autocompletion for CSS classes in PostCSS files. Get instant class suggestions while working with CSS, HTML, JSX, and TSX files.\n\n## Features\n\n- 🚀 Intelligent autocompletion for CSS classes\n- ✨ Works across multiple file types:\n  - CSS files (for `composes: from global`)\n  - HTML files (for `class` attributes)\n  - JSX/TSX files (for `className` props)\n  - JavaScript files with JSX\n- 🔎 Hover information for CSS classes in:\n  - CSS `composes: from global` statements\n  - HTML `class` attributes\n  - JSX/TSX `className` props\n- 🔧 Configurable CSS path - use any CSS file in your project\n- 🎯 Context-aware suggestions\n- 🎨 Automatic spacing between multiple classes\n- 🔍 Class Explorer panel with search functionality\n- 💨 Loading indicators for better user experience\n- 🔄 Framework-agnostic - works with any PostCSS project\n\n## Installation\n\n1. Open VS Code\n2. Press `Cmd+P` (macOS) or `Ctrl+P` (Windows/Linux)\n3. Type `ext install smallcase.postcssense`\n4. Press Enter\n\n## Setup\n\n1. Open the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)\n2. Type \"PostCSSense: Set CSS Path\"\n3. Enter the path to your main CSS file (relative to workspace root)\n   - Example: `src/styles/main.css`\n\n## Usage\n\nThe extension provides intelligent features in various file types:\n\n### Autocompletion\n\n#### In CSS Files\n\n```css\n.your-class {\n  composes: /* Suggestions appear here */ from global;\n}\n```\n\n#### In JSX/TSX Files\n\n```jsx\n\u003cdiv className=\"/* Suggestions appear here */\" /\u003e;\n\n{\n  /* Template literals are supported */\n}\n\u003cdiv className={`base-class ${isActive ? 'active' : ''}`} /\u003e;\n\n{\n  /* Conditional classes work too */\n}\n\u003cdiv className={`${condition ? 'conditional-class' : ''} always-present`} /\u003e;\n```\n\n#### In HTML Files\n\n```html\n\u003cdiv class=\"/* Suggestions appear here */\"\u003e\u003c/div\u003e\n```\n\n#### In JavaScript Files with JSX\n\n```javascript\nconst element = \u003cdiv className=\"/* Suggestions appear here */\" /\u003e;\n```\n\n### Hover Information\n\nHover over class names to see their CSS properties:\n\n#### In CSS Files\n\n```css\n.your-class {\n  composes: button-primary from global; /* Hover over button-primary */\n}\n```\n\n#### In JSX/TSX Files\n\n```jsx\n\u003cdiv className=\"button-primary layout-flex\" /\u003e {/* Hover over class names */}\n```\n\n#### In HTML Files\n\n```html\n\u003cdiv class=\"button-primary layout-flex\"\u003e\u003c/div\u003e\n\u003c!-- Hover over class names --\u003e\n```\n\n### Class Explorer Panel\n\n1. Open the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)\n2. Type \"PostCSSense: Show CSS Classes\"\n3. A panel will open showing all CSS classes with their properties\n4. Use the search box to filter classes by name\n\n## Configuration\n\nYou can configure the extension through VS Code settings:\n\n1. Open Settings (`Cmd+,` / `Ctrl+,`)\n2. Search for \"PostCSSense\"\n3. Update the \"CSS Path\" setting with your preferred path\n\nAlternatively, add this to your `settings.json`:\n\n```json\n{\n  \"postcssense.cssPath\": \"path/to/your/css/file.css\"\n}\n```\n\n### CSS Import Resolution\n\nThe extension automatically handles various import formats in your CSS files:\n\n- **Package imports** (from `node_modules`):\n\n  ```css\n  @import '@package-name/style.css';\n  @import '~package-name/style.css';\n  ```\n\n- **Relative imports** (relative to the current file):\n  ```css\n  @import './components/button.css';\n  @import '../styles/variables.css';\n  ```\n\n### CSS Global Class Support\n\nThe extension supports various syntaxes for global CSS classes:\n\n- **Standard CSS classes**:\n\n  ```css\n  .button-primary {\n    ...;\n  }\n  ```\n\n- **Global function syntax**:\n\n  ```css\n  .global(button-primary) {\n    ...;\n  }\n  global(.button-primary) {\n    ...;\n  }\n  ```\n\n- **CSS Modules :global syntax**:\n  ```css\n  :global .button-primary {\n    ...;\n  }\n  :global(.button-primary) {\n    ...;\n  }\n  ```\n\nAll these formats are properly recognized for autocompletion and hover information.\n\n## Requirements\n\n- Visual Studio Code version 1.77.0 or higher\n- PostCSS based CSS files in your project\n\n## Known Issues\n\nIf you find any issues, please report them [here](https://github.com/smallcase/sc-fe-shringarcss-intellisense/issues).\n\n## Contributing\n\nContributions are welcome! Feel free to:\n\n1. Fork the repository\n2. Create a feature branch\n3. Submit a pull request\n\n## License\n\nThis extension is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallcase%2Fsc-fe-postcssense","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmallcase%2Fsc-fe-postcssense","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallcase%2Fsc-fe-postcssense/lists"}